Crie seu primeiro SPA de Angular em AEM

Bem-vindo a um tutorial de várias partes criado para desenvolvedores novos no recurso SPA Editor 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 AEM Editor de SPA, que mapeia os componentes do Angular para AEM componentes. O SPA concluído, implantado em AEM, pode ser criado dinamicamente com as ferramentas tradicionais de edição em linha do AEM.

SPA Final Implementado

Implementação de SPA WKND

Sobre

O objetivo deste tutorial em várias partes é ensinar um desenvolvedor a implementar um aplicativo do Angular para trabalhar com o recurso Editor de 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 participará de um projeto AEM SPA Editor concluir este tutorial.

O tutorial foi projetado para funcionar com AEM como um Cloud Service e é compatível com versões anteriores com 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.

Código mais recente

Todo o código tutorial pode ser encontrado em GitHub.

O base de código mais recente está disponível como Pacotes de AEM para download.

Pré-requisitos

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 de componentes AEM Sites tradicionais.

Ambiente de desenvolvimento local

Um ambiente de desenvolvimento local é necessário para concluir este tutorial. Capturas de tela e vídeo são capturados usando o AEM como um Cloud Service SDK em execução em um ambiente Mac OS com o Visual Studio Code como o IDE. Os comandos e o código devem ser independentes do sistema operacional local, salvo indicação em contrário.

OBSERVAÇÃO

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.

Próximas etapas

O que você está esperando?! Inicie o tutorial navegando até o capítulo SPA Editor Project e saiba como gerar um projeto habilitado para SPA Editor usando o Arquétipo de projeto AEM.

Compatibilidade com versões anteriores

O código do projeto deste tutorial foi criado para o AEM como um 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 AEM ambientes 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 AEM 6.x, adicione o perfil classic sempre que instruído a executar uma build Maven:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Ao gerar um novo projeto para uma implementação de AEM, sempre use a versão mais recente do AEM Arquétipo de Projeto e atualize o aemVersion para direcionar sua versão pretendida do AEM.

Nesta página