AEM Configuration rapide sans affichage à l’aide du SDK local

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.

Prérequis

Les outils suivants doivent être installés localement :

• JDK 11
• Node.js v10+
• npm 6+
• Git

1. Installation du SDK AEM

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.

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

   

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

3. Renommez le fichier jar en aem-author-p4502.jar.

   Le author name indique que le fichier Quickstart jar démarre en mode création. Le p4502 spécifie le démarrage rapide qui s’exécute sur le port 4502.

4. Pour installer et démarrer l’instance AEM, ouvrez une invite de commande dans le dossier contenant le fichier jar, puis exécutez la commande suivante :

   $ cd ~/aem-sdk/author
   $ java -jar aem-author-p4502.jar
   

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

6. Une fois l’installation du service AEM terminée, une nouvelle fenêtre de navigateur doit s’ouvrir à l’adresse http://localhost:4502.

7. Connexion avec le nom d’utilisateur admin et le mot de passe sélectionné lors AEM démarrage initial (généralement admin).

2. Installer un exemple de contenu

Exemple de contenu à partir du Site de référence WKND est utilisé pour accélérer le tutoriel. Le WKND est une marque fictive de style de vie, souvent utilisée avec une formation AEM.

Le site WKND comprend les configurations requises 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 requise pour accorder l’accès à une application externe. Pour plus d’informations sur CORS Vous trouverez ci-dessous.

1. Téléchargez le dernier AEM compilé pour le site WKND : aem-guides-wknd.all-x.x.x.zip.

   REMARQUE

   Veillez à télécharger la version standard compatible avec AEM as a Cloud Service et not la valeur classic version.

2. Dans la AEM , accédez à Outils > Déploiement > Packages.

   

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

4. Dans la AEM , accédez à Ressources > Fichiers > WKND partagé > 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.

5. Cliquez dans le Ski descendant Wyoming et cliquez sur le bouton Fragment de contenu Wyoming pour le ski en descente carte :

   

6. L’éditeur de fragment de contenu s’ouvre pour l’aventure du ski de descente 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 sont détaillés plus loin dans la configuration rapide.

7. Cliquez sur Annuler pour fermer le fragment. N’hésitez pas à naviguer dans certains des autres dossiers et à explorer les autres contenus Adventure.

3. Téléchargez et exécutez l’application WKND React

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. L’application React est intentionnellement simple et se concentre sur l’intégration avec les API GraphQL AEM.

1. Ouvrez une nouvelle invite de commande et clonez l’exemple d’application React à partir de GitHub :

   $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
   $ cd aem-guides-wknd-graphql/react-app
   

2. Ouvrez l’application React dans aem-guides-wknd-graphql/react-app dans votre IDE de votre choix.

3. Dans l’IDE, ouvrez le fichier . .env.development at /.env.development. Vérifiez les REACT_APP_AUTHORIZATION n’est pas commentée et le fichier déclare les variables suivantes :

   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 pointe vers votre SDK d’AEM local. Pour des raisons pratiques, ce démarrage rapide connecte l’application React à Auteur AEM. Auteur Les services requièrent une authentification, de sorte que l’application utilise la variable admin pour établir sa connexion. La connexion d’une application à l’auteur AEM est une pratique courante lors du développement, car elle facilite la itération rapide sur le contenu sans avoir à publier les modifications.

   REMARQUE

   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 .

4. Installez et démarrez l’application React :

   $ cd aem-guides-wknd-graphql/react-app
   $ npm install
   $ npm start
   

5. Une nouvelle fenêtre de navigateur ouvre automatiquement l’application sur http://localhost:3000.

   

   Une liste du contenu de l'aventure depuis AEM s'affiche.

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

   

7. 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 GET à /graphql/execute.json/.... Ce préfixe de chemin appelle AEM point de terminaison de requête persistant, en sélectionnant la requête persistante à exécuter à l’aide du nom et des paramètres codés suivant le préfixe .

   

4. Modifier le contenu dans AEM

Une fois l’application React en cours d’exécution, effectuez une mise à jour du contenu dans AEM et vérifiez que la modification est répercutée dans l’application.

1. Accédez à AEM http://localhost:4502.

2. Accédez à Ressources > Fichiers > WKND partagé > Anglais > Aventures > Le camp de surf de Bali.

   

3. Cliquez dans le Le camp de surf de Bali fragment de contenu pour ouvrir l’éditeur de fragment de contenu.

4. Modifiez le Titre et le Description de l'aventure.

   

5. Cliquez sur Enregistrer pour enregistrer les modifications.

6. Actualisez l’application React à l’adresse http://localhost:3000 pour afficher vos modifications :

   

5. Explore GraphiQL

1. Ouvrir GraphiQL en accédant à Outils > Général > Éditeur de requêtes GraphQL

2. Sélectionnez les requêtes existantes et conservées à gauche, puis exécutez-les pour afficher les résultats.

   REMARQUE

   L’outil GraphiQL et l’API GraphQL sont exploré plus en détail plus loin dans le tutoriel.

Félicitations !

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.

Étapes suivantes

• Démarrez le tutoriel AEM sans affichage

Ressources Business.Adobe.com