Creează și editează pagini generative cu instrumente AI de generare a codului

Acest articol descrie cum se pot folosi instrumente de generare a codului AI, precum GitHub Copilot CLI și Claude Code, pentru a crea și edita pagini generative pentru aplicații bazate pe modele în Power Apps. Această abordare îți permite să integrezi capabilități avansate de generare a codului direct în fluxul tău de lucru de dezvoltare, permițându-ți să creezi pagini generative noi sau să iterezi pe cele existente folosind instrucțiuni în limbaj natural.

Utilizarea instrumentelor de generare a codului AI cu pagini generative oferă o abordare alternativă de dezvoltare care completează experiența bazată pe UI în Power Apps (make.powerapps.com). Această abordare cod-first este concepută pentru dezvoltatori și creatori tehnici care preferă să lucreze cu unelte locale de dezvoltare și fluxuri de lucru bazate pe CLI.

Ce poți face cu unelte de generare a codului

  • Creează una sau mai multe pagini generative într-o singură rulare din cerințe de limbaj simplu
  • Creează tabelele Microsoft Dataverse suport de care paginile tale au nevoie sau reutilizează-le pe cele existente, inclusiv date de probă pentru tabele noi
  • Plasează artefacte într-o aplicație și soluție nouă sau existentă, inclusiv crearea unei aplicații sau soluții în timp real
  • Actualizează paginile generative existente solicitând modificări sau îmbunătățiri prin instrumentul tău AI
  • Deployează direct în mediul tău Power Apps folosind comenzile PAC CLI
  • Lucrează local cu ID-ul și uneltele tale preferate de dezvoltare, cu npm install suport IntelliSense pentru codul generat

Cum funcționează

  1. Descrii ce vrei să construiești în limbaj natural, de exemplu: "Creează un tablou de bord generativ care să arate cele mai importante conturi după venituri."
  2. Un agent planificator analizează cererea dumneavoastră și propune un plan. Planul ar putea include una sau mai multe pagini, tabelele Dataverse de care paginile au nevoie (noi sau existente) și aplicația și soluția unde se află artefactele. Planificatorul delegă apoi către agenți specializați pentru a construi ceea ce descrie planul. De exemplu, un tabel builder și un page builder.
  3. Revizuiești și ajustezi planul înainte de a construi. Poți schimba numărul de pagini, poți schimba sau adăuga tabele, poți ținti o altă aplicație sau poți plasa artefactele într-o altă soluție.
  4. Agenții generează cod TypeScript și React gata de producție pentru pagina sau paginile tale, împreună cu fișiere suport pentru dezvoltarea locală.
  5. Instrumentul implementează artefactele în mediul tău folosind comenzi generative PAC CLI pentru pagini și, opțional, rulează un pas de verificare în browser care exersează pagina cu teste generate.
  6. Pagina ta generativă apare în aplicația bazată pe modele.

Cerințe preliminare

Înainte să începi, asigură-te că ai software-ul și permisiunile necesare descrise aici.

Cerințe de software

Componentă Versiune minimă Mai multe informații
Node.js 18.0 sau mai târziu Descarcă Node.js
Power Platform CLI (PAC CLI) Cele mai recente actualizări Instalează CLI PAC
GitHub Copilot CLI, Claude Code sau alt instrument de generare a codului Cele mai recente actualizări GitHub Copilot CLI sau Claude Code

Cerințe suplimentare

  • Un mediu Power Platform cu o aplicație bazată pe modele pentru a implementa pagini.
  • O sesiune PAC CLI autentificată conectată la mediul țintă.

Notă

Această capacitate este disponibilă la nivel mondial în cloud-urile publice.

Instalează pluginul

Rulează instalatorul pentru a configura toate pluginurile Power Platform fie în PowerShell, fie într-o fereastră de comenzi 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

Instalatorul automat:

  • Detectează uneltele disponibile (Claude Code, GitHub Copilot CLI)
  • Înregistrează piața pluginurilor și instalează toate pluginurile
  • Activează actualizarea automată astfel încât pluginurile să rămână actualizate

După instalare, repornește instrumentul AI dacă este nevoie.

Instalează doar pluginul de pagină generativă

Pentru a instala doar pluginul generative page pentru GitHub Copilot CLI sau Claude Code:

  1. Adaugă pluginul pieței Power Platform Skills: /plugin marketplace add microsoft/power-platform-skills
  2. Instalează pluginul Power Apps: /plugin install model-apps@power-platform-skills

Notă

Pentru Claude Code, poți instala pluginul cu diferite domenii, cum ar fi global, local sau user. În funcție de scope, trebuie să fii în directorul corect pentru ca Claude Code să folosească pluginul. Mergi la Extinderea Claude cu abilități

Odată instalat, poți folosi pluginul de oricare dintre ele:

  • Rulând /genpage comanda explicit.
  • Descrierea paginii pe care vrei să o creezi. Instrumentul detectează automat și folosește pluginul.

Sfat

Activează actualizarea automată pentru a primi automat actualizări ale pieței și abilităților. Folosește comanda /plugin , navighează la Piețe, alege piața și activează actualizarea automată.

Utilizarea altor instrumente de generare cod AI

Pentru alte instrumente de generare a codului AI, asigură-te că instrumentul tău are acces la resursele paginii generative din depozitul Power Platform skills GitHub. Folderul plugin model-apps include documentația componentelor, cod exemplu, referință la comenzi PAC CLI și instrucțiuni de flux de lucru necesare pentru a crea cod conform cerințelor paginilor generative, inclusiv cum să creezi pagini care suportă mai multe limbi și regiuni. Consultă readme din depozit pentru informații despre accesarea și utilizarea acestor resurse cu instrumentul tău preferat.

Prezentare generală a abilităților

Pluginul Power Apps oferă această abilitate pentru lucrul cu pagini generative.

Competență Command Descriere
Pagini generative /genpage Creează cod pentru pagini generative (pentru scenarii de creare sau editare)

Această abilitate îți permite să descrii ce vrei să construiești și să faci ca instrumentul AI să genereze cod complet TypeScript și React pentru pagina ta generativă, apoi să îl implementeze direct în mediul tău Power Apps.

Creează o pagină generativă nouă

Urmează acest flux de lucru atunci când construiești o pagină nouă sau un set de pagini de la zero.

  1. Începe o conversație cu instrumentul tău AI. Descrie ce vrei să creezi. Fii cât de specific sau deschis vrei — cu cât cererea este mai vagă, cu atât agentul se completează mai mult. Poți, de asemenea, să atașezi o imagine sau alte materiale pentru a ghida vizualurile, tematica și layout-ul. De exemplu:

    • "Creează un tablou de bord generativ care să arate primele 10 conturi după venituri folosind tabelul de cont"
    • "Construiește două pagini pentru gestionarea înscrierilor mele de voluntari — una pentru a răsfoia turele deschise și una pentru a confirma o înscriere — folosind date de exemplu"
    • "Creează o pagină generativă pentru afișarea rapoartelor de incident pe o hartă folosind tabelul de incidente"

  2. Alege creează sau editează dacă ți se cere. Dacă agentul planificator nu este sigur dacă vrei o pagină nouă sau să actualizezi una existentă, te întreabă. Pentru a urma acest flux de lucru, alege să creezi o pagină nouă. Pentru editare, accesează Editează o pagină generativă existentă.

  3. Răspunde la întrebări despre ce să construiești. Planificatorul poate întreba ce fel de pagină dorești, oferind câteva exemple și acceptând o descriere personalizată, cum ar fi ce date să folosești, layout, ce informații să afișezi, interacțiuni și așa mai departe. Fii specific în privința nevoilor de business și a cerințelor de date, identifică din timp cerințele mobile și menționează orice componente UI sau preferințe de layout. Planificatorul ar putea, de asemenea, să pună întrebări clarificătoare, cum ar fi dacă să folosească tabele Dataverse sau date de probă codificate direct și dacă să adaugi pagina într-o aplicație existentă sau să creeze o aplicație nouă.

  4. Revizuiește și ajustează planul. Planificatorul prezintă un plan care include pagina/paginile pe care intenționează să le construiască, tabelele Dataverse de folosit sau creat (cu coloanele pe care intenționează să le folosească), aplicația pentru a găzdui pagina (nouă sau existentă) și soluția unde se află artefactele. Iterează cu agentul pentru a ajusta orice vrei să schimbi — de exemplu, numărul de pagini, ce tabele sunt folosite sau create, aplicația țintă sau soluția țintă. Confirmă planul când se potrivește intenției tale.

  5. Lasă agenții să construiască și să se implementeze. Agenții specializați generează pagina sau paginile, tabelele de suport și codul, apoi le implementează în mediul tău.

  6. Opțional, verifică în browser. După construcție, agentul poate oferi să ruleze un pas de verificare în browser care rulează teste generate automat de Playwright pe pagină pentru a confirma că se încarcă și funcționează corect. Folosește asta pentru a detecta probleme evidente înainte de a testa manual.

  7. Testează și iterează. Deschide aplicația bazată pe modele în Power Apps și navighează către pagina nouă. Dacă trebuie să faci modificări, revino la instrumentul tău AI și descrie actualizările în limbaj natural.

Notă

Poți schimba oricând numele sau poziția paginii generative din sitemap, de la designerul de aplicații bazate pe modele.

Editează o pagină generativă existentă

Folosește acest flux de lucru pentru a actualiza o pagină care deja există în mediul tău.

  1. Recuperează pagina existentă. În instrumentul tău AI de generare a codului, cere să recuperezi pagina generativă existentă furnizând ID-ul paginii (GUID) sau numele paginii din harta site-ului și aplicația în care se află. De exemplu, "Vreau să actualizez pagina generativă de adopție a animalelor de companie din aplicația Demo."

  2. Descrie-ți actualizările. Spune instrumentului AI ce schimbări vrei să faci. De exemplu:

    • "Adaugă un filtru pentru a afișa doar înregistrările active"
    • "Schimbă structura pentru a afișa cardurile într-o grilă în loc de listă"
    • "Adaugă un grafic care arată tendințele de adopție în timp"
    • "Actualizează formularul pentru a include noul câmp personalizat pentru temperamentul animalelor de companie"

  3. Revizuiește, publică, testează și iterează. Instrumentul AI generează cod TypeScript actualizat pe baza modificărilor solicitate de tine. Urmează același proces de revizuire, publicare și testare descris în secțiunea "Creează o pagină generativă nouă". Continuă să iterezi cu instrucțiuni în limbaj natural până când pagina îți satisface cerințele.

Fișiere locale de dezvoltare

Când instrumentul AI generează o pagină, scrie și două fișiere suport în spațiul tău local de lucru pentru a facilita revizuirea și iterarea codului:

  • package.json — declară dependențele de runtime și dezvoltare împotriva cărora pagina generată compilează. Rulează npm install după generație pentru a instala aceste dependențe.
  • genpage.d.ts — declarații TypeScript ambientale pentru obiecte care nu sunt instalate prin npm, cum ar dataApi fi și pageInput.

Cu ambele fișiere pregătite și npm install complete, IntelliSense-ul editorului tău, cum ar fi în VS Code, funcționează împotriva codului generat, astfel încât poți revizui sau edita manual pagina fără să vezi mâzgălituri roșii pentru tipurile nerezolvate.

Configurează o pagină pentru a accepta parametrii de intrare

Paginile generative pot accepta parametrii recordIdde intrare , entityName, și data, permițându-le să primească date contextuale atunci când sunt navigate de la alte pagini sau cod. Când instruiești instrumentul AI să configureze parametrii de intrare, acesta generează codul de inițializare corespunzător astfel încât pagina să fie citită și să folosească acele valori la încărcare.

Descrie parametrii pe care îi dorești în promptul tău:

  • "Configurează pagina să accepte un Account RecordId și entityName. Când pagina se încarcă, folosește acești parametri pentru a prelua și afișa detaliile corespunzătoare ale contului."
  • "Configurați această pagină să accepte un parametru de date care conține un obiect de filtru personalizat. Folosește-l pentru a filtra înregistrările afișate când pagina se încarcă."

Pentru a naviga către pagină și a trece prin acești parametri, vezi Navighează către și dinspre o pagină generativă folosind API-ul clientului.

Localizare

Când creezi o pagină generativă folosind pluginul Power Apps pentru Claude Code sau GitHub Copilot CLI, localizarea se gestionează automat. Agentul detectează toate limbajele activate în mediul tău și generează cod astfel încât pagina să funcționeze cu toate acele limbaje. Pagina respectă limba preferată a fiecărui utilizator și preferințele regionale de formatare pentru date, numere și monedă.

Dacă vrei să vizezi un set diferit de limbaje față de cele activate în mediul tău, poți cere agentului să ajusteze, de exemplu:

"Actualizează această pagină pentru a suporta doar engleză, franceză și spaniolă."

Notă

Intrarea sitemap pentru o pagină generativă nu este localizată implicit. Pentru a localiza intrările sitemap, actualizează-le separat în designul aplicației.

Pentru mai multe informații, accesați instrucțiunile de localizare din depozitul Power Platform Skills.

Depanarea

Pagina nu se încarcă în Power Apps

Dacă navighezi către pagina ta generativă și observi un mesaj de eroare sau un ecran gol:

  1. Deschide unelte pentru dezvoltatori de browsere (F12 în majoritatea browserelor).

  2. Selectează fila Console .

  3. Copiază mesajul complet de eroare, inclusiv urmărirea stack-ului.

  4. Întoarce-te la instrumentul tău AI de generare a codului și lipește eroarea cu context:

    "Primesc această eroare când deschid pagina: [eroare de lipire aici]. Te rog, rezolvă problema."

    Instrumentul AI analizează eroarea, identifică cauza rădăcină și generează o soluție.

  5. Revizuiește remedierea și cere instrumentului să republice pagina.

Revenirea la o versiune funcțională

Dacă modificările recente au stricat pagina sau au agravat problemele, poți cere instrumentului AI să revină la o versiune funcțională anterioară:

"Schimbările recente au stricat pagina. Vă rugăm să reveniți la ultima versiune funcțională."

Instrumentul AI atunci:

  1. Identifică modificările care au fost făcute
  2. Restaurează codul de funcționare anterior
  3. Redistribuie versiunea stabilă

Cele mai bune practici

  • Începeți simplu. Începe cu o versiune de bază a paginii tale și iterează pentru a adăuga complexitate.
  • Testează frecvent. Implementează și testează pagina ta după fiecare schimbare semnificativă.
  • Fii specific. Oferă cerințe detaliate pentru a obține rezultate inițiale mai bune.
  • Folosește tiparele existente. Referă-te la pagini similare sau tipare UI când îți descrii cerințele.
  • Validează codul generat. Revizuiți întotdeauna codul generat pentru a vă asigura că respectă standardele și cerințele de conformitate ale organizației dumneavoastră.

Important

Deși instrumentele de generare a codului AI încearcă să genereze cod complet, pregătit pentru producție, cu bune practici de accesibilitate și securitate, tu ești în cele din urmă responsabil pentru validarea codului. Asigurați-vă că codul generat respectă standardele, politicile și cerințele de conformitate ale organizației dumneavoastră.

Limitări

Limitările pentru paginile generative create cu instrumente AI de generare a codului sunt aceleași ca pentru paginile generative create în portalul Power Apps Maker:

  • Pagina ta se poate conecta doar la tabelele Dataverse.
  • Colaborarea nu este susținută—asigură-te că doar un singur creator lucrează la o pagină generativă la un moment dat.
  • Sunt suportate doar aceste tipuri de date: Alegere, Monedă, Client, Data și ora, Doar Data, Număr zecimal, Număr în virgulă mobilă, Imagine, Căutare, Text pe mai multe linii, Status, Motiv de status, Text, Număr întreg, Da/Nu, Identificator unic.

Conținut asociat

  • Last updated on