Tutoriel de développement : création d’une navigation partagée avec l’aide d’AEM Content Services

Dans partie 1 de cette série, j’ai parcouru la configuration d’un composant de navigation simple (HTL). Le modèle de ce composant utilise un service pour fournir une liste d’éléments de lien de navigation. Cela fait que l’auteur n’a qu’à sélectionner un chemin de départ, sans avoir à ajouter chaque lien manuellement. De plus, nous avons configuré le composant de sorte que lors de l’enregistrement de la boîte de dialogue, un servlet soit invoqué pour écrire les liens de navigation générés vers un fragment de contenu (avec d’autres champs créés).

Ici, dans la partie 2, nous sortirons d’AEM et verrons comment nous pouvons utiliser ce fragment de contenu dans un composant de navigation React. L’objectif est d’avoir des éléments de navigation partagés entre le site AEM et l’application React.

Vous pouvez trouver le code du projet ici.

Configuration du projet React

Il s’agit d’une application NodeJS, elle doit donc être installée avec NPM (au moins la version 5.2.0 ou plus récente). Je voulais que ce soit une configuration minimale, donc npx a été utilisé pour créer le projet car il est maintenant fourni avec npm. S’il s’agissait d’un projet destiné à la production, je conseillerais de le configurer en utilisant vite (un outil de construction de premier choix pour React et d’autres projets basés sur un framework associés).

Avec NodeJS et NPM disponibles, les éléments suivants doivent être exécutés à partir d’un terminal/CLI :

npx create-react-app aem-navigation-app
cd aem-navigation-app

Axios est utilisé pour récupérer le contenu de navigation sans tête d’AEM. J’utiliserais généralement la fonction de récupération intégrée pour cela, mais Axios présente certains avantages pour le cas d’utilisation, à savoir sa conversion automatique des données en JSON et un objet de réponse plus simple. React-router-dom est utilisé pour afficher la réponse sous forme de liens. React-router-dom et Axios ont été installés au sein du projet via :

npm –i -S react-router-dom axios

Examinons l’application et le composant de navigation, fichier par fichier.

Code de réaction

Construire le composant

Index.html

Lorsque le projet est initialisé, l’identifiant dans le conteneur div de l’application est « root ». C’est trop générique à mon goût. Il a été remplacé par « nav-conteneur ».

<div id="nav-container"></div>

La valeur de la balise de titre a également été modifiée. Si vous créez ceci, vous souhaiterez peut-être modifier les balises méta et d’autres éléments.

Index.js

La modification de l’identifiant dans le HTML nécessite des modifications correspondantes dans le script d’index. J’ai changé les références de la racine au conteneur. Il est important de noter que la valeur dans document.getElementById est « nav-container ».

const container = ReactDOM.createRoot(document.getElementById('nav-container')); 

container.render( 

  <React.StrictMode> 

    <App /> 

  </React.StrictMode> 

);

Client.js

Les données des services de contenu AEM sont accessibles par plusieurs composants. Il est idéal de placer le code de requête dans une fonction utilitaire dédiée.

Un dossier a été créé à la racine du projet appelé « utils », dans ce dossier le client.js Le fichier contient une fonction permettant d’effectuer des appels vers AEM. Il accepte 3 paramètres, un point de terminaison, tous les en-têtes qui doivent être transmis et un booléen indiquant si la demande inclut ou non des informations d’identification.

import axios from 'axios'; 

 

export async function getTheData(endpoint, customHeaders = {}, credentials) { 

    try { 

            const response = await axios.get(endpoint, { 

                headers: { 

                    ...customHeaders, 

                }, 

                withCredentials: credentials, 

            }); 

            return response.data; 

        } catch (error) { 

             throw new Error(`Client could not retrieve data: ${error.message}`); 

    } 

}

Le point de terminaison transmis à cette fonction pointe vers un GraphQL requête persistante, stocké (mis en cache) dans AEM (http://localhost:4502/graphql/execute.json/perficientpocs/get-logo-et-nav-liens). Ceci suit la meilleure pratique de stockage et d’exécution GraphQL requêtes côté service. L’application client simpleoui fait une demande pour le contenu. Voici la requête :

{      

navigationCfModelList(filter: {_variation: {_expressions: [{value: "master", _ignoreCase: true}]}})  

{ 

items { 

brandLogo { 

                ... on ImageRef { 

                    _path 

                 } 

            } 

                generatedNavigationList 

    } 

} 

}

Un en-tête d’authentification est également transmis à la fonction getTheData. Cet en-tête ne devrait pas être nécessaire pour le contenu exposé publiquement via les couches répartiteur et CDN. Cela n’est nécessaire que pour cet exemple d’application.

Navigation.js

Un dossier a été créé à la racine du projet appelé « composants ». Dans ce dossier, le Navigation.js Le fichier contient le composant de navigation. Cela exploite le utiliserÉtat et utiliserEffet des hooks pour définir les variables d’état liées à la requête AEM et configurer cette requête.

Il utilise la fonction utilitaire dans client.js ci-dessus, puis restitue la réponse en mappant les éléments de navigation de la réponse JSON aux éléments de liste :

const result = await getTheData(endpoint, headers, true); 

 

…{data.data.navigationCfModelList.items[0].generatedNavigationList.map((item) => ( 

     <li className="app-menu-item" key={item.id}> 

<Link to={item.path} className="app-menu-link" style={{ textDecoration: 'none' }}>{item.title}</Link> 

     </li> 

 ))}

Notez que cela utilise des éléments React Router Link au lieu d’éléments d’ancrage.

Avec les liens de navigation, le logo est récupéré de la réponse du service AEM et affiché dans l’en-tête de l’application.

App.js

Tout est réuni dans le script principal de l’application. Le composant Navigation est inclus et les liens partagés sont affichés à côté spécifique à l’application ceux-là :

<Router>     

          <header> 

            <Navigation /> 

          </header> 

      </Router>

Autres fichiers

J’ai ajouté un composant CSS et un composant Article juste pour ajouter un exemple de contenu à notre application.

Application React rendue

Voici à quoi ressemble l’application dans mon instance locale :

Si vous lisez la première partie de cette série, cela devrait vous sembler familier. Comme mentionné, l’application utilise le même logo que le composant de navigation du site AEM. Vérifiez également que les éléments de navigation partagés sont disponibles en fonction des liens spécifiques à l’application :

Lorsque le logo ou l’un des liens de page est mis à jour dans AEM et publié, si la navigation composant est également mis à jour et publié, la navigation de l’application composant est mis à jour automatiquement :

Considérations sur les gains et l’API

Avec cette configuration, les éléments suivants ont été obtenus.

1. Le contenu AEM est utilisé sur tous les canaux
2. Une image de marque cohérente est maintenue sur l’ensemble du site Web et de l’application.
3. Les éléments spécifiques à l’application sont rendus de manière cohérente avec les éléments partagés

Une grande partie du travail d’activation du service AEM est effectuée pour nous, via la sérialisation JSON prête à l’emploi.

Toute bonne API de service fournit un contrat stable indiquant comment elle doit être utilisée et comment le contenu doit être demandé. Ceci est important à prendre en compte lors de la création de modèles de fragments de contenu.

Pour un projet comme celui de cette série, la modification ultérieure des structures du modèle de fragment peut interrompre le contenu existant dans les canaux de consommation, car la réponse du service JSON changerait également. C’est pour cette raison qu’il convient de réfléchir attentivement tôt dans un projet à l’état souhaité de son architecture d’information.

Prenez le temps de créer des modèles de contenu et des schémas basés sur ceux-ci avant de les implémenter dans des composants. Cela favorisera un projet meilleur, bien planifié et exécuté.

Pensées finales

Ceci conclut la série sur la navigation partagée. Mon objectif était de mettre en évidence la puissance des services de contenu AEM de manière pratique. J’espère que cela a été inspirant et a suscité des idées sur la façon de partager du contenu sur plusieurs canaux. Je vous encourage à partager ces idées dans les commentaires !