API AEM headless e React

Clona l'app da Github eseguendo il comando seguente sulla riga di comando.

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

Passare alla directory headless-first e installare le dipendenze.

$ cd headless-first
$ npm ci

Creare un file denominato .env nella directory principale del progetto. In .env impostare i seguenti valori:

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>

Puoi recuperare un token sviluppatore in Cloud Manager. Accedi a Adobe Cloud Manager. Fare clic su Experience Manager > Cloud Manager. Scegli il programma appropriato, quindi fai clic sui puntini di sospensione accanto all’ambiente.

1. Fai clic sulla scheda Integrazioni
2. Fai clic sulla scheda Token locale e sul pulsante Ottieni token di sviluppo locale ____
3. Copia il token di accesso che inizia dopo la virgoletta aperta fino a prima della virgoletta di chiusura.
4. Incolla il token copiato come valore per REACT_APP_TOKEN nel file .env.
5. Ora creiamo l'app eseguendo npm ci sulla riga di comando.
6. Avviare l'app React ed eseguire npm run start sulla riga di comando.
7. Tra ./src/utils un file denominato context.js include il codice per impostare i valori nel file .env nel contesto dell'app.

Avviare l'app React eseguendo npm run start sulla riga di comando.

$ npm run start

L'app React verrà avviata e aprirà una finestra del browser per http://localhost:3000. Le modifiche all’app React verranno ricaricate automaticamente nel browser.

Per collegare l'app React ad AEM as a Cloud Service, aggiungiamo alcuni elementi a App.js. Nell'importazione React, aggiungi useContext.

import React, {useContext} from 'react';

Importa AppContext dal file context.js.

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

Ora all’interno del codice dell’app, definisci una variabile di contesto.

const context = useContext(AppContext);

Infine, racchiudere il codice restituito in <AppContext.Provider> ... </AppContext.Provider>.

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

Per riferimento, App.js ora dovrebbe essere così.

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;

Importa il SDK AEMHeadless. Questa SDK è una libreria di supporto utilizzata dall’app per interagire con le API headless di AEM.

Aggiungi questa istruzione di importazione a home.js.

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

Aggiungi { useContext, useEffect, useState } seguente all'istruzione di importazione React.

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

Importa AppContext.

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

All'interno del componente Home, ottenere la variabile context da AppContext.

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

Inizializza AEM Headless SDK in un useEffect(), poiché AEM Headless SDK deve cambiare quando cambia la variabile context.

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

Creare uno stato di React che espone il contenuto proveniente da AEM Headless SDK.

const Home = () => {
const [content, setContent] = useState({});
...
}

Connetti l’app ad AEM. Utilizza la query persistente creata nella lezione precedente. Aggiungiamo il seguente codice in useEffect dopo l'inizializzazione di AEM Headless SDK. Rendi useEffect dipendente dalla variabile context, come illustrato di seguito.

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]);

Apri la vista Rete degli strumenti per sviluppatori per rivedere la richiesta GraphQL.

<url to environment>/graphql/execute.json/pure-headless/teaser%3Bpath%3D%2Fcontent%2Fdam%2Fpure-headless%2Fhero

AEM Headless SDK codifica la richiesta per GraphQL e aggiunge i parametri forniti. Puoi aprire la richiesta nel browser.

Visualizza i Frammenti di contenuto nell’app. Restituisce <div> con il titolo del teaser.

return (
<div className='main-body'>
    <div>{content.component && (content.component.item.title)}</div>
</div>
);

Sullo schermo dovrebbe essere visualizzato il campo del titolo del teaser.

L’ultimo passaggio consiste nell’aggiungere il teaser alla pagina. Il pacchetto include un componente teaser di React. Innanzitutto, includiamo l’importazione. Nella parte superiore del file home.js, aggiungi la riga:

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

Aggiornare l'istruzione return:

return (
<div className='main-body'>
    <div>{content.component && <Teaser content={content.component.item} />}</div>
</div>
);

Ora dovresti visualizzare il teaser con il contenuto incluso all’interno del frammento.