Generatieve pagina's maken en bewerken met hulpprogramma's voor het genereren van AI-code

In dit artikel wordt beschreven hoe u hulpprogramma's voor het genereren van AI-code, zoals GitHub Copilot CLI, gebruikt om generatieve pagina's te maken en te bewerken voor modelgestuurde apps in Power Apps. Met deze methode kunt u geavanceerde mogelijkheden voor het genereren van code rechtstreeks integreren in uw ontwikkelwerkstroom om nieuwe generatieve pagina's te maken of bestaande pagina's te herhalen met behulp van instructies voor natuurlijke taal. Pagina's kunnen Microsoft Dataverse tabellen, Power Platform-connectors (preview) en aangepaste Dataverse-API's (preview) gebruiken.

Het gebruik van hulpprogramma's voor het genereren van AI-code met generatieve pagina's vormt een aanvulling op de gebruikersinterface-ervaring in Power Apps (make.powerapps.com). Deze code-first aanpak past bij elke maker of ontwikkelaar die toegang wil tot de nieuwste AI-modellen of liever werkt met lokale ontwikkelhulpprogramma's en CLI-werkstromen.

Wat u kunt doen met hulpprogramma's voor het genereren van code

• Maak een of meer generatieve pagina's in één keer op basis van vereisten in gewone taal
• Maak de ondersteunende Microsoft Dataverse-tabellen die uw pagina's nodig hebben, of hergebruik bestaande tabellen, inclusief voorbeeldgegevens voor nieuwe tabellen
• (Preview) Verbinding maken met gegevens buiten Dataverse met behulp van Power Platform-connectors
• (Preview) Bedrijfslogica aanroepen aan de serverzijde met behulp van aangepaste Dataverse-API's
• Artefacten in een nieuwe of bestaande app en oplossing plaatsen, inclusief het maken van een app of oplossing onderweg
• Bestaande generatieve pagina's bijwerken door wijzigingen of verbeteringen aan te vragen via uw AI-hulpprogramma
• Rechtstreeks implementeren in uw Power Apps-omgeving met behulp van PAC CLI-opdrachten
• Lokaal werken met uw favoriete IDE en ontwikkelhulpprogramma's, met npm install en IntelliSense-ondersteuning voor de gegenereerde code

Hoe het werkt

1. U beschrijft wat u in natuurlijke taal wilt bouwen, bijvoorbeeld 'Maak een generatief paginadashboard met topaccounts op omzet'.
2. Een planneragent analyseert uw aanvraag en stelt een plan voor. Het plan kan een of meer pagina's bevatten, de Dataverse-tabellen, gegevensbronnen met connectorsteun of aangepaste API's die de pagina's nodig hebben, en de app en oplossing waar de artefacten zich bevinden. De planner delegeert vervolgens aan gespecialiseerde agents om te bouwen wat het plan beschrijft. Bijvoorbeeld een opbouwfunctie voor tabellen en een opbouwfunctie voor pagina's.
3. U beoordeelt en past het plan aan voordat u gaat bouwen. U kunt het aantal pagina's wijzigen, gegevensbronnen wisselen of toevoegen, een andere app targeten of de artefacten in een andere oplossing plaatsen.
4. De agents genereren productieklare TypeScript- en React-code voor uw pagina of pagina's, samen met ondersteunende bestanden voor lokale ontwikkeling.
5. Het hulpprogramma implementeert de artefacten in uw omgeving met behulp van PAC CLI-opdrachten voor generatieve pagina's en voert desgewenst een verificatie-in-browserstap uit waarbij de pagina met gegenereerde tests wordt getest.
6. Uw generatieve pagina wordt weergegeven in uw modelgestuurde app.

Vereiste voorwaarden

Voordat u begint, moet u ervoor zorgen dat u over de vereiste software en machtigingen beschikt die hier worden beschreven.

Softwarevereisten

Aanvullende vereisten

• Een Power Platform-omgeving met een modelgestuurde app om pagina's te implementeren.
• Een geverifieerde PAC CLI-sessie die is verbonden met uw doelomgeving.
  • Ga naar Power Platform CLI verifiëren voor meer informatie over het verbinden.
• Voor pagina's met connectorsteun (preview), een bestaande geverifieerde Power Platform-verbinding voor elke connector die u wilt gebruiken. De agent kan indien nodig een verbindingsreferentie maken.
• Voor pagina's die een aangepaste Dataverse-API aanroepen (preview), een bestaande ondersteunde aangepaste API in de doelomgeving. Als u logica aan de serverzijde wilt implementeren en beschikbaar wilt maken voor een generatieve pagina, maakt u een Dataverse-invoegtoepassing en maakt u vervolgens een aangepaste API met behulp van het registratieprogramma voor invoegtoepassingen en koppelt u deze aan het invoegtoepassingstype. Zie Aangepaste API's maken en gebruiken voor configuratiedetails.
• Als u generatieve paginatelemetrie wilt exporteren naar Azure-toepassing Insights (preview), moet een beheerder Application Insights-gegevensexport instellen voor de omgeving in het Power Platform-beheercentrum. De omgeving moet voldoen aan de vereisten voor het exporteren van Application Insights-gegevens.

De invoegtoepassing installeren

Voer het installatieprogramma uit om alle Power Platform-invoegtoepassingen in te stellen in PowerShell of een Windows-opdrachtvenster.

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

Het installatieprogramma werkt automatisch.

• Detecteert beschikbare hulpprogramma's (GitHub Copilot CLI, Claude Code)
• Registreert de marketplace voor de invoegtoepassing en installeert alle invoegtoepassingen
• Hiermee schakelt u automatische updates in, zodat plug-ins up-to-date blijven.

Start na de installatie uw AI-hulpprogramma zo nodig opnieuw op.

Alleen de invoegtoepassing voor generatieve pagina's installeren

Alleen de invoegtoepassing voor generatieve pagina's installeren voor GitHub Copilot CLI of Claude Code:

1. Voeg de Marketplace-invoegtoepassing voor Power Platform Skills toe: /plugin marketplace add microsoft/power-platform-skills
2. Installeer de Power Apps-plug-in: /plugin install model-apps@power-platform-skills

Zodra de invoegtoepassing is geïnstalleerd, kunt u de invoegtoepassing gebruiken door:

• /genpage De opdracht expliciet uitvoeren.
• Een beschrijving van de pagina die u wilt maken. Het hulpprogramma detecteert en gebruikt de invoegtoepassing automatisch.

Andere hulpprogramma's voor het genereren van AI-code gebruiken

Voor andere AI-codegeneratietools moet u ervoor zorgen dat uw tool toegang heeft tot de generatieve paginabronnen van de Power Platform skills GitHub-opslagplaats. De map met invoegtoepassingen voor model-apps bevat onderdeeldocumentatie, voorbeeldcode, PAC CLI-opdrachtverwijzing en werkstroominstructies die nodig zijn om code te maken die voldoet aan generatieve paginavereisten, waaronder het maken van pagina's die ondersteuning bieden voor meerdere talen en regio's. Raadpleeg de leesmij van de opslagplaats voor informatie over het verkrijgen van toegang tot en het gebruik van deze resources met uw favoriete hulpprogramma.

Overzicht van vaardigheden

De Power Apps plugin biedt deze vaardigheid voor het werken met generatieve pagina's.

Met deze vaardigheid kunt u beschrijven wat u wilt bouwen en het AI-hulpprogramma volledige TypeScript- en React-code laten genereren voor uw generatieve pagina en deze vervolgens rechtstreeks implementeren in uw Power Apps-omgeving.

Een nieuwe generatieve pagina maken

Volg deze werkstroom wanneer u een nieuwe pagina of set nieuwe pagina's bouwt.

1. Start een gesprek met uw AI-hulpprogramma. Beschrijf wat u wilt maken. Wees zo specifiek of zo open-ended als u wilt: hoe vaager de aanvraag, hoe meer de agent zichzelf invult. U kunt ook een afbeelding of ander materiaal koppelen om visuele elementen, thema's en indelingen te begeleiden. Voorbeeld:

   • "Maak een generatief paginadashboard met onze tien belangrijkste accounts op basis van omzet met behulp van de tabel Account"
   • "Bouw twee pagina's voor het beheren van mijn vrijwilligersregistraties: één om te bladeren door geopende diensten en één om een aanmelding te bevestigen — met behulp van voorbeeldgegevens"
   • "Maak een generatieve pagina voor het weergeven van incidentrapporten op een kaart met behulp van de tabel Incident"
   • Een pagina maken waarop documenten uit de SharePoint-lijst Projectbestanden worden weergegeven.
   • "Een pagina voor orderbeoordeling maken met een knop Goedkeuren die de ApproveOrder aangepaste API aanroept."

2. Kies maken of bewerken als u hier om wordt gevraagd. Als de planneragent niet zeker weet of u een nieuwe pagina wilt of een bestaande pagina wilt bijwerken, wordt u gevraagd. Als u deze werkstroom wilt volgen, kiest u ervoor om een nieuwe pagina te maken. Als u wilt bewerken, gaat u naar Een bestaande generatieve pagina bewerken.

3. Beantwoord vragen over wat u moet bouwen. De planner kan vragen wat voor soort pagina u wilt, een paar voorbeelden bieden en een aangepaste beschrijving accepteren, zoals welke gegevens moeten worden gebruikt, indeling, welke informatie moet worden weergegeven, interacties enzovoort. Wees specifiek voor zakelijke behoeften en gegevensvereisten, identificeer mobiele vereisten vroeg en vermeld eventuele ui-onderdelen of indelingsvoorkeuren. De planner kan ook vragen stellen over het gebruik van Dataverse-tabellen, Power Platform-connectors, aangepaste API's of vastgelegde voorbeeldgegevens, en of u de pagina wilt toevoegen aan een bestaande app of een nieuwe app wilt maken.

4. Controleer en pas het plan aan. De planner presenteert een plan dat de pagina of pagina's bevat die het wil bouwen, de Dataverse-tabellen, gegevensbronnen met connectorsteun of aangepaste API's die moeten worden gebruikt, de app voor het hosten van de pagina (nieuw of bestaand) en de oplossing waar de artefacten zich bevinden. Werk samen met de agent in iteraties om alles aan te passen wat u wilt wijzigen - bijvoorbeeld het aantal pagina's, welke tabellen of aangepaste API's worden gebruikt, de doel-app of de doeloplossing. Bevestig het plan wanneer het overeenkomt met uw intentie.

5. Laat de agents bouwen en implementeren. De gespecialiseerde agents genereren de pagina of pagina's, ondersteunende tabellen, connector- of aangepaste API-bindingen en code, en implementeren vervolgens in uw omgeving.

6. U kunt desgewenst in de browser controleren. Na de build kan de agent een verificatie-in-browserstap uitvoeren die automatisch gegenereerde Playwright-tests uitvoert op de pagina om te bevestigen dat deze correct wordt geladen en werkt. Gebruik deze optie om duidelijke problemen te ondervangen voordat u handmatig gaat testen.

7. Testen en itereren. Open uw modelgestuurde app in Power Apps en navigeer naar de nieuwe pagina. Als u wijzigingen wilt aanbrengen, gaat u terug naar uw AI-hulpprogramma en beschrijft u de updates in natuurlijke taal.

Connectorgegevens gebruiken (preview)

Dankzij connectorondersteuning kan een generatieve pagina gegevens buiten Dataverse gebruiken via het connector-ecosysteem van Power Platform. Alle Power Platform-connectors worden ondersteund.

Als u connectorgegevens wilt gebruiken, beschrijft u de service en gegevens die u wilt gebruiken op de pagina in uw prompt. Vraag de agent bijvoorbeeld om een pagina te maken waarin documenten uit een SharePoint list worden weergegeven. Tijdens het plannen voert de agent het volgende uit:

1. Hier worden de verbindingen en verbindingsverwijzingen weergegeven die beschikbaar zijn in de geselecteerde omgeving.
2. U wordt gevraagd een verbinding te selecteren. Als de verbinding geen verbindingsverwijzing heeft, maakt de agent er een.
3. U wordt gevraagd de connectorgegevens te selecteren, zoals een gegevensset en tabel of een connectorbewerking.
4. Voegt de verbindingslijnbinding toe aan de pagina en neemt deze op wanneer de pagina wordt geïmplementeerd.

Controleer de gegevensbron van de connector in het plan voordat u de build goedkeurt. Test de gegenereerde pagina met de identiteiten en machtigingen die uw gebruikers gaan gebruiken.

Een aangepaste API gebruiken (preview)

Gebruik een aangepaste API-actie of functie voor Dataverse wanneer uw pagina expliciet bedrijfslogica op de server moet uitvoeren, zoals het goedkeuren van een order, het herberekenen van een prijs of het valideren van een transactie.

Als u een aangepaste API wilt gebruiken, beschrijft u de bewerking en wanneer de pagina deze moet aanroepen in uw prompt. Vraag de agent bijvoorbeeld om een knop Goedkeuren toe te voegen waarmee de ApproveOrder aangepaste API voor de huidige order wordt aangeroepen. Tijdens het plannen voert de agent het volgende uit:

1. Toont de ondersteunde aangepaste API's die beschikbaar zijn in de geselecteerde omgeving.
2. U wordt gevraagd om de aangepaste API te selecteren die op de pagina moet worden aangeroepen.
3. Maakt gebruik van de aanvraag- en antwoordeigenschappen van de aangepaste API wanneer deze de pagina genereert.
4. Voegt de aangepaste API-binding toe aan de pagina en neemt deze op wanneer de pagina wordt geïmplementeerd.

Controleer de aangepaste API en de bijbehorende invoer in het plan voordat u de build goedkeurt. Test de gegenereerde pagina met de identiteiten en machtigingen die uw gebruikers gebruiken.

Een generatieve pagina bewaken met Application Insights (preview)

Power Apps kan automatisch operationele telemetrie voor generatieve pagina's exporteren naar Azure-toepassing Insights. Deze mogelijkheid werkt op dezelfde manier voor pagina's die zijn gemaakt met hulpprogramma's voor het genereren van AI-code en pagina's die zijn gemaakt in Power Apps (make.powerapps.com).

Een beheerder moet eerst Application Insights-gegevensexport configureren voor de omgeving in het Power Platform-beheercentrum. Nadat de export is geconfigureerd, rapporteert Power Apps automatisch ondersteunde telemetrie van gepubliceerde generatieve pagina's. Uw prompt en gegenereerde paginacode hoeven de Application Insights JavaScript SDK niet te initialiseren, een verbindingsreeks op te nemen of telemetrie-aanroepen toe te voegen.

Automatisch geëxporteerde telemetrie omvat:

• Voltooide pagina wordt geladen in de pageViews tabel.
• Niet-verwerkte fouten bij het renderen van pagina’s en afgewezen promises in de exceptions-tabel.
• Ondersteunde dataApi bewerkingen in de dependencies tabel.
• Navigatie geïnitieerd vanaf een generatieve pagina in de pageViews tabel.

Application Insights-telemetrie voor generatieve pagina's is een preview-functie. De beschikbaarheid kan variëren per omgeving terwijl de functie wordt geïmplementeerd.

Ga voor installatie-instructies naar Gegevens exporteren naar Application Insights. Voor het modelgestuurde app-telemetrieschema en queryrichtlijnen gaat u naar Telemetriegebeurtenissen voor modelgestuurde apps.

Een bestaande generatieve pagina bewerken

Gebruik deze werkstroom om een pagina bij te werken die al in uw omgeving bestaat.

1. Haal de bestaande pagina op. Vraag in het hulpprogramma voor het genereren van AI-code de bestaande generatieve pagina op te halen door de pagina-id (GUID) of de paginanaam op te geven in de sitemap en de app waarin deze zich bevindt. Bijvoorbeeld: "Ik wil de pagina Huisdieracceptatie bijwerken vanuit de Demo-app."

2. Beschrijf uw updates. Vertel het AI-hulpprogramma welke wijzigingen u wilt aanbrengen. Voorbeeld:

   • "Voeg een filter toe om alleen actieve records weer te geven"
   • "De indeling wijzigen om kaarten weer te geven in een raster in plaats van een lijst"
   • "Een grafiek toevoegen met acceptatietrends in de loop van de tijd"
   • Werk het formulier bij om het nieuwe aangepaste veld voor huisdierentemperament op te nemen.

3. Beoordelen, publiceren, testen en herhalen. Het AI-hulpprogramma genereert bijgewerkte TypeScript-code op basis van uw aangevraagde wijzigingen. Volg hetzelfde beoordelings-, publicatie- en testproces dat wordt beschreven in de sectie 'Een nieuwe generatieve pagina maken'. Ga door met instructies voor natuurlijke taal totdat de pagina aan uw vereisten voldoet.

Lokale ontwikkelingsbestanden

Wanneer het AI-hulpprogramma een pagina genereert, worden er ook twee ondersteunende bestanden naar uw lokale werkruimte geschreven om het controleren en herhalen van de code eenvoudiger te maken:

• package.json - declareert de runtime- en ontwikkelingsafhankelijkheden waarop de gegenereerde pagina compileert. Voer npm install na het genereren uit om deze afhankelijkheden te installeren.
• genpage.d.ts — omgevings-TypeScript-declaraties voor objecten die niet zijn geïnstalleerd via npm, zoals dataApi en pageInput.

Als beide bestanden zijn geïnstalleerd en npm install voltooid, werkt de IntelliSense van uw editor, zoals in VS Code, op basis van de gegenereerde code, zodat u de pagina kunt controleren of met de hand kunt bewerken zonder rode kronkels te zien voor niet-opgeloste typen.

Een pagina instellen om invoerparameters te accepteren

Generatieve pagina's kunnen de invoerparameters recordIdaccepteren, entityNameen data, zodat ze contextuele gegevens kunnen ontvangen wanneer ze naar andere pagina's of code worden genavigeerd. Wanneer u het AI-hulpprogramma instrueert om invoerparameters te configureren, wordt de juiste initialisatiecode gegenereerd, zodat de pagina deze waarden leest en gebruikt wanneer deze wordt geladen.

Beschrijf de gewenste parameters in uw prompt:

• "Stel de pagina in om een recordId en entityName voor een account te accepteren. Wanneer de pagina wordt geladen, gebruikt u deze parameters om de bijbehorende accountgegevens op te halen en weer te geven.
• "Configureer deze pagina om een gegevensparameter te accepteren die een aangepast filterobject bevat. Gebruik deze om de weergegeven records te filteren wanneer de pagina wordt geladen.

Als u naar de pagina wilt navigeren en deze parameters wilt doorgeven, raadpleegt u Navigeren naar en van een generatieve pagina met behulp van client-API.

Lokalisatie

Wanneer u een generatieve pagina maakt met behulp van de Power Apps vaardigheid, wordt lokalisatie automatisch afgehandeld. De agent detecteert alle talen die zijn ingeschakeld in uw omgeving en genereert code, zodat de pagina met al deze talen werkt. De pagina respecteert de voorkeurstaal en regionale opmaakvoorkeuren van elke gebruiker voor datums, getallen en valuta.

Als u een andere set talen wilt toepassen dan de talen die zijn ingeschakeld in uw omgeving, kunt u de agent vragen om deze aan te passen, bijvoorbeeld:

"Werk deze pagina bij om alleen Engels, Frans en Spaans te ondersteunen."

Ga voor meer informatie naar de lokalisatie-instructies in de opslagplaats voor Power Platform Skills.

Probleemoplossing

Pagina kan niet worden geladen in Power Apps

Als u naar uw generatieve pagina navigeert en een foutbericht of een leeg scherm ziet:

1. Open hulpprogramma's voor browserontwikkelaars (F12 in de meeste browsers).

2. Selecteer het tabblad Console .

3. Kopieer het volledige foutbericht, inclusief de stacktrace.

4. Ga terug naar het hulpprogramma voor het genereren van AI-code en plak de fout met context:

   "Ik krijg deze fout bij het openen van de pagina: [plakfout hier]. Los het probleem op.

   Het AI-hulpprogramma analyseert de fout, identificeert de hoofdoorzaak en genereert een oplossing.

5. Controleer de oplossing en vraag het hulpprogramma om de pagina opnieuw te publiceren.

Terugkeren naar een werkende versie

Als recente wijzigingen uw pagina hebben verbroken of problemen erger hebben gemaakt, kunt u het AI-hulpprogramma vragen om terug te keren naar een eerdere werkende versie:

De recente wijzigingen hebben de pagina kapotgemaakt. Ga terug naar de laatste werkende versie.

Het hulpprogramma voor kunstmatige intelligentie vervolgens:

1. Identificeert de wijzigingen die zijn aangebracht
2. Hiermee herstelt u de vorige werkende code
3. De stabiele versie opnieuw implementeren

Aanbevolen procedures

• Eenvoudig beginnen. Begin met een basisversie van uw pagina en itereer om complexiteit toe te voegen.
• Test regelmatig. Implementeer en test uw pagina na elke belangrijke wijziging.
• Wees specifiek. Geef gedetailleerde vereisten op om betere initiële resultaten te krijgen.
• Gebruik bestaande patronen. Raadpleeg vergelijkbare pagina's of UI-patronen bij het beschrijven van uw vereisten.
• Gegenereerde code valideren. Controleer altijd de gegenereerde code om ervoor te zorgen dat deze voldoet aan de standaarden en nalevingsvereisten van uw organisatie.

Beperkingen

De beperkingen voor generatieve pagina's die zijn gemaakt met hulpprogramma's voor het genereren van AI-code zijn hetzelfde als die voor generatieve pagina's die zijn gemaakt in de Power Apps Maker-portal:

• Ondersteunde gegevensbronnen zijn Dataverse-tabellen en (preview) Power Platform-connectors.
• Aangepaste API-acties en -functies worden ondersteund in preview. Aangepaste API's die gebruikmaken van het bindingstype EntityCollection of entiteitsparameters worden niet ondersteund.
• Samenwerking wordt niet ondersteund. Zorg ervoor dat slechts één maker tegelijk aan een generatieve pagina werkt.
• Alleen deze gegevenstypen worden ondersteund: Keuze, Valuta, Klant, Datum en Tijd, Alleen datum, Decimaal getal, Zwevend komma, Afbeelding, Opzoeken, Tekst met meerdere regels, Status, Reden, Tekst, Geheel getal, Ja/Nee, Unieke id.

Verwante inhoud

• Een pagina genereren met natuurlijke taal met modelgestuurde apps
• Navigeren naar en van een generatieve pagina met behulp van client-API
• dataApi-objectmethoden voor generatieve pagina's
• Power Platform CLI-verwijzing