Criar o seu primeiro SPA do Angular no AEM introduction

Boas-vindas a esse tutorial de várias partes, projetado para iniciantes no desenvolvimento com o recurso do Editor de SPA do Adobe Experience Manager (AEM). Este tutorial aborda a implementação de um aplicativo do Angular para uma marca fictícia de estilo de vida, a WKND. O aplicativo do Angular foi desenvolvido e projetado para ser implantado com o editor de SPA do AEM, que mapeia componentes do Angular para componentes do AEM. O SPA concluído e implantado no AEM pode ser criado dinamicamente com as ferramentas tradicionais de edição em linha do AEM.

Implementação do SPA da WKND

Sobre

O objetivo deste tutorial em várias partes é ensinar um desenvolvedor a implementar um aplicativo do Angular para funcionar com o recurso de editor de SPA do AEM. Em um caso real, as atividades de desenvolvimento são divididas por persona, geralmente envolvendo um desenvolvedor de front-end e um desenvolvedor de back-end. Acreditamos que fazer este tutorial seja benéfico para qualquer desenvolvedor envolvido em um projeto do editor de SPA do AEM.

O tutorial foi projetado para funcionar com o AEM as a Cloud Service e conta com compatibilidade retroativa com o AEM 6.5.4+ e o AEM 6.4.8+. O SPA é implementado por meio de:

Estimativa de 1 a 2 horas para passar por cada parte do tutorial.

Código mais recente

Todo o código do tutorial pode ser encontrado no GitHub.

A base de código mais recente está disponível como pacotes do AEM para download.

Pré-requisitos

Antes de iniciar este tutorial, você precisará do seguinte:

Embora não seja obrigatório, é vantajoso ter uma compreensão básica do desenvolvimento de componentes tradicionais do AEM Sites.

Ambiente de desenvolvimento local local-dev-environment

Um ambiente de desenvolvimento local é necessário para concluir este tutorial. Capturas de tela e vídeos são captados por meio do SDK do AEM as a Cloud Service em execução em um ambiente macOS com o Visual Studio Code como IDE. Os comandos e o código devem ser independentes do sistema operacional local, a menos que indicado de outra forma.

Próximas etapas next-steps

O que você está esperando? Para começar o tutorial, navegue até o capítulo Projeto do editor de SPA e saiba como gerar um projeto habilitado para o editor de SPA por meio do arquétipo de projeto do AEM.

Compatibilidade retroativa compatibility

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 com as versões anteriores 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 do Maven adicional, denominado classic, foi adicionado para modificar a compilação para ser usada em ambientes do AEM 6.x:

  <!-- AEM 6.x Profile to include Core Components-->
    <profile>
        <id>classic</id>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
        <build>
        ...
    </profile>

O perfil do classic é desabilitado por padrão. Se estiver seguindo o tutorial com o AEM 6.x, adicione o perfil do classic sempre que for necessário executar uma compilação do 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 de acordo com a versão pretendida do AEM.