Integração de aplicativos cliente

No capítulo anterior, você criou e atualizou consultas persistentes usando o GraphiQL Explorer.

Este capítulo percorre as etapas para integrar as consultas persistentes ao aplicativo cliente WKND (também conhecido como Aplicativo WKND) usando solicitações HTTP GET em aplicativos existentes Componentes do React. Ele também oferece um desafio opcional para aplicar seus aprendizados AEM Headless, experiência em codificação para aprimorar o aplicativo cliente WKND.

Pré-requisitos

Este documento faz parte de um tutorial dividido em várias partes. Assegure-se de que os capítulos anteriores foram completados antes de prosseguir com este capítulo. O aplicativo cliente WKND se conecta ao serviço de publicação AEM, portanto, é importante que você publicado o seguinte no serviço de publicação do AEM.

• Configurações do projeto
• Pontos de extremidade GraphQL.
• Modelos de fragmentos do conteúdo
• Fragmentos de conteúdo criados
• Consultas persistentes do GraphQL

A variável As capturas de tela do IDE neste capítulo vêm de Código do Visual Studio

Capítulo 1-4 Pacote de soluções (opcional)

Um pacote de solução está disponível para ser instalado e conclui as etapas na interface do usuário do AEM para os capítulos 1 a 4. Este pacote é não é necessário se os capítulos anteriores tiverem sido concluídos.

1. Baixar Advanced-GraphQL-Tutorial-Solution-Package-1.2.zip.
2. No AEM, navegue até Ferramentas > Implantação > Pacotes para acessar Gerenciador de pacotes.
3. Carregue e instale o pacote (arquivo zip) baixado na etapa anterior.
4. Replicar o pacote para o serviço de publicação do AEM

Objetivos

Neste tutorial, você aprenderá a integrar as solicitações de consultas persistentes no aplicativo WKND GraphQL React de amostra usando o Cliente AEM Headless para JavaScript.

Clonar e executar o aplicativo cliente de amostra

Para acelerar o tutorial, é fornecido um aplicativo JS React de início.

1. Clonar o adobe/aem-guides-wknd-graphql repositório:

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

2. Edite o aem-guides-wknd-graphql/advanced-tutorial/.env.development arquivo e definir REACT_APP_HOST_URI para apontar para o serviço de publicação do AEM no target.

   Atualize o método de autenticação se estiver se conectando a uma instância de autor.

   # Server namespace
   REACT_APP_HOST_URI=https://publish-pxx-eyy.adobeaemcloud.com
   
   #AUTH (Choose one method)
   # Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication
   REACT_APP_AUTH_METHOD=
   
   # For Bearer auth, use DEV token (dev-token) from Cloud console
   REACT_APP_DEV_TOKEN=
   
   # For Service toke auth, provide path to service token file (download file from Cloud console)
   REACT_APP_SERVICE_TOKEN=auth/service-token.json
   
   # For Basic auth, use AEM ['user','pass'] pair (eg for Local AEM Author instance)
   REACT_APP_BASIC_AUTH_USER=
   REACT_APP_BASIC_AUTH_PASS=
   

   

   OBSERVAÇÃO

   As instruções acima são para conectar o aplicativo React ao Serviço de publicação do AEM, no entanto, para se conectar ao Serviço de autoria do AEM obtenha um token de desenvolvimento local para o ambiente as a Cloud Service do AEM de destino.

   Também é possível conectar o aplicativo a um Instância de autor local usando o SDK do AEMaaCS usando autenticação básica.

3. Abra um terminal e execute os comandos:

   $ cd aem-guides-wknd-graphql/advanced-tutorial
   $ npm install
   $ npm start
   

4. Uma nova janela do navegador deve ser carregada em http://localhost:3000

5. Toque Camping > Mochila de Yosemite para ver os detalhes da aventura do Yosemite Backpacking.

   

6. Abra as ferramentas de desenvolvedor do navegador e inspecione as XHR solicitação

   

   Você deve ver GET solicitações para o endpoint do GraphQL com o nome de configuração do projeto (wknd-shared), nome da consulta persistente (adventure-by-slug), nome da variável (slug), valor (yosemite-backpacking) e codificações de caracteres especiais.

Revise o código

No Tutorial básico - Criar um aplicativo React que usa APIs AEM GraphQL etapa revisamos e aprimoramos alguns arquivos importantes para obter experiência prática. Antes de aprimorar o aplicativo WKND, reveja os arquivos principais.

• Revisar o objeto AEMHeadless

• Implementar para executar consultas persistentes do AEM GraphQL

Revisão Adventures Componente do React

A visualização principal do aplicativo WKND React é a lista de todas as Aventuras e você pode filtrar essas Aventuras com base no tipo de atividade como Acampamento, Ciclismo. Esta exibição é renderizada pelo Adventures componente. Abaixo estão os principais detalhes de implementação:

• A variável src/components/Adventures.js chamadas useAllAdventures(adventureActivity) gancho e aqui adventureActivity o argumento é tipo de atividade.

• A variável useAllAdventures(adventureActivity) o gancho é definido na variável src/api/usePersistedQueries.js arquivo. Baseado em adventureActivity , determina qual consulta persistente chamar. Se não for um valor nulo, ele chamará wknd-shared/adventures-by-activity, senão obterá todas as aventuras disponíveis wknd-shared/adventures-all.

• O gancho usa a variável principal fetchPersistedQuery(..) função que delega a execução da consulta a AEMHeadless via aemHeadlessClient.js.

• O gancho também retorna apenas os dados relevantes da resposta do AEM GraphQL em response.data?.adventureList?.items, permitindo que o Adventures Os componentes de visualização do React são agnósticos das estruturas JSON principais.

• Após a execução bem-sucedida da consulta, a variável AdventureListItem(..) função de renderização de Adventures.js adiciona o elemento HTML para exibir o Imagem, Duração do Percurso, Preço e Título informações.

Revisão AdventureDetail Componente do React

A variável AdventureDetail O componente React renderiza os detalhes da aventura. Abaixo estão os principais detalhes de implementação:

• A variável src/components/AdventureDetail.js chamadas useAdventureBySlug(slug) gancho e aqui slug argumento é parâmetro de consulta.

• Como acima, a variável useAdventureBySlug(slug) o gancho é definido na variável src/api/usePersistedQueries.js arquivo. Chama wknd-shared/adventure-by-slug consulta persistente delegando a AEMHeadless via aemHeadlessClient.js.

• Após a execução bem-sucedida da consulta, a variável AdventureDetailRender(..) função de renderização de AdventureDetail.js adiciona o elemento HTML para exibir os detalhes de Aventura.

Aprimorar o código

Uso adventure-details-by-slug consulta persistente

No capítulo anterior, criamos a variável adventure-details-by-slug consulta persistente, ele fornece informações adicionais do Adventure, como local, equipe de instrutores e administrador. Vamos substituir adventure-by-slug com adventure-details-by-slug consulta persistente para renderizar essas informações adicionais.

1. Abrir src/api/usePersistedQueries.js.

2. Localize a função useAdventureBySlug() e atualizar consulta como

 ...

 // Call the AEM GraphQL persisted query named "wknd-shared/adventure-details-by-slug" with parameters
 response = await fetchPersistedQuery(
 "wknd-shared/adventure-details-by-slug",
 queryParameters
 );

 ...

Exibir informações adicionais

1. Para exibir informações adicionais sobre aventura, abra src/components/AdventureDetail.js

2. Localize a função AdventureDetailRender(..) e atualizar função de retorno como

   ...
   
   return (<>
       <h1 className="adventure-detail-title">{title}</h1>
       <div className="adventure-detail-info">
   
           <LocationInfo {...location} />
   
           ...
   
           <Location {...location} />
   
           <Administrator {...administrator} />
   
           <InstructorTeam {...instructorTeam} />
   
       </div>
   </>);
   
   ...
   

3. Defina também as funções de renderização correspondentes:

   LocationInfo

   function LocationInfo({name}) {
   
       if (!name) {
           return null;
       }
   
       return (
           <>
               <div className="adventure-detail-info-label">Location</div>
               <div className="adventure-detail-info-description">{name}</div>
           </>
       );
   
   }
   

   Local

   function Location({ contactInfo }) {
   
       if (!contactInfo) {
           return null;
       }
   
       return (
           <>
               <div className='adventure-detail-location'>
                   <h2>Where we meet</h2>
                   <hr />
                   <div className="adventure-detail-addtional-info">Phone:{contactInfo.phone}</div>
                   <div className="adventure-detail-addtional-info">Email:{contactInfo.email}</div>
               </div>
           </>);
   }
   

   InstructorTeam

   function InstructorTeam({ _metadata }) {
   
       if (!_metadata) {
           return null;
       }
   
       return (
           <>
               <div className='adventure-detail-team'>
                   <h2>Instruction Team</h2>
                   <hr />
                   <div className="adventure-detail-addtional-info">Team Name: {_metadata.stringMetadata[0].value}</div>
               </div>
           </>);
   }
   

   Administrador

   function Administrator({ fullName, contactInfo }) {
   
       if (!fullName || !contactInfo) {
           return null;
       }
   
       return (
           <>
               <div className='adventure-detail-administrator'>
                   <h2>Administrator</h2>
                   <hr />
                   <div className="adventure-detail-addtional-info">Name: {fullName}</div>
                   <div className="adventure-detail-addtional-info">Phone: {contactInfo.phone}</div>
                   <div className="adventure-detail-addtional-info">Email: {contactInfo.email}</div>
               </div>
           </>);
   }
   

Definir novos estilos

1. Abertura src/components/AdventureDetail.scss e adicione as seguintes definições de classe

   .adventure-detail-administrator,
   .adventure-detail-team,
   .adventure-detail-location {
   margin-top: 1em;
   width: 100%;
   float: right;
   }
   
   .adventure-detail-addtional-info {
   padding: 10px 0px 5px 0px;
   text-transform: uppercase;
   }
   

Depois de concluir as melhorias acima, o aplicativo WKND se parece com o mostrado abaixo e as ferramentas do desenvolvedor do navegador são exibidas adventure-details-by-slug chamada de consulta persistente.

Desafio de aprimoramento (opcional)

A visualização principal do aplicativo WKND React permite filtrar essas Aventuras com base no tipo de atividade, como Acampamento, Ciclismo. No entanto, a equipe de negócios da WKND deseja ter uma Localização recurso de filtragem baseado em. Os requisitos são

• Na visualização principal do aplicativo WKND, no canto superior esquerdo ou direito, adicione Localização ícone de filtragem.
• Clicando Localização o ícone de filtragem deve exibir a lista de locais.
• Clicar em uma opção de localização desejada na lista só deve mostrar Aventuras correspondentes.
• Se houver apenas uma Aventura correspondente, a exibição Detalhes da Aventura será exibida.

Parabéns

Parabéns! Agora você concluiu a integração e a implementação das consultas persistentes no aplicativo WKND de amostra.