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

  1. 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
    
  2. Passez au référentiel headless-first et installez les dépendances.

    code language-none
    $ cd headless-first
    $ npm ci
    

Configurer l’application React

  1. 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>
    
  2. 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.

    AEM Developer Console.

    1. Cliquez sur l’onglet Intégrations.
    2. Cliquez sur l’onglet Jeton local et sur le bouton Obtenir un jeton de développement local.
    3. Copiez le jeton d’accès contenu entre les guillemets.
    4. Collez le jeton copié comme valeur pour REACT_APP_TOKEN dans le fichier .env.
    5. Créons maintenant l’application en exécutant npm ci sur la ligne de commande.
    6. Démarrez l’application React en exécutant npm run start sur la ligne de commande.
    7. 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

  1. 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

  1. Pour connecter l’application React à AEM as a Cloud Service, ajoutons quelques éléments à App.js. Dans l’import React, ajoutez useContext.

    code language-javascript
    import React, {useContext} from 'react';
    

    Importez AppContext depuis le fichier context.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;
    
  2. 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’import React.

    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 variable context à partir du AppContext.

    code language-javascript
    const Home = () => {
    const context = useContext(AppContext);
    ...
    }
    
  3. Initialisez le SDK AEM Headless dans un élément useEffect(), puisque le SDK AEM Headless doit changer lorsque la variable context 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. Le context.endpoint est le chemin d’accès complet au point d’entrée créé dans la leçon précédente. Enfin, le context.token est le jeton de développement.
  4. Créez un état React qui expose le contenu provenant du SDK AEM Headless.

    code language-javascript
    const Home = () => {
    const [content, setContent] = useState({});
    ...
    }
    
  5. 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ément useEffect dépende de la variable context 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]);
    
  6. 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

    Outils de développement Chrome.

    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

  1. 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.

  2. 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

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