Créer et modifier des pages génératives avec des outils de génération de code IA

Cet article explique comment utiliser des outils de génération de code IA, tels que GitHub Copilot CLI, pour créer et modifier des pages génératives pour les applications basées sur des modèles dans Power Apps. À l’aide de cette approche, vous pouvez intégrer des fonctionnalités avancées de génération de code directement dans votre workflow de développement pour créer de nouvelles pages génératives ou itérer sur des pages existantes à l’aide d’instructions en langage naturel. Les pages peuvent utiliser des tables Microsoft Dataverse, des connecteurs Power Platform (préversion) et des API personnalisées Dataverse (préversion).

L’utilisation d’outils de génération de code IA avec des pages génératives complète l’expérience basée sur l’interface utilisateur dans Power Apps (make.powerapps.com). Cette approche axée sur le code correspond à n’importe quel créateur ou développeur qui préfère travailler avec des outils de développement locaux et des flux de travail en ligne de commande.

Ce que vous pouvez faire avec les outils de génération de code

• Créer une ou plusieurs pages génératives dans une seule exécution à partir des exigences en langage brut
• Créez les tables Microsoft Dataverse dont vos pages ont besoin, ou réutilisez des tables existantes, y compris des exemples de données pour les nouvelles tables
• (Préversion) Se connecter à des données situées en dehors de Dataverse à l’aide de connecteurs Power Platform
• (Préversion) Appeler une logique métier côté serveur à l’aide d’API personnalisées Dataverse
• Placer des artefacts dans une application et une solution nouvelles ou existantes, notamment la création d’une application ou d’une solution à la volée
• Mettre à jour les pages génératives existantes en demandant des modifications ou des améliorations via votre outil IA
• Déployez directement dans votre environnement Power Apps en utilisant des commandes PAC CLI
• Travaillez localement avec vos outils de développement et IDE préférés, avec npm install et la prise en charge d’IntelliSense pour le code généré

Fonctionnement

1. Vous décrivez ce que vous souhaitez créer en langage naturel, par exemple « Créer un tableau de bord de page génératif montrant les principaux comptes par chiffre d’affaires ».
2. Un agent planificateur analyse votre demande et propose un plan. Le plan peut inclure une ou plusieurs pages, les tables Dataverse, des sources de données basées sur des connecteurs ou des API personnalisées dont les pages ont besoin, ainsi que l’application et la solution où se trouvent les artefacts. Le planificateur délègue ensuite aux agents spécialisés pour créer ce que décrit le plan. Par exemple, un générateur de tables et un générateur de pages.
3. Vous examinez et ajustez le plan avant de construire. Vous pouvez modifier le nombre de pages, échanger ou ajouter des sources de données, cibler une autre application ou placer les artefacts dans une autre solution.
4. Les agents génèrent du code TypeScript et React prêts pour la production pour votre page ou vos pages, ainsi que des fichiers de prise en charge pour le développement local.
5. L’outil déploie les artefacts vers votre environnement à l’aide de commandes PAC CLI de page générative, et peut également exécuter une étape de vérification dans le navigateur qui teste la page à l’aide de tests générés.
6. Votre page générative s’affiche dans votre application pilotée par modèle.

Prerequisites

Avant de commencer, vérifiez que vous disposez des logiciels et autorisations requis décrits ici.

Configuration logicielle requise

Autres conditions requises

• Un environnement Power Platform avec une application pilotée par modèle pour déployer des pages.
• Une session PAC CLI authentifiée connectée à votre environnement cible.
  • Pour plus de détails sur l’authentification et la connexion, accédez à Authentifier CLI Power Platform.
• Pour les pages basées sur des connecteurs (version préliminaire), une connexion Power Platform authentifiée existante pour chaque connecteur que vous souhaitez utiliser. L’agent peut créer une référence de connexion si nécessaire.
• Pour les pages qui appellent une API personnalisée Dataverse (version préliminaire), une API personnalisée prise en charge existante dans l’environnement cible. Pour implémenter une logique côté serveur et l’exposer à une page de génération, créez un plug-in Dataverse, puis créez une API personnalisée à l’aide de l’outil d’inscription de plug-in et associez-le au type de plug-in. Pour plus d’informations sur la configuration, consultez Créer et utiliser des API personnalisées.
• Pour exporter la télémétrie de page générative vers Azure Application Insights (préversion), un administrateur doit configurer l’exportation de données Application Insights pour l’environnement dans le Centre d’administration Power Platform. L’environnement doit répondre aux exigences de l’exportation de données Application Insights.

Installer le plug-in

Exécutez le programme d’installation pour configurer tous les plug-ins Power Platform dans PowerShell ou une fenêtre de commande Windows.

iwr https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js -OutFile install.js; node install.js; del install.js

curl -fsSL https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js | node

Le programme d’installation s'exécute automatiquement :

• Détecte les outils disponibles (GitHub Copilot CLI, Claude Code)
• Inscrit la Place de marché des plug-ins et installe tous les plug-ins
• Active la mise à jour automatique afin que les plug-ins restent à jour

Après l’installation, redémarrez votre outil IA si nécessaire.

Installer uniquement le plug-in de page générative

Pour installer uniquement le plug-in de page générative pour GitHub Copilot CLI ou Claude Code :

1. Ajoutez le plug-in Power Platform Skills Marketplace : /plugin marketplace add microsoft/power-platform-skills
2. Installez le plug-in Power Apps : /plugin install model-apps@power-platform-skills

Une fois installé, vous pouvez utiliser le plug-in en procédant comme suit :

• Exécution explicite de la /genpage commande.
• Description de la page que vous souhaitez créer. L’outil détecte et utilise automatiquement le plug-in.

Utilisation d’autres outils de génération de code IA

Pour d’autres outils de génération de code IA, assurez-vous que votre outil a accès aux ressources de génération de pages à partir du référentiel GitHub des compétences Power Platform. Le dossier du plug-in model-apps comprend la documentation des composants, l’exemple de code, la référence de commande PAC CLI et les instructions de flux de travail nécessaires pour créer du code respectant les exigences de page génératives, notamment la création de pages prenant en charge plusieurs langues et régions. Consultez le référentiel readme pour en savoir plus sur l’accès et l’utilisation de ces ressources avec votre outil préféré.

Vue d’ensemble des compétences

Le plug-in Power Apps fournit cette compétence pour travailler avec des pages génératives.

Cette compétence vous permet de décrire ce que vous souhaitez créer et d’avoir l’outil IA qui génère du code TypeScript et React complet pour votre page de génération, puis de le déployer directement dans votre environnement Power Apps.

Créer une page générative

Suivez ce flux de travail lors de la création d’une nouvelle page ou d’un ensemble de pages à partir de zéro.

1. Démarrez une conversation avec votre outil IA. Décrivez ce que vous souhaitez créer. Soyez aussi précis ou aussi vague que vous le souhaitez : plus la demande est vague, plus l’assistant complétera lui-même les détails. Vous pouvez également joindre une image ou d’autres matériaux pour guider les visuels, les thèmes et la disposition. Par exemple:

   • Créer un tableau de bord dynamique de page montrant nos 10 principaux comptes par revenus en utilisant la table Compte.
   • Créez deux pages pour gérer mes inscriptions de bénévoles : une pour parcourir les créneaux disponibles et une pour confirmer une inscription, à l’aide de données d’exemple
   • « Créer une page générative pour afficher des rapports d’incident sur une carte à l’aide de la table Incident »
   • « Créez une page qui affiche des documents à partir des fichiers Project SharePoint list ».
   • « Créer une page de révision de commande avec un bouton Approuver qui appelle l’API ApproveOrder personnalisée ».

2. Choisissez créer ou modifier si vous y êtes invité. Si l’agent de planification ne sait pas si vous souhaitez créer une nouvelle page ou mettre à jour une page existante, il vous le demande. Pour suivre ce flux de travail, choisissez de créer une page. Pour modification, accédez à Modifier une page dégénérative existante.

3. Répondez aux questions sur ce qu’il faut créer. Le planificateur peut demander le type de page souhaité, proposer quelques exemples et accepter une description personnalisée, comme les données à utiliser, la disposition, les informations à afficher, les interactions, etc. Soyez spécifique sur les besoins métier et les exigences de données, identifiez les exigences mobiles au début et mentionnez les composants de l’interface utilisateur ou les préférences de disposition. Le planificateur peut également poser des questions de clarification, telles que s’il faut utiliser des tables Dataverse, des connecteurs Power Platform, des API personnalisées ou des exemples de données codés en dur, et s’il faut ajouter la page à une application existante ou créer une application.

4. Passez en revue et ajustez le plan. Le planificateur présente un plan qui inclut la page ou les pages qu’il a l’intention de générer, les tables Dataverse, les sources de données sauvegardées par le connecteur ou les API personnalisées à utiliser, l’application pour héberger la page (nouvelle ou existante) et la solution où les artefacts vivent. Itérer avec l’agent pour ajuster tout ce que vous souhaitez modifier , par exemple, le nombre de pages, les tables ou les API personnalisées utilisées, l’application cible ou la solution cible. Confirmez le plan lorsqu’il correspond à votre intention.

5. Laissez les agents créer et déployer. Les agents spécialisés génèrent la ou les pages, les tables d’assistance, les connecteurs ou les liaisons d’API personnalisées, ainsi que le code, puis les déploient dans votre environnement.

6. Vérifiez éventuellement dans le navigateur. Après la compilation, l’agent peut proposer d’exécuter une étape de vérification dans le navigateur, qui lance automatiquement des tests Playwright générés sur la page afin de confirmer qu’elle se charge et fonctionne correctement. Utilisez cette option pour détecter les problèmes évidents avant de les tester manuellement.

7. Testez et itérer. Ouvrez votre application basée sur des modèles dans Power Apps et accédez à la nouvelle page. Si vous avez besoin d’apporter des modifications, revenez à votre outil IA et décrivez les mises à jour en langage naturel.

Utiliser les données du connecteur (version préliminaire)

La prise en charge des connecteurs permet à une page générative d’utiliser des données externes à Dataverse via l’écosystème de connecteurs Power Platform. Tous les connecteurs Power Platform sont pris en charge.

Pour utiliser les données du connecteur, décrivez dans votre invite le service et les données que vous souhaitez que la page utilise. Par exemple, demandez à l’agent de créer une page qui affiche des documents à partir d’un SharePoint list. Pendant la planification, l’agent :

1. Répertorie les connexions et les références de connexion disponibles dans l’environnement sélectionné.
2. Vous demande de sélectionner une connexion. Si la connexion n’a pas de référence de connexion, l’agent en crée un.
3. Vous demande de sélectionner les données du connecteur, telles qu’un jeu de données et une table ou une opération de connecteur.
4. Ajoute la liaison de connecteur à la page et l’inclut lors du déploiement de la page.

Passez en revue la source de données du connecteur dans le plan avant d’approuver la build. Testez la page générée avec les identités et les autorisations que vos utilisateurs utiliseront.

Utiliser une API personnalisée (préversion)

Utilisez une action ou une fonction d’API personnalisée Dataverse lorsque votre page doit exécuter explicitement une logique métier côté serveur, telle que l’approbation d’une commande, le recalcul d’un prix ou la validation d’une transaction.

Pour utiliser une API personnalisée, indiquez l’opération et quand la page doit l’appeler dans votre prompt. Par exemple, demandez à l’agent d’ajouter un bouton Approuver qui appelle l’API ApproveOrder personnalisée pour l’ordre actuel. Pendant la planification, l’agent :

1. Répertorie les API personnalisées prises en charge disponibles dans l’environnement sélectionné.
2. Vous demande de sélectionner l’API personnalisée que la page doit appeler.
3. Utilise les propriétés de requête et de réponse de l’API personnalisée lorsqu’elle génère la page.
4. Ajoute la liaison d’API personnalisée à la page et l’inclut lors du déploiement de la page.

Passez en revue l’API personnalisée et ses entrées dans le plan avant d’approuver la build. Testez la page générée avec les identités et les autorisations que vos utilisateurs utilisent.

Surveiller une page générative avec Application Insights (préversion)

Power Apps pouvez exporter automatiquement des données de télémétrie opérationnelles pour les pages génératives vers Azure Application Insights. Cette fonctionnalité fonctionne de la même façon pour les pages créées avec les outils de génération de code IA et les pages créées dans Power Apps (make.powerapps.com).

Un administrateur doit d’abord configurer l’exportation de données Application Insights pour l’environnement dans le Centre d’administration Power Platform. Une fois l’exportation configurée, Power Apps signale automatiquement les données de télémétrie prises en charge à partir de pages génératives publiées. Votre invite et votre code de page généré n'ont pas besoin d'initialiser le Kit de développement logiciel (SDK) JavaScript Application Insights, d'inclure un chaîne de connexion ou d'ajouter des appels de télémétrie.

Les données de télémétrie exportées automatiquement incluent :

• Chargements de page terminés dans le tableau pageViews.
• Erreurs non gérées de rendu de page et rejets de promesses dans le tableau exceptions.
• Opérations prises en charge dans le dependencies tableau dataApi.
• Navigation lancée à partir d’une page générative dans la pageViews table.

La télémétrie Application Insights pour les pages génératives est une fonctionnalité d’aperçu. La disponibilité peut varier selon l’environnement pendant le déploiement de la fonctionnalité.

Pour obtenir des instructions de configuration, accédez à Exporter des données vers Application Insights. Pour obtenir le schéma de télémétrie de l’application pilotée par modèle et les instructions de requête, accédez aux événements de télémétrie pour les applications basées sur des modèles.

Modifier une page générative existante

Utilisez ce flux de travail pour mettre à jour une page qui existe déjà dans votre environnement.

1. Récupérez la page existante. Dans votre outil de génération de code IA, demandez à récupérer la page générative existante en fournissant l’ID de la page (GUID) ou le nom de la page dans le plan du site et l’application dans laquelle elle se trouve. Par exemple, « Je souhaite mettre à jour la page générative de l’adoption des animaux de compagnie à partir de l’application de démonstration ».

2. Décrivez vos mises à jour. Indiquez à l’outil IA les modifications que vous souhaitez apporter. Par exemple:

   • « Ajouter un filtre pour afficher uniquement les enregistrements actifs »
   • « Modifier la disposition pour afficher des cartes dans une grille au lieu d’une liste »
   • « Ajouter un graphique montrant les tendances d’adoption au fil du temps »
   • « Mettez à jour le formulaire pour inclure le nouveau champ personnalisé pour le tempérament d’animal de compagnie »

3. Passez en revue, publiez, testez et effectuez une itération. L’outil IA génère du code TypeScript mis à jour en fonction de vos modifications demandées. Suivez la même révision, la publication et le processus de test décrits dans la section « Créer une page générative ». Continuez à itérer avec des instructions en langage naturel jusqu’à ce que la page réponde à vos besoins.

Fichiers de développement locaux

Lorsque l’outil IA génère une page, il écrit également deux fichiers de prise en charge dans votre espace de travail local pour faciliter l’examen et l’itération du code :

• package.json : déclare les dépendances d’exécution et de développement sur laquelle la page générée est compilée. Exécutez npm install après la génération pour installer ces dépendances.
• genpage.d.ts — déclarations TypeScript ambiantes pour les objets qui ne sont pas installés via npm, tels que dataApi et pageInput.

Une fois les deux fichiers en place et la commande npm install exécutée, IntelliSense dans votre éditeur, par exemple VS Code, fonctionne sur le code généré. Vous pouvez ainsi réviser ou modifier manuellement la page sans voir apparaître de soulignements rouges signalant des types non résolus.

Configurer une page pour accepter les paramètres d’entrée

Les pages génératives peuvent accepter les paramètres recordIdd’entrée, entityNameet data, ce qui leur permet de recevoir des données contextuelles lorsque vous accédez à partir d’autres pages ou de code. Lorsque vous demandez à l’outil IA de configurer les paramètres d’entrée, il génère le code d’initialisation approprié afin que la page lise et utilise ces valeurs quand elle se charge.

Décrivez les paramètres souhaités dans votre invite :

• « Configurez la page pour qu’elle accepte un recordId et un entityName pour le compte. Lorsque la page se charge, utilisez ces paramètres pour extraire et afficher les détails du compte correspondants. »
• « Configurez cette page pour accepter un paramètre de données contenant un objet de filtre personnalisé. Utilisez-la pour filtrer les enregistrements affichés lorsque la page se charge. »

Pour accéder à la page et passer ces paramètres, consultez Naviguer vers et à partir d’une page générative à l’aide de l’API cliente.

Localisation

Lorsque vous créez une page générative à l’aide de la compétence Power Apps, la localisation est gérée automatiquement. L’agent détecte toutes les langues activées dans votre environnement et génère du code afin que la page fonctionne avec toutes ces langues. La page respecte la langue préférée de chaque utilisateur et les préférences de mise en forme régionale pour les dates, les nombres et la devise.

Si vous souhaitez cibler un ensemble de langues différent de ceux activés dans votre environnement, vous pouvez demander à l’agent d’ajuster, par exemple :

« Mettez à jour cette page pour prendre en charge l’anglais, le français et l’espagnol uniquement. »

Pour plus d’informations, consultez les instructions de localisation dans le référentiel Power Platform Skills.

Dépannage

La page ne parvient pas à se charger dans Power Apps

Si vous accédez à votre page générative et observez un message d’erreur ou un écran vide :

1. Ouvrez les outils de développement de navigateur (F12 dans la plupart des navigateurs).

2. Sélectionnez l’onglet Console .

3. Copiez le message d’erreur complet, y compris le rapport des appels de procédure.

4. Revenez à votre outil de génération de code IA et collez l’erreur avec le contexte :

   « J’obtiens cette erreur lors de l’ouverture de la page : [erreur de collage ici]. Corrigez le problème. »

   L’outil IA analyse l’erreur, identifie la cause racine et génère un correctif.

5. Passez en revue le correctif et demandez à l’outil de republier la page.

Restauration d’une version opérationnelle

Si des modifications récentes ont rompu votre page ou apporté des problèmes pires, vous pouvez demander à l’outil IA de revenir à une version de travail précédente :

« Les modifications récentes ont cassé la page. Revenez à la dernière version de travail. »

L'outil IA est alors :

1. Identifie les modifications qui ont été apportées
2. Restaure le code de travail précédent
3. Redéploie la version stable

Meilleures pratiques

• Commencez simplement. Commencez par une version de base de votre page et itérerez pour ajouter de la complexité.
• Testez fréquemment. Déployez et testez votre page après chaque modification significative.
• Soyez précis. Fournissez des exigences détaillées pour obtenir de meilleurs résultats initiaux.
• Utilisez des modèles existants. Référencez des pages similaires ou des modèles d’interface utilisateur lors de la description de vos besoins.
• Validez le code généré. Passez toujours en revue le code généré pour vous assurer qu’il répond aux normes et exigences de conformité de votre organisation.

Limites

Les limitations des pages génératives créées avec les outils de génération de code IA sont les mêmes que celles des pages génératives créées dans le portail Power Apps maker :

• Les sources de données prises en charge sont des tables Dataverse et des connecteurs Power Platform (préversion).
• Les actions et fonctions d’API personnalisées sont prises en charge en préversion. Les API personnalisées qui utilisent le type de liaison EntityCollection ou les paramètres d’entité ne sont pas prises en charge.
• La collaboration n’est pas prise en charge : assurez-vous qu’un seul créateur travaille sur une page générative à la fois.
• Seuls ces types de données sont pris en charge : Choix, Devise, Client, Date et Heure, Date uniquement, Nombre décimal, Nombre à virgule flottante, Image, Recherche, Texte multiligne, État, Raison de l’état, Texte, Nombre entier, Oui/Non, Identificateur unique.

Contenu connexe

• Générer une page à l’aide du langage naturel avec des applications basées sur des modèles
• Accédez à une page générative à l’aide de l’API cliente
• méthodes d’objet dataApi pour les pages génératives
• Référence CLI de Power Platform