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

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 do AEM deve começar gravando e executando código em uma instância local do AEM.

Se você é novo no AEM, há dois modos de execução básicos que podem ser instalados: Autor e Publish. A variável Autor runmode O é 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 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 testar o código em relação a um local Publish instância. A variável Publish é o ambiente AEM com o qual os visitantes do site interagem. Embora a Publish instância é a mesma pilha de tecnologia que a Autor existem algumas distinções importantes entre configurações e permissões. O código deve ser testado em relação a um local Publish 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 ícone aem-publish-p4503.jar arquivo para instalar o Publish instância. Isso inicia a instância de publicação, em execução na porta 4503 no computador local.

Usando a linha de comando

Uma alternativa para clicar duas vezes no arquivo JAR é iniciar o AEM na 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, a variável -X são opções de JVM e -D são propriedades adicionais da estrutura. 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. O 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 o seu Projeto AEM, estamos nos referindo a um projeto Maven que inclui todos os personalizado 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. A variável AEM Project Archetype O fornece uma inicialização de um projeto AEM com alguns exemplos de código e conteúdo. A variável AEM Project Archetype também inclui AEM WCM Core Components configurado para ser usado em 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 ser capaz de controlar push para uma instância de AEM local para testá-la. É importante ocasionalmente obter configurações de uma instância de AEM local no projeto AEM para persistir em um sistema de gerenciamento de controle de origem 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

Eclipse IDE

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

Instalação e configuração

IntelliJ IDEA

A variável IntelliJ IDEA O é um IDE avançado para o desenvolvimento profissional em Java™. IntelliJ IDEA vem em dois sabores, um 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 maior desenvolvimento do AEM, mas a Ultimate expande seu conjunto de recursos.

Installation and Setup

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 AEM com a ajuda de uma ferramenta Adobe, repo. Há também várias extensões suportadas pela comunidade que podem ser instaladas para integração com o AEM.

Visual Studio Code O é 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 estiver principalmente fazendo desenvolvimento em Java™ Eclipse IDE ou IntelliJ pode ser preferível.

Links importantes

CRXDE Lite

CRXDE Lite é uma visualização do repositório AEM baseada em navegador. 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 é não O deve ser um ambiente de desenvolvimento completo, mas é eficaz como uma ferramenta de depuração. CRXDE Lite O é útil ao estender ou simplesmente entender o código do produto fora da base de código. CRXDE Lite O fornece uma visualização avançada do repositório e uma maneira de testar e gerenciar permissões com eficiência.

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 bate-papo e registra informações úteis na error.log. A variável 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, a variável error.log está configurado para registrar INFO declarações. Se quiser alterar o nível de log, acesse Suporte de registro: http://localhost:4502/system/console/slinglog. Você também pode descobrir que a variável error.log é muito tagarela. Você pode usar o Suporte de registro para configurar instruções de registro 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 pacotes (exceto fragmentos) devem estar em uma Ativo estado. Se você vir seu pacote de códigos em uma 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 está esperando uma versão diferente de com.adobe.cq.wcm.core.components.models do que está disponível na instância 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 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 trabalhar para trás e ver se a variável Maven as dependências no AEM correspondem à Maven dependências no projeto AEM. No, o exemplo acima Core Components v2.2.0 está instalado na instância AEM, mas o pacote de código 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 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 Sling não pode ser encontrado, pode ser útil verificar o 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 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 Propriedades da página e clique em Exibir como publicado. Essa ação abre a página 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 é Reconstruir bibliotecas de clientes que forçam o AEM a recompilar quaisquer arquivos LESS e a gerar o CSS.