La configuration rapide AEM sans affichage vous permet d’utiliser AEM sans affichage à l’aide du contenu de l’exemple de projet de site WKND, ainsi qu’un exemple d’application React (a SPA) qui consomme le contenu via les API GraphQL sans affichage . Ce guide utilise la méthode AEM SDK as a Cloud Service.
Les outils suivants doivent être installés localement :
Cette configuration utilise la méthode AEM SDK as a Cloud Service pour explorer AEM API GraphQL. Cette section fournit un guide rapide pour l’installation du SDK AEM et son exécution en mode création. Un guide plus détaillé pour la configuration d’un environnement de développement local peut être consulté ici.
Il est également possible de suivre le tutoriel avec une AEM environnement as a Cloud Service. Des notes supplémentaires sur l’utilisation d’un environnement Cloud sont incluses tout au long du tutoriel.
Accédez au Portail de distribution de logiciels > AEM as a Cloud Service et télécharger la dernière version de la AEM SDK.
La fonctionnalité GraphQL est activée par défaut uniquement sur le SDK AEM à partir de la version 2021-02-04 ou ultérieure.
Décompressez le téléchargement et copiez le fichier JAR de démarrage rapide (aem-sdk-quickstart-XXX.jar
) à un dossier dédié, c’est-à-dire ~/aem-sdk/author
.
Renommez le fichier jar en aem-author-p4502.jar
.
Le author
name indique que le fichier Quickstart jar démarrera en mode création. Le p4502
indique que le serveur de démarrage rapide s’exécutera sur le port 4502.
Ouvrez une nouvelle fenêtre de terminal et accédez au dossier contenant le fichier jar. Exécutez la commande suivante pour installer et démarrer l’instance AEM :
$ cd ~/aem-sdk/author
$ java -jar aem-author-p4502.jar
Indiquez un mot de passe administrateur en tant que admin
. Tout mot de passe administrateur est acceptable, mais il est recommandé d’utiliser admin
pour le développement local afin de réduire la nécessité de reconfigurer.
Au bout de quelques minutes, l’installation de l’instance AEM se termine et une nouvelle fenêtre de navigateur doit s’ouvrir à l’adresse http://localhost:4502.
Connexion avec le nom d’utilisateur admin
et le mot de passe sélectionné lors AEM démarrage initial (généralement admin
).
Exemple de contenu à partir du Site de référence WKND sera installé pour accélérer le tutoriel. Le WKND est une marque fictive de style de vie, souvent utilisée conjointement avec la formation AEM.
Le site de référence WKND comprend les configurations nécessaires pour exposer une Point d’entrée GraphQL. Dans une mise en oeuvre concrète, suivez les étapes documentées pour inclure les points d’entrée GraphQL ; dans votre projet client. A CORS a également été compilé dans le cadre du site WKND. Une configuration CORS est nécessaire pour accorder l’accès à une application externe. Pour plus d’informations sur CORS Vous trouverez ci-dessous.
Téléchargez le dernier AEM compilé pour le site WKND : aem-guides-wknd.all-x.x.x.zip.
Veillez à télécharger la version standard compatible avec AEM as a Cloud Service et not la valeur classic
version.
Dans la AEM Accédez à Outils > Déploiement > Packages.
Cliquez sur Télécharger le module et sélectionnez le package WKND téléchargé à l’étape précédente. Cliquez sur Installer pour installer le package.
Dans la AEM Accédez à Ressources > Fichiers.
Cliquez sur les dossiers pour accéder à Site WKND > Anglais > Aventures.
Il s’agit d’un dossier de toutes les ressources qui composent les différentes aventures promues par la marque WKND. Cela inclut les types de médias traditionnels tels que les images et les vidéos, ainsi que les médias spécifiques aux AEM comme Fragments de contenu.
Cliquez dans le Ski descendant Wyoming et cliquez sur le bouton Fragment de contenu Wyoming pour le ski en descente carte :
L’interface utilisateur de l’éditeur de fragments de contenu s’ouvre pour l’aventure du ski descendant au Wyoming.
Observez que divers champs comme Titre, Description, et Activité définissez le fragment.
Fragments de contenu sont l’une des façons de gérer le contenu dans AEM. Les fragments de contenu sont un contenu réutilisable, indépendant de la présentation, composé d’éléments de données structurés tels que du texte, du texte enrichi, des dates ou des références à d’autres fragments de contenu. Les fragments de contenu seront détaillés plus loin dans le tutoriel.
Cliquez sur Annuler pour fermer le fragment. N’hésitez pas à naviguer dans certains des autres dossiers et à explorer les autres contenus Adventure.
Si vous utilisez un environnement de Cloud Service, consultez la documentation pour savoir comment déployer une base de code telle que le site de référence WKND vers un environnement de Cloud Service ;.
L’un des objectifs de ce tutoriel consiste à montrer comment utiliser AEM contenu d’une application externe à l’aide des API GraphQL. Ce tutoriel utilise un exemple d’application React partiellement terminé pour accélérer le tutoriel. Les mêmes leçons et concepts s’appliquent aux applications créées avec iOS, Android ou toute autre plateforme. L’application React est intentionnellement simple, afin d’éviter toute complexité inutile ; il ne s’agit pas d’une mise en oeuvre de référence.
Ouvrez une nouvelle fenêtre de terminal et clonez une branche de démarrage de tutoriel à l’aide de Git :
$ git clone --branch tutorial/react git@github.com:adobe/aem-guides-wknd-graphql.git
Dans l’IDE de votre choix, ouvrez le fichier . .env.development
at aem-guides-wknd-graphql/react-app/.env.development
. Vérifiez que la variable REACT_APP_AUTHORIZATION
n’est pas commentée et que le fichier ressemble à ce qui suit :
REACT_APP_HOST_URI=http://localhost:4502
REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
# Use Authorization when connecting to an AEM Author environment
REACT_APP_AUTHORIZATION=admin:admin
Assurez-vous que React_APP_HOST_URI
correspond à votre instance d’AEM locale. Dans ce chapitre, nous allons connecter l’application React directement à l’AEM Auteur environnement. Auteur Par défaut, les environnements nécessitent une authentification. Par conséquent, notre application se connectera en tant que admin
utilisateur. Il s’agit d’une pratique courante lors du développement, car elle nous permet d’apporter rapidement des modifications à l’environnement AEM et de les voir immédiatement répercutés dans l’application.
Dans un scénario de production, l’application se connecte à un AEM Publier environnement. Cela est décrit plus en détail dans la section Déploiement en production chapitre.
Accédez au aem-guides-wknd-graphql/react-app
dossier. Installez et démarrez l’application :
$ cd aem-guides-wknd-graphql/react-app
$ npm install
$ npm start
Une nouvelle fenêtre de navigateur doit automatiquement lancer l’application à l’adresse http://localhost:3000.
Une liste du contenu actuel de l'aventure depuis AEM doit s'afficher.
Cliquez sur l'une des images de l'aventure pour voir le détail de l'aventure. Une demande est faite pour AEM de renvoyer les détails d’une aventure.
Utilisez les outils de développement du navigateur pour inspecter la variable Réseau requêtes. Afficher la variable XHR requêtes et observez plusieurs requêtes de POST à /content/graphql/global/endpoint.json
, le point d’entrée GraphQL configuré pour AEM.
Vous pouvez également afficher les paramètres et la réponse JSON en examinant la requête réseau. Il peut s’avérer utile d’installer une extension de navigateur comme Inspecteur réseau GraphQL pour Chrome afin de mieux comprendre la requête et la réponse.
Maintenant que l’application React est en cours d’exécution, effectuez une mise à jour du contenu dans AEM et voyez la modification répercutée dans l’application.
Accédez à AEM http://localhost:4502.
Accédez à Ressources > Fichiers > Site WKND > Anglais > Aventures > Le camp de surf de Bali.
Cliquez dans le Le camp de surf de Bali fragment de contenu pour ouvrir l’éditeur de fragment de contenu.
Modifiez le Titre et le Description de l'aventure
Cliquez sur Enregistrer pour enregistrer les modifications.
Revenez à l’application React à l’adresse http://localhost:3000 et actualisez pour afficher vos modifications :
GraphiQL est un outil de développement qui n’est nécessaire que dans les environnements de niveau inférieur tels qu’une instance de développement ou locale. L’IDE GraphiQL vous permet de tester et d’affiner rapidement les requêtes et les données renvoyées. GraphiQL permet également d’accéder facilement à la documentation, ce qui facilite l’apprentissage et la compréhension des méthodes disponibles.
Accédez au Portail de distribution de logiciels > AEM as a Cloud Service.
Recherchez "GraphiQL" (veillez à inclure la variable i in GraphiQL.
Télécharger la dernière version Package de contenu GraphiQL v.x.x.x
Le fichier zip est un package AEM qui peut être installé directement.
Dans la AEM Accédez à Outils > Déploiement > Packages.
Cliquez sur Télécharger le module et sélectionnez le package téléchargé à l’étape précédente. Cliquez sur Installer pour installer le package.
Accédez à l’IDE GraphiQL à l’adresse http://localhost:4502/content/graphiql.html et commencez à explorer les API GraphQL.
L’outil GraphiQL et l’API GraphQL sont exploré plus en détail plus loin dans le tutoriel.
Félicitations, vous disposez désormais d’une application externe qui consomme AEM contenu avec GraphQL. N’hésitez pas à examiner le code dans l’application React et à continuer à essayer de modifier les fragments de contenu existants.
AEM, étant sécurisé par défaut, bloque les demandes d’origine croisée, empêchant les applications non autorisées de se connecter à son contenu et de le faire apparaître.
Pour permettre à l’application React de ce tutoriel d’interagir avec les points d’entrée de l’API GraphQL AEM, une configuration de partage de ressources d’origine croisée a été définie dans le projet de référence du site WKND.
Pour afficher la configuration déployée :
Accédez à la console web du SDK AEM à l’adresse http://localhost:4502/system/console.
La console web n’est disponible que sur le SDK. Dans un environnement AEM as a Cloud Service, ces informations peuvent être visualisées via Developer Console.
Dans le menu supérieur, cliquez sur OSGI > Configuration pour afficher toutes les Configurations OSGi.
Faites défiler la page vers le bas Partage des ressources cross-origin Adobe.
Cliquez sur la configuration pour com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-graphql
.
Les champs suivants ont été mis à jour :
http://localhost:.*
/content/graphql/global/endpoint.json
GET
, HEAD
, POST
POST
est requis pour GraphQL. Toutefois, les autres méthodes peuvent s’avérer utiles lors d’une interaction avec AEM sans interface utilisateur.Yes
Cette configuration et les points d’entrée GraphQL font partie du projet AEM WKND. Vous pouvez afficher toutes les Configurations OSGi ici.