Opret og rediger generative sider med værktøjer til oprettelse af AI-kode

I denne artikel beskrives det, hvordan du bruger værktøjer til oprettelse af AI-kode, f.eks. GitHub Copilot CLI og Claude Code, til at oprette og redigere generative sider til modeldrevne apps i Power Apps. Denne fremgangsmåde giver dig mulighed for at integrere avancerede funktioner til generering af kode direkte i din udviklingsarbejdsproces, så du kan oprette nye generative sider eller gentage eksisterende sider ved hjælp af instruktioner til naturligt sprog.

Brug af værktøjer til generering af AI-kode med generative sider giver en alternativ udviklingstilgang, der supplerer den brugergrænsefladebaserede oplevelse i Power Apps (make.powerapps.com). Denne første kodetilgang er udviklet til udviklere og tekniske udviklere, der foretrækker at arbejde med lokale udviklingsværktøjer og CLI-baserede arbejdsprocesser.

Hvad du kan gøre med værktøjer til oprettelse af kode

• Opret en eller flere generative sider i en enkelt kørsel ud fra almindelige sprogkrav
• Opret de understøttende Microsoft Dataverse tabeller dine sider har brug for, eller genbrug eksisterende tabeller, herunder eksempeldata til nye tabeller
• Placer artefakter i en ny eller eksisterende app og løsning, herunder oprettelse af en app eller løsning på farten
• Opdater eksisterende generative sider ved at anmode om ændringer eller forbedringer via dit AI-værktøj
• Udrul direkte i dit Power Apps-miljø ved hjælp af PAC CLI-kommandoer
• Arbejd lokalt med dine foretrukne IDE- og udviklingsværktøjer med npm install og IntelliSense-understøttelse af den genererede kode

Sådan fungerer det

1. Du beskriver, hvad du vil bygge på et naturligt sprog, f.eks. "Opret et generativt sidedashboard, der viser de vigtigste konti efter indtægt".
2. En planlæggeragent analyserer din anmodning og foreslår en plan. Planen kan omfatte en eller flere sider, de Dataverse-tabeller, som siderne skal bruge (ny eller eksisterende), og den app og løsning, hvor artefakterne findes. Planlæggeren uddelegerer derefter til specialiserede agenter for at bygge det, planen beskriver. F.eks. en tabelgenerator og en sidegenerator.
3. Du gennemser og justerer planen, før du bygger den. Du kan ændre antallet af sider, bytte eller tilføje tabeller, målrette en anden app eller placere artefakterne i en anden løsning.
4. Agenterne genererer produktionsklar TypeScript- og React-kode til din eller dine sider sammen med understøttende filer til lokal udvikling.
5. Værktøjet udruller artefakterne i dit miljø ved hjælp af generative side PAC CLI-kommandoer og kører eventuelt et kontrol-i-browser-trin, der udfører siden med genererede test.
6. Din generative side vises i din modeldrevne app.

Forudsætninger

Før du starter, skal du sikre dig, at du har den nødvendige software og de nødvendige tilladelser, der er beskrevet her.

Softwarekrav

Yderligere krav

• Et Power Platform-miljø med en modeldrevet app til installation af sider.
• En godkendt PAC CLI-session , der er forbundet til dit destinationsmiljø.
  • Gå til Godkend Power Platform-kommandolinjegrænsefladen for at få flere oplysninger om, hvordan du opretter forbindelse.

Installér plug-in'en

Kør installationsprogrammet for at konfigurere alle Power Platform-plug-ins i enten PowerShell eller et Windows-kommandovindue.

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 automatisk:

• Registrerer tilgængelige værktøjer (Claude Code, GitHub Copilot CLI)
• Registrerer markedspladsen for plug-in'en og installerer alle plug-ins
• Aktiverer automatisk opdatering, så plug-ins forbliver opdaterede

Efter installationen skal du genstarte ai-værktøjet, hvis det er nødvendigt.

Installér kun den generative side-plugin

Sådan installerer du kun det generative side-plug-in til GitHub Copilot CLI eller Claude Code:

1. Tilføj marketplace-plug-in'en Power Platform Skills: /plugin marketplace add microsoft/power-platform-skills
2. Installér Power Apps-plug-in'en: /plugin install model-apps@power-platform-skills

Når plug-in'en er installeret, kan du bruge den ved at gøre følgende:

• Kørsel af kommandoen /genpage eksplicit.
• Beskriver den side, du vil oprette. Værktøjet registrerer og bruger automatisk plug-in'en.

Brug af andre værktøjer til oprettelse af AI-kode

I forbindelse med andre værktøjer til generering af AI-kode skal du sikre, at dit værktøj har adgang til de generative sideressourcer fra GitHub-lageret til Power Platform-færdigheder . Plug-in-mappen med modelapps indeholder komponentdokumentation, eksempelkode, kommandoreference til PAC CLI og instruktioner til arbejdsprocesser, der er nødvendige for at oprette kode, der overholder generative sidekrav, herunder hvordan du opretter sider, der understøtter flere sprog og områder. Se filen readme i lageret for at få oplysninger om adgang til og brug af disse ressourcer med dit foretrukne værktøj.

Oversigt over færdigheder

Power Apps-plug-in'en giver denne færdighed til at arbejde med generative sider.

Denne færdighed giver dig mulighed for at beskrive, hvad du vil bygge, og få AI-værktøjet til at generere en komplet TypeScript- og React-kode for din generative side og derefter udrulle den direkte i dit Power Apps miljø.

Opret en ny generativ side

Følg denne arbejdsproces, når du opretter en ny side eller et sæt sider fra bunden.

1. Start en samtale med dit AI-værktøj. Beskriv, hvad du vil oprette. Vær så specifik eller så åben, som du vil – jo mere vagt anmodningen er, jo mere udfylder agenten sig selv. Du kan også vedhæfte et billede eller andre materialer for at vejlede visualiseringer, temaer og layout. F.eks.:

   • "Opret et generativt sidedashboard, der viser vores øverste 10 konti efter indtægt ved hjælp af tabellen Konto"
   • "Byg to sider til administration af mine frivillige tilmeldinger – én til at gennemse åbne skift og én til at bekræfte en tilmelding – ved hjælp af eksempeldata"
   • "Opret en generativ side til visning af hændelsesrapporter på et kort ved hjælp af tabellen Incident"

2. Vælg opret eller rediger, hvis du bliver spurgt. Hvis planlæggeragenten ikke er sikker på, om du vil have en ny side eller opdatere en eksisterende, bliver du spurgt. Hvis du vil følge denne arbejdsproces, skal du vælge at oprette en ny side. Hvis du vil redigere, skal du gå til Rediger en eksisterende generativ side.

3. Besvar spørgsmål om, hvad du skal bygge. Planlæggeren spørger måske, hvilken type side du vil have, og tilbyder nogle eksempler og accepterer en brugerdefineret beskrivelse, f.eks. hvilke data der skal bruges, layout, hvilke oplysninger der skal vises, interaktioner osv. Vær specifik om forretningsbehov og datakrav, identificer mobilkrav tidligt, og nævn eventuelle komponenter i brugergrænsefladen eller layoutindstillinger. Planlæggeren kan også stille afklarende spørgsmål, f.eks. om du vil bruge Dataverse-tabeller eller hard-coded eksempeldata, og om du vil føje siden til en eksisterende app eller oprette en ny app.

4. Gennemse og juster planen. Planlæggeren præsenterer en plan, der indeholder den eller de sider, den har til hensigt at bygge, de Dataverse-tabeller, der skal bruges eller oprettes (med de kolonner, den planlægger at bruge), appen til at hoste siden (ny eller eksisterende) og den løsning, hvor artefakterne findes. Gentage med agenten for at justere alt, hvad du vil ændre – f.eks. antallet af sider, hvilke tabeller der bruges eller oprettes, destinationsappen eller destinationsløsningen. Bekræft planen, når den stemmer overens med din hensigt.

5. Lad agenterne bygge og udrulle. De specialiserede agenter genererer siden eller siderne, understøttende tabeller og kode og udruller derefter i dit miljø.

6. Du kan også bekræfte i browseren. Efter buildet kan agenten tilbyde at køre et kontrol-i-browser-trin, der kører automatisk genererede Playwright-test mod siden for at bekræfte, at den indlæses og fungerer korrekt. Brug dette til at registrere åbenlyse problemer, før du tester manuelt.

7. Test og gentagelse. Åbn din modeldrevne app i Power Apps, og naviger til den nye side. Hvis du har brug for at foretage ændringer, skal du vende tilbage til dit AI-værktøj og beskrive opdateringerne på et naturligt sprog.

Rediger en eksisterende generativ side

Brug denne arbejdsproces til at opdatere en side, der allerede findes i dit miljø.

1. Hent den eksisterende side. I værktøjet til oprettelse af AI-kode skal du anmode om at hente den eksisterende generative side ved at angive side-id'et (GUID) eller sidenavnet i webstedsoversigten og den app, den er i. "Jeg vil f.eks. opdatere den generative side til indføring af kæledyr fra demoappen".

2. Beskriv dine opdateringer. Fortæl AI-værktøjet, hvilke ændringer du vil foretage. F.eks.:

   • "Tilføj et filter for kun at vise aktive poster"
   • "Skift layoutet til at vise kort i et gitter i stedet for en liste"
   • "Tilføj et diagram, der viser indførelsestendenser over tid"
   • "Opdater formularen, så den indeholder det nye brugerdefinerede felt for kæledyrs temperament"

3. Gennemse, publicer, test og gentagelse. Ai-værktøjet genererer opdateret TypeScript-kode baseret på de ønskede ændringer. Følg den samme gennemgangs-, publicerings- og testproces, der er beskrevet i afsnittet "Opret en ny generativ side". Fortsæt gentagelsen med instruktioner til naturligt sprog, indtil siden opfylder dine krav.

Lokale udviklingsfiler

Når AI-værktøjet genererer en side, skrives der også to supplerende filer til dit lokale arbejdsområde for at gøre det nemmere at gennemse og gentage koden:

• package.json – deklarerer kørsels- og udviklingsafhængigheder, som den genererede side kompileres i forhold til. Kør npm install efter generering for at installere disse afhængigheder.
• genpage.d.ts – Ambient TypeScript-erklæringer for objekter, der ikke installeres via npm, f.eks dataApi . og pageInput.

Når begge filer er på plads og npm install fuldført, fungerer din editors IntelliSense, f.eks. i VS Code, imod den genererede kode, så du kan gennemse eller håndredigering af siden uden at se røde vrikkere for uløste typer.

Konfigurer en side til at acceptere inputparametre

Generative sider kan acceptere inputparametrene recordId, entityNameog , så datade kan modtage kontekstafhængige data, når de navigeres til fra andre sider eller kode. Når du instruerer AI-værktøjet i at konfigurere inputparametre, genereres den relevante initialiseringskode, så siden læser og bruger disse værdier, når den indlæses.

Beskriv de ønskede parametre i prompten:

• "Konfigurer siden for at acceptere et Account recordId og entityName. Når siden indlæses, skal du bruge disse parametre til at hente og vise de tilsvarende kontooplysninger."
• "Konfigurer denne side til at acceptere en dataparameter, der indeholder et brugerdefineret filterobjekt. Brug den til at filtrere de viste poster, når siden indlæses."

Hvis du vil navigere til siden og overføre disse parametre, skal du se Naviger til og fra en generativ side ved hjælp af Klient-API.

Lokalisering

Når du opretter en generativ side ved hjælp af Power Apps-plug-in'en til Claude Code eller GitHub Copilot CLI, håndteres lokalisering automatisk. Agenten registrerer alle sprog, der er aktiveret i dit miljø, og genererer kode, så siden fungerer sammen med alle disse sprog. Siden respekterer de enkelte brugeres foretrukne sprog- og internationale formateringsindstillinger for datoer, tal og valuta.

Hvis du vil målrette et andet sæt sprog end dem, der er aktiveret i dit miljø, kan du bede agenten om at justere, f.eks.:

"Opdater denne side, så den kun understøtter engelsk, fransk og spansk."

Du kan finde flere oplysninger ved at gå til lokaliseringsvejledningen i lageret Færdigheder i Power Platform.

Fejlfinding

Siden kan ikke indlæses i Power Apps

Hvis du navigerer til din generative side og ser en fejlmeddelelse eller en tom skærm:

1. Åbn browserudviklerværktøjer (F12 i de fleste browsere).

2. Vælg fanen Konsol .

3. Kopiér hele fejlmeddelelsen, herunder staksporingen.

4. Vend tilbage til værktøjet til oprettelse af AI-kode, og indsæt fejlen med kontekst:

   "Jeg får vist denne fejl, når jeg åbner siden: [Indsæt fejl her]. Løs problemet."

   AI-værktøjet analyserer fejlen, identificerer rodårsagen og genererer en rettelse.

5. Gennemse rettelsen, og bed værktøjet om at publicere siden igen.

Vender tilbage til en arbejdsversion

Hvis de seneste ændringer har ødelagt din side eller gjort problemer værre, kan du bede AI-værktøjet om at vende tilbage til en tidligere arbejdsversion:

De seneste ændringer ødelagde siden. Vend tilbage til den seneste arbejdsversion."

Ai-værktøjet:

1. Identificerer de ændringer, der er foretaget
2. Gendanner den tidligere arbejdskode
3. Geninstallerer den stabile version

Bedste praksis

• Start enkelt. Begynd med en grundlæggende version af din side, og gentagelser for at tilføje kompleksitet.
• Test ofte. Udrul og test din side efter hver væsentlige ændring.
• Vær specifik. Angiv detaljerede krav for at få bedre indledende resultater.
• Brug eksisterende mønstre. Reference til lignende sider eller brugergrænsefladens mønstre, når du beskriver dine krav.
• Valider genereret kode. Gennemse altid den genererede kode for at sikre, at den opfylder organisationens standarder og krav til overholdelse af angivne standarder.

Begrænsninger

Begrænsningerne for generative sider, der er oprettet med værktøjer til oprettelse af AI-kode, er de samme som for generative sider, der er oprettet på Power Apps-udviklerportalen:

• Din side kan kun oprette forbindelse til Dataverse-tabeller.
• Samarbejde understøttes ikke – sørg for, at kun én opretter arbejder på en generativ side ad gangen.
• Kun disse datatyper understøttes: Valg, Valuta, Kunde, Dato og klokkeslæt, Kun dato, Decimaltal, Flydende tal, Billede, Opslag, Tekst med flere streger, Status, Statusårsag, Tekst, Heltal, Ja/Nej, Entydigt id.

Relateret indhold

• Opret en side ved hjælp af et naturligt sprog med modeldrevne apps
• Naviger til og fra en generativ side ved hjælp af Klient-API
• dataApi-objektmetoder til generative sider
• CLI-reference til Power Platform