Crie seu primeiro SPA Angular no AEM

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.

SPA final implementado

Implementação de SPA WKND

Sobre

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.

Código mais recente

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.

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

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 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.

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 o SPA Editor usando o Arquétipo de projeto do AEM.

Compatibilidade com versões anteriores

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.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now