APIs do AEM Headless e React

Clonar o aplicativo do Github executando o seguinte comando na linha de comando.

$ git clone git@github.com:lamontacrook/headless-first.git

Altere para o diretório headless-first e instale as dependências.

$ cd headless-first
$ npm ci

Crie um arquivo chamado .env na raiz do projeto. Em .env, defina os seguintes valores:

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. Faça logon no Adobe Cloud Manager. Clique em Experience Manager > Cloud Manager. Escolha o Programa apropriado e clique nas reticências ao lado do Ambiente.

1. Clique na guia Integrações
2. Clique na guia Token local e no botão Obter token de desenvolvimento local
3. Copie o token de acesso começando após a cotação aberta e até antes da cotação fechada.
4. Cole o token copiado como o valor de REACT_APP_TOKEN no arquivo .env.
5. Agora vamos criar o aplicativo executando npm ci na linha de comando.
6. Agora inicie o aplicativo React e execute npm run start na linha de comando.
7. Em ./src/utils um arquivo chamado context.js inclui o código para definir os valores no arquivo .env no contexto do aplicativo.

Inicie o aplicativo React executando npm run start na linha de comando.

$ npm run start

O aplicativo React iniciará e abrirá uma janela do navegador para http://localhost:3000. As alterações no aplicativo React serão recarregadas automaticamente no navegador.

Para conectar o aplicativo React ao AEM as a Cloud Service, vamos adicionar algumas coisas a App.js. Na importação de React, adicione useContext.

import React, {useContext} from 'react';

Importar AppContext do arquivo context.js.

import { AppContext } from './utils/context';

Agora, no código do aplicativo, defina uma variável de contexto.

const context = useContext(AppContext);

E, por fim, envolva o código de retorno em <AppContext.Provider> ... </AppContext.Provider>.

...
return(<div className='App'>
    <AppContext.Provider value={context}>
        ...
    </AppContext.Provider>
</div>);

Para referência, o App.js agora deve ser assim.

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 SDK AEMHeadless. Esta SDK é uma biblioteca auxiliar usada pelo aplicativo para interagir com as APIs headless do AEM.

Adicionar esta instrução de importação ao home.js.

import AEMHeadless from '@adobe/aem-headless-client-js';

Adicione o seguinte { useContext, useEffect, useState } à instrução de importação React.

import React, { useContext, useEffect, useState } from 'react';

Importe o AppContext.

import { AppContext } from '../../utils/context';

Dentro do componente Home, obtenha a variável context de AppContext.

const Home = () => {
const context = useContext(AppContext);
...
}

Inicialize o AEM Headless SDK dentro de um useEffect(), já que o AEM Headless SDK deve ser alterado quando a variável context for alterada.

useEffect(() => {
const sdk = new AEMHeadless({
    serviceURL: context.url,
    endpoint: context.endpoint,
    auth: context.token
});
}, [context]);

Crie o estado React que expõe o conteúdo proveniente do AEM Headless SDK.

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 dentro do useEffect depois que o AEM Headless SDK for inicializado. Torne useEffect dependente da variável context, como visto abaixo.

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 AEM Headless SDK codifica a solicitação do GraphQL e adiciona os parâmetros fornecidos. Você pode abrir a solicitação no navegador.

Exiba os fragmentos de conteúdo no aplicativo. Retorne um <div> com o título do teaser.

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 arquivo home.js, adicione a linha:

import Teaser from '../../components/teaser/teaser';

Atualize a declaração de devolução:

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.