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

NOTE
Si vous souhaitez utiliser la console de modernisation de l’expérience, vous pouvez demander l’accès pour garantir une expérience d’intégration fluide.

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.

TIP
Si vous souhaitez commencer immédiatement à utiliser la console, consultez le document Prise en main de l’agent de modernisation de l’expérience.

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

Après vous être connecté à la console à l’adresse aemcoder.adobe.io, vous accédez à l’écran d’accueil de la console.

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

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

Vue Contenu

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

Chargement du contenu

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

Affichage du code

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é

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

Intégrer les modifications

Mode Paramètres settings-view

La vue Paramètres permet de gérer les paramètres de base de la console.

Vue Paramètres

  • 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:read
      • file_metadata:read
      • library_assets:read
      • library_content:read
      • team_library_content:read
      • file_dev_resources:read
      • projects: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.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab