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.
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:
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.
~/aem-sdk
/author
/publish
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.
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
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.
Dependendo do hardware da máquina de desenvolvimento, pode ser difícil ter uma Autor e publicação instância em execução ao mesmo tempo. Raramente é necessário executar ambos simultaneamente em uma configuração local.
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.
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.
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.
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 AEM. Todos os artefatos AEM estão disponíveis no Maven Central e no adobe-public
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 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.
O Projeto WKND foi atualizado para funcionar AEM as a Cloud Service por padrão. Foi atualizado para ser compatível com versões anteriores da 6.5/6.4. Se estiver usando AEM 6.5 ou 6.4, anexe a classic
para qualquer comando Maven.
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Quando, usando um IDE, verifique classic
na guia Perfil do Maven.
Perfil do IntelliJ Maven
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.
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.
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.
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.
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):
Uma boa primeira etapa, ao encontrar um problema, é verificar se o código foi implantado e instalado com êxito no AEM.
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.
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.
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
.
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.
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.
Se você tiver que invalidar constantemente o cache usando o Recriar 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.