Effectuer la configuration rapide d’AEM Headless à l’aide du SDK AEM local setup

Accédez au Portail de distribution logicielle > AEM as a Cloud Service et téléchargez la dernière version du SDK AEM.

Décompressez le téléchargement et copiez le fichier jar de démarrage rapide (aem-sdk-quickstart-XXX.jar) dans un dossier dédié, c’est-à-dire ~/aem-sdk/author.

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

Le nom author indique que le fichier jar de démarrage rapide démarre en mode de création. p4502 indique que le démarrage rapide s’exécute sur le port 4502.

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

Indiquez un mot de passe administrateur 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 reconfiguration.

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

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

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

Dans le menu de démarrage AEM, accédez à Outils  > Déploiement > Packages.

Cliquez sur Charger le package et sélectionnez le package WKND téléchargé à l’étape précédente. Cliquez sur Installer pour installer le package.

Dans le menu de démarrage AEM, accédez à Ressources > Fichiers > WKND partagé > Français > Adventures.

Il s’agit d’un dossier contenant toutes les ressources qui composent les différentes Adventures promues par la marque WKND. Il inclut les types de médias traditionnels tels que les images et les vidéos, ainsi que les médias spécifiques à AEM comme les fragments de contenu.

Cliquez dans le dossier Downhill Skiing Wyoming, puis sur la vignette Fragment de contenu Downhill Skiing Wyoming  :

L’éditeur de fragment de contenu s’ouvre pour l’Adventure Downhill Skiing Wyoming.

Notez que divers champs comme Titre, Description et Activity définissent le fragment.

Les fragments de contenu sont l’une des façons de gérer le contenu dans AEM. Les fragments de contenu constituent du 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.

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

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

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

Dans l’IDE, ouvrez le fichier .env.development sous /.env.development. Vérifiez que la ligne REACT_APP_AUTHORIZATION n’est pas commentée et que 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 AEM local. Pour des raisons pratiques, ce démarrage rapide connecte l’application React à l’instance de création AEM. Les services de création requièrent une authentification, l’application utilise donc le profil utilisateur admin pour établir sa connexion. La connexion d’une application à l’instance de création AEM est une pratique courante lors du développement, car elle facilite l’itération rapide sur le contenu sans avoir à publier les modifications.

Installez et démarrez l’application React :

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

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

Une liste du contenu des Adventures d’AEM s’affiche.

Cliquez sur l’une des images d’Adventure pour en afficher le détail. Une requête est transmise à AEM, afin de renvoyer les détails d’une Adventure.

Utilisez les outils de développement du navigateur pour examiner les requêtes du réseau. Affichez les requêtes XHR et notez les diverses requêtes GET à /graphql/execute.json/.... Ce préfixe de chemin d’accès appelle le point d’entrée de requête persistante d’AEM, en sélectionnant la requête persistante à exécuter à l’aide du nom et des paramètres codés suivant le préfixe.

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

Accédez à Ressources > Fichiers > WKND Shared > Anglais > Adventures > Bali Surf Camp.

Cliquez dans le fragment de contenu Bali Surf Camp pour ouvrir l’éditeur de fragment de contenu.

Modifiez le Titre et la Description de l’Adventure.

Cliquez sur Enregistrer pour enregistrer les modifications.

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

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

Sélectionnez les requêtes persistantes à gauche, puis exécutez-les pour afficher les résultats.