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.
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:
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.
~/aem-sdk
/author
/publish
Renomeie o QuickStart JAR para aem-author-p4502.jar e coloque-o abaixo de /author
diretório. Adicione o license.properties arquivo abaixo de /author
diretório.
Faça uma cópia do QuickStart JAR, renomeie para aem-publish-p4503.jar e coloque-o abaixo de /publish
diretório. Adicione uma cópia do license.properties arquivo abaixo de /publish
diretório.
~/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.
Dependendo do hardware da sua máquina de desenvolvimento, pode ser difícil ter um Autor e publicação instância em execução simultaneamente. Raramente é necessário executar ambos simultaneamente em uma configuração local.
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.
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.
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 versões anteriores do AEM.
PATH
.
$ 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
Em, a adição anterior de adobe-public
O perfil Maven era necessário para apontar nexus.adobe.com
para baixar artefatos do AEM. Todos os artefatos do AEM agora estão disponíveis por meio do Maven Central e da adobe-public
perfil não é necessário.
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.
O projeto WKND foi atualizado para padrão para funcionar no AEM as a Cloud Service. Foi atualizado para ser compatível com versões anteriores com 6.5/6.4. Se estiver usando o AEM 6.5 ou 6.4, anexe o classic
para qualquer comando Maven.
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Quando, usando um IDE, verifique classic
na guia Perfil Maven.
Perfil Maven IntelliJ
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.
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.
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.
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.
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):
Um bom primeiro passo ao encontrar um problema é verificar se o código foi implantado e instalado com êxito no AEM.
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.
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.
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
.
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.
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.
Se você precisar invalidar o cache constantemente usando o Reconstruir 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 quaisquer problemas de cache no futuro.