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. Desenvolvimento com Eclipse IDE, CRXDE Lite, Visual Studio Code e IntelliJ são discutidas.

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. Todos AEM desenvolvimento deve começar por escrever e executar código em 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 Autor runmode é o ambiente usado pelos profissionais de marketing digital para criar e gerenciar conteúdo. Ao desenvolver a maior parte do tempo, você está implantando 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 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 crítico código de teste em relação a um local Publicar instância. O Publicar é o ambiente de AEM com o qual os visitantes do site interagem. Enquanto a variável Publicar A instância é a mesma pilha de tecnologia que a Autor Por exemplo, há algumas distinções importantes com configurações e permissões. O código deve ser testado em relação a um Publicar antes de ser promovida para ambientes de nível superior.

Etapas

1. Verifique se o Java™ está instalado.
   • Preferência Java™ JDK 11 para AEM 6.5+
   • Java™ JDK 8 para AEM versões anteriores ao AEM 6.5
2. Obtenha uma cópia do AEM QuickStart Jar e um license.properties.
3. Crie uma estrutura de pastas no computador como a seguinte:

~/aem-sdk
    /author
    /publish

1. Renomeie o QuickStart JAR para aem-author-p4502.jar e coloque-a abaixo da /author diretório. Adicione o license.properties abaixo do /author diretório.

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

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

1. Clique duas vezes no botão aem-author-p4502.jar para instalar o Autor instância. Isso inicia a instância do autor, executando na porta 4502 no computador local.

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

Uso da 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 sabor do seu sistema operacional local. Veja abaixo um exemplo do comando sample :

$ 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, o -X são opções da JVM e -D são propriedades de estrutura adicionais. Para obter mais informações, consulte Implantação e manutenção de uma instância de AEM e Outras opções disponíveis no arquivo Quickstart.

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 Projeto AEM Maven ou apenas seu Projeto AEM, estamos nos referindo a um projeto Maven que inclui todos os custom código do site.

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

Etapas

1. Baixar Apache Maven
2. Instalar Apache Maven e certifique-se de que a instalação foi adicionada à sua linha de comando PATH.
   • macOS os usuários podem instalar o Maven usando Homebrew
3. Verifique se Maven O é 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

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 periodicamente push código para uma instância de AEM local para testá-la. É importante que ocasionalmente pull configurações de uma instância de AEM local no 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.

$ mvn clean install -PautoInstallSinglePackage -Pclassic

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

Perfil do IntelliJ Maven

Eclipse IDE

O Eclipse IDE O é um dos IDEs mais populares para desenvolvimento de Java™, em grande parte porque é de código aberto e grátis! o Adobe fornece um plug-in, AEM Developer Tools para Eclipse para facilitar o desenvolvimento com uma GUI simpática para sincronizar o código com uma instância de AEM local. O Eclipse O 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 AEM Developer Tools plug-in: 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 O é um IDE poderoso para desenvolvimento profissional do Java™. IntelliJ IDEA vem em dois sabores, uma grátis Community edição e um anúncio comercial (pago) Ultimate versão. O livre Community versão 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

Código do Visual Studio tornou-se rapidamente uma ferramenta favorita para desenvolvedores de front-end com suporte avançado a JavaScript, Intellisensee suporte à depuração do 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, 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 O é uma ótima opção para desenvolvedores front-end que gravam principalmente 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) precisam ser editadas em XML bruto. Há várias extensões Java™ disponíveis para Visual Studio Codeno entanto, se você fizer principalmente desenvolvimento Java™ Eclipse IDE ou IntelliJ pode ser preferido.

Links importantes

• Baixar Código do Visual Studio
• repo - Ferramenta semelhante a FTP para conteúdo JCR
• amamentado - Acelere seu fluxo de trabalho AEM front-end
• Sincronização de AEM - Apoio comunitário* extensão do Visual Studio Code

• 00:30 - Importar projeto Maven
• 00:53 - Criar e implantar o código-fonte com o Maven
• 04:03 - Mudanças no código de push 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

CRXDE Lite é 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 é not O deve ser um ambiente de desenvolvimento completo, mas é 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 usado com outros IDEs para testar e depurar o código, mas nunca como a ferramenta de desenvolvimento principal. Ele tem suporte de sintaxe limitado, nenhum recurso de preenchimento automático e integração limitada com os 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á vezes (provavelmente muitas) 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 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. Verificar Gerenciador de pacotes para garantir que o pacote de código 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, checkCRXDE Lite que o arquivo foi enviado para a instância de AEM local e que o conteúdo do arquivo é atualizado: http://localhost:4502/crx/de/index.jsp
3. Verifique se o pacote foi carregado se estiver vendo 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 Ativo status. Veja abaixo mais informações relacionadas à solução de problemas de um pacote em um Instalado estado.

Verifique os logs

AEM é uma plataforma de bate-papo e registra informações úteis na error.log. O error.log pode ser encontrada 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, a variável error.log está configurado para registrar INFO instruções. Se quiser alterar o nível do log, acesse Suporte de log: http://localhost:4502/system/console/slinglog. Você também pode achar que a variável error.log é conversa demais. 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.

O pacote está em um estado Instalado

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

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

Uma ferramenta útil que pode ser usada é a 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 de AEM:

Continuando com o exemplo acima, podemos ver que a versão instalada na instância de AEM é n.º 2 vs 12,6 que o pacote estava esperando. A partir daí, você pode trabalhar para trás e ver se a variável Maven as dependências no AEM correspondem à variável Maven no projeto AEM. No, o 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 para o problema de dependência.

Verificar o registro de modelos Sling

AEM componentes devem ser suportados por 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 tiver problemas em que o Modelo do Sling não pode ser encontrado, pode ser útil verificar a variável Sling Models do console: http://localhost:4502/system/console/status-slingmodels. Isso informa se seu Modelo do Sling foi registrado e a que 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 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".

Abra o Propriedades da página e clique em Exibir como publicado. Isso abre a página sem o Editor de AEM e com um parâmetro de consulta definido como wcmmode=disabled. Isso efetivamente desativa a interface de criação do AEM e facilita 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 os 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 é Recriar bibliotecas de clientes que força o AEM a recompilar quaisquer arquivos MENOS e gerar o CSS.

• Despejar dedos - Lista todas as bibliotecas de clientes registradas na instância de 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 do cliente ou invalidar o cache das bibliotecas do cliente. Essa ferramenta é 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

Recursos do Business.Adobe.com

Automated Onboarding Style System Cms Cloud Targeted Content Customer Communications Theme Editor