Projeto do Editor de SPA create-project

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 AEM 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 do Arquétipo de projeto AEM:

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

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

O SPA WKND 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. É possível 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.

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 desliga efetivamente o editor de 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 HTML como o seguinte:

...
<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 que é 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. Inspect 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 AEM para os componentes SPA, a fim de formar a base da experiência do editor de AEM SPA.