Documentação AEM Tutoriais do AEM Tutorial do AEM Headless

Projeto do SPA Editor

Última atualização: 16 de junho de 2025

Aplica-se a:
Experience Manager as a Cloud Service

Tópicos:
AEM Project Archetype

Criado para:

Iniciante
Desenvolvedor

IMPORTANTE

O editor de SPA foi descontinuado para novos projetos. Ele continuará funcionando com projetos existentes da Adobe, mas não deve ser usado para novos projetos. Os editores preferidos para gerenciar conteúdo headless no AEM agora são:

O editor universal para editar conteúdo headless visualmente.
O editor de fragmentos de conteúdo para editar conteúdo headless com base em formulários.

Saiba como usar um projeto Maven do Adobe Experience Manager (AEM) como ponto de partida para um aplicativo do Angular integrado ao AEM SPA Editor.

Objetivo

Entenda a estrutura de um novo projeto do Editor SPA do AEM criado a partir de um arquétipo Maven.
Implante o projeto inicial em uma instância local do AEM.

O que você vai criar

Neste capítulo, um novo projeto do AEM é implantado, com base no Arquétipo de Projetos AEM. O projeto do AEM é inicializado com um ponto de partida muito simples para o SPA do Angular. O projeto usado neste capítulo servirá de base para uma implementação da SPA da WKND e será desenvolvido em capítulos futuros.

Projeto inicial do WKND SPA Angular

Uma mensagem clássica do Hello World.

Pré-requisitos

Revise as ferramentas e instruções necessárias para configurar um ambiente de desenvolvimento local. Verifique se uma nova instância do Adobe Experience Manager, iniciada no modo author, está em execução localmente.

Obter o projeto

Há várias opções para criar um projeto de vários módulos do Maven para o AEM. Este tutorial usou o Arquétipo de projeto do AEM mais recente como base para o código do tutorial. Foram feitas modificações no código do projeto para oferecer suporte a várias versões do AEM. Revise a observação sobre compatibilidade com versões anteriores.

CUIDADO

É uma prática recomendada usar a versão mais recente do arquétipo para gerar um novo projeto para uma implementação real. Os projetos do AEM devem ter como alvo uma única versão do AEM usando a propriedade aemVersion do arquétipo.

Baixe o ponto de partida para este tutorial pelo Git:

$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/create-project-start

A seguinte estrutura de pasta e arquivo representa o projeto do AEM que foi gerado pelo arquétipo Maven no sistema de arquivos local:

|--- aem-guides-wknd-spa
    |--- all/
    |--- core/
    |--- dispatcher/
    |--- ui.apps/
    |--- ui.apps.structure/
    |--- ui.content/
    |--- ui.frontend /
    |--- it.tests/
    |--- pom.xml
    |--- README.md
    |--- .gitignore
    |--- archetype.properties

As seguintes propriedades foram usadas ao gerar o projeto AEM a partir do Arquétipo de projeto do AEM:

Propriedade
Valor
aemVersion
nuvem
appTitle
WKND SPA ANGULAR
appId
wknd-spa-angular
groupId
com.adobe.aem.guides
frontendModule
angular
pacote
com.adobe.aem.guides.wknd.spa.angular
includeExamples
n

NOTE
Observe a propriedade frontendModule=angular. Isso instrui o Arquétipo de Projetos AEM a inicializar o projeto com uma base de código Angular inicial a ser usada com o Editor SPA do AEM.

Criar o projeto

Em seguida, compile, crie e implante o código do projeto em uma instância local do AEM usando o Maven.

Verifique se uma instância do AEM está sendo executada localmente na porta 4502.

No terminal de linha de comando, verifique se o Maven está instalado:

$ mvn --version
Apache Maven 3.6.2
Maven home: /Library/apache-maven-3.6.2
Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home

Execute o comando Maven abaixo no diretório aem-guides-wknd-spa para compilar e implantar o projeto no AEM:

$ mvn -PautoInstallSinglePackage clean install

Se estiver usando o AEM 6.x:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Os vários módulos do projeto devem ser compilados e implantados no AEM.

[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for wknd-spa-angular 1.0.0-SNAPSHOT:
[INFO]
[INFO] wknd-spa-angular ................................... SUCCESS [  0.473 s]
[INFO] WKND SPA Angular - Core ............................ SUCCESS [ 54.866 s]
[INFO] wknd-spa-angular.ui.frontend - UI Frontend ......... SUCCESS [02:10 min]
[INFO] WKND SPA Angular - Repository Structure Package .... SUCCESS [  0.694 s]
[INFO] WKND SPA Angular - UI apps ......................... SUCCESS [  6.351 s]
[INFO] WKND SPA Angular - UI content ...................... SUCCESS [  2.885 s]
[INFO] WKND SPA Angular - All ............................. SUCCESS [  1.736 s]
[INFO] WKND SPA Angular - Integration Tests Bundles ....... SUCCESS [  2.563 s]
[INFO] WKND SPA Angular - Integration Tests Launcher ...... SUCCESS [  1.846 s]
[INFO] WKND SPA Angular - Dispatcher ...................... SUCCESS [  0.270 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

O perfil Maven autoInstallSinglePackage compila os módulos individuais do projeto e implanta um único pacote na instância do AEM. Por padrão, este pacote é implantado em uma instância do AEM em execução localmente na porta 4502 e com as credenciais de admin:admin.

Navegue até Gerenciador de Pacotes na sua instância do AEM local: http://localhost:4502/crx/packmgr/index.jsp.
Você deve ver três pacotes para wknd-spa-angular.all, wknd-spa-angular.ui.apps e wknd-spa-angular.ui.content.

Todo o código personalizado necessário para o projeto é incorporado a esses pacotes e instalado no tempo de execução do AEM.
Você também deve ver vários pacotes para spa.project.core e core.wcm.components. Essas são dependências incluídas automaticamente pelo arquétipo. Mais informações sobre os Componentes Principais do AEM podem ser encontradas aqui.

Conteúdo do autor

Em seguida, abra o SPA inicial gerado pelo arquétipo e atualize parte do conteúdo.

Navegue até o console Sites: http://localhost:4502/sites.html/content.

O WKND SPA inclui uma estrutura básica do site com um país, idioma e página inicial. Esta hierarquia é baseada nos valores padrão do arquétipo para language_country e isSingleCountryWebsite. Estes valores podem ser substituídos atualizando as propriedades disponíveis ao gerar um projeto.
Abra a página us > en > WKND SPA Angular Home Page selecionando a página e clicando no botão Editar na barra de menus:
Um componente Texto já foi adicionado à página. Você pode editar esse componente como qualquer outro componente no AEM.
Adicionar um componente Texto adicional à página.

Observe que a experiência de criação é semelhante àquela de uma página tradicional do AEM Sites. Atualmente, um número limitado de componentes está disponível para uso. Mais informações são adicionadas durante o curso do tutorial.

Inspecionar o aplicativo de página única

Em seguida, verifique se este é um aplicativo de página única com o uso das ferramentas de desenvolvedor do seu navegador.

No Editor de páginas, clique no menu Informações da Página > Exibir como Publicado:

Isso abrirá uma nova guia com o parâmetro de consulta ?wcmmode=disabled que desativa efetivamente o editor do AEM: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled
Exiba a fonte da página e observe que o conteúdo do texto Hello World ou qualquer outro conteúdo não foi encontrado. Em vez disso, você deve ver o HTML da seguinte maneira:
... <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="spa-root"></div> <script type="text/javascript" src="/etc.clientlibs/wknd-spa-angular/clientlibs/clientlib-angular.min.js"></script> ... </body> ...
clientlib-angular.min.js é o SPA do Angular carregado na página e responsável pela renderização do conteúdo.

De onde vem o conteúdo?
Retorne à guia: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled
Abra as ferramentas de desenvolvedor do navegador e inspecione o tráfego de rede da página durante uma atualização. Exibir as solicitações de XHR:

Deve haver uma solicitação para http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Ele contém todo o conteúdo, formatado em JSON, que direcionará o SPA.
Em uma nova guia, abra http://localhost:4502/content/wknd-spa-angular/us/en.model.json

A solicitação en.model.json representa o modelo de conteúdo que direcionará o aplicativo. Inspecione a saída JSON e você poderá encontrar o trecho que representa o(s) componente(s) Texto.
... ":items": { "text": { "text": "<p>Hello World! Updated content!</p>\r\n", "richText": true, ":type": "wknd-spa-angular/components/text" }, "text_98796435": { "text": "<p>A new text component.</p>\r\n", "richText": true, ":type": "wknd-spa-angular/components/text" }, ...
No próximo capítulo, verificaremos como o conteúdo JSON é mapeado dos componentes do AEM para os componentes SPA, para formar a base da experiência do Editor SPA do AEM.

NOTE
Pode ser útil instalar uma extensão de navegador para formatar automaticamente a saída JSON.

Parabéns!

Parabéns, você acabou de criar seu primeiro projeto do Editor SPA do AEM.

É bastante simples neste momento, mas nos próximos capítulos é adicionada mais funcionalidade.

Próximas etapas

Integrar o SPA - Saiba como o código-fonte do SPA é integrado ao Projeto do AEM e entenda as ferramentas disponíveis para desenvolver rapidamente o SPA.

recommendation-more-help