Erstellen und Bearbeiten von generativen Seiten mit KI-Codegenerierungstools (Vorschau)

[Dieses Thema ist Teil der Dokumentation zur Vorabversion und kann geändert werden.]

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 von neuen generativen Seiten mithilfe von Anforderungen in einfacher Sprache
• 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
• Lokales Arbeiten mit Ihren bevorzugten IDE- und Entwicklungstools

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. Das KI-Codegenerierungstool verwendet installierte generative Seitenkenntnisse oder einen anderen Kontext zu generativen Seiten, um Klarstellungsfragen zu Ihren Anforderungen zu stellen.
3. Das Tool generiert produktionsbereiten TypeScript- und React-Code für Ihre generative Seite.
4. Das Tool stellt den Code in Ihrer Umgebung mithilfe von generativen Page PAC CLI-Befehlen bereit.
5. 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

So installieren Sie nur das generative Seiten-Plug-In für GitHub Copilot CLI oder Claude Code:

1. Fügen Sie das Power Platform Skills Marketplace-Plug-In hinzu: /plugin marketplace add microsoft/power-platform-skills
2. Installieren Sie das plug-In Power Apps: /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 für andere KI-Codegenerierungstools sicher, dass Ihr Tool Zugriff auf die Ressourcen der generativen Seiten im GitHub-Repository Power Platform skills hat. Der Plug-In-Ordner "Model-Apps" enthält Komponentendokumentation, Beispielcode, PAC CLI-Befehlsreferenz und Workflowanweisungen, die zum Erstellen von Code erforderlich sind, der an generative Seitenanforderungen angepasst wird. 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 dann direkt in Ihrer Power Apps Umgebung bereitstellen.

Erstellen einer neuen generativen Seite

Folgen Sie diesem Workflow, wenn Sie eine neue Seite von Grund auf neu erstellen.

1. Beginnen Sie eine Unterhaltung mit Ihrem KI-Tool. Beschreiben Sie, was Sie erstellen möchten, einschließlich der Daten, die Sie einbeziehen möchten (welche Dataverse-Tabellen oder ob Beispielmodelldaten erstellt werden sollen). Seien Sie so spezifisch wie gewünscht – je vage Sie mit der Anfrage sind, desto mehr Details versucht der Agent selbst zu ergänzen. Sie können auch ein Bild oder andere Materialien anfügen oder bereitstellen, um die visuellen Elemente, Designs und Layouts zu unterstützen. Beispiel:

   • Erstellen Sie ein generatives Seitendashboard, das unsere Top 10 umsatzstärksten Konten mithilfe der Kontotabelle anzeigt.
   • "Erstellen eines generativen Seitenformulars zum Erstellen und Bearbeiten von Kontaktdatensätzen mit Beispieldaten"
   • "Erstellen einer generativen Seite zum Anzeigen von Vorfallberichten auf einer Karte mithilfe der Vorfalltabelle"
   • "Erstellen einer generativen Seite für eine Vertriebspipelinevisualisierung mit Verkaufschancen mithilfe des modernen blauen Designs"

2. Beantworten Sie Klarstellungsfragen. Das KI-Tool stellt Fragen, um Ihre Anforderungen zu verstehen. Achten Sie auf geschäftliche Anforderungen und Datenanforderungen, identifizieren Sie frühzeitig mobile Anforderungen, und erwähnen Sie bestimmte UI-Komponenten oder Layouteinstellungen.

3. Überprüfen Sie den Implementierungsplan. Das KI-Tool stellt einen Plan dar, der die zu erstellenden Komponenten beschreibt, Dataverse-Tabellen und Spalten, die verwendet werden sollen, wichtige Features und Interaktionen sowie den Datenempfangsansatz.The AI tool presents a plan describing the components to be built, Dataverse tables and columns to be used, key features and interactions, and data retrieval approach. Bestätigen Sie, dass der Plan Ihre Anforderungen erfüllt oder Änderungen anfordert.

4. Überprüfen Sie Code, und stellen Sie ihn bereit. Das KI-Tool generiert vollständigen TypeScript-Code. Bitten Sie das Tool, Ihre Seite zu veröffentlichen oder bereitzustellen, wenn Sie bereit sind, optional einen Sitemap-Namen anzugeben (das Tool generiert standardmäßig einen aussagekräftigen Namen).

5. Testen und iterieren. Öffnen Sie Ihre modellgesteuerte App in Power Apps, und navigieren Sie mithilfe der Sitemap zur neuen Seite. Wenn Sie Änderungen vornehmen müssen, kehren Sie zu Ihrem KI-Tool zurück, und beschreiben Sie die Updates mithilfe 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. Beispiel:

   • "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.

Problembehandlung

Die Seite kann nicht in Power Apps 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 jüngsten Ä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

Bewährte Methoden

• Starten 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.
• Derzeit wird nur US-Englisch unterstützt.
• 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
• dataApi-Objektmethoden für generative Seiten
• Power Platform CLI-Referenz