Configurar um Ambiente de desenvolvimento do AEM local

Guia para configurar um desenvolvimento local para o Adobe Experience Manager, AEM. Abrange 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 eIntelliJ é discutido.

Visão geral

A configuração de um ambiente de desenvolvimento local é a primeira etapa do desenvolvimento para Adobe Experience Manager ou AEM. Reserve tempo para configurar um ambiente de desenvolvimento de qualidade para aumentar a produtividade e escrever melhor código, mais rapidamente. Podemos dividir um ambiente AEM de desenvolvimento local em quatro áreas:

  • Instâncias de AEM locais
  • Apache Maven projeto
  • Ambientes de desenvolvimento integrados (IDE)
  • Resolução de problemas

Instalar instâncias de AEM locais

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

Se você não AEM, há dois modos de execução básicos que podem ser instalados: Autor e Publicar. O Author runmode é o ambiente que os profissionais de marketing digital usarão para criar e gerenciar conteúdo. Ao desenvolver mais do tempo, você implantará o código em uma instância de Autor. Isso permite criar novas páginas, bem como adicionar e configurar componentes. O AEM Sites é um CMS de criação WYSIWYG e, portanto, a maioria do CSS e do JavaScript pode ser testada em relação a uma instância de criação.

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

Etapas

  1. Verifique se Java está instalado.

  2. Obtenha uma cópia do AEM QuickStart Jar e a license.properties.

  3. Crie uma estrutura de pastas no computador como a seguinte:

    ~/aem-sdk
        /author
        /publish
    
  4. Renomeie o JAR QuickStart para aem-author-p4502.jar e coloque-o abaixo do diretório /author. Adicione o arquivo license.properties abaixo do diretório /author.

  5. Faça uma cópia do JAR QuickStart, renomeie-o para aem-publish-p4503.jar e coloque-o abaixo do diretório /publish. Adicione uma cópia do arquivo license.properties abaixo do diretório /publish.

    ~/aem-sdk
        /author
            + aem-author-p4502.jar
            + license.properties
        /publish
            + aem-publish-p4503.jar
            + license.properties
    
  6. Clique duas vezes no arquivo aem-author-p4502.jar para instalar a instância Author. Isso iniciará a instância do autor, executando na porta 4502 no computador local.

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

    OBSERVAÇÃO

    Dependendo do hardware da máquina de desenvolvimento, pode ser difícil ter uma instância Author e Publish em execução ao mesmo tempo. Raramente é necessário executar ambos simultaneamente em uma configuração local.

    Para obter mais informações, consulte Implantação e Manutenção de uma instância de AEM.

Instalar o Apache Maven

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

Todos os projetos AEM devem ser construídos a partir da versão mais recente do AEM Project Archetype: https://github.com/Adobe-Marketing-Cloud/aem-project-archetype. O AEM Project Archetype criará um bootstrap de um projeto AEM com alguns códigos de amostra e conteúdo. O AEM Project Archetype também inclui AEM WCM Core Components configurado para ser usado em seu projeto.

ATENÇÃO

Ao iniciar um novo projeto, é uma prática recomendada usar a versão mais recente do arquétipo. Lembre-se de que há várias versões do arquétipo e nem todas as versões são compatíveis com as versões anteriores do AEM.

Etapas

  1. Baixar Apache Maven

  2. Instale o Apache Maven e verifique se a instalação foi adicionada à linha de comando PATH.

    • macOS os usuários podem instalar o Maven usando o Homebrew
  3. Verifique se Maven está instalado abrindo um novo terminal de linha de comando e executando o seguinte:

    $ 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
    
  4. Adicione o perfil adobe-public ao arquivo Maven settings.xml para adicionar automaticamente repo.adobe.com ao processo de compilação maven.

  5. Crie um arquivo chamado settings.xml em ~/.m2/settings.xml se ele ainda não existir.

  6. Adicione o perfil adobe-public ao arquivo settings.xml com base em as instruções aqui.

    Uma amostra settings.xml está listada abaixo. Observe que a convenção de nomenclatura settings.xml e a disposição abaixo do .m2 diretório do usuário são importantes.

    <settings xmlns="https://maven.apache.org/SETTINGS/1.0.0"
      xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://maven.apache.org/SETTINGS/1.0.0
                          https://maven.apache.org/xsd/settings-1.0.0.xsd">
    <profiles>
     <!-- ====================================================== -->
     <!-- A D O B E   P U B L I C   P R O F I L E                -->
     <!-- ====================================================== -->
         <profile>
             <id>adobe-public</id>
             <activation>
                 <activeByDefault>true</activeByDefault>
             </activation>
             <properties>
                 <releaseRepository-Id>adobe-public-releases</releaseRepository-Id>
                 <releaseRepository-Name>Adobe Public Releases</releaseRepository-Name>
                 <releaseRepository-URL>https://repo.adobe.com/nexus/content/groups/public</releaseRepository-URL>
             </properties>
             <repositories>
                 <repository>
                     <id>adobe-public-releases</id>
                     <name>Adobe Public Repository</name>
                     <url>https://repo.adobe.com/nexus/content/groups/public</url>
                     <releases>
                         <enabled>true</enabled>
                         <updatePolicy>never</updatePolicy>
                     </releases>
                     <snapshots>
                         <enabled>false</enabled>
                     </snapshots>
                 </repository>
             </repositories>
             <pluginRepositories>
                 <pluginRepository>
                     <id>adobe-public-releases</id>
                     <name>Adobe Public Repository</name>
                     <url>https://repo.adobe.com/nexus/content/groups/public</url>
                     <releases>
                         <enabled>true</enabled>
                         <updatePolicy>never</updatePolicy>
                     </releases>
                     <snapshots>
                         <enabled>false</enabled>
                     </snapshots>
                 </pluginRepository>
             </pluginRepositories>
         </profile>
    </profiles>
     <activeProfiles>
         <activeProfile>adobe-public</activeProfile>
     </activeProfiles>
    </settings>
    
  7. Verifique se o perfil adobe-public está ativo executando o seguinte comando:

    $ mvn help:effective-settings
    ...
    <activeProfiles>
        <activeProfile>adobe-public</activeProfile>
    </activeProfiles>
    <pluginGroups>
        <pluginGroup>org.apache.maven.plugins</pluginGroup>
        <pluginGroup>org.codehaus.mojo</pluginGroup>
    </pluginGroups>
    </settings>
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time:  0.856 s
    

    Se você não vir o adobe-public é uma indicação de que o Adobe repo não é referenciado corretamente em seu arquivo ~/.m2/settings.xml. Revise as etapas anteriores e verifique se o arquivo settings.xml faz referência ao Adobe repo.

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 compilação. Dependendo do tipo de desenvolvimento que você está fazendo, um IDE pode ser preferível ao outro. Independentemente do IDE, é importante poder enviar periodicamente o código push para uma instância de AEM local para testá-lo. Também será importante obter configurações ocasionalmente de uma instância de AEM local para o seu projeto AEM para persistir em um sistema de gerenciamento de controle de origem como o Git.

Abaixo estão alguns dos IDEs mais populares que são usados com AEM desenvolvimento com vídeos correspondentes que mostram a integração com uma instância de AEM local.

OBSERVAÇÃO

O Projeto WKND foi atualizado para funcionar como um Cloud Service. Ele foi atualizado para ser compatível com versões anteriores do 6.5/6.4. Se estiver usando AEM 6.5 ou 6.4, anexe o perfil classic a qualquer comando Maven.

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Ao usar um IDE, verifique classic na guia Perfil do Maven.

Guia Perfil Maven

Perfil do IntelliJ Maven

Eclipse IDE

O Eclipse IDE é um dos IDEs mais populares para desenvolvimento de Java, em grande parte porque é de código aberto e free! O Adobe fornece um plug-in, AEM Developer Tools, para Eclipse para permitir um desenvolvimento mais fácil com uma GUI simpática para sincronizar o código com uma instância de AEM local. O Eclipse IDE é recomendado para desenvolvedores novos a AEM em grande parte devido ao suporte da GUI por AEM Developer Tools.

Instalação e configuração

  1. Baixe e instale o Eclipse IDE para Java EE Developers: https://www.eclipse.org
  2. Siga as instruções para instalar o plug-in AEM Developer Tools: https://experienceleague.adobe.com/docs/experience-manager-65/developing/devtools/aem-eclipse.html?lang=pt-BR?lang=pt-BR
  • 00:30 - Importar projeto Maven
  • 01:24 - Criar e implantar o código-fonte com o Maven
  • 04:33 - Mudanças de código de push com a ferramenta AEM Developer
  • 10:55 - Mudanças de código de pull com a ferramenta AEM Developer
  • 13:12 - Uso das ferramentas de depuração integradas do Eclipse

IntelliJ IDEA

O IntelliJ IDEA é um IDE poderoso para o desenvolvimento profissional do Java. IntelliJ IDEA vem em dois sabores, uma ​** Community edição livre e uma Ultimate versão comercial (paga). A versão Community gratuita de IntellIJ IDEA é suficiente para um desenvolvimento mais AEM, no entanto, Ultimate expande seu conjunto de recursos.

Installation and Setup

  1. Baixe e instale o IntelliJ IDEA: https://www.jetbrains.com/idea/download
  2. Instalar Repo (ferramenta de linha de comando): https://github.com/Adobe-Marketing-Cloud/tools/tree/master/repo
  • 00:00 - Importar projeto Maven
  • 05:47 - Criar e implantar o código-fonte com o Maven
  • 08:17 - Encaminhar as alterações com o Repo
  • 14:39 - Puxe as alterações com o Repo
  • 17:25 - Uso das ferramentas de depuração integradas do IntelliJ IDEA

Visual Studio Code

O Visual Studio Codehas rapidamente se tornou uma ferramenta favorita para desenvolvedores de front-end com suporte avançado a JavaScript, Intellisensee suporte à depuração de navegador. Visual Studio Code O é de código aberto, gratuito, com muitas extensões poderosas. Visual Studio Code pode ser configurado para integrar com o AEM com a ajuda de uma ferramenta Adobe, o repo. Há também várias extensões compatíveis com a comunidade que podem ser instaladas para integração com o AEM.

Visual Studio Code A é uma ótima opção para desenvolvedores front-end que gravarão primariamente CSS/LESS e código JavaScript para criar bibliotecas AEM cliente. 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) precisarão ser editadas em XML bruto. Há várias extensões Java disponíveis para Visual Studio Code, no entanto, se estiver fazendo primariamente o desenvolvimento Java Eclipse IDE ou IntelliJ, talvez seja preferível.

  • Código do DownloadVisual Studio
  • repo - ferramenta semelhante a FTP para conteúdo JCR
  • aemfeed - acelere o fluxo de trabalho de front-end AEM
  • Sincronização de AEM - Extensão da comunidade compatível* para o Código do Visual Studio
  • 00:30 - Importar projeto Maven
  • 00:53 - Criar e implantar o código-fonte com o Maven
  • 04:03 - Empurrar alterações de código com a ferramenta de linha de comando do Repo
  • 08:29 - Puxe as alterações no código com a ferramenta de linha de comando do Repo
  • 10:40 - Mudanças no código de push com a ferramenta aprimorada
  • 14:24 - Solução de problemas, Reconstruir bibliotecas de clientes

CRXDE Lite

O CRXDE Litem uma visualização baseada em navegador do repositório de AEM. CRXDE Lite O está incorporado 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 O ​** não se destina a ser um ambiente de desenvolvimento completo, mas é muito eficaz como uma ferramenta de depuração. CRXDE Lite é útil ao estender ou simplesmente entender o código do produto fora da sua base de código. CRXDE Lite O fornece uma visualização eficiente do repositório e uma maneira de testar e gerenciar com eficácia as permissões.

CRXDE Lite O deve ser sempre usado junto com outros IDEs para testar e depurar o código, mas nunca como a ferramenta de desenvolvimento principal. Ele tem suporte de sintaxe limitado, não possui recursos 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, haverá momentos (provavelmente muitos), em que o 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 quando se trata de solucionar problemas e rastrear problemas (mas longe de uma lista exaustiva de coisas que podem dar errado):

Verificar implantação do código

Uma boa primeira etapa, ao encontrar um problema, é verificar se o código foi implantado e instalado com êxito no AEM.

  1. Verifique o Gerenciador de pacotes para garantir que o pacote de códigos tenha sido carregado e instalado: http://localhost:4502/crx/packmgr/index.jsp. Verifique o carimbo de data/hora para verificar se o pacote foi instalado recentemente.
  2. Se estiver fazendo atualizações de arquivos incrementais usando uma ferramenta como Repo ou AEM Developer Tools, verifiqueCRXDE Lite se o arquivo foi enviado para a instância de AEM local e se o conteúdo do arquivo foi atualizado: http://localhost:4502/crx/de/index.jsp
  3. Verifique se o pacote é carregado se você vê problemas relacionados ao código Java em um pacote OSGi. Abra o Adobe Experience Manager Web Console: http://localhost:4502/system/console/bundles e procure seu pacote. Certifique-se de que o pacote tenha um status Ative. Consulte abaixo mais informações relacionadas à solução de problemas de um pacote em um estado Instalado.

Verifique os logs

AEM é uma plataforma de bate-papo e registra muitas informações úteis no error.log. O error.log pode ser encontrado onde 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 instruções INFO. Se quiser alterar o nível de log, vá para Log Support: http://localhost:4502/system/console/slinglog. Você também pode achar que o error.log é muito chatty. Você pode usar o Suporte de Log para configurar instruções de log para apenas um pacote Java especificado. Essa é uma prática recomendada para projetos, a fim de separar facilmente os problemas de código personalizado dos problemas da plataforma de AEM OOTB.

Configuração de logon no AEM

O pacote está em um estado Instalado

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

Erro do pacote no AEM

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

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

Componentes principais

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

Verificar o registro de modelos Sling

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

Status do Modelo Sling

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, usar as 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 de AEM, é útil visualizar a página "como publicada".

Problemas de CSS ou JS

Abra o menu Propriedades da página e clique em Exibir como publicado. Isso abrirá a página sem o editor de AEM e com um parâmetro de consulta definido como wcmmode=disabled. Isso desativará efetivamente a interface de criação de AEM e facilitará a solução de problemas/depuração de problemas de front-end.

Outro problema comumente encontrado ao desenvolver código front-end é o CSS/JS antigo ou desatualizado que está sendo carregado. Como primeiro passo, verifique se o histórico do navegador foi limpo e, se necessário, inicie um navegador incógnito ou uma nova sessão.

Depuração de bibliotecas de clientes

Com diferentes métodos de categorias e incorporações para incluir várias bibliotecas de clientes, pode ser difícil solucionar problemas. AEM expõe várias ferramentas para ajudar nisso. Uma das ferramentas mais importantes é Recompilar bibliotecas de clientes, que forçará o AEM a recompilar quaisquer arquivos MENOS e gerar o CSS.

  • Dump Libs - Lista todas as bibliotecas de clientes registradas na instância AEM. <host>/libs/granite/ui/content/dumplibs.html
  • Saída de teste - permite que um usuário veja a saída HTML esperada das inclusões de clientlib com base na categoria. <host>/libs/granite/ui/content/dumplibs.test.html
  • Validação de dependências de bibliotecas - destaca as dependências ou categorias incorporadas que não podem ser encontradas. <host>/libs/granite/ui/content/dumplibs.validate.html
  • Recriar bibliotecas de clientes - permite que um usuário force o AEM a reconstruir todas as bibliotecas de clientes ou invalidar o cache das bibliotecas de clientes. Essa ferramenta é particularmente eficaz ao desenvolver com MENOS, pois pode forçar o AEM a recompilar o CSS gerado. Em geral, é mais eficaz Invalidar caches e depois executar uma atualização de página em vez de reconstruir todas as bibliotecas. <host>/libs/granite/ui/content/dumplibs.rebuild.html

Depurando Clientlibs

OBSERVAÇÃO

Se você estiver constantemente precisando invalidar o cache usando a ferramenta Recompilar bibliotecas de clientes, pode valer a pena fazer uma recriação única de todas as bibliotecas de clientes. Isso pode levar cerca de 15 minutos, mas normalmente elimina problemas de armazenamento em cache no futuro.

Nesta página