Opret og rediger lærredsapps med værktøjer til oprettelse af AI-kode

I denne artikel forklares det, hvordan du bruger værktøjer til oprettelse af AI-kode, f.eks. GitHub Copilot og Claude Code, til at bygge og redigere lærredsapps i Power Apps. Med denne fremgangsmåde beskriver du, hvad du ønsker på et naturligt sprog, og bruger et lokalt værktøj til at generere og validere appkode.

Brug af værktøjer til generering af AI-kode med lærredsapps giver dig en mulighed for oprettelse, der supplerer den visuelle oplevelse i Power Apps på make.powerapps.com.

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

• Byg nye canvasapps fra en tom app ud fra krav formuleret i almindeligt sprog.
• Opdater eksisterende lærredsapps ved at beskrive de ønskede ændringer.
• Arbejd lokalt i dit foretrukne IDE- og udviklingsmiljø, mens du synkroniserer med en live samtidig redigeringssession.

Sådan fungerer det

1. Du opretter eller åbner en canvasapp i Power Apps Studio og forbinder dit AI-kodegenereringsværktøj med dens session til samtidig redigering.
2. Du beskriver, hvad du vil bygge på et naturligt sprog. Du kan f.eks. sige "Opret en lærredsapp til sporing af udgiftsrapporter med en arbejdsproces til godkendelse".
3. Værktøjet til oprettelse af AI-kode bruger installerede færdigheder i lærredsapps til at finde tilgængelige kontrolelementer, connectors og datakilder. Den kan stille opfølgende spørgsmål for at tydeliggøre dine krav.
4. Værktøjet genererer filer, der definerer .pa.yaml dine skærme, kontrolelementer og Power Fx-formler.
5. Værktøjet validerer den genererede kode ved hjælp af lærredsappen til oprettelse af MCP-serveren og retter eventuelle valideringsfejl.
6. Appen synkroniseres med Power Apps Studio via samtidig redigeringssession.

Forudsætninger

Før du starter, skal du sørge for, at du har den nødvendige software og de nødvendige tilladelser.

Softwarekrav

Yderligere krav

• Et Power Platform-miljø og tilladelse til at oprette eller redigere en lærredsapp.
• En eksisterende, gemt canvasapp i det relevante miljø.
• Power Apps Studio åbnes med samtidig redigering aktiveret for den app, du vil oprette eller redigere.
  • Hvis du vil aktivere samtidig redigering, skal du åbne din app i Power Apps Studio, gå til Opdateringer af indstillinger> og slå Samtidig redigering til.

Bekræft, at .NET 10 SDK eller nyere er installeret:

dotnet --list-sdks

Outputtet skal indeholde en version, der starter med 10. eller en nyere overordnet version. Hvis kommandoen ikke blev fundet, eller der ikke vises nogen understøttet version, skal du installere SDK'et og genstarte terminal- og kodeagenten.

Installér tilføjelsesprogrammet til lærredsprogrammer

Installér plug-in'en til lærredsapps fra din kodeagents plug-in-markedsplads.

Installér fra en plug-in-markedsplads

Kør følgende kommandoer i en kodeagent, der understøtter plug-in-marketplace-kommandoer:

1. Tilføj marketplace-plug-in'en Power Platform Skills.

   /plugin marketplace add microsoft/power-platform-skills
   

2. Installer pluginet til Canvas-apps.

   /plugin install canvas-apps@power-platform-skills
   

Når du har installeret plug-in'en, skal du konfigurere lærredsappen til oprettelse af MCP-serveren, før du opretter eller redigerer apps. Du kan konfigurere serveren på en af følgende måder:

• Kør kommandoen /configure-canvas-mcp .
• Beskriv, hvad du vil bygge, og lad værktøjet guide dig gennem konfigurationen.

Hvis din kodeagent ikke understøtter disse kommandoer, skal du bruge grænsefladen til plug-in-markedspladsen. Søg efter markedspladsen microsoft/power-platform-skills , og installér canvas-appsderefter .

Installér i Visual Studio Code

1. Åbn visningen Udvidelser .
2. Angiv @agentPlugins canvas apps i søgefeltet.
3. Vælg Lærredsapps, der er publiceret af Microsoft, og vælg derefter Installér.
4. Åbn Chat i agenttilstand, og bekræft, at færdighederne canvas-app og configure-canvas-mcp er tilgængelige.

Hvis agent-plug-ins ikke vises i visningen Udvidelser, skal du åbne Indstillinger: Åbn Brugerindstillinger (JSON) fra kommandopaletten, tilføj "chat.plugins.enabled": true i de ydre klammeparenteser, gem filen, og søg igen. Du kan få mere at vide under Installér en plug-in fra en markedsplads.

Konfigurer MCP-serveren til konfiguration af canvas-apps

Lærredsapp-plug-in'en bruger en MCP-server (Model Context Protocol) til at kommunikere med Power Apps. Før du opretter eller redigerer apps, skal du konfigurere denne forbindelse.

1. Åbn din lærredsapp i Power Apps Studio, og bekræft, at coauthoring er aktiveret.
2. Hold fanen Power Apps Studio-browser åben for hele sessionen.
3. Kopiér URL-adressen til Power Apps Studio fra din browser.
4. Kør /configure-canvas-mcp i dit AI-værktøj, eller bed værktøjet om at konfigurere MCP-serveren.
5. Angiv den komplette URL-adresse til Studio, når du bliver bedt om det, og fuldfør en hvilken som helst logonprompt. Værktøjet udtrækker miljø-id'et, app-id'et og klyngeoplysningerne automatisk.
6. Kontrollér forbindelsen ved at spørge agenten "Angiv de tilgængelige kontrolelementer for lærredsappen".

Forbindelsen afhænger af den åbne Power Apps Studio-samskrivningssession. Hvis du lukker browserfanen, eller Studio-sessionen udløber, skal du genåbne appen og køre /configure-canvas-mcp igen.

Ved hjælp af MCP-serveren kan dit AI-værktøj vise og beskrive tilgængelige kontrolelementer, finde API'er og datakilder, validere app-YAML og synkronisere apptilstand fra den direkte samtidige session.

Pluginlageret til lærredsapps indeholder dokumentation af kontrolelementer, designvejledning, teknisk reference og arbejdsgangsinstruktioner, der hjælper dig med at skrive kode, som opfylder kravene til lærredsapps.

Oversigt over færdigheder

Plug-in'en til lærredsapps giver disse færdigheder til at arbejde med lærredsapps.

Disse færdigheder giver dig mulighed for at beskrive, hvad du vil oprette, generere .pa.yaml filer til din app, validere disse filer i forhold til lærredets oprettelsesserver og synkronisere ændringer med en live Power Apps Studio-session.

Opret en tom lærredsapp

Følg denne arbejdsproces for at bygge en ny app i Power Apps Studio.

1. Opret og gem en tom canvasapp i det ønskede miljø, aktivér fælles redigering, og opret forbindelse til MCP-serveren til redigering af canvasapps.
2. Kør /canvas-app, eller start en samtale med dit AI-værktøj, og beskriv, hvad du vil oprette, herunder det layout og de data, du vil bruge, f.eks. Dataverse-tabeller eller -forbindelser. Skriv "Canvas App" i din anmodning for at hjælpe kodningsagenten med at vælge den rette funktion. Jo flere detaljer du inkluderer, jo bedre er det oprindelige resultat sandsynligvis. Du kan også vedhæfte billeder eller andre materialer for at vejlede visualiseringer, temaer og layout. Eksempel:
   • "Opret en lærredsapp til sporing af lager med en liste og detaljevisning, der kan søges i"
   • "Byg en lærredsapp til onboarding af medarbejdere med en formular med flere trin"
   • "Opret et lærredsappdashboard, der viser salgsmetrik med diagrammer og KPI'er"
   • "Opret en lærredsapp til feltinspektioner med fotohentning"
3. Besvar eventuelle opklarende spørgsmål. AI-værktøjet bruger MCP-serveren til at finde tilgængelige kontrolelementer og datakilder og stiller spørgsmål for bedre at forstå dine krav.
4. Gennemse den genererede kode, og valider den. AI-værktøjet genererer .pa.yaml-filer for hver skærm og validerer dem ved hjælp af MCP-serveren til redigering af lærredsapps. Værktøjet retter automatisk valideringsfejl, og dine ændringer synkroniseres med den direkte samtidige session i Power Apps Studio.
5. Test og gentagelse. Åbn din lærredsapp i Power Apps Studio for at få den vist og teste den. Hvis du har brug for ændringer, skal du vende tilbage til dit AI-værktøj og beskrive opdateringerne på et naturligt sprog.

Tilføj påkrævede connectors og datakilder via panelet Data i Power Apps Studio. Du kan køre /add-data-source for at få hjælp til konfiguration og bekræftelse.

Rediger en eksisterende lærredsapp

Brug arbejdsprocessen til at opdatere en app, der allerede findes i din samskrivningssession.

1. Åbn appen i Power Apps Studio, hold browserfanen åben, og opret forbindelse til MCP-serveren til oprettelse af lærredapps.
2. Synkroniser den eksisterende app. Kør /canvas-app, eller bed om at få din lærredsapp redigeret. Værktøjet synkroniserer den aktuelle apptilstand fra samtidig redigeringssessionen og trækker de eksisterende skærme og kontrolelementer til lokale .pa.yaml filer. For eksempel, "Jeg vil redigere min Canvas App til sporing af udgifter."
3. Beskriv de ønskede opdateringer. Eksempel:
   • "Tilføj et filter for kun at vise ventende udgifter"
   • "Skift layoutet på startskærmen, så der bruges et kortbaseret gitter"
   • "Tilføj et nyt skærmbillede til visning af udgiftshistorik med diagrammer"
   • "Opdater formularen, så den indeholder en rulleliste for udgiftskategorier"
4. Gennemse, valider, test og gentagelse. Ai-værktøjet genererer opdaterede .pa.yaml filer baseret på dine ønskede ændringer og validerer dem med lærredsforfatterserveren. Fortsæt med at gentage med instruktioner på naturligt sprog, indtil appen opfylder dine krav.

Fejlfinding

Appen afspejler ikke ændringer

Hvis dine ændringer ikke vises i Power Apps Studio:

1. Kontrollér forbindelsen til den MCP-server, der opretter lærredsappen, ved at bede værktøjet om at angive tilgængelige kontrolelementer.
2. Sørg for, at samtidig redigering er aktiveret i din Power Apps Studio-session (Indstillinger>opdaterer>samtidig redigering).
3. Kontrollér, at MCP-serveren er konfigureret med det korrekte miljø-id og app-id ved at køre /configure-canvas-mcp igen.

Problemer med MCP-serverforbindelse

Hvis den lærredsapp, der opretter MCP-serveren, ikke svarer:

1. Kontrollér, at .NET 10 SDK er installeret ved at køre dotnet --list-sdks i terminalen.
2. Sørg for, at din Power Apps Studio-session stadig er aktiv, og at samtidig redigering er aktiveret.
3. Bekræft, at du har kopieret URL-adressen fra appens redigeringssession i Power Apps Studio, ikke fra appafspilleren eller Power Apps startside.
4. Kør /configure-canvas-mcp igen med en ny URL-adresse til Studio.

Kontrolelementer, forbindelser eller datakilder mangler

Hvis forventede ressourcer ikke er tilgængelige:

1. Bekræft, at MCP-serveren har forbindelse til den tiltænkte app og det tiltænkte miljø.
2. Tilføj påkrævede connectors og datakilder via panelet Data i Power Apps Studio.
3. Bed agenten om at angive ressourcerne igen.
4. Kontrollér, om din organisations datapolitikker begrænser ressourcen.

Problemer med installation af plugin

Hvis plug-in'en ikke vises eller installeres, skal du bekræfte, at din kodeagent understøtter MCP- og agent-plug-ins. I Visual Studio Code skal du søge efter @agentPlugins canvas apps, installere Canvas Apps, der er udgivet af Microsoft, og derefter genstarte eller genindlæse Visual Studio Code. Hvis plug-in'en stadig ikke er tilgængelig, skal du spørge administratoren, om organisationens politikker blokerer agent-plug-ins, MCP-servere fra tredjepart eller lokale MCP-processer.

Hvis dotnet eller dnx ikke findes, skal du installere .NET 10 SDK, ikke kun kørslen. Genstart terminalen og kodeagenten, og kør dotnet --list-sdksderefter .

Hvis MCP-serveren ikke kan hente pakken, og fejlen omtaler https://api.nuget.org/v3/index.json, skal du køre dotnet nuget list source. Bekræft, at en aktiveret kilde indeholder Microsoft.PowerApps.CanvasAuthoring.McpServer. Hvis ingen gør det, skal du bede administratoren, som godkendte NuGet-kilden, om at bruge. Opdater plug-in'en til canvas-apps, før du prøver igen.

Sikkerhedsovervejelser

Plug-in'en håndterer legitimationsoplysninger via den officielle Azure Identity SDK og gemmer eller administrerer ikke tokens direkte.

• Installér kun plug-in'en fra en markedsplads, der er tillid til, og hold plug-in'en, kodeagenten og .NET SDK opdateret.
• Opret forbindelse til en konto, der kun har de tilladelser, der er nødvendige for at redigere den ønskede app.
• Kontrollér Power Apps miljø, URL-adresse til app, foreslået handling og værktøjsparametre, før du godkender en handling.
• Valider genererede ændringer i en udviklings- eller ikke-produktionsapp, før du anvender dem på en produktionsapp.
• Indsæt aldrig adgangskoder, adgangstokens, forbindelsesstrenge eller andre hemmeligheder i prompts, udstede rapporter eller logge.
• Vær opmærksom på din organisations politikker til forebyggelse af connectors og datatab.
• Gennemse uventede handlinger, der er foreslået af din kodeagent, især når du arbejder med eksterne data.

Du kan få flere oplysninger under Forsvar mod indirekte angreb med promptinjektion og Administrer Datapolitikker for Power Platform.

Bedste praksis

• Start enkelt. Begynd med en grundlæggende version af din app, og tilføj kompleksitet over tid.
• Test ofte. Få vist et eksempel på din app i Power Apps Studio efter betydelige ændringer.
• Vær specifik. Detaljerede krav giver normalt bedre indledende resultater.
• Genbrug mønstre. Reference til lignende apps eller brugergrænsefladens mønstre, når du beskriver dine krav.
• Valider genereret kode. Gennemse altid de genererede .pa.yaml filer for at sikre, at de opfylder organisationens standarder og krav til overholdelse af angivne standarder.
• Beskriv visualiseringsretningen. Hvis du vil have et bestemt layout eller en bestemt typografi, skal du inkludere denne vejledning i din prompt.

Relateret indhold

• Pluginlager til lærredapps
• Indberet et problem med Canvas Apps-plugin
• Opret en lærredapp fra bunden
• Oversigt over Power Apps-lærredsapps