Prise en main de l’agent de modernisation de l’expérience getting-started
Découvrez les premières étapes pour commencer à utiliser l’agent de modernisation d’expérience et la console de modernisation d’expérience.
Préparation d’un référentiel GitHub Edge Delivery prepare-repo
-
Sélectionnez un référentiel Edge Delivery Services à utiliser avec la console de modernisation de l’expérience.
- Il peut s’agir d’un projet Edge Delivery Services existant ou vous pouvez en créer un en suivant le tutoriel de développement developer tutorial à l’aide du boilerplate repository.
-
Assurez-vous que le AEM Code Connector est installé dans le référentiel.
- Cela permet à la console d’inspecter votre code.
-
Assurez-vous que l’application GitHub de synchronisation du code AEM est installée dans le référentiel.
- Cela permet à Edge Delivery Services de synchroniser votre code.
- Si votre référentiel est basé sur le tutoriel, cette étape est déjà terminée.
Ouvrir la console de modernisation de l’expérience open-console
- Accéder à
aemcoder.adobe.io. - Connectez-vous avec votre Adobe ID.
Connexion de votre référentiel GitHub connect-repo
La console vous invite à spécifier un référentiel lorsque vous vous connectez pour la première fois.
- Cliquez sur Connecter le référentiel.
- L’application AEM Code Connector s’ouvre alors dans un nouvel onglet du navigateur. Cliquez sur Autoriser AEM Code Connector.
- De retour dans la console, spécifiez l’URL de prévisualisation du site. L’URL de prévisualisation peut être obtenue en prévisualisant n’importe quel document du site ou en la construisant à partir d’une branche, de site-name et d’org. Le système récupère automatiquement le projet Github associé. Dans certains cas, il peut vous être demandé de fournir également les coordonnées github.
- Lorsque vous êtes invité à Remplacer l’espace de travail existant, cliquez sur Remplacer l’espace de travail.
Votre projet GitHub est maintenant connecté à la console et vous êtes sur l’écran d’accueil.
Démarrer l'invite start-prompting
Maintenant que votre console peut accéder à votre code, vous êtes prêt à démarrer l'invite.
-
Pour commencer, vous pouvez importer le contenu d’un site :
- « Migrer la page
https://wknd-trendsetters.site. »
- « Migrer la page
-
Le contenu du site est ainsi importé.
- La console observe une séparation des préoccupations et gère le contenu et la présentation séparément.
- L’importation initiale du contenu d’un site peut prendre plusieurs minutes.
- La console vous présente des commentaires au fur et à mesure qu’elle commence son travail, y compris un aperçu de ses étapes planifiées.
-
Une fois le site importé, le panneau Workspace affiche les pages. Sélectionnez une page pour la prévisualiser dans le panneau de droite.
-
Maintenant que vous disposez de contenu, vous pouvez demander à importer les styles à partir de la même source.
- « Importez les styles généraux à partir de
https://wknd-trendsetters.site. »
- « Importez les styles généraux à partir de
-
Comme pour l’importation de contenu initiale, l’importation peut prendre plusieurs minutes et la console fournit des commentaires pendant le traitement de votre demande et l’importation des styles. Une fois la tâche terminée, cliquez sur Actualiser l’aperçu dans le panneau de droite pour afficher le contenu stylisé.
Le contenu et les styles sont maintenant importés dans la console.
Chargement du contenu upload-content
Pour charger le contenu vers Création de documents :
-
Assurez-vous que vous êtes dans la vue Contenu, puis cliquez sur le bouton Charger le contenu en haut à droite.
- Par défaut, vous êtes dans la vue Contenu lorsque vous accédez à la console.
- Votre affichage est indiqué par l’icône en surbrillance dans la barre latérale le long du côté gauche de la console.
-
La boîte de dialogue Télécharger le contenu s’ouvre avec l’organisation de destination et le référentiel préremplis à partir de votre
fstab.yaml.- Si un
fstab.yamln’est pas présent dans votre référentiel connecté, vous devez saisir manuellement les valeurs Organisation et Référentiel… - Si vous avez utilisé la plaque chauffante, un
fstab.yamlest fourni.
- Si un
-
Sélectionnez les fichiers à charger, puis cliquez sur Charger.
-
La console indique le processus de chargement en grisant le bouton Charger.
-
Une fois l’opération terminée, une notification s’affiche au bas de la console.
Pour accéder au contenu chargé dans la création de documents, vous pouvez cliquer sur Afficher dans AEM dans la notification une fois le chargement terminé ou accéder à https://da.live/#/{organization}/{repository}.
Le contenu que vous avez importé se trouve maintenant dans l’instance de création de documents.
Modifications du code push push-code-changes
Une fois que vous êtes satisfait des modifications apportées à votre code, vous pouvez les pousser vers votre référentiel GitHub.
- Passez en mode Code (icône
</>dans la barre latérale gauche), puis dans l’onglet Modifications Git (icône de branche en haut à droite).
- Dans la liste des fichiers modifiés, si certains fichiers s’affichent comme non suivis, cliquez sur leur bouton
+pour les préparer. - Cliquez sur le bouton Actions GitHub en haut à droite, puis sélectionnez Push dans la liste déroulante.
- Dans la boîte de dialogue Pousser les modifications, choisissez de pousser les modifications vers une nouvelle RP (par défaut) ou la branche actuelle et cliquez sur Confirmer pour pousser.
- En cas de doute, vous pouvez pousser vers la branche actuelle pour garder les choses simples.
- Une fois l’opération terminée, une notification s’affiche au bas de la console.
Si vous souhaitez accéder directement aux modifications transmises dans GitHub, cliquez sur Afficher PR dans la notification une fois la transmission terminée.
Votre code se trouve désormais dans GitHub.
Aperçu du site preview-site
Pour afficher les modifications dans l’environnement de prévisualisation :
-
Revenez à la création de documents.
- Il se peut qu’il soit toujours ouvert dans un onglet du navigateur que vous avez ouvert après avoir cliqué sur Afficher dans AEM après avoir chargé le contenu.
- Ou accédez à
https://da.live/#/{organization}/{repository}
-
Ouvrez l’une des pages que vous avez précédemment chargées dans AEM.
-
Cliquez sur l’icône du plan de papier (en haut à droite) et sélectionnez Aperçu.
Félicitations. Le contenu et les styles migrés sont désormais en ligne dans l’environnement d’aperçu AEM.
Si vous avez poussé votre code vers une branche autre que main, l’aperçu ouvert à partir de l’instance de création de document n’affiche pas les styles. Remplacez par la branche en mettant à jour l’URL de l’aperçu pour afficher vos styles.
Ressources supplémentaires additional-resources
Les documents suivants peuvent s’avérer utiles lorsque vous continuez à explorer l’agent de modernisation d’expérience et sa console.
- Console de modernisation de l’expérience - Détails sur la console, ses vues, options et fonctionnalités
- Guide d’invite pour l’agent de modernisation de l’expérience - Idées sur la manière d’inviter l’agent et sur ce que ses compétences peuvent faire
- Tutoriel de développement Edge Delivery Services - Utile si vous êtes un débutant dans les projets AEM et Edge Delivery Services
- Création de documents - Utile si vous êtes un débutant dans la création de documents pour la gestion de contenu