Configuração rápida do AEM Headless usando o AEM SDK local setup

Navegue até o Portal de Distribuição de Software > AEM as a Cloud Service e baixe a versão mais recente do AEM SDK.

Descompacte o download e copie o Quickstart jar (aem-sdk-quickstart-XXX.jar) em uma pasta dedicada, ou seja, ~/aem-sdk/author.

Renomeie o arquivo jar como aem-author-p4502.jar.

O nome author especifica que o Quickstart jar inicia no modo Autor. O p4502 especifica que o Quickstart é executado na porta 4502.

Para instalar e iniciar a instância do AEM, abra um prompt de comando na pasta que contém o arquivo jar e execute o seguinte comando:

$ cd ~/aem-sdk/author
$ java -jar aem-author-p4502.jar

Forneça uma senha de administrador como admin. Qualquer senha de administrador é aceitável, no entanto, é recomendável usar admin para desenvolvimento local para reduzir a necessidade de reconfigurar.

Quando o serviço AEM terminar de ser instalado, uma nova janela do navegador deverá ser aberta em http://localhost:4502.

Faça logon com o nome de usuário admin e a senha selecionada durante a primeira inicialização do AEM (geralmente admin).

Baixe o pacote AEM compilado mais recente para o Site WKND: aem-guides-wknd.all-x.x.x.zip.

No menu Iniciar do AEM, navegue até Ferramentas > Implantação > Pacotes.

Clique em Carregar Pacote e escolha o pacote WKND baixado na etapa anterior. Clique em Instalar para instalar o pacote.

No menu Início do AEM, navegue até Assets > Arquivos > WKND Compartilhado > Inglês > Aventuras.

Esta é uma pasta de todos os ativos que compõem as várias Aventuras promovidas pela marca WKND. Isso inclui tipos de mídia tradicionais, como imagens e vídeo, e mídia específica para AEM, como Fragmentos de conteúdo.

Clique na pasta Downhill Skiing Wyoming e clique no cartão Downhill Skiing Wyoming Content Fragment:

O editor de Fragmento de conteúdo abre para a aventura Downhill Skiing Wyoming.

Observe que vários campos como Título, Descrição e Atividade definem o fragmento.

Fragmentos de conteúdo são uma das maneiras pelas quais o conteúdo pode ser gerenciado no AEM. Fragmento de conteúdo são conteúdos reutilizáveis e de apresentação independente, compostos de elementos de dados estruturados, como texto, rich text, datas ou referências a outros Fragmentos de conteúdo. Os fragmentos de conteúdo são explorados com mais detalhes posteriormente na configuração rápida.

Clique em Cancelar para fechar o fragmento. Sinta-se à vontade para navegar em algumas das outras pastas e explorar o outro conteúdo de aventura.

Abra um novo prompt de comando e clone o aplicativo React de amostra do GitHub:

$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql/react-app

Abra o aplicativo React no aem-guides-wknd-graphql/react-app no IDE de sua escolha.

No IDE, abra o arquivo .env.development em /.env.development. Verifique se a linha REACT_APP_AUTHORIZATION não está comentada e se o arquivo declara as seguintes variáveis:

REACT_APP_HOST_URI=http://localhost:4502
REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
# Use Authorization when connecting to an AEM Author environment
REACT_APP_AUTHORIZATION=admin:admin

Verifique se REACT_APP_HOST_URI aponta para o SDK AEM local. Para maior comodidade, este início rápido conecta o aplicativo React ao AEM Author. Os serviços do Author exigem autenticação, portanto, o aplicativo usa o usuário admin para estabelecer sua conexão. Conectar um aplicativo ao AEM Author é uma prática comum durante o desenvolvimento, pois facilita a iteração rápida no conteúdo, sem a necessidade de publicar as alterações.

Instale e inicie o aplicativo React:

$ cd aem-guides-wknd-graphql/react-app
$ npm install
$ npm start

Uma nova janela do navegador abre automaticamente o aplicativo em http://localhost:3000.

Uma lista do conteúdo de aventura do AEM é exibida.

Clique em uma das imagens da aventura para exibir os detalhes da aventura. Um pedido é feito ao AEM para retornar os detalhes de uma aventura.

Use as ferramentas de desenvolvedor do navegador para inspecionar as solicitações de Rede. Exiba as solicitações de XHR e observe várias solicitações do GET para /graphql/execute.json/.... Esse prefixo de caminho invoca o endpoint de consulta persistente do AEM, selecionando a consulta persistente a ser executada usando o nome e os parâmetros codificados após o prefixo.

Navegue até AEM http://localhost:4502.

Navegue até Assets > Arquivos > WKND Compartilhado > Inglês > Aventuras > Bali Surf Camp.

Clique no fragmento de conteúdo do Bali Surf Camp para abrir o editor de fragmentos de conteúdo.

Modifique o Título e a Descrição da aventura.

Clique em Salvar para salvar as alterações.

Atualize o aplicativo React em http://localhost:3000 para ver suas alterações:

Abra o GraphiQL navegando até Ferramentas > Geral > Editor de consultas do GraphQL

Selecione as consultas persistentes existentes à esquerda e execute-as para ver os resultados.