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 en Claude Code, kunt gebruiken om generatieve pagina's te maken en te bewerken voor modelgestuurde apps in Power Apps. Met deze aanpak kunt u geavanceerde mogelijkheden voor het genereren van code rechtstreeks integreren in uw ontwikkelwerkstroom, zodat u nieuwe generatieve pagina's kunt maken of bestaande pagina's kunt herhalen met behulp van instructies voor natuurlijke taal.

Het gebruik van hulpprogramma's voor het genereren van AI-code met generatieve pagina's biedt een alternatieve ontwikkelingsbenadering die een aanvulling vormt op de gebruikersinterface-ervaring in Power Apps (make.powerapps.com). Deze code-first aanpak is ontworpen voor ontwikkelaars en technische makers die liever werken 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
• 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 die de pagina's nodig hebben (nieuw of bestaand) 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, tabellen wisselen of toevoegen, een andere app richten 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.

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 (Claude Code, GitHub Copilot CLI)
• 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"

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 of in code vastgelegde voorbeeldgegevens en het toevoegen van de pagina aan een bestaande app of het maken van een nieuwe app.

4. Controleer en pas het plan aan. De planner presenteert een plan met de pagina's of pagina's die moeten worden gemaakt, de Dataverse-tabellen die moeten worden gebruikt of gemaakt (met de kolommen 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 om alles aan te passen wat u wilt wijzigen — bijvoorbeeld het aantal pagina's, welke tabellen worden gebruikt of aangemaakt, 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 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.

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 kronkelen 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-invoegtoepassing voor Claude Code of GitHub Copilot CLI, 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:

• Uw pagina kan alleen verbinding maken met Dataverse-tabellen.
• 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