Crea i edita pàgines generatives amb eines de generació de codi amb IA

Aquest article descriu com utilitzar eines de generació de codi amb IA, com GitHub Copilot CLI, per crear i editar pàgines generatives per a aplicacions basades en models a Power Apps. Utilitzant aquest enfocament, pots integrar capacitats avançades de generació de codi directament al teu flux de treball de desenvolupament per crear noves pàgines generatives o iterar sobre les existents utilitzant instruccions en llenguatge natural. Les pàgines poden utilitzar taules de Microsoft Dataverse, connectors de Power Platform (previsualització) i APIs personalitzades de Dataverse (previsualització).

Propina

Aquest enfocament és el camí recomanat per construir pàgines generatives. Et dóna accés als últims models d'IA de frontera, funciona arreu del món en núvols públics i et permet construir múltiples pàgines amb taules de Dataverse compatibles, fonts de dades del connector Power Platform (previsualització) o APIs personalitzades de Dataverse (previsualització) en una sola execució.

L'ús d'eines de generació de codi amb IA amb pàgines generatives complementa l'experiència basada en la interfície d'usuari a Power Apps (make.powerapps.com). Aquest enfocament centrat en el codi s'adapta a qualsevol creador o desenvolupador que vulgui accedir als models d'IA més nous o prefereixi treballar amb eines locals de desenvolupament i fluxos de treball basats en CLI.

Nota

Per planificar, construir o editar tota una aplicació basada en models en lloc de pàgines generatives individuals, utilitza l'habilitat model app-builder. Per a més informació, vegeu Construeix i edita aplicacions guiades per models amb eines de generació de codi amb IA.

Què pots fer amb eines de generació de codi

  • Crea una o més pàgines generatives en una sola execució a partir de requisits de llenguatge pla
  • Crea les taules Microsoft Dataverse de suport les teves pàgines, o reutilitza les existents, incloent-hi dades d'exemple per a noves taules
  • (Vista prèvia) Connecta't a dades fora de Dataverse utilitzant connectors Power Platform
  • (Vista prèvia) Crida lògica de negoci al costat del servidor utilitzant APIs personalitzades de Dataverse
  • Col·loca artefactes en una aplicació i solució nova o existent, incloent-hi la creació d'una aplicació o solució en temps real
  • Actualitza les pàgines generatives existents sol·licitant canvis o millores a través de la teva eina d'IA
  • Desplega directament al teu entorn Power Apps utilitzant comandes PAC CLI
  • Treballa localment amb el teu IDE i eines de desenvolupament preferides, amb npm install suport IntelliSense per al codi generat

Com funciona

  1. Descrius què vols construir en llenguatge natural, per exemple, "Crea un tauler de pàgina generativa que mostri els comptes principals per ingressos."
  2. Un agent planificador analitza la teva sol·licitud i proposa un pla. El pla podria incloure una o més pàgines, les taules Dataverse, fonts de dades amb connectors o APIs personalitzades que les pàgines necessiten, i l'aplicació i solució on viuen els artefactes. Després, el planificador delega a agents especialitzats per construir el que descriu el pla. Per exemple, un constructor de taules i un creador de pàgines.
  3. Revises i ajustes el pla abans de construir. Pots canviar el nombre de pàgines, intercanviar o afegir fonts de dades, dirigir-te a una aplicació diferent o col·locar els artefactes en una solució diferent.
  4. Els agents generen codi TypeScript i React preparats per a producció per a la teva pàgina o pàgines, juntament amb fitxers de suport per al desenvolupament local.
  5. L'eina desplega els artefactes al teu entorn utilitzant comandes generatives de PAC CLI de pàgina, i opcionalment executa un pas de verificació al navegador que exercita la pàgina amb proves generades.
  6. La teva pàgina generativa apareix a l'aplicació orientada al model.

Requisits previs

Abans de començar, assegura't de tenir el programari i els permisos necessaris descrits aquí.

Requisits de programari

Component Versió mínima Més informació
Node.js 18.0 o posteriors Descarrega Node.js
Power Platform CLI (PAC CLI) Últims Instal·la PAC CLI
GitHub Copilot CLI, Claude Code o altra eina de generació de codi Últims GitHub Copilot CLI o Claude Code

Requisits addicionals

Important

El suport per a connectors i API personalitzades són funcions de previsualització. Les característiques de visualització prèvia no estan pensades per a l'ús de producció i poden tenir una funcionalitat restringida. Les APIs personalitzades s'executen en el context de l'usuari iniciat sessió i estan subjectes a la seguretat de Dataverse.

Nota

Aquesta capacitat està disponible arreu del món en núvols públics.

Instal·la el connector

Executa l'instal·lador per configurar tots els connectors de Power Platform en PowerShell o en una finestra de comandes de 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

L'instal·lador automàticament:

  • Detecta eines disponibles (GitHub Copilot CLI, Claude Code)
  • Registra el mercat de plugins i instal·la tots els plugins
  • Activa l'actualització automàtica perquè els plugins es mantinguin actualitzats

Després de la instal·lació, reinicia l'eina d'IA si cal.

Instal·la només el connector de pàgina generativa

Per instal·lar només el connector de pàgina generativa per a GitHub Copilot CLI o Claude Code:

  1. Afegeix el connector Power Platform Skills marketplace: /plugin marketplace add microsoft/power-platform-skills
  2. Instal·la el plugin Power Apps: /plugin install model-apps@power-platform-skills

Nota

Per a Claude Code, pots instal·lar el connector amb diferents àmbits, com global, local o d'usuari. Depenent de l'abast, has d'estar al directori correcte perquè Claude Code pugui utilitzar el plugin. Ves a Extend Claude amb habilitats.

Un cop instal·lat, pots utilitzar el plugin de qualsevol de les dues:

  • Executant la /genpage comanda explícitament.
  • Descriu la pàgina que vols crear. L'eina detecta i utilitza automàticament el plugin.

Propina

Activa l'actualització automàtica per rebre automàticament les actualitzacions del mercat i de les habilitats. Fes servir l'ordre /plugin , navega als Mercats, tria el mercat i activa l'actualització automàtica.

Ús d'altres eines de generació de codi amb IA

Per a altres eines de generació de codi amb IA, assegura't que la teva eina tingui accés als recursos de pàgina generativa del repositori Power Platform skills GitHub. La carpeta de plugins model-apps inclou documentació de components, codi d'exemple, referència de comandes PAC CLI i instruccions de flux de treball necessàries per crear codi que compleixi els requisits de pàgina generativa, incloent-hi com crear pàgines que suportin múltiples llenguatges i regions. Consulta el readme del repositori per obtenir informació sobre com accedir i utilitzar aquests recursos amb la teva eina preferida.

Visió general de les habilitats

El connector Power Apps proporciona aquesta habilitat per treballar amb pàgines generatives.

Habilitat Ordre Descripció
Pàgines generatives /genpage Crear codi per a pàgines generatives (per a la creació o edició d'escenaris)

Aquesta habilitat et permet descriure què vols construir i que l'eina d'IA generi codi complet de TypeScript i React per a la teva pàgina generativa, i després el desplegui directament al teu entorn Power Apps.

Crea una nova pàgina generativa

Segueix aquest flux de treball quan construeixis una pàgina nova o un conjunt de pàgines des de zero.

  1. Inicia una conversa amb la teva eina d'IA. Descriu què vols crear. Sigues tan específic o obert com vulguis — com més vaga sigui la petició, més s'omplirà l'agent a si mateix. També pots adjuntar una imatge o altres materials per guiar els visuals, la temàtica i la disposició. Per exemple:

    • "Crea un quadre de comandament generatiu que mostri els nostres 10 comptes principals per ingressos utilitzant la taula de comptes"
    • "Crear dues pàgines per gestionar les meves inscripcions de voluntaris — una per navegar pels torns oberts i una altra per confirmar una inscripció — utilitzant dades de mostra"
    • "Fes una pàgina generativa per mostrar informes d'incidents en un mapa utilitzant la taula d'Incidents"
    • "Crea una pàgina que mostri documents de la llista SharePoint list de fitxers Project."
    • "Crea una pàgina de revisió de comandes amb un botó d'Aprovar que cridi l'API ApproveOrder personalitzada."

  2. Tria crear o editar si et demana. Si l'agent de planificació no està segur si vols una pàgina nova o actualitzar una de ja existent, et pregunta. Per seguir aquest flux de treball, tria crear una pàgina nova. Per editar, ves a Edita una pàgina generativa existent.

  3. Respon preguntes sobre què construir. El planificador pot preguntar quin tipus de pàgina vols, oferir alguns exemples i acceptar una descripció personalitzada, com ara quines dades utilitzar, la disposició, quina informació mostrar, interaccions, i així successivament. Sigues específic sobre les necessitats de negoci i els requisits de dades, identifica els requisits mòbils aviat i menciona qualsevol component d'interfície o preferència de disseny. El planificador també pot fer preguntes aclaridores com ara si utilitzar taules Dataverse, connectors Power Platform, APIs personalitzades o dades d'exemple codificades fixament, i si afegir la pàgina a una aplicació existent o crear-ne una de nova.

  4. Revisa i ajusta el pla. El planificador presenta un pla que inclou la pàgina o pàgines que pretén construir, les taules Dataverse, fonts de dades recolzades per connectors o APIs personalitzades per utilitzar, l'aplicació per allotjar la pàgina (nova o existent) i la solució on es troben els artefactes. Itera amb l'agent per ajustar qualsevol cosa que vulguis canviar: per exemple, el nombre de pàgines, quines taules o APIs personalitzades s'utilitzen, l'aplicació de destinació o la solució de destinació. Confirma el pla quan coincideixi amb la teva intenció.

  5. Deixa que els agents construeixin i despleguin. Els agents especialitzats generen la pàgina o pàgines, taules de suport, connectors o enllaços personalitzats d'API, i codi, i després es despleguen al teu entorn.

  6. Opcionalment, verifica al navegador. Després de la compilació, l'agent pot oferir executar un pas de verificació al navegador que executi proves generades automàticament per Playwright contra la pàgina per confirmar que es carrega i funciona correctament. Utilitza això per detectar problemes evidents abans de provar manualment.

  7. Prova i itera. Obre la teva aplicació basada en models a Power Apps i navega fins a la nova pàgina. Si necessites fer canvis, torna a la teva eina d'IA i descriu les actualitzacions en llenguatge natural.

Nota

Pots canviar el nom o la posició de la pàgina generativa al mapa del lloc en qualsevol moment des del dissenyador d'aplicacions basades en models.

Utilitza dades del connector (previsualització)

El suport de connectors permet que una pàgina generativa utilitzi dades fora de Dataverse a través de l'ecosistema de connectors Power Platform. Tots els connectors Power Platform són compatibles.

Per utilitzar dades connectors, descriu el servei i les dades que vols que utilitzi la pàgina en el teu prompt. Per exemple, demana a l'agent que creï una pàgina que mostri documents d'una llista de SharePoint list. Durant la planificació, l'agent:

  1. Llista les connexions i referències de connexió disponibles en l'entorn seleccionat.
  2. Et demana que seleccionis una connexió. Si la connexió no té referència de connexió, l'agent en crea una.
  3. Et demana que seleccionis les dades del connector, com ara un conjunt de dades i una taula o una operació de connector.
  4. Afegeix la vinculació del connector a la pàgina i l'inclou quan la pàgina es desplega.

Revisa la font de dades del connector al pla abans d'aprovar la construcció. Prova la pàgina generada amb les identitats i permisos que utilitzaran els teus usuaris.

Utilitza una API personalitzada (previsualització)

Utilitza una acció o funció API personalitzada de Dataverse quan la teva pàgina necessiti executar explícitament lògica de negoci del costat del servidor, com ara aprovar una comanda, recalcular un preu o validar una transacció.

Per utilitzar una API personalitzada, descriu l'operació i quan la pàgina l'ha de cridar al teu prompt. Per exemple, demana a l'agent que afegeixi un botó d'Aprovar que cridi l'API ApproveOrder personalitzada per a la comanda actual. Durant la planificació, l'agent:

  1. Llista les APIs personalitzades compatibles disponibles en l'entorn seleccionat.
  2. Et demana que seleccionis l'API personalitzada que la pàgina hauria de cridar.
  3. Utilitza les propietats de sol·licitud i resposta de l'API personalitzada quan genera la pàgina.
  4. Afegeix l'enllaç personalitzat de l'API a la pàgina i l'inclou quan es desplega la pàgina.

Revisa l'API personalitzada i les seves entrades al pla abans d'aprovar la compilació. Prova la pàgina generada amb les identitats i permisos que utilitzen els teus usuaris.

Edita una pàgina generativa existent

Utilitza aquest flux de treball per actualitzar una pàgina que ja existeix al teu entorn.

  1. Recupera la pàgina existent. A la teva eina de generació de codi amb IA, demana recuperar la pàgina generativa existent proporcionant l'ID de pàgina (GUID) o el nom de la pàgina al mapa del lloc i a l'aplicació on es troba. Per exemple, "Vull actualitzar la pàgina generativa d'Adopció de Mascotes des de l'aplicació Demo."

  2. Descriu les teves actualitzacions. Explica a l'eina d'IA quins canvis vols fer. Per exemple:

    • "Afegeix un filtre per mostrar només registres actius"
    • "Canvia la disposició perquè mostri les targetes en una graella en lloc d'una llista"
    • "Afegeix un gràfic que mostri les tendències d'adopció al llarg del temps"
    • "Actualitza el formulari per incloure el nou camp personalitzat per al temperament de les mascotes"

  3. Revisar, publicar, provar i iterar. L'eina d'IA genera codi TypeScript actualitzat segons els canvis que sol·licitis. Segueix el mateix procés de revisió, publicació i prova descrit a la secció "Crea una nova pàgina generativa". Continua iterant amb instruccions en llenguatge natural fins que la pàgina compleixi els teus requisits.

Fitxers de desenvolupament local

Quan l'eina d'IA genera una pàgina, també escriu dos fitxers de suport al teu espai de treball local per facilitar la revisió i iteració del codi:

  • package.json — declara les dependències en temps d'execució i desenvolupament contra les quals es compila la pàgina generada. Executa npm install després de la generació per instal·lar aquestes dependències.
  • genpage.d.ts — declaracions TypeScript ambient per a objectes que no s'instal·len via npm, com dataApi ara i pageInput.

Amb ambdós fitxers en el seu lloc i npm install complets, l'IntelliSense del teu editor, com a VS Code, funciona en contra del codi generat, així que pots revisar o editar manualment la pàgina sense veure gargots vermells per als tipus no resolts.

Configura una pàgina per acceptar paràmetres d'entrada

Les pàgines generatives poden acceptar els paràmetres recordIdd'entrada , entityName, i data, que els permeten rebre dades contextuals quan es naveguen des d'altres pàgines o codi. Quan indiques a l'eina d'IA que configuri els paràmetres d'entrada, aquesta genera el codi d'inicialització adequat perquè la pàgina llegeixi i utilitzi aquests valors quan es carrega.

Descriu els paràmetres que vols en el teu prompt:

  • "Configura la pàgina per acceptar un RegistrId de Compte i EntityName. Quan la pàgina es carregui, utilitza aquests paràmetres per obtenir i mostrar els detalls corresponents del compte."
  • "Configura aquesta pàgina per acceptar un paràmetre de dades que contingui un objecte de filtre personalitzat. Utilitza'l per filtrar els registres mostrats quan es carregui la pàgina."

Per navegar fins a la pàgina i passar aquests paràmetres, vegeu Navegar cap a i des d'una pàgina generativa utilitzant Client API.

La localització

Quan crees una pàgina generativa utilitzant l'habilitat Power Apps, la localització es gestiona automàticament. L'agent detecta tots els llenguatges activats al teu entorn i genera codi perquè la pàgina funcioni amb tots aquests llenguatges. La pàgina respecta la llengua preferida de cada usuari i les preferències regionals de format per a dates, números i moneda.

Si vols dirigir-te a un conjunt diferent de llenguatges dels activats al teu entorn, pots demanar a l'agent que ajusti, per exemple:

"Actualitza aquesta pàgina per donar suport només a anglès, francès i espanyol."

Nota

L'entrada del sitemap d'una pàgina generativa no està localitzada per defecte. Per localitzar les entrades del sitemap, actualitza-les per separat al dissenyador d'aplicacions.

Per a més informació, consulteu les instruccions de localització al repositori Power Platform Skills.

Solucionar problemes

La pàgina no es carrega a Power Apps

Si navegues fins a la teva pàgina generativa i veus un missatge d'error o una pantalla en blanc:

  1. Obre eines per a desenvolupadors de navegadors (F12 a la majoria de navegadors).

  2. Selecciona la pestanya Consola .

  3. Copia el missatge d'error complet, incloent-hi la traça de la pila.

  4. Torna a la teva eina de generació de codi amb IA i enganxa l'error amb context:

    "Em surt aquest error quan obro la pàgina: [error d'enganxar aquí]. Si us plau, arregleu el problema."

    L'eina d'IA analitza l'error, identifica la causa arrel i genera una correcció.

  5. Revisa la solució i demana a l'eina que torni a publicar la pàgina.

Tornar a una versió funcional

Si canvis recents han trencat la teva pàgina o han empitjorat els problemes, pots demanar a l'eina d'IA que torni a una versió anterior que funcioni:

"Els canvis recents han trencat la pàgina. Si us plau, torna a la darrera versió funcional."

L'eina d'IA, doncs:

  1. Identifica els canvis que s'han fet
  2. Restaura el codi de treball anterior
  3. Redeplega la versió estable

Procediments recomanats

  • Comença de manera senzilla. Comença amb una versió bàsica de la teva pàgina i itera per afegir complexitat.
  • Fes proves sovint. Desplega i prova la teva pàgina després de cada canvi important.
  • Sigues específic. Proporciona requisits detallats per obtenir millors resultats inicials.
  • Utilitza patrons existents. Consulta pàgines similars o patrons d'interfície d'usuari quan descriguis els teus requisits.
  • Valida el codi generat. Revisa sempre el codi generat per assegurar-te que compleix amb els estàndards i requisits de compliment de la teva organització.

Important

Tot i que les eines de generació de codi amb IA fan tot el possible per generar codi complet, preparat per a la producció, amb les millors pràctiques d'accessibilitat i seguretat, en última instància tu ets responsable de validar el codi. Assegura't que el codi generat compleixi els estàndards, polítiques i requisits de compliment de la teva organització.

Limitacions

Les limitacions per a les pàgines generatives creades amb eines de generació de codi per IA són les mateixes que les de les pàgines generatives creades al portal Power Apps Maker:

  • Les fonts de dades compatibles són taules Dataverse i connectors Power Platform (previsualització).
  • Les accions i funcions personalitzades de l'API estan suportades en previsualització. No es suporten APIs personalitzades que utilitzen el tipus d'enllaç EntityCollectiono paràmetres d'entitat.
  • La col·laboració no està suportada—assegura't que només un creador treballi en una pàgina generativa alhora.
  • Només s'admeten aquests tipus de dades: Elecció, Moneda, Client, Data i Hora, Només Data, Nombre Decimal, Número de coma Flotant, Imatge, Cerca, Text Multilínia, Estat, Raó d'Estat, Text, Nombre Enter, Sí/No, Identificador únic.

Contingut relacionat

  • Last updated on