AEM Configuração rápida sem cabeçalho usando o SDK local

A configuração rápida do AEM Headless leva você com AEM Headless usando o conteúdo do projeto de amostra do WKND Site e uma amostra do React App (a SPA) que consome o conteúdo por meio AEM APIs GraphQL headless. Este guia usa o AEM SDK as a Cloud Service.

Pré-requisitos

As seguintes ferramentas devem ser instaladas localmente:

1. Instalar o SDK do AEM

Essa configuração usa o AEM SDK as a Cloud Service para explorar AEM APIs GraphQL. Esta seção fornece um guia rápido para instalar o SDK do AEM e executá-lo no modo Autor. Um guia mais detalhado para configurar um ambiente de desenvolvimento local pode ser encontrada aqui.

OBSERVAÇÃO

Também é possível seguir o tutorial com um AEM ambiente as a Cloud Service. Observações adicionais sobre o uso de um ambiente do Cloud estão incluídas em todo o tutorial.

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

    Portal de distribuição de software

    ATENÇÃO

    O recurso GraphQL é ativado por padrão somente no SDK do AEM de 2021-02-04 ou mais recente.

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

  3. Renomeie o arquivo jar para aem-author-p4502.jar.

    O author name especifica que o jar do Quickstart será iniciado no modo Autor. O p4502 especifica que o servidor Quickstart será executado na porta 4502.

  4. Abra uma nova janela do terminal e navegue até a pasta que contém o arquivo jar. Execute o seguinte comando para instalar e iniciar a instância do AEM:

    $ cd ~/aem-sdk/author
    $ java -jar aem-author-p4502.jar
    
  5. Forneça uma senha de administrador como admin. Qualquer senha de administrador é aceitável, no entanto, sua recomendação é usar admin para desenvolvimento local para reduzir a necessidade de reconfigurar.

  6. Após alguns minutos, a instância de AEM terminará a instalação e uma nova janela do navegador deverá abrir em http://localhost:4502.

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

2. Instale o conteúdo WKND de amostra

Conteúdo de amostra do Site de referência WKND será instalado para acelerar o tutorial. A WKND é uma marca fictícia ao estilo de vida, frequentemente usada em conjunto com AEM treinamento.

O site de referência WKND inclui configurações necessárias para expor um Ponto de extremidade GraphQL. Em uma implementação real, siga as etapas documentadas para incluir os pontos de extremidade GraphQL no projeto do cliente. A CORS também foi embalada como parte do site WKND. Uma configuração do CORS é necessária para conceder acesso a um aplicativo externo, mais informações sobre CORS pode ser encontrada abaixo.

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

    OBSERVAÇÃO

    Faça o download da versão padrão compatível com AEM as a Cloud Service e not o classic versão.

  2. No Início do AEM navegue até Ferramentas > Implantação > Pacotes.

    Navegue até Pacotes

  3. Clique em Fazer upload do pacote e escolha o pacote WKND baixado na etapa anterior. Clique em Instalar para instalar o pacote.

  4. No Início do AEM navegue até Ativos > Arquivos.

  5. Clique nas pastas para navegar até Site WKND > Inglês > Aventuras.

    Exibição de pasta de 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, além de mídia específica de AEM como Fragmentos de conteúdo.

  6. Clique no botão Descarga do Skiing Wyoming e clique no botão Fragmento de conteúdo de esqui descendente do Wyoming cartão:

    Baixar o cartão do fragmento de conteúdo de esqui

  7. A interface do usuário do Editor de fragmento de conteúdo será aberta para a aventura de esqui de Baixo no Wyoming.

    Fragmento de conteúdo de esqui de preenchimento

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

    Fragmentos de conteúdo são uma das maneiras de gerenciar o conteúdo no AEM. Os Fragmentos de conteúdo são conteúdo reutilizável e agnóstico de apresentação composto de elementos de dados estruturados, como texto, rich text, datas ou referências a outros Fragmentos de conteúdo. Os Fragmentos de conteúdo serão explorados com mais detalhes posteriormente no tutorial.

  8. Clique em Cancelar para fechar o fragmento. Você pode navegar em algumas das outras pastas e explorar o outro conteúdo da Adventure.

OBSERVAÇÃO

Se estiver usando um ambiente de Cloud Service, consulte a documentação para saber como implante uma base de código como o site de referência WKND em um ambiente Cloud Service.

3. Baixe e execute o aplicativo WKND React

Um dos objetivos deste tutorial é mostrar como consumir conteúdo AEM de um aplicativo externo usando APIs GraphQL. Este tutorial usa um exemplo de aplicativo React que foi parcialmente concluído para acelerar o tutorial. As mesmas lições e conceitos se aplicam a aplicativos criados com o iOS, Android ou qualquer outra plataforma. O aplicativo React é intencionalmente simples, para evitar complexidade desnecessária; não se trata de uma implementação de referência.

  1. Abra uma nova janela de terminal e clone a ramificação inicial do tutorial usando o Git:

    $ git clone --branch tutorial/react git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. No IDE de sua escolha, abra o arquivo .env.development at aem-guides-wknd-graphql/react-app/.env.development. Verifique se a variável REACT_APP_AUTHORIZATION é não comentada e o arquivo tem a seguinte aparência:

    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
    

    Certifique-se de que React_APP_HOST_URI corresponde à instância de AEM local. Neste capítulo, conectaremos o aplicativo React diretamente ao AEM Autor ambiente. Autor por padrão, os ambientes exigem autenticação, portanto, nosso aplicativo se conectará como o admin usuário. Essa é uma prática comum durante o desenvolvimento, pois permite que façamos rapidamente alterações no ambiente de AEM e as vejamos imediatamente refletidas no aplicativo.

    OBSERVAÇÃO

    Em um cenário de produção, o aplicativo se conectará a um AEM Publicar ambiente. Isso é abordado com mais detalhes na seção Implantação de produção capítulo.

  3. Navegue até o aem-guides-wknd-graphql/react-app pasta. Instale e inicie o aplicativo:

    $ cd aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  4. Uma nova janela do navegador deve iniciar automaticamente o aplicativo em http://localhost:3000.

    React starter app

    Uma lista do conteúdo Aventura atual do AEM deve ser exibida.

  5. Clique em uma das imagens da aventura para ver os detalhes da aventura. É feito um pedido para AEM retornar os detalhes de uma aventura.

    Exibição de Detalhes da Aventura

  6. Use as ferramentas do desenvolvedor do navegador para inspecionar a Rede solicitações. Visualize o XHR solicitações e observe várias solicitações do POST para /content/graphql/global/endpoint.json, o ponto de extremidade GraphQL configurado para AEM.

    Solicitação GraphQL Endpoint XHR

  7. Você também pode visualizar os parâmetros e a resposta JSON inspecionando a solicitação de rede. Pode ser útil instalar uma extensão de navegador como Inspetor de rede GraphQL para que o Chrome entenda melhor a consulta e a resposta.

4. Editar conteúdo no AEM

Agora que o aplicativo React está em execução, faça uma atualização do conteúdo no AEM e veja a alteração refletida no aplicativo.

  1. Navegar para AEM http://localhost:4502.

  2. Navegar para Ativos > Arquivos > Site WKND > Inglês > Aventuras > Campo de Surf de Bali.

    Pasta Bali Surf Camp

  3. Clique no botão Campo de Surf de Bali fragmento de conteúdo para abrir o Editor de fragmento de conteúdo.

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

    Modificar fragmento de conteúdo

  5. Clique em Salvar para salvar as alterações.

  6. Navegue de volta ao aplicativo React em http://localhost:3000 e atualize para ver suas alterações:

    Aventura Bali Surf Camp Atualizado

5. Instale a ferramenta GraphiQL

GraphiQL O é uma ferramenta de desenvolvimento e é necessária somente em ambientes de nível inferior, como uma instância de desenvolvimento ou local. O GraphiQL IDE permite testar e refinar rapidamente as consultas e os dados retornados. O GraphiQL também oferece acesso fácil à documentação, facilitando o aprendizado e a compreensão de quais métodos estão disponíveis.

  1. Navegue até o Portal de distribuição de software > AEM as a Cloud Service.

  2. Procure por "GraphiQL" (não deixe de incluir a variável i em GraphiQL.

  3. Baixe a versão mais recente Pacote de Conteúdo GraphiQL v.x.x

    Download do pacote GraphiQL

    O arquivo zip é um pacote AEM que pode ser instalado diretamente.

  4. No Início do AEM navegue até Ferramentas > Implantação > Pacotes.

  5. Clique em Fazer upload do pacote e escolha o pacote baixado na etapa anterior. Clique em Instalar para instalar o pacote.

    Instalar o pacote GraphiQL

  6. Navegue até o GraphiQL IDE em http://localhost:4502/content/graphiql.html e comece a explorar as APIs GraphQL.

    OBSERVAÇÃO

    A ferramenta GraphiQL e a API GraphQL são explorado com mais detalhes posteriormente no tutorial.

Parabéns!

Parabéns, agora você tem um aplicativo externo consumindo conteúdo AEM com GraphQL. Inspecione o código no aplicativo React e continue a testar a modificação dos Fragmentos de conteúdo existentes.

Próximas etapas

(Bônus) Configuração do CORS

AEM, por padrão, bloqueia solicitações entre origens, impedindo que aplicativos não autorizados se conectem e surjam seu conteúdo.

Para permitir que o aplicativo React deste tutorial interaja com AEM pontos de extremidade da API GraphQL, uma configuração de compartilhamento de recursos entre origens foi definida no projeto de referência do site WKND.

Configuração de compartilhamento de recursos entre origens

Para exibir a configuração implantada:

  1. Navegue até AEM console da Web do SDK em http://localhost:4502/system/console.

    OBSERVAÇÃO

    O Console da Web só está disponível no SDK. Em um ambiente AEM as a Cloud Service, essas informações podem ser visualizadas por meio de o Console do desenvolvedor.

  2. No menu superior, clique em OSGI > Configuração para exibir todas as Configurações do OSGi.

  3. Rolar para baixo na página Compartilhamento de recursos entre origens do Adobe Granite.

  4. Clique na configuração para com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-graphql.

  5. Os seguintes campos foram atualizados:

    • Origens permitidas (Regex): http://localhost:.*
      • Permite todas as conexões de host local.
    • Caminhos permitidos: /content/graphql/global/endpoint.json
      • Este é o único ponto de extremidade GraphQL configurado atualmente. Como prática recomendada, as configurações de CORs devem ser o mais restritivas possível.
    • Métodos permitidos: GET, HEAD, POST
      • Somente POST O é necessário para GraphQL, no entanto, os outros métodos podem ser úteis ao interagir com AEM sem interface.
    • Cabeçalhos suportados: autorização foi adicionado para transmitir a autenticação básica no ambiente do autor.
    • Suporta Credenciais: Yes
      • Isso é necessário, pois o aplicativo React se comunicará com os pontos finais GraphQL protegidos no serviço de autor do AEM.

Essa configuração e os pontos de extremidade GraphQL fazem parte do projeto WKND AEM. Você pode exibir todas as Configurações do OSGi aqui.

Nesta página