Console de modernisation de l’expérience console-reference
Guide de référence de l’interface et des fonctionnalités de la console de modernisation de l’expérience
Vue d’ensemble overview
La console de modernisation de l’expérience est un environnement de développement hébergé et assisté par l’IA pour Edge Delivery Services, exposé sous forme d’interface web à l’adresse aemcoder.adobe.io. Une fois connecté à son projet GitHub, vous pouvez commencer immédiatement à demander des modifications en langage naturel sans configuration supplémentaire ni configuration de l’environnement local.
Fonctionnalités capabilities
Fonctionnalités principales de la console :
- Panneau de conversation interactif avec l’agent et ses compétences
- Aperçu AEM en direct pour un retour visuel immédiat sur les modifications
- Explorateur de fichiers de contenu et visionneuse Markdown
- Synchronisation de contenu avec la création de documents
- Explorateur de code et visionneuse diff pour la révision des modifications apportées
- Intégration GitHub avec la possibilité de créer des demandes d’extraction à partir de modifications
Les développeurs gardent le contrôle total sur les navires. Toutes les modifications apportées par le biais de la console doivent être examinées et approuvées avant le déploiement, afin d’assurer la gouvernance, la cohérence de la marque et la sécurité.
Navigation navigation
Après vous être connecté à la console à l’adresse aemcoder.adobe.io, vous accédez à l’écran d’accueil de la console.
Barre de menus menu-bar
La barre de menus supérieure affiche les éléments suivants :
- Bouton Ouvrir le menu sur la gauche pour développer et réduire le détail du panneau latéral gauche
- Un bouton Compte à droite pour passer en mode sombre et vous déconnecter de la console
Barre latérale gauche sidebar
La barre latérale gauche permet d’accéder rapidement aux vues importantes de la console.
- Vue d’accueil (icône maison) - Votre point de départ pour utiliser la console
- Affichage du contenu (icône de fichier) - Contenu que vous avez importé
- Affichage du code (icône
</>) - Code du site sur lequel vous travaillez - Vue Paramètres (icône d’engrenage) - Paramètres de la console
Affichage de l’accueil home-view
La vue Accueil est le point de départ pour utiliser la console.
- En haut se trouve une entrée d’invite pour envoyer des requêtes à la console.
- Sous le panneau d’invite se trouvent des invites pour commencer votre projet.
Invite de saisie prompt-input
L’entrée rapide fournit des commandes pour interagir avec l’IA.
-
Modes de planification/d’exécution (icône d’ampoule et de baguette magique) : basculez entre les modes de planification et d’exécution, respectivement
- Mode Plan : l’IA analyse les requêtes et décrit une approche sans apporter de modifications, ce qui est utile pour comprendre la stratégie avant la validation.
- Mode d’exécution : l’IA exécute le plan et apporte des modifications réelles au fichier.
-
Joindre les fichiers (icône de trombone) : chargez et joignez des fichiers à l’invite pour obtenir un contexte supplémentaire (par exemple, conceptions de référence, captures d’écran, spécifications).
Mode Contenu content-view
La vue Contenu fournit des outils pour parcourir et prévisualiser le contenu. Par défaut, la vue est divisée en trois panneaux, de gauche à droite :
- Panneau d’invite pour interagir avec la console et le projet
- Explorateur de fichiers pour un aperçu de vos fichiers de contenu (basculement affichant ce panneau avec l’icône en forme de chevron)
- Panneau d’aperçu pour visualiser le contenu sélectionné dans l’explorateur de fichiers
Panneau de conversation chat-panel
Le panneau de conversation vous permet d’afficher et de poursuivre votre conversation avec l’agent de modernisation de l’expérience. Le panneau de conversation comprend l’historique des messages de conversation et une entrée d’invite pour envoyer des requêtes supplémentaires à la console.
-
Actions de conversation
- Effacer la conversation : permet de réinitialiser la conversation et d’effacer la fenêtre contextuelle de l’IA. Utilisez cette option pour démarrer une nouvelle tâche sans rapport avec la conversation précédente.
- Télécharger le chat : télécharge l’historique des conversations sous forme de fichier Markdown.
Panneau Aperçu preview-panel
Le panneau d’aperçu propose jusqu’à quatre modes :
-
Aperçu (document avec icône de loupe) pour visualiser le contenu HTML rendu
- Vue réactive pour afficher le contenu HTML rendu dans une vue de bureau, tablette ou mobile
- Mode de conception (icône de pinceau) pour ajouter des éléments de la page à votre invite pour un contexte supplémentaire
-
Vue Document (icône de document) pour afficher la structure de contenu de création de documents sous-jacente, respectivement
-
Vue Markdown (création AEM) (icône de code) pour afficher la structure de contenu Markdown sous-jacente
-
Vue XML JCR (création AEM) (icône de données) pour afficher la structure de contenu XML JCR résultante
Vous pouvez toujours cliquer sur l’icône Actualiser l’aperçu pour mettre à jour le panneau d’aperçu.
Le bouton Supprimer supprime la page sélectionnée de l’espace de travail. Le contenu prévisualisé ou publié ne sera pas supprimé.
Le bouton Erreurs (création dans AEM) ouvre une fenêtre modale pour afficher les erreurs sur la page sélectionnée.
Le bouton Télécharger le contenu ouvre une fenêtre modale pour télécharger des fichiers vers AEM.
- Les champs Organisation et Référentiel sont préremplis si votre projet comporte un fichier
fstab.yaml - La sélection de fichiers fournit des chemins d’accès cibles modifiables
- Le chargement vers JCR (pour l’éditeur universel) n’est pas pris en charge
Affichage du code code-view
L’affichage du code fournit des outils pour parcourir le code et gérer les modifications de code. La vue est divisée en trois panneaux, de gauche à droite :
- Panneau de conversation pour interagir avec la console et le projet
- Explorateur de fichiers pour un aperçu de vos fichiers de code ou de vos modifications en tant que diffs
- Panneau d’aperçu pour afficher un fichier de code ou les modifications sélectionnées dans l’explorateur de fichiers
Le panneau d’aperçu propose deux modes différents :
-
Fichiers Workspace pour parcourir les fichiers de code dans l'espace de travail actuel
- Utilisez le bouton Ajouter au chat pour ajouter le fichier au panneau de chat pour le contexte.
-
Modifications Git pour afficher les différences entre les modifications de fichiers créées par votre travail sur le projet
- Cliquez sur l’icône
+pour préparer le fichier modifié - Cliquez sur l’icône de flèche pour ignorer le fichier modifié
- Cliquez sur l’icône
L’icône Informations répertorie le compte et le projet GitHub actuellement connectés.
Le menu Actions GitHub (en haut à droite) fournit des opérations sur le référentiel.
- Connexion/Reconnexion : lance GitHub OAuth.
- Changer de référentiel : remplace l’espace de travail par un autre référentiel. Tout travail non engagé sera perdu.
- Changer de branche : change de branche dans le même référentiel
- Sync : extrait les dernières modifications de l’origine distante.
- Push : ouvre une boîte de dialogue modale pour pousser les modifications de l’espace de travail vers GitHub
- Déconnexion : se déconnecte de GitHub
Lors de l’envoi des modifications, vous devez d’abord disposer de modifications intermédiaires à inclure dans l’envoi. Lors du transfert, vous pouvez choisir de créer une requête de tirage ou de transférer directement vers la branche actuelle
Mode Paramètres settings-view
La vue Paramètres permet de gérer les paramètres de base de la console.
-
Projet vous permet d’afficher et de modifier les paramètres du projet, tels que la personnalisation de l’URL de la bibliothèque.
-
Assistance vous permet de demander de l’aide à l’équipe d’assistance d’AEM.
-
Informations d’identification vous permet de spécifier un jeton d’accès personnel pour Figma afin que la console puisse accéder aux blocs de conception de votre projet.
-
Le jeton nécessite les portées en lecture seule suivantes :
file_content:readfile_metadata:readlibrary_assets:readlibrary_content:readteam_library_content:readfile_dev_resources:readprojects:read
-
Voir la documentation Figma pour plus d’informations sur la configuration des jetons d’accès personnels.
-
-
Réinitialiser l’espace de travail rétablit l’état de départ de la console et toutes les modifications annulées ou annulées seront perdues.