Skapa och redigera generativa sidor med ai-kodgenereringsverktyg

Den här artikeln beskriver hur du använder AI-kodgenereringsverktyg, till exempel GitHub Copilot CLI och Claude Code, för att skapa och redigera generativa sidor för modelldrivna appar i Power Apps. Med den här metoden kan du integrera avancerade funktioner för kodgenerering direkt i ditt utvecklingsarbetsflöde, så att du kan skapa nya generativa sidor eller iterera på befintliga med hjälp av instruktioner för naturligt språk.

Att använda AI-kodgenereringsverktyg med generativa sidor ger en alternativ utvecklingsmetod som kompletterar den användargränssnittsbaserade upplevelsen i Power Apps (make.powerapps.com). Den här kodinriktade metoden är utformad för utvecklare och tekniska tillverkare som föredrar att arbeta med lokala utvecklingsverktyg och CLI-baserade arbetsflöden.

Vad du kan göra med verktyg för kodgenerering

• Skapa en eller flera sidor med generativt innehåll i en och samma körning utifrån krav på naturligt språk
• Skapa stödtabeller för Microsoft Dataverse dina sidor behöver eller återanvänd befintliga, inklusive exempeldata för nya tabeller
• Placera artefakter i en ny eller befintlig app och lösning, inklusive att skapa en app eller lösning i farten
• Uppdatera befintliga generativa sidor genom att begära ändringar eller förbättringar via AI-verktyget
• Distribuera direkt till din Power Apps miljö med hjälp av PAC CLI-kommandon
• Arbeta lokalt med önskade IDE- och utvecklingsverktyg, med npm install och IntelliSense-stöd för den genererade koden

Så här fungerar det

1. Du beskriver vad du vill skapa på naturligt språk, till exempel "Skapa en generativ sidinstrumentpanel som visar de främsta kontona efter intäkter".
2. En planner-agent analyserar din begäran och föreslår en plan. Planen kan innehålla en eller flera sidor, Dataverse-tabellerna som sidorna behöver (nya eller befintliga) och appen och lösningen där artefakterna finns. Planeraren delegerar sedan till specialiserade agenter för att skapa vad planen beskriver. Till exempel en tabellbyggare och en sidbyggare.
3. Du granskar och justerar planen innan du skapar den. Du kan ändra antalet sidor, växla eller lägga till tabeller, rikta in dig på en annan app eller placera artefakterna i en annan lösning.
4. Agenterna genererar produktionsklar TypeScript- och React-kod för din sida eller dina sidor, tillsammans med stödfiler för lokal utveckling.
5. Verktyget distribuerar artefakterna till din miljö med hjälp av PAC CLI-kommandon för generativa sidor och kan även köra ett verifieringssteg i webbläsaren som testar sidan med hjälp av genererade tester.
6. Din generativa sida visas i din modelldrivna app.

Förutsättningar

Innan du börjar kontrollerar du att du har nödvändig programvara och behörigheter som beskrivs här.

Programvarukrav

Ytterligare krav

• En Power Platform-miljö med en modelldriven app för att distribuera sidor.
• En autentiserad PAC CLI-session som är ansluten till målmiljön.
  • Gå till Autentisera Power Platform CLI för mer information om hur du ansluter.

Installera plugin-programmet

Kör installationsprogrammet för att konfigurera alla Power Platform-plugin-program i antingen PowerShell eller ett Windows-kommandofönster.

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

Installationsprogrammet gör automatiskt:

• Identifierar tillgängliga verktyg (Claude Code, GitHub Copilot CLI)
• Registrerar plugin-marknadsplatsen och installerar alla plugin-program
• Aktiverar automatisk uppdatering så att plugin-program förblir aktuella

Starta om AI-verktyget om det behövs efter installationen.

Installera endast plugin-programmet för generativ sida

För att installera endast det generativa sidpluginet för GitHub Copilot CLI eller Claude Code:

1. Lägg till plugin-programmet Power Platform Skills Marketplace: /plugin marketplace add microsoft/power-platform-skills
2. Installera Power Apps-plugin-programmet: /plugin install model-apps@power-platform-skills

När du har installerat det kan du använda plugin-programmet genom att antingen:

• Köra kommandot /genpage explicit.
• Beskriver den sida som du vill skapa. Verktyget identifierar och använder plugin-programmet automatiskt.

Använda andra VERKTYG för AI-kodgenerering

För andra AI-kodgenereringsverktyg kontrollerar du att verktyget har åtkomst till de generativa sidresurserna från Power Platform skills GitHub-förråd. Plugin-mappen model-apps innehåller komponentdokumentation, exempelkod, PAC CLI-kommandoreferens och arbetsflödesinstruktioner som krävs för att skapa kod som följer generativa sidkrav, inklusive hur du skapar sidor som stöder flera språk och regioner. Mer information om hur du kommer åt och använder dessa resurser med ditt önskade verktyg finns i filen Viktigt för lagringsplatsen.

Kunskapsöversikt

Plugin-programmet Power Apps tillhandahåller den här färdigheten för att arbeta med generativa sidor.

Med den här färdigheten kan du beskriva vad du vill skapa och låta AI-verktyget generera fullständig TypeScript- och React-kod för din generativa sida och sedan distribuera den direkt till din Power Apps-miljö.

Skapa en ny generativ sida

Följ det här arbetsflödet när du skapar en ny sida eller uppsättning sidor från grunden.

1. Starta en konversation med ai-verktyget. Beskriv vad du vill skapa. Var så specifik eller så öppen som du vill – ju vagare förfrågan är, desto mer fyller agenten själv i resten. Du kan också bifoga en bild eller annat material för att vägleda visuella objekt, teman och layout. Till exempel:

   • Skapa en generativ instrumentpanel för sidan som visar våra 10 främsta konton efter intäkter genom att använda Kontotabellen
   • "Skapa två sidor för att hantera mina frivilliga registreringar – en för att bläddra i öppna skift och en för att bekräfta en registrering – med hjälp av exempeldata"
   • "Skapa en generativ sida för att visa incidentrapporter på en karta med hjälp av tabellen Incident"

2. Välj skapa eller redigera om du tillfrågas. Om planner-agenten inte är säker på om du vill ha en ny sida eller om du vill uppdatera en befintlig, frågar den. Om du vill följa det här arbetsflödet väljer du att skapa en ny sida. Om du vill redigera går du till Redigera en befintlig generativ sida.

3. Svara på frågor om vad du ska bygga. Planeraren kan fråga vilken typ av sida du vill ha, erbjuda några exempel och acceptera en anpassad beskrivning, till exempel vilka data som ska användas, layout, vilken information som ska visas, interaktioner och så vidare. Var specifik om affärsbehov och datakrav, identifiera mobila krav tidigt och nämn eventuella gränssnittskomponenter eller layoutinställningar. Planeraren kan också ställa klargörande frågor, till exempel om du vill använda Dataverse-tabeller eller hårdkodade exempeldata och om du vill lägga till sidan i en befintlig app eller skapa en ny app.

4. Granska och justera planen. Planeraren presenterar en plan som innehåller den sida eller de sidor som den avser att skapa, de Dataverse-tabeller som ska användas eller skapas (med de kolumner som den planerar att använda), appen som ska vara värd för sidan (ny eller befintlig) och lösningen där artefakterna finns. Iterera med agenten för att justera allt du vill ändra , till exempel antalet sidor, vilka tabeller som används eller skapas, målappen eller mållösningen. Bekräfta planen när den matchar din avsikt.

5. Låt agenterna bygga och driftsätta. De specialiserade agenterna genererar sidan eller sidorna, stödtabeller och kod och distribuerar sedan till din miljö.

6. Du kan också verifiera i webbläsaren. Efter bygget kan agenten erbjuda sig att köra ett verifieringssteg i webbläsaren som kör automatiskt genererade Playwright-tester mot sidan för att bekräfta att den läses in och fungerar korrekt. Använd detta för att fånga upp uppenbara problem innan du testar manuellt.

7. Testa och iterera. Öppna din modelldrivna app i Power Apps och gå till den nya sidan. Om du behöver göra ändringar går du tillbaka till AI-verktyget och beskriver uppdateringarna på naturligt språk.

Redigera en befintlig generativ sida

Använd det här arbetsflödet för att uppdatera en sida som redan finns i din miljö.

1. Hämta den befintliga sidan. I ai-kodgenereringsverktyget begär du att hämta den befintliga generativa sidan genom att ange sid-ID (GUID) eller sidnamnet i webbplatskartan och appen den finns i. Till exempel "Jag vill uppdatera den generativa sidan för husdjursadoption från demoversionen av appen."

2. Beskriv dina uppdateringar. Tala om för AI-verktyget vilka ändringar du vill göra. Till exempel:

   • "Lägg till ett filter för att endast visa aktiva poster"
   • "Ändra layouten för att visa kort i ett rutnät i stället för en lista"
   • "Lägg till ett diagram som visar implementeringstrender över tid"
   • "Uppdatera formuläret så att det innehåller det nya anpassade fältet för husdjurs temperament"

3. Granska, publicera, testa och iterera. AI-verktyget genererar uppdaterad TypeScript-kod baserat på dina begärda ändringar. Följ samma gransknings-, publicerings- och testprocess som beskrivs i avsnittet "Skapa en ny generativ sida". Fortsätt iterera med instruktioner för naturligt språk tills sidan uppfyller dina krav.

Filer för lokal utveckling

När AI-verktyget genererar en sida skrivs även två stödfiler till din lokala arbetsyta för att göra det enklare att granska och iterera koden:

• package.json – deklarerar körnings- och utvecklingsberoenden som den genererade sidan kompileras mot. Kör npm install efter genereringen för att installera dessa beroenden.
• genpage.d.ts – omgivande TypeScript-deklarationer för objekt som inte är installerade via npm, till exempel dataApi och pageInput.

Med båda filerna på plats och npm install slutfört fungerar redigeringsprogrammets IntelliSense, till exempel i VS Code, med den genererade koden, så att du kan granska eller handredigera sidan utan att se röda understrykningar för oupplösta typer.

Konfigurera en sida för att acceptera indataparametrar

Generativa sidor kan acceptera indataparametrarna recordId, entityNameoch , så dataatt de kan ta emot kontextuella data när de navigeras till från andra sidor eller kod. När du instruerar AI-verktyget att konfigurera indataparametrar genererar det lämplig initieringskod så att sidan läser och använder dessa värden när den läses in.

Beskriv de parametrar som du vill ha i prompten:

• "Konfigurera sidan för att acceptera ett recordId och entityName för kontot. När sidan läses in använder du dessa parametrar för att hämta och visa motsvarande kontoinformation."
• "Konfigurera den här sidan så att den accepterar en dataparameter som innehåller ett anpassat filterobjekt. Använd den för att filtrera de poster som visas när sidan läses in."

Information om hur du navigerar till sidan och skickar dessa parametrar finns i Navigera till och från en generativ sida med klient-API.

Lokalisering

När du skapar en generativ sida med hjälp av plugin-programmet Power Apps för Claude Code eller GitHub Copilot CLI hanteras lokaliseringen automatiskt. Agenten identifierar alla språk som är aktiverade i din miljö och genererar kod så att sidan fungerar med alla dessa språk. Sidan respekterar varje användares önskade språk och regionala formateringsinställningar för datum, siffror och valuta.

Om du vill rikta in dig på en annan uppsättning språk än de som är aktiverade i din miljö kan du be agenten att justera, till exempel:

"Uppdatera den här sidan för att endast stödja engelska, franska och spanska."

Mer information finns i lokaliseringsinstruktionerna på lagringsplatsen för Power Platform Skills.

Felsökning

Det går inte att läsa in sidan i Power Apps

Om du navigerar till din generativa sida och ser ett felmeddelande eller en tom skärm:

1. Öppna utvecklarverktyg för webbläsare (F12 i de flesta webbläsare).

2. Välj fliken Konsol .

3. Kopiera det fullständiga felmeddelandet, inklusive stackspårningen.

4. Gå tillbaka till ai-kodgenereringsverktyget och klistra in felet med kontext:

   "Jag får det här felet när du öppnar sidan: [klistra in fel här]. Åtgärda problemet."

   AI-verktyget analyserar felet, identifierar grundorsaken och genererar en åtgärd.

5. Granska korrigeringen och be verktyget att publicera sidan igen.

Återgå till en fungerande version

Om de senaste ändringarna bröt din sida eller gjorde problem värre kan du be AI-verktyget att återställa till en tidigare fungerande version:

"De senaste ändringarna orsakade fel på sidan. Återgå till den senaste fungerande versionen."

AI-verktyget sedan:

1. Identifierar de ändringar som har gjorts
2. Återställer den tidigare arbetskoden
3. Distribuerar om den stabila versionen

Regelverk

• Börja enkelt. Börja med en grundläggande version av sidan och iterera för att lägga till komplexitet.
• Testa ofta. Distribuera och testa sidan efter varje betydande ändring.
• Var specifik. Ange detaljerade krav för att få bättre initiala resultat.
• Använd befintliga mönster. Referera till liknande sidor eller användargränssnittsmönster när du beskriver dina krav.
• Verifiera genererad kod. Granska alltid den genererade koden för att säkerställa att den uppfyller organisationens standarder och efterlevnadskrav.

Begränsningar

Begränsningarna för generativa sidor som skapats med AI-kodgenereringsverktyg är desamma som för generativa sidor som skapats i Power Apps Maker-portalen:

• Sidan kan bara ansluta till Dataverse-tabeller.
• Samarbete stöds inte – se till att endast en tillverkare arbetar på en generativ sida i taget.
• Endast dessa datatyper stöds: Val, Valuta, Kund, Datum och Tid, Endast Datum, Decimaltal, Flyttal, Bild, Uppslag, Flerlines text, Status, Statusorsak, Text, Heltal, Ja/Nej, Unik identifierare.

Relaterat innehåll

• Generera en sida med naturligt språk med modelldrivna appar
• Navigera till och från en generativ sida med klient-API
• dataApi-objektmetoder för generativa sidor
• Referens för Power Platform CLI