API AEM Headless et React
Bienvenue dans ce chapitre de tutoriel où nous allons explorer la configuration d’une application React pour établir une connexion avec les API Adobe Experience Manager (AEM) Headless à l’aide du SDK AEM Headless. Nous allons passer en revue la récupération des données de fragments de contenu des API GraphQL d’AEM et leur affichage dans l’application React.
Les API AEM Headless permettent d’accéder au contenu AEM à partir de n’importe quelle application cliente. Nous vous guiderons tout au long de la configuration de votre application React pour vous connecter aux API AEM Headless à l’aide du SDK AEM Headless. Cette configuration établit un canal de communication réutilisable entre votre application React et AEM.
Ensuite, nous utiliserons le SDK AEM Headless pour récupérer les données de fragments de contenu des API GraphQL d’AEM. Les fragments de contenu dans AEM fournissent une gestion de contenu structurée. En utilisant le SDK AEM Headless, vous pouvez facilement interroger et récupérer des données de fragments de contenu à l’aide de GraphQL.
Une fois que nous aurons les données de fragment de contenu, nous les intégrerons à votre application React. Vous apprendrez à formater et afficher les données de manière attrayante. Nous aborderons les bonnes pratiques relatives à la gestion et au rendu des données de fragments de contenu dans les composants React, afin d’assurer une intégration transparente à l’interface utilisateur de votre application.
Tout au long du tutoriel, nous vous proposons des explications, des exemples de code et des conseils pratiques. D’ici la fin, vous pourrez configurer votre application React pour vous connecter aux API AEM Headless, récupérer les données de fragments de contenu à l’aide du SDK AEM Headless et les afficher facilement dans votre application React. Commençons.
Cloner l’application React
-
Clonez l’application depuis Github en exécutant la commande suivante sur la ligne de commande.
code language-none $ git clone git@github.com:lamontacrook/headless-first.git
-
Passez au référentiel
headless-first
et installez les dépendances.code language-none $ cd headless-first $ npm ci
Configurer l’application React
-
Créez un fichier nommé
.env
à la racine du projet. Dans.env
, définissez les valeurs suivantes :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>
-
Vous pouvez récupérer un jeton de développement dans Cloud Manager. Connectez-vous à Adobe Cloud Manager. Cliquez sur Experience Manager > Cloud Manager. Sélectionnez le Programme approprié, puis cliquez sur les points de suspension à côté d’Environnement.
- Cliquez sur l’onglet Intégrations.
- Cliquez sur l’onglet Jeton local et sur le bouton Obtenir un jeton de développement local.
- Copiez le jeton d’accès contenu entre les guillemets.
- Collez le jeton copié comme valeur pour
REACT_APP_TOKEN
dans le fichier.env
. - Créons maintenant l’application en exécutant
npm ci
sur la ligne de commande. - Démarrez l’application React en exécutant
npm run start
sur la ligne de commande. - Dans ./src/utils, un fichier nommé
context.js
inclut le code permettant de définir les valeurs dans le fichier.env
dans le contexte de l’application.
Démarrer l’application React
-
Démarrez l’application React en exécutant
npm run start
sur la ligne de commande.code language-none $ npm run start
L’application React démarre et ouvre une fenêtre de navigateur pour
http://localhost:3000
. Les modifications apportées à l’application React seront automatiquement rechargées dans le navigateur.
Connexion aux API AEM Headless
-
Pour connecter l’application React à AEM as a Cloud Service, ajoutons quelques éléments à
App.js
. Dans l’importReact
, ajoutezuseContext
.code language-javascript import React, {useContext} from 'react';
Importez
AppContext
depuis le fichiercontext.js
.code language-javascript import { AppContext } from './utils/context';
Dans le code de l’application, définissez une variable contextuelle.
code language-javascript const context = useContext(AppContext);
Enfin, placez le code de retour dans
<AppContext.Provider> ... </AppContext.Provider>
.code language-javascript ... return(<div className='App'> <AppContext.Provider value={context}> ... </AppContext.Provider> </div>);
À titre de référence,
App.js
devrait désormais ressembler à ce qui suit.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;
-
Importez le SDK
AEMHeadless
. Ce SDK est une bibliothèque d’assistance utilisée par l’application pour interagir avec les API AEM Headless.Ajoutez cette instruction d’import à
home.js
.code language-javascript import AEMHeadless from '@adobe/aem-headless-client-js';
Ajoutez l’élément
{ useContext, useEffect, useState }
suivant à l’instruction d’importReact
.code language-javascript import React, { useContext, useEffect, useState } from 'react';
Importez le
AppContext
.code language-javascript import { AppContext } from '../../utils/context';
Dans le composant
Home
, obtenez la variablecontext
à partir duAppContext
.code language-javascript const Home = () => { const context = useContext(AppContext); ... }
-
Initialisez le SDK AEM Headless dans un élément
useEffect()
, puisque le SDK AEM Headless doit changer lorsque la variablecontext
change.code language-javascript useEffect(() => { const sdk = new AEMHeadless({ serviceURL: context.url, endpoint: context.endpoint, auth: context.token }); }, [context]);
note note NOTE Il existe un fichier context.js
sous/utils
qui lit des éléments du fichier.env
. À titre de référence, l’context.url
est l’URL de l’environnement AEM as a Cloud Service. Lecontext.endpoint
est le chemin d’accès complet au point d’entrée créé dans la leçon précédente. Enfin, lecontext.token
est le jeton de développement. -
Créez un état React qui expose le contenu provenant du SDK AEM Headless.
code language-javascript const Home = () => { const [content, setContent] = useState({}); ... }
-
Connectez l’application à AEM. Utilisez la requête persistante créée dans la leçon précédente. Ajoutez le code suivant dans l’élément
useEffect
une fois le SDK AEM Headless initialisé. Faites en sorte que l’élémentuseEffect
dépende de la variablecontext
comme illustré ci-dessous.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]);
-
Ouvrez la vue Réseau des outils de développement pour passer en revue la requête GraphQL.
<url to environment>/graphql/execute.json/pure-headless/teaser%3Bpath%3D%2Fcontent%2Fdam%2Fpure-headless%2Fhero
Le SDK AEM Headless code la requête pour GraphQL et ajoute les paramètres fournis. Vous pouvez ouvrir la requête dans le navigateur.
note note NOTE Puisque la demande est envoyée à l’environnement de création, vous devez disposer d’une connexion à l’environnement dans un autre onglet du même navigateur.
Rendre le contenu du fragment de contenu
-
Affichez les fragments de contenu dans l’application. Renvoyez un élément
<div>
avec le titre du teaser.code language-javascript return ( <div className='main-body'> <div>{content.component && (content.component.item.title)}</div> </div> );
Le champ Titre du teaser doit s’afficher à l’écran.
-
La dernière étape consiste à ajouter le teaser à la page. Un composant de teaser React est inclus dans le package. Tout d’abord, incluons l’import. En haut du fichier
home.js
, ajoutez la ligne :import Teaser from '../../components/teaser/teaser';
Mettez à jour l’instruction de retour :
code language-javascript return ( <div className='main-body'> <div>{content.component && <Teaser content={content.component.item} />}</div> </div> );
Vous devriez maintenant voir le teaser avec le contenu inclus dans le fragment.
Étapes suivantes
Félicitations. Vous avez correctement mis à jour l’application React afin de l’intégrer aux API AEM Headless à l’aide du SDK AEM Headless.
Créez ensuite un composant Liste d’images plus complexe qui effectue dynamiquement le rendu des fragments de contenu référencés à partir d’AEM.
Chapitre suivant : créer un composant Liste d’images