Ce tutoriel complet poursuit la tutoriel de base qui couvrait les principes de base d’Adobe Experience Manager (AEM) Headless et GraphQL. Le tutoriel avancé illustre des aspects détaillés de l’utilisation des modèles de fragment de contenu, des fragments de contenu et des requêtes persistantes GraphQL AEM, y compris l’utilisation des requêtes persistantes GraphQL dans une application cliente.
Procédez comme suit : configuration rapide pour AEM as a Cloud Service pour configurer votre environnement as a Cloud Service AEM.
Il est vivement recommandé d’effectuer la tutoriel de base et série vidéo tutoriels avant de poursuivre ce tutoriel avancé. Bien que vous puissiez suivre le tutoriel à l’aide d’un environnement d’AEM local, ce tutoriel ne couvre que le processus pour AEM as a Cloud Service.
Si vous n’avez pas accès à AEM environnement as a Cloud Service, vous pouvez effectuer les opérations suivantes : AEM Configuration rapide sans affichage à l’aide du SDK local. Toutefois, il est important de noter que certaines pages de l’interface utilisateur de produit, telles que la navigation Fragments de contenu, sont différentes.
Ce tutoriel couvre les rubriques suivantes :
La vidéo suivante présente un aperçu général des concepts abordés dans ce tutoriel. Le tutoriel comprend la définition de modèles de fragment de contenu avec des types de données plus avancés, l’imbrication de fragments de contenu et la persistance de requêtes GraphQL dans AEM.
Cette vidéo (à 02h25) mentionne l’installation de l’éditeur de requêtes GraphiQL via Package Manager pour explorer les requêtes GraphQL. Cependant, dans les versions plus récentes d’AEM as Cloud Service, une version intégrée Explorateur GraphiQL est fournie, donc l’installation du package n’est pas requise. Voir Utilisation de l’IDE GraphiQL pour plus d’informations.
Le projet de site WKND comporte toutes les configurations nécessaires pour que vous puissiez commencer le tutoriel juste après avoir terminé la configuration rapide. Cette section ne met en évidence que certaines étapes importantes que vous pouvez utiliser lors de la création de votre propre projet AEM sans affichage.
La première étape pour démarrer un nouveau projet dans AEM consiste à créer sa configuration en tant qu’espace de travail et à créer des points d’entrée API GraphQL. Pour vérifier ou créer une configuration, accédez à Outils > Général > Explorateur de configuration.
Observez que WKND Shared
la configuration du site a déjà été créée pour le tutoriel. Pour créer une configuration pour votre propre projet, sélectionnez Créer dans le coin supérieur droit et remplissez le formulaire dans le modal Créer une configuration qui s’affiche.
Ensuite, vous devez configurer les points d’entrée API pour envoyer des requêtes GraphQL à . Pour passer en revue les points de fin existants ou en créer un, accédez à Outils > Général > GraphQL.
Observez que WKND Shared Endpoint
a déjà été créé. Pour créer un point de fin pour votre projet, sélectionnez Créer dans le coin supérieur droit et suivez le processus.
Après avoir enregistré le point de terminaison, un modal s’affiche pour vous rendre dans la console de sécurité, ce qui vous permet d’ajuster les paramètres de sécurité si vous souhaitez configurer l’accès au point de terminaison. Toutefois, les autorisations de sécurité elles-mêmes ne font pas partie de ce tutoriel. Pour plus d’informations, reportez-vous à la section Documentation AEM.
Une structure de contenu bien définie est essentielle au succès de AEM mise en oeuvre sans interface. Il s’avère utile pour la gestion de l’évolutivité, de la convivialité et des autorisations de votre contenu.
Un dossier racine de langue est un dossier dont le nom contient un code de langue ISO, tel que EN ou FR. Le système de gestion des traductions AEM utilise ces dossiers pour définir la Principale langue de votre contenu et les langues de traduction du contenu.
Accédez à Navigation > Ressources > Fichiers.
Accédez au WKND partagé dossier. Observez le dossier avec le titre "Anglais" et le nom "EN". Ce dossier est le dossier racine de langue du projet WKND Site.
Pour votre propre projet, créez un dossier racine de langue dans votre configuration. Voir la section sur création de dossiers pour plus d’informations.
Enfin, vous devez affecter la configuration de votre projet au dossier racine de langue. Cette affectation permet la création de fragments de contenu en fonction de modèles de fragments de contenu définis dans la configuration de votre projet.
Pour attribuer le dossier racine de langue à la configuration, sélectionnez le dossier, puis sélectionnez Propriétés dans la barre de navigation supérieure.
Ensuite, accédez au Cloud Services et sélectionnez l’icône de dossier dans la Configuration du cloud champ .
Dans le modal qui s’affiche, sélectionnez la configuration précédemment créée pour lui affecter le dossier racine de langue.
Voici les bonnes pratiques à appliquer lors de la création de votre propre projet dans AEM :
Deux AEM packages sont disponibles et peuvent être installées via Gestionnaire de modules
Le React App - Tutoriel avancé - WKND Adventures Vous pouvez consulter et explorer l’exemple d’application. Cet exemple d’application récupère le contenu d’AEM en appelant les requêtes GraphQL persistantes et le rend dans une expérience immersive.
Pour commencer à utiliser ce tutoriel avancé, procédez comme suit :