Configurar um ambiente de desenvolvimento do AEM local

Guia para configurar um desenvolvimento local para o Adobe Experience Manager, AEM. Aborda tópicos importantes de instalação local, Apache Maven, ambientes de desenvolvimento integrados e depuração/solução de problemas. O desenvolvimento com Eclipse IDE, CRXDE Lite, Visual Studio Code e IntelliJ é discutido.

Visão geral

Configurar um ambiente de desenvolvimento local é o primeiro passo ao desenvolver para Adobe Experience Manager ou AEM. Reserve tempo para configurar um ambiente de desenvolvimento de qualidade para aumentar sua produtividade e escrever um código melhor, mais rápido. Podemos dividir um ambiente de desenvolvimento local de AEM em quatro áreas:

Instalar instâncias locais do AEM

Quando nos referimos a uma instância local do AEM, estamos falando de uma cópia do Adobe Experience Manager que está sendo executada na máquina pessoal de um desenvolvedor. Todos o desenvolvimento de AEM deve começar gravando e executando código em uma instância de AEM local.

Se você nunca usou o AEM, há dois modos de execução básicos que podem ser instalados: Autor e Publish. O Author runmode é o ambiente que os profissionais de marketing digital usam para criar e gerenciar conteúdo. Ao desenvolver o na maioria das vezes, você está implantando o código em uma instância de autor. Isso permite criar páginas e adicionar e configurar componentes. O AEM Sites é um CMS de criação do WYSIWYG e, portanto, a maioria do CSS e do JavaScript pode ser testada em relação a uma instância de criação.

Também é um código de teste crítico em relação a uma instância Publish local. A instância do Publish é o ambiente AEM com o qual os visitantes do site interagem. Embora a instância Publish seja a mesma pilha de tecnologia que a instância Author, há algumas distinções importantes entre configurações e permissões. O código deve ser testado em relação a uma instância Publish local antes de ser promovido para ambientes de nível superior.

Etapas

~/aem-sdk
    /author
    /publish

~/aem-sdk
    /author
        + aem-author-p4502.jar
        + license.properties
    /publish
        + aem-publish-p4503.jar
        + license.properties

Clique duas vezes no arquivo aem-publish-p4503.jar para instalar a instância do Publish. Isso inicia a instância do Publish, em execução na porta 4503 do computador local.

Usando a linha de comando

Uma alternativa para clicar duas vezes no arquivo JAR é iniciar o AEM a partir da linha de comando ou criar um script (.bat ou .sh), dependendo do tipo do seu sistema operacional local. Veja abaixo um exemplo do comando de amostra:

$ java -Xmx2048M -Xdebug -Xnoagent -Djava.compiler=NONE -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=30303 -jar aem-author-p4502.jar -gui -r"author,localdev"

Aqui, as -X são opções JVM e -D são propriedades de estrutura adicionais. Para obter mais informações, consulte Implantando e Mantendo uma instância AEM e Outras opções disponíveis no arquivo Quickstart.

Instalar o Apache Maven

Apache Maven é uma ferramenta para gerenciar o procedimento de compilação e implantação de projetos baseados em Java. O AEM é uma plataforma baseada em Java e o Maven é a maneira padrão de gerenciar o código de um projeto AEM. Quando dizemos Projeto AEM Maven ou apenas seu Projeto AEM, estamos nos referindo a um projeto Maven que inclui todo o código personalizado para seu site.

Todos os Projetos AEM devem ser compilados na versão mais recente do AEM Project Archetype: https://github.com/adobe/aem-project-archetype. O AEM Project Archetype fornece uma inicialização de um projeto AEM com código e conteúdo de amostra. O AEM Project Archetype também inclui AEM WCM Core Components configurado para ser usado no seu projeto.

Etapas

$ mvn --version
Apache Maven 3.3.9
Maven home: /Library/apache-maven-3.3.9
Java version: 1.8.0_111, vendor: Oracle Corporation
Java home: /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home/jre
Default locale: en_US, platform encoding: UTF-8

Configurar um ambiente de desenvolvimento integrado

Um ambiente de desenvolvimento integrado ou IDE é um aplicativo que combina um editor de texto, suporte a sintaxe e ferramentas de construção. Dependendo do tipo de desenvolvimento que você está fazendo, um IDE pode ser preferível sobre outro. Independentemente do IDE, é importante poder enviar código periodicamente para uma instância de AEM local para testá-lo. É importante extrair configurações de uma instância de AEM local para o projeto AEM ocasionalmente para manter um sistema de gerenciamento de controle do código-fonte como o Git.

Abaixo estão algumas das IDEs mais populares usadas com o desenvolvimento de AEM, com vídeos correspondentes que mostram a integração com uma instância de AEM local.

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Quando, usando um IDE, verifique classic na guia Perfil Maven.

Perfil Maven IntelliJ

IDE Eclipse

O Eclipse IDE é um dos IDEs mais populares para desenvolvimento em Java™, em grande parte porque é de código aberto e gratuito! O Adobe fornece um plug-in, AEM Developer Tools, para Eclipse para facilitar o desenvolvimento com uma interface gráfica agradável para sincronizar o código com uma instância de AEM local. O IDE Eclipse é recomendado para desenvolvedores novos no AEM em grande parte devido ao suporte de GUI do AEM Developer Tools.

Instalação e configuração

IntelliJ IDEA

A IntelliJ IDEA é um IDE poderoso para desenvolvimento profissional em Java™. O IntelliJ IDEA tem duas opções: uma edição gratuita Community e uma versão comercial (paga) Ultimate. A versão Community gratuita de IntellIJ IDEA é suficiente para mais desenvolvimento de AEM. No entanto, o Ultimate expande seu conjunto de recursos.

Installation and Setup

Visual Studio Code

O Visual Studio Code tornou-se rapidamente uma ferramenta favorita para desenvolvedores front-end com suporte aprimorado para JavaScript, Intellisense e depuração de navegador. Visual Studio Code é open source, gratuito, com muitas extensões poderosas. O Visual Studio Code pode ser configurado para se integrar ao AEM com a ajuda de uma ferramenta Adobe, o repo. Também há várias extensões com suporte da comunidade que podem ser instaladas para integração com o AEM.

O Visual Studio Code é uma ótima opção para desenvolvedores de front-end que escrevem principalmente código CSS/LESS e JavaScript para criar bibliotecas de clientes AEM. Essa ferramenta pode não ser a melhor opção para novos desenvolvedores de AEM, pois as definições de nó (caixas de diálogo, componentes) precisam ser editadas em XML bruto. Há várias extensões Java™ disponíveis para Visual Studio Code, no entanto, se você preferir fazer principalmente o desenvolvimento Java™ Eclipse IDE ou IntelliJ.

Links importantes

CRXDE Lite

CRXDE Lite é uma exibição baseada em navegador do repositório AEM. O CRXDE Lite está inserido no AEM e permite que um desenvolvedor execute tarefas de desenvolvimento padrão, como editar arquivos, definir componentes, caixas de diálogo e modelos. CRXDE Lite não pretende ser um ambiente de desenvolvimento completo, mas é efetivo como uma ferramenta de depuração. O CRXDE Lite é útil para estender ou simplesmente entender o código do produto fora da sua base de código. O CRXDE Lite fornece uma exibição poderosa do repositório e uma maneira eficaz de testar e gerenciar permissões.

CRXDE Lite deve ser usado com outros IDEs para testar e depurar o código, mas nunca como a ferramenta de desenvolvimento principal. Ele tem suporte limitado à sintaxe, nenhum recurso de preenchimento automático e integração limitada com sistemas de gerenciamento de controle de origem.

Resolução de problemas

Ajuda! Meu código não está funcionando! Como em todo o desenvolvimento, há momentos (provavelmente muitos) em que seu código não está funcionando como esperado. AEM é uma plataforma poderosa, mas com grande poder… vem grande complexidade. Abaixo estão alguns pontos de partida de alto nível ao solucionar problemas e rastreá-los (mas longe de uma lista exaustiva de itens que podem dar errado):

Verificar implantação do código

Um bom primeiro passo ao encontrar um problema é verificar se o código foi implantado e instalado com êxito no AEM.

Verifique os logs

O AEM é uma plataforma de conversa e registra informações úteis no error.log. O error.log pode ser encontrado onde o AEM foi instalado: < aem-installation-folder>/crx-quickstart/logs/error.log.

Uma técnica útil para rastrear problemas é adicionar instruções de log no código Java™:

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
...

public class MyClass {
    private final Logger log = LoggerFactory.getLogger(getClass());

    ...

    String myVariable = "My Variable";

    log.debug("Debug statement of myVariable {}", myVariable);

    log.info("Info statement of myVariable {}", myVariable);
}

Por padrão, o error.log está configurado para registrar INFO instruções. Se você quiser alterar o nível de log, acesse Suporte de Log: http://localhost:4502/system/console/slinglog. Você também pode achar que o error.log é muito tagarela. Você pode usar o Suporte de log para configurar instruções de log apenas para um pacote Java™ especificado. Essa é uma prática recomendada para projetos do, a fim de separar facilmente problemas de código personalizado de problemas da plataforma OOTB AEM.

O pacote está em um estado Instalado bundle-active

Todos os conjuntos (exceto Fragmentos) devem estar em um estado Ativo. Se você vir o conjunto de códigos em um estado Instalado, há um problema que precisa ser resolvido. Na maioria das vezes, esse é um problema de dependência:

Na captura de tela acima, o WKND Core bundle é um estado Instalado. Isso ocorre porque o pacote está esperando uma versão diferente de com.adobe.cq.wcm.core.components.models da que está disponível na instância AEM.

Uma ferramenta útil que pode ser usada é o Localizador de Dependências: http://localhost:4502/system/console/depfinder. Adicione o nome do pacote Java™ para inspecionar qual versão está disponível na instância AEM:

Continuando com o exemplo acima, podemos ver que a versão instalada na instância do AEM é 12.2 vs 12.6 que o pacote estava esperando. A partir daí, você pode retroceder e ver se as dependências de Maven no AEM correspondem às dependências de Maven no projeto AEM. No, o exemplo acima Core Components v2.2.0 está instalado na instância AEM, mas o pacote de códigos foi criado com uma dependência em v2.2.2, portanto, o motivo para o problema de dependência.

Verificar registro de modelos do Sling osgi-component-sling-models

Os componentes do AEM devem ter o suporte de um Sling Model para encapsular qualquer lógica de negócios e garantir que o script de renderização do HTL permaneça limpo. Se estiver tendo problemas em que o Modelo do Sling não pode ser encontrado, pode ser útil verificar Sling Models no console: http://localhost:4502/system/console/status-slingmodels. Isso informa se seu Modelo do Sling foi registrado e a qual tipo de recurso (o caminho do componente) ele está vinculado.

Mostra o registro de um Sling Model, BylineImpl que está vinculado a um tipo de recurso de componente de wknd/components/content/byline.

Problemas de CSS ou JavaScript

Para a maioria dos problemas de CSS e JavaScript, o uso das ferramentas de desenvolvimento do navegador é a maneira mais eficaz de solucionar problemas. Para restringir o problema ao desenvolver em relação a uma instância de autor do AEM, é útil visualizar a página "como publicada".

Abra o menu Propriedades da Página e clique em Exibir como Publicado. A página será aberta sem o Editor AEM e com um parâmetro de consulta definido como wcmmode=disabled. Isso desativa com eficiência a interface de criação do AEM e facilita muito a solução de problemas/depuração do front-end.

Outro problema encontrado com frequência ao desenvolver o código front-end é o CSS/JS antigo ou desatualizado que está sendo carregado. Como primeira etapa, verifique se o histórico do navegador foi limpo e, se necessário, inicie navegadores incógnitos ou uma nova sessão.

Depuração de bibliotecas de clientes

Com os diferentes métodos de categorias e incorporações para incluir várias bibliotecas de clientes, pode ser complicado solucionar problemas. O AEM expõe várias ferramentas para ajudar nisso. Uma das ferramentas mais importantes é Recompilar Bibliotecas de Clientes, que força o AEM a recompilar qualquer arquivo MENOS e gerar o CSS.