DocumentaçãoAEMTutoriais do AEMTutorial do AEM Headless

Integração de aplicativos cliente

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
  • undefined

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 componentes React existentes. 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 prerequisites

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ê tenha publicado o seguinte no serviço de publicação AEM.

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

As capturas de tela do IDE neste capítulo vêm do Visual Studio Code

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

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 foram concluídos.

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

Objetivos objectives

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

Clonar e executar o aplicativo cliente de amostra clone-client-app

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

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

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

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

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

    code language-plain 
    # 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=

    Ambiente de desenvolvimento do aplicativo React

    note note
    NOTE
    As instruções acima são para conectar o aplicativo React ao serviço de Publish do AEM. No entanto, para se conectar ao serviço de Autor do AEM, obtenha um token de desenvolvimento local para o ambiente de destino do AEM as a Cloud Service.
    Também é possível conectar o aplicativo a uma instância de Autor local usando o SDK do AEMaaCS com autenticação básica.

  3. Abra um terminal e execute os comandos:

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

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

  5. Toque em Camping > Yosemite Backpacking para exibir os detalhes da aventura do Yosemite Backpacking.

    Tela de Mochila de Yosemite

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

    POST GraphQL

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

IMPORTANT
Se você estiver se perguntando por que a solicitação da API do GraphQL é feita contra o http://localhost:3000 e NÃO contra o domínio AEM do Publish Service, revise Por baixo da tampa no Tutorial básico.

Revise o código

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

Revisar Componente de Reação Adventures

A exibiçã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 Camping, Cycling. Esta exibição é renderizada pelo componente Adventures. Abaixo estão os principais detalhes de implementação:

  • O src/components/Adventures.js chama o gancho useAllAdventures(adventureActivity) e aqui o argumento adventureActivity é o tipo de atividade.

  • O gancho useAllAdventures(adventureActivity) está definido no arquivo src/api/usePersistedQueries.js. Com base no valor adventureActivity, ele determina qual consulta persistente chamar. Se não for um valor nulo, ele chamará wknd-shared/adventures-by-activity; caso contrário, obterá todas as aventuras disponíveis wknd-shared/adventures-all.

  • O gancho usa a função principal fetchPersistedQuery(..) que delega a execução da consulta para 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 os componentes da exibição do React Adventures sejam agnósticos das estruturas JSON principais.

  • Após a execução bem-sucedida da consulta, a função de renderização AdventureListItem(..) de Adventures.js adiciona o elemento HTML para exibir as informações Image, Trip Length, Price e Title.

Revisar Componente de Reação AdventureDetail

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

  • O src/components/AdventureDetail.js chama o gancho useAdventureBySlug(slug) e aqui o argumento slug é o parâmetro de consulta.

  • Como acima, o gancho useAdventureBySlug(slug) é definido no arquivo src/api/usePersistedQueries.js. Ele chama a consulta persistente wknd-shared/adventure-by-slug delegando a AEMHeadless via aemHeadlessClient.js.

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

Aprimorar o código

Usar consulta persistente adventure-details-by-slug

No capítulo anterior, criamos a consulta persistente adventure-details-by-slug. Ela fornece informações adicionais do Adventure, como local, professorEquipe e administrador. Vamos substituir adventure-by-slug por 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 atualize a 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 atualize a função de retorno como

    code language-javascript 
    ...

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:

    InfoLocal

    code language-javascript 
    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

    code language-javascript 
    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>
        </>);
}

    EquipeInstrutora

    code language-javascript 
    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

    code language-javascript 
    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. Abrir src/components/AdventureDetail.scss e adicionar as seguintes definições de classe

    code language-css 
    .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;
}
TIP
Os arquivos atualizados estão disponíveis no projeto WKND do AEM Guides - GraphQL, consulte a seção Tutorial avançado.

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

APLICATIVO WKND aprimorado

Desafio de aprimoramento (opcional)

A exibiçã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 um recurso de filtragem adicional baseado em Local. Os requisitos são

  • Na exibição principal do Aplicativo WKND, no canto superior esquerdo ou direito, adicione o ícone de filtragem Local.
  • Clicar no ícone de filtragem Local deve exibir uma 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.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4