Erstellen und Bearbeiten von generativen Seiten mit KI-Codegenerierungstools

In diesem Artikel wird beschrieben, wie Sie KI-Codegenerierungstools wie GitHub Copilot CLI und Claude Code verwenden, um generative Seiten für modellgesteuerte Apps in Power Apps zu erstellen und zu bearbeiten. Mit diesem Ansatz können Sie erweiterte Codegenerierungsfunktionen direkt in Ihren Entwicklungsworkflow integrieren, sodass Sie neue generative Seiten erstellen oder vorhandene mithilfe von Anweisungen für natürliche Sprachen durchlaufen können.

Die Verwendung von KI-Codegenerierungstools mit generativen Seiten bietet einen alternativen Entwicklungsansatz, der die UI-basierte Erfahrung in Power Apps (make.powerapps.com) ergänzt. Dieser Code-First-Ansatz richtet sich an Entwickler und technische Entwickler, die die Arbeit mit lokalen Entwicklungstools und CLI-basierten Workflows bevorzugen.

Was Sie mit Codegenerierungstools tun können

• Erstellen Sie in einem einzigen Durchlauf eine oder mehrere generierte Seiten anhand von Anforderungen in natürlicher Sprache
• Erstellen Sie die unterstützenden Microsoft Dataverse-Tabellen, die Ihre Seiten benötigen, oder verwenden Sie vorhandene wieder, einschließlich Beispieldaten für neue Tabellen
• Platzieren Sie Artefakte in einer neuen oder bestehenden App bzw. Lösung, einschließlich der direkten Erstellung einer App oder Lösung dabei
• Aktualisieren vorhandener generativer Seiten durch Anfordern von Änderungen oder Verbesserungen über Ihr KI-Tool
• Direkt bereitstellen in Ihrer Power Apps-Umgebung mit PAC CLI-Befehlen
• Arbeiten Sie lokal mit Ihren bevorzugten IDE- und Entwicklungstools zusammen mit npm install der IntelliSense-Unterstützung für den generierten Code

Funktionsweise

1. Sie beschreiben, was Sie in natürlicher Sprache erstellen möchten, z. B. "Erstellen eines generativen Seitendashboards mit top-Konten nach Umsatz".
2. Ein Planer-Agent analysiert Ihre Anfrage und schlägt einen Plan vor. Der Plan könnte eine oder mehrere Seiten, die Dataverse-Tabellen, die für die Seiten benötigt werden (neu oder bereits vorhanden), sowie die App und die Lösung umfassen, in der die Artefakte enthalten sind. Der Planer delegiert dann an spezialisierte Agents, um zu erstellen, was der Plan beschreibt. Beispielsweise ein Tabellen-Generator und ein Seiten-Generator.
3. Sie überprüfen und passen den Plan vor dem Bau an. Sie können die Anzahl der Seiten ändern, Tabellen austauschen oder hinzufügen, eine andere App als Ziel festlegen oder die Artefakte in einer anderen Lösung platzieren.
4. Die Agents generieren produktionsbereiten TypeScript- und React-Code für Ihre Seite oder Seiten sowie unterstützende Dateien für die lokale Entwicklung.
5. Das Tool stellt die Artefakte mithilfe von PAC-CLI-Befehlen für generative Seiten in Ihrer Umgebung bereit und führt optional einen Schritt zur Überprüfung im Browser aus, der die Seite mit generierten Tests prüft.
6. Ihre generative Seite wird in Ihrer modellgesteuerten App angezeigt.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie über die hier beschriebene erforderliche Software und Berechtigungen verfügen.

Softwareanforderungen

Zusätzliche Anforderungen

• Eine Power Platform-Umgebung mit einer modellgesteuerten App zum Bereitstellen von Seiten.
• Eine authentifizierte PAC CLI-Sitzung , die mit Ihrer Zielumgebung verbunden ist.
  • Wechseln Sie zur Authentifizierung von Power Platform CLI , um weitere Details zum Herstellen einer Verbindung zu erhalten.

Installieren des Plug-Ins

Führen Sie das Installationsprogramm aus, um alle Power Platform-Plug-Ins entweder in PowerShell oder in einem Windows-Befehlsfenster einzurichten.

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

Das Installationsprogramm läuft automatisch:

• Erkennt verfügbare Tools (Claude Code, GitHub Copilot CLI)
• Registriert den Plugin-Marketplace und installiert alle Plug-Ins.
• Aktiviert die automatische Aktualisierung, sodass Plug-Ins auf dem neuesten Stand bleiben

Starten Sie nach der Installation ihr KI-Tool bei Bedarf neu.

Installieren sie nur das Plug-In für generative Seiten

Um das generative Seiten-Plugin nur für GitHub Copilot CLI oder Claude Code zu installieren:

1. Fügen Sie das Power Platform Skills Marketplace-Plug-In hinzu: /plugin marketplace add microsoft/power-platform-skills
2. Installieren Sie das Power Apps-Plug-In: /plugin install model-apps@power-platform-skills

Nach der Installation können Sie das Plug-In entweder verwenden:

• Explizites Ausführen des /genpage Befehls.
• Beschreiben Sie die Seite, die Sie erstellen möchten. Das Tool erkennt und verwendet das Plug-In automatisch.

Verwenden anderer KI-Codegenerierungstools

Stellen Sie bei anderen KI-Codegenerierungstools sicher, dass Ihr Tool Zugriff auf die generativen Seitenressourcen aus dem Power Platform Skills GitHub-Repository hat. Der Plug-In-Ordner "Modell-Apps" enthält Komponentendokumentation, Beispielcode, PAC CLI-Befehlsreferenz und Workflowanweisungen, die zum Erstellen von Code erforderlich sind, der an generative Seitenanforderungen angepasst wird, einschließlich der Erstellung von Seiten, die mehrere Sprachen und Regionen unterstützen. Weitere Informationen zum Zugreifen und Verwenden dieser Ressourcen mit Ihrem bevorzugten Tool finden Sie in der Repository-Infodatei .

Übersicht über Fähigkeiten

Das Power Apps-Plug-In bietet diese Fähigkeit zum Arbeiten mit generativen Seiten.

Mit dieser Fähigkeit können Sie beschreiben, was Sie erstellen möchten, und das KI-Tool generiert vollständigen TypeScript- und React-Code für Ihre generative Seite, und stellen Sie es dann direkt in Ihrer Power Apps-Umgebung bereit.

Erstellen einer neuen generativen Seite

Folgen Sie diesem Workflow, wenn Sie eine neue Seite oder einen Satz von Seiten von Grund auf neu erstellen.

1. Beginnen Sie eine Unterhaltung mit Ihrem KI-Tool. Beschreiben Sie, was Sie erstellen möchten. Seien Sie so spezifisch oder so offen wie gewünscht – je vager die Anfrage ist, desto mehr füllt der Agent sich selbst aus. Sie können auch ein Bild oder andere Materialien anhängen, um eine Orientierung für Bildsprache, Theming und Layout zu geben. Beispiele:

   • Erstellen Sie ein generatives Seitendashboard, das unsere Top 10 umsatzstärksten Konten mithilfe der Kontotabelle anzeigt.
   • "Erstellen Sie zwei Seiten für die Verwaltung meiner freiwilligen Anmeldungen – eine, um offene Schichten zu durchsuchen und eine, um eine Anmeldung zu bestätigen – mit Beispieldaten"
   • "Erstellen einer generativen Seite zum Anzeigen von Vorfallberichten auf einer Karte mithilfe der Vorfalltabelle"

2. Wählen Sie erstellen oder bearbeiten, wenn Sie gefragt werden. Wenn der Planner-Agent nicht sicher ist, ob Sie eine neue Seite oder eine vorhandene Seite aktualisieren möchten, werden Sie gefragt. Um diesem Workflow zu folgen, wählen Sie die Erstellung einer neuen Seite aus. Zum Bearbeiten wechseln Sie zu "Bearbeiten einer vorhandenen generativen Seite".

3. Beantworten Sie Fragen dazu, was entwickelt werden soll. Der Planer fragt möglicherweise, welche Art von Seite Sie möchten, bietet einige Beispiele und akzeptiert eine benutzerdefinierte Beschreibung, z. B. welche Daten verwendet werden sollen, layout, welche Informationen angezeigt werden sollen, Interaktionen usw. Achten Sie auf geschäftliche Anforderungen und Datenanforderungen, erkennen Sie frühzeitig mobile Anforderungen, und erwähnen Sie alle UI-Komponenten oder Layouteinstellungen. Der Planer kann auch Fragen stellen, z. B. ob Dataverse-Tabellen oder hartcodierte Beispieldaten verwendet werden sollen, und ob die Seite zu einer vorhandenen App hinzugefügt oder eine neue App erstellt werden soll.

4. Überprüfen und anpassen Sie den Plan. Der Planner stellt einen Plan dar, der die Seite oder Seiten enthält, die er erstellen möchte, die zu verwendenden Dataverse-Tabellen (mit den zu verwendenden Spalten), die App zum Hosten der Seite (neu oder vorhanden) und die Lösung, in der sich die Artefakte befinden. Arbeiten Sie mit dem Agent zusammen, um alles nach Ihren Wünschen anzupassen – zum Beispiel die Anzahl der Seiten, welche Tabellen verwendet oder erstellt werden, die Ziel-App oder die Ziellösung. Bestätigen Sie den Plan, wenn er Ihrer Absicht entspricht.

5. Lassen Sie die Agenten entwickeln und bereitstellen. Die spezialisierten Agents generieren die Seite oder Seiten, unterstützende Tabellen und Code und stellen sie dann in Ihrer Umgebung bereit.

6. Überprüfen Sie optional im Browser. Nach dem Build kann der Agent vorschlagen, einen Schritt zur Browserüberprüfung auszuführen, der automatisch generierte Playwright-Tests für die Seite ausführt, um zu bestätigen, dass sie korrekt geladen wird und ordnungsgemäß funktioniert. Verwenden Sie dies, um offensichtliche Probleme zu erfassen, bevor Sie manuell testen.

7. Testen und iterieren. Öffnen Sie Ihre modellgesteuerte App in Power Apps, und navigieren Sie zur neuen Seite. Wenn Sie Änderungen vornehmen müssen, kehren Sie zu Ihrem KI-Tool zurück, und beschreiben Sie die Aktualisierungen in natürlicher Sprache.

Bearbeiten einer vorhandenen generativen Seite

Verwenden Sie diesen Workflow, um eine Seite zu aktualisieren, die bereits in Ihrer Umgebung vorhanden ist.

1. Rufen Sie die vorhandene Seite ab. Fordern Sie in Ihrem KI-Codegenerierungstool an, die vorhandene generative Seite abzurufen, indem Sie die Seiten-ID (GUID) oder den Seitennamen in der Sitemap und der App angeben, in der sie sich befindet. Beispiel: "Ich möchte die generative Seite "Pet Adoption" aus der Demo-App aktualisieren."

2. Beschreiben Sie Ihre Updates. Teilen Sie dem KI-Tool mit, welche Änderungen Sie vornehmen möchten. Beispiele:

   • "Hinzufügen eines Filters zum Anzeigen nur aktiver Datensätze"
   • "Ändern des Layouts zum Anzeigen von Karten in einem Raster anstelle einer Liste"
   • "Hinzufügen eines Diagramms mit Einführungstrends im Laufe der Zeit"
   • Aktualisieren Sie das Formular, um das neue benutzerdefinierte Feld für Haustier-Temperament einzuschließen.

3. Überprüfen, veröffentlichen, testen und iterieren. Das KI-Tool generiert aktualisierten TypeScript-Code basierend auf ihren angeforderten Änderungen. Folgen Sie dem im Abschnitt "Erstellen einer neuen generativen Seite" beschriebenen Überprüfungs-, Veröffentlichungs- und Testprozess. Fahren Sie mit Anweisungen in natürlicher Sprache fort, bis eine Seite Ihre Anforderungen erfüllt.

Lokale Entwicklungsdateien

Wenn das KI-Tool eine Seite generiert, schreibt es auch zwei Unterstützende Dateien in Ihren lokalen Arbeitsbereich, um das Überprüfen und Durchlaufen des Codes zu vereinfachen:

• package.json — deklariert die Laufzeit- und Entwicklungsabhängigkeiten, mit der die generierte Seite kompiliert wird. Führen Sie npm install nach der Generierung aus, um diese Abhängigkeiten zu installieren.
• genpage.d.ts — globale TypeScript-Deklarationen für Objekte, die nicht per npm installiert werden, wie dataApi und pageInput.

Wenn beide Dateien vorhanden sind und npm install abgeschlossen ist, arbeitet die IntelliSense-Funktion Ihres Editors, etwa in VS Code, mit dem generierten Code, sodass Sie die Seite überprüfen oder von Hand bearbeiten können, ohne rote Wellenlinien für nicht aufgelöste Typen zu sehen.

Einrichten einer Seite zum Akzeptieren von Eingabeparametern

Generative Seiten können die Eingabeparameter recordId, entityName und data akzeptieren, wodurch sie in der Lage sind, kontextbezogene Daten zu empfangen, wenn von anderen Seiten oder aus Code zu ihnen navigiert wird. Wenn Sie das KI-Tool anweisen, Eingabeparameter zu konfigurieren, generiert es den entsprechenden Initialisierungscode, sodass die Seite diese Werte liest und verwendet, wenn sie geladen wird.

Beschreiben Sie die gewünschten Parameter in Ihrer Eingabeaufforderung:

• „Richte die Seite so ein, dass sie eine Konto-recordId und einen entityName akzeptiert. Wenn die Seite geladen wird, verwenden Sie diese Parameter, um die entsprechenden Kontodetails abzurufen und anzuzeigen."
• "Konfigurieren Sie diese Seite, um einen Datenparameter zu akzeptieren, der ein benutzerdefiniertes Filterobjekt enthält. Verwenden Sie sie, um die angezeigten Datensätze zu filtern, wenn die Seite geladen wird."

Informationen zum Navigieren zur Seite und zum Übergeben dieser Parameter finden Sie unter Navigieren zu und von einer generativen Seite mithilfe der Client-API.

Lokalisierung

Wenn Sie eine generative Seite mit dem Power Apps-Plug-In für Claude Code oder GitHub Copilot CLI erstellen, wird die Lokalisierung automatisch behandelt. Der Agent erkennt alle in Ihrer Umgebung aktivierten Sprachen und generiert Code, sodass die Seite mit allen sprachen funktioniert. Die Seite berücksichtigt die bevorzugten Sprach- und Regionalformatierungseinstellungen jedes Benutzers für Datumsangaben, Zahlen und Währungen.

Wenn Sie eine andere Gruppe von Sprachen als die in Ihrer Umgebung aktivierten Sprachen verwenden möchten, können Sie den Agent bitten, sich anzupassen, z. B.:

"Aktualisieren Sie diese Seite so, dass nur Englisch, Französisch und Spanisch unterstützt werden."

Weitere Informationen finden Sie in den Lokalisierungsanweisungen im Power Platform Skills-Repository.

Problembehandlung

Die Seite kann in Power Apps nicht geladen werden.

Wenn Sie zu Ihrer generativen Seite navigieren und eine Fehlermeldung oder einen leeren Bildschirm beobachten:

1. Öffnen Sie Browserentwicklertools (F12 in den meisten Browsern).

2. Wählen Sie die Registerkarte "Konsole " aus.

3. Kopieren Sie die vollständige Fehlermeldung, einschließlich des Stacktraces.

4. Kehren Sie zu Ihrem KI-Codegenerierungstool zurück, und fügen Sie den Fehler mit Kontext ein:

   "Dieser Fehler wird beim Öffnen der Seite angezeigt: [Fehler hier einfügen]. Beheben Sie das Problem."

   Das KI-Tool analysiert den Fehler, identifiziert die Ursache und generiert einen Fix.

5. Überprüfen Sie den Fix, und bitten Sie das Tool, die Seite erneut zu veröffentlichen.

Wiederherstellen einer funktionierenden Version

Wenn kürzlich vorgenommene Änderungen Ihre Seite beschädigt oder die Probleme verschlimmert haben, können Sie das KI-Tool bitten, ein Rollback auf eine frühere funktionierende Version vorzunehmen.

„Die letzten Änderungen beschädigten die Seite. Bitte wiederherstellen Sie die letzte funktionierende Version."

Das KI-Tool dann:

1. Identifiziert die vorgenommenen Änderungen.
2. Stellt den vorherigen Arbeitscode wieder her
3. Erneutes Bereitstellen der stabilen Version

Optimale Verfahren

• Beginnen Sie einfach. Beginnen Sie mit einer Basisversion Ihrer Seite und iterieren Sie, um Komplexität hinzuzufügen.
• Testen Sie häufig. Stellen Sie Ihre Seite nach jeder signifikanten Änderung bereit und testen Sie sie.
• Spezifisch sein. Stellen Sie detaillierte Anforderungen bereit, um bessere Anfängliche Ergebnisse zu erzielen.
• Verwenden Sie vorhandene Muster. Verweisen Sie bei der Beschreibung Ihrer Anforderungen auf ähnliche Seiten oder UI-Muster.
• Überprüfen Sie den generierten Code. Überprüfen Sie immer den generierten Code, um sicherzustellen, dass er die Standards und Complianceanforderungen Ihrer Organisation erfüllt.

Einschränkungen

Die Einschränkungen für generative Seiten, die mit AI-Codegenerierungstools erstellt wurden, sind identisch mit denen für generative Seiten, die im Power Apps Maker-Portal erstellt wurden:

• Ihre Seite kann nur mit Dataverse-Tabellen verbunden werden.
• Die Zusammenarbeit wird nicht unterstützt. Stellen Sie sicher, dass jeweils nur ein Hersteller an einer generativen Seite arbeitet.
• Nur diese Datentypen werden unterstützt: Auswahl, Währung, Kunde, Datum und Uhrzeit, Nur Datum, Dezimalzahl, Gleitkommazahl, Bild, Nachschlagen, Mehrzeiliger Text, Status, Statusgrund, Text, Ganze Zahl, Ja/Nein, Eindeutiger Bezeichner.

Verwandte Inhalte

• Generieren einer Seite mit natürlicher Sprache mit modellgesteuerten Apps
• Navigieren zu und von einer generativen Seite mithilfe der Client-API
• dataApi-Objektmethoden für generative Seiten
• Power Platform CLI-Referenz