Criar projeto spa-editor-project

Abra um terminal de linha de comando e insira o seguinte comando Maven:

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=35 \
 -D appTitle="WKND SPA React" \
 -D appId="wknd-spa-react" \
 -D artifactId="aem-guides-wknd-spa.react" \
 -D groupId="com.adobe.aem.guides.wkndspa.react" \
 -D frontendModule="react" \
 -D aemVersion="cloud"

Observe a propriedade frontendModule=react. Isso instrui o Arquétipo de Projeto AEM AEM a inicializar o projeto com uma base de código React inicial a ser usada com o Editor SPA. Propriedades como appTitle, appId, artifactId e groupId são usadas para identificar o projeto e a finalidade.

Uma lista completa de propriedades disponíveis para configurar um projeto pode ser encontrada aqui.

A seguinte pasta e estrutura de arquivo são geradas pelo arquétipo Maven no sistema de arquivos local:

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

Cada pasta representa um módulo Maven individual. Neste tutorial, trabalharemos principalmente com o módulo ui.frontend, que é o aplicativo React. Mais detalhes sobre módulos individuais podem ser encontrados na documentação do Arquétipo de projeto do AEM.

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

Na linha de comando, navegue até o diretório de projeto aem-guides-wknd-spa.react.

$ cd aem-guides-wknd-spa.react

Execute o seguinte comando para criar e implantar o projeto inteiro no AEM:

$ mvn clean install -PautoInstallSinglePackage

A build levará cerca de um minuto e deve terminar com a seguinte mensagem:

...
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for aem-guides-wknd-spa.react 1.0.0-SNAPSHOT:
[INFO]
[INFO] aem-guides-wknd-spa.react .......................... SUCCESS [  0.257 s]
[INFO] WKND SPA React - Core .............................. SUCCESS [ 12.553 s]
[INFO] WKND SPA React - UI Frontend ....................... SUCCESS [01:46 min]
[INFO] WKND SPA React - Repository Structure Package ...... SUCCESS [  1.082 s]
[INFO] WKND SPA React - UI apps ........................... SUCCESS [  8.237 s]
[INFO] WKND SPA React - UI content ........................ SUCCESS [  5.633 s]
[INFO] WKND SPA React - UI config ......................... SUCCESS [  0.234 s]
[INFO] WKND SPA React - All ............................... SUCCESS [  0.643 s]
[INFO] WKND SPA React - Integration Tests ................. SUCCESS [ 12.377 s]
[INFO] WKND SPA React - Dispatcher ........................ SUCCESS [  0.066 s]
[INFO] WKND SPA React - UI Tests .......................... SUCCESS [  0.074 s]
[INFO] WKND SPA React - Project Analyser .................. SUCCESS [ 31.287 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 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 vários pacotes com o prefixo aem-guides-wknd-spa.react.

Gerenciador de pacotes do AEM

Todo o código personalizado necessário para o projeto está incluído nesses pacotes e instalado no ambiente AEM.

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 > Página inicial do React sobre SPA WKND 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 botão 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-react/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-react/clientlibs/clientlib-react.lc-xxxx-lc.min.js"></script>
</body>
...

clientlib-react.min.js é o SPA React que é carregado na página e responsável pela renderização do conteúdo.

No entanto, de onde vem o conteúdo?

Retorne à guia: http://localhost:4502/content/wknd-spa-react/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-react/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-react/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-react/components/text"
    },
    "text_98796435": {
        "text": "<p>A new text component.</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text"
    },
}
...

No próximo capítulo, verificaremos como esse conteúdo JSON é mapeado de componentes AEM para componentes SPA, a fim de formar a base da experiência do editor de AEM SPA.