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 nya generativa sidor med vanliga språkkrav
• 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

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. Ai-kodgenereringsverktyget använder installerade generativa sidkunskaper eller annan kontext om generativa sidor för att ställa klargörande frågor om dina krav.
3. Verktyget genererar produktionsklar TypeScript- och React-kod för din generativa sida.
4. Verktyget distribuerar koden till din miljö med hjälp av PAC CLI-kommandon för generativ sida.
5. 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:

• /genpage Köra kommandot 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 finns i readme-filen för repository med ditt önskade verktyg.

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 från grunden.

1. Starta en konversation med ai-verktyget. Beskriv vad du vill skapa, inklusive vilka data du vill inkludera (vilka Dataverse-tabeller eller om du vill skapa exempel på falska data). Var så specifik som du vill – ju mer vag du är med begäran, desto mer information försöker agenten fylla i sig själv. Du kan också bifoga eller ange en bild eller annat material som hjälper dig 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 ett generativt sidformulär för att skapa och redigera kontaktposter med exempeldata"
   • "Skapa en generativ sida för att visa incidentrapporter på en karta med hjälp av tabellen Incident"
   • "Skapa en generativ sida för en visualisering av försäljningspipelines med affärsmöjligheter med det moderna blå temat"

2. Svara på klargörande frågor. AI-verktyget ställer frågor för att förstå dina krav. Var specifik om affärsbehov och datakrav, identifiera mobila krav tidigt och nämn eventuella specifika gränssnittskomponenter eller layoutinställningar.

3. Granska implementeringsplanen. AI-verktyget presenterar en plan som beskriver de komponenter som ska skapas, Dataverse-tabeller och kolumner som ska användas, viktiga funktioner och interaktioner samt datahämtningsmetod. Bekräfta att planen uppfyller dina krav eller begär ändringar.

4. Granska kod och distribuera. AI-verktyget genererar fullständig TypeScript-kod. Be verktyget att publicera eller distribuera sidan när du är redo, om du vill ange ett webbplatskartnamn (verktyget genererar ett beskrivande namn som standard).

5. Testa och iterera. Öppna din modelldrivna app i Power Apps och gå till den nya sidan med hjälp av webbplatskartan. Om du behöver göra ändringar går du tillbaka till AI-verktyget och beskriver uppdateringarna med 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.

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 kontopost-ID och entitetsnamn. 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