APIs AEM Headless e React
Bem-vindo a este capítulo de tutorial, onde exploraremos a configuração de um aplicativo React para se conectar com APIs headless do Adobe Experience Manager (AEM) usando o SDK headless do AEM. Abordaremos a recuperação de dados do Fragmento de conteúdo de APIs do AEM GraphQL e sua exibição no aplicativo React.
As APIs do AEM Headless permitem acessar conteúdo do AEM de qualquer aplicativo cliente. Vamos orientá-lo na configuração do aplicativo React para se conectar a APIs AEM headless usando o SDK AEM headless. Essa configuração estabelece um canal de comunicação reutilizável entre seu aplicativo React e o AEM.
Em seguida, usaremos o SDK AEM Headless para recuperar dados do Fragmento de conteúdo de APIs do AEM GraphQL. Fragmentos de conteúdo no AEM fornecem gerenciamento de conteúdo estruturado. Ao usar o SDK do AEM headless, é possível consultar e buscar facilmente dados do fragmento de conteúdo usando o GraphQL.
Depois que tivermos os dados do fragmento de conteúdo, nós os integraremos ao seu aplicativo React. Você aprenderá a formatar e exibir os dados de maneira atraente. Abordaremos as práticas recomendadas para manipular e renderizar dados do Fragmento de conteúdo em componentes React, garantindo uma integração perfeita com a interface do usuário do seu aplicativo.
Ao longo do tutorial, forneceremos explicações, exemplos de código e dicas práticas. Ao final, você poderá configurar seu aplicativo React para se conectar a APIs AEM Headless, recuperar dados do fragmento de conteúdo usando o SDK AEM Headless e exibi-los facilmente no aplicativo React. Vamos começar!
Clonar o aplicativo React
-
Clonar o aplicativo de Github executando o seguinte comando na linha de comando.
code language-none $ git clone git@github.com:lamontacrook/headless-first.git
-
Altere para
headless-first
e instale as dependências.code language-none $ cd headless-first $ npm ci
Configurar o aplicativo React
-
Crie um arquivo chamado
.env
na raiz do projeto. Entrada.env
defina os seguintes valores:code language-none REACT_APP_AEM=<URL of the AEM instance> REACT_APP_ENDPOINT=<the name of the endpoint> REACT_APP_PROJECT=<the name of the folder with Content Fragments> REACT_APP_TOKEN=<developer token>
-
Você pode recuperar um token de desenvolvedor no Cloud Manager. Efetue logon no Adobe Cloud Manager. Clique em Experience Manager > Cloud Manager. Escolha o Programa apropriado e clique nas reticências ao lado do Ambiente.
- Clique em Integrações guia
- Clique em Guia Token local e obter token de desenvolvimento local botão
- Copie o token de acesso começando após a cotação aberta e até antes da cotação fechada.
- Cole o token copiado como o valor de
REACT_APP_TOKEN
no.env
arquivo. - Agora vamos criar o aplicativo executando
npm ci
na linha de comando. - Agora inicie o aplicativo React e execute
npm run start
na linha de comando. - Entrada ./src/utils um arquivo chamado
context.js
inclui o código para definir os valores na variável.env
no contexto do aplicativo.
Executar o aplicativo React
-
Inicie o aplicativo React executando
npm run start
na linha de comando.code language-none $ npm run start
O aplicativo React será iniciado e abrirá uma janela do navegador para
http://localhost:3000
. As alterações no aplicativo React serão recarregadas automaticamente no navegador.
Conexão com APIs AEM Headless
-
Para conectar o aplicativo React ao AEM as a Cloud Service, vamos adicionar algumas coisas a
App.js
. NoReact
importar, adicionaruseContext
.code language-javascript import React, {useContext} from 'react';
Importar
AppContext
docontext.js
arquivo.code language-javascript import { AppContext } from './utils/context';
Agora, no código do aplicativo, defina uma variável de contexto.
code language-javascript const context = useContext(AppContext);
E, por fim, inclua o código de retorno em
<AppContext.Provider> ... </AppContext.Provider>
.code language-javascript ... return(<div className='App'> <AppContext.Provider value={context}> ... </AppContext.Provider> </div>);
A título de referência,
App.js
Agora deve ser assim.code language-javascript import React, {useContext} from 'react'; import './App.css'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Home from './screens/home/home'; import { AppContext } from './utils/context'; const App = () => { const context = useContext(AppContext); return ( <div className='App'> <AppContext.Provider value={context}> <BrowserRouter> <Routes> <Route exact={true} path={'/'} element={<Home />} /> </Routes> </BrowserRouter> </AppContext.Provider> </div> ); }; export default App;
-
Importe o
AEMHeadless
SDK. Este SDK é uma biblioteca auxiliar usada pelo aplicativo para interagir com APIs AEM Headless.Adicione esta declaração de importação à
home.js
.code language-javascript import AEMHeadless from '@adobe/aem-headless-client-js';
Adicione o seguinte
{ useContext, useEffect, useState }
para oReact
declaração de importação.code language-javascript import React, { useContext, useEffect, useState } from 'react';
Importe o
AppContext
.code language-javascript import { AppContext } from '../../utils/context';
Dentro do
Home
componente, obtenha ocontext
variável doAppContext
.code language-javascript const Home = () => { const context = useContext(AppContext); ... }
-
Inicialize o SDK do AEM Headless em um
useEffect()
, já que o SDK AEM Headless deve ser alterado quando a variávelcontext
alterações na variável.code language-javascript useEffect(() => { const sdk = new AEMHeadless({ serviceURL: context.url, endpoint: context.endpoint, auth: context.token }); }, [context]);
note note NOTE Existe uma context.js
arquivo em/utils
que está lendo elementos do.env
arquivo. A título de referência,context.url
é o URL do ambiente as a Cloud Service AEM. A variávelcontext.endpoint
é o caminho completo para o endpoint criado na lição anterior. Por último, acontext.token
é o token do desenvolvedor. -
Crie o estado React que expõe o conteúdo proveniente do SDK AEM Headless.
code language-javascript const Home = () => { const [content, setContent] = useState({}); ... }
-
Conecte o aplicativo ao AEM. Use a consulta persistente criada na lição anterior. Vamos adicionar o seguinte código à
useEffect
após o SDK AEM headless ser inicializado. Faça com que ouseEffect
dependente docontext
como visto abaixo.code language-javascript useEffect(() => { ... sdk.runPersistedQuery('<name of the endpoint>/<name of the persisted query>', { path: `/content/dam/${context.project}/<name of the teaser fragment>` }) .then(({ data }) => { if (data) { setContent(data); } }) .catch((error) => { console.log(`Error with pure-headless/teaser. ${error.message}`); }); }, [context]);
-
Abra a exibição de rede das ferramentas do desenvolvedor para revisar a solicitação do GraphQL.
<url to environment>/graphql/execute.json/pure-headless/teaser%3Bpath%3D%2Fcontent%2Fdam%2Fpure-headless%2Fhero
O SDK do AEM Headless codifica a solicitação do GraphQL e adiciona os parâmetros fornecidos. Você pode abrir a solicitação no navegador.
note note NOTE Como a solicitação vai para o ambiente de autor, é necessário fazer logon no ambiente em outra guia do mesmo navegador.
Renderizar conteúdo do fragmento de conteúdo
-
Exiba os fragmentos de conteúdo no aplicativo. Retornar um
<div>
com o título do teaser.code language-javascript return ( <div className='main-body'> <div>{content.component && (content.component.item.title)}</div> </div> );
Você deve ver o campo de título do teaser exibido na tela.
-
A última etapa é adicionar o teaser à página. Um componente de teaser do React é incluído no pacote. Primeiro, vamos incluir a importação. Na parte superior do
home.js
adicione a linha:import Teaser from '../../components/teaser/teaser';
Atualize a declaração de devolução:
code language-javascript return ( <div className='main-body'> <div>{content.component && <Teaser content={content.component.item} />}</div> </div> );
Agora você deve ver o teaser com o conteúdo incluído no fragmento.
Próximas etapas
Parabéns! Você atualizou com sucesso o aplicativo React para integrar com APIs AEM Headless usando o SDK AEM Headless!
Em seguida, vamos criar um componente de Lista de imagens mais complexo que renderiza dinamicamente fragmentos de conteúdo referenciados do AEM.
Próximo capítulo: Criar um componente de lista de imagens