Bem-vindo a um tutorial de várias partes projetado para desenvolvedores novos no recurso Editor SPA no Adobe Experience Manager (AEM). Este tutorial aborda a implementação de um aplicativo Angular para uma marca fictícia de estilo de vida, a WKND. O aplicativo Angular será desenvolvido e projetado para ser implantado com o Editor de SPA do AEM, que mapeia componentes Angulares em componentes do AEM. O SPA concluído, implantado no AEM, pode ser criado dinamicamente com as ferramentas de edição online tradicionais do AEM.
Implementação de SPA WKND
O objetivo deste tutorial de várias partes é ensinar um desenvolvedor a implementar um aplicativo Angular para trabalhar com o recurso Editor do SPA do AEM. Em um cenário real, as atividades de desenvolvimento são divididas por persona, geralmente envolvendo um desenvolvedor do Front-End e um desenvolvedor do Back-End. Acreditamos que é útil para qualquer desenvolvedor que esteja envolvido em um projeto do AEM SPA Editor concluir este tutorial.
O tutorial foi projetado para funcionar com o AEM as a Cloud Service e é compatível com versões anteriores do AEM 6.5.4+ e AEM 6.4.8+. O SPA é implementado usando:
Estime de 1 a 2 horas para visualizar cada parte do tutorial.
Todo o código tutorial pode ser encontrado em GitHub.
A base de código mais recente está disponível como pacotes AEM que podem ser baixados.
Antes de iniciar este tutorial, você precisará do seguinte:
Embora não seja obrigatório, é benéfico ter uma compreensão básica do desenvolvimento dos componentes tradicionais do AEM Sites.
Um ambiente de desenvolvimento local é necessário para concluir este tutorial. Capturas de tela e vídeo são capturados usando o SDK do AEM as a Cloud Service em execução em um ambiente Mac OS com o Visual Studio Code como IDE. Os comandos e o código devem ser independentes do sistema operacional local, salvo indicação em contrário.
Novo no AEM as a Cloud Service? Consulte o guia a seguir para configurar um ambiente de desenvolvimento local usando o SDK do AEM as a Cloud Service.
Novo no AEM 6.5? Consulte o guia a seguir para configurar um ambiente de desenvolvimento local.
O que você está esperando?! Inicie o tutorial navegando até o capítulo SPA Editor Project e saiba como gerar um projeto habilitado para o SPA Editor usando o Arquétipo de projeto do AEM.
O código do projeto deste tutorial foi criado para o AEM as a Cloud Service. Para tornar o código do projeto compatível retroativamente para 6.5.4+ e 6.4.8+, várias modificações foram feitas.
O UberJar v6.4.4 foi incluído como uma dependência:
<!-- Adobe AEM 6.x Dependencies -->
<dependency>
<groupId>com.adobe.aem</groupId>
<artifactId>uber-jar</artifactId>
<version>6.4.4</version>
<classifier>apis</classifier>
<scope>provided</scope>
</dependency>
Um perfil Maven adicional, chamado classic
, foi adicionado para modificar a build para direcionar os ambientes AEM 6.x:
<!-- AEM 6.x Profile to include Core Components-->
<profile>
<id>classic</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<build>
...
</profile>
O perfil classic
é desativado por padrão. Se seguir o tutorial com o AEM 6.x, adicione o perfil classic
sempre que instruído a executar uma compilação Maven:
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Ao gerar um novo projeto para uma implementação do AEM, sempre use a versão mais recente do Arquétipo de projeto do AEM e atualize o aemVersion
para direcionar sua versão pretendida do AEM.