Twórz i edytuj strony generatywne za pomocą narzędzi do generowania kodu opartego na sztucznej inteligencji

W tym artykule opisano, jak używać narzędzi AI do generowania kodu, takich jak GitHub Copilot CLI, do tworzenia i edytowania stron generatywnych dla aplikacji opartych na modelach w usłudze Power Apps. Korzystając z tego podejścia, można zintegrować zaawansowane możliwości generowania kodu bezpośrednio z przepływem pracy tworzenia, aby utworzyć nowe strony generowania lub iterować na istniejących, korzystając z instrukcji języka naturalnego. Strony mogą używać tabel Microsoft Dataverse, konektorów Power Platform (wersja zapoznawcza) i niestandardowych interfejsów API Dataverse (wersja zapoznawcza).

Używanie narzędzi AI do generowania kodu z stronami generatywnymi uzupełnia środowisko oparte na interfejsie użytkownika w Power Apps (make.powerapps.com). To podejście oparte na kodzie pasuje do każdego twórcy lub dewelopera, który preferuje pracę z lokalnymi narzędziami programistycznymi i przepływami pracy opartymi na interfejsie wiersza polecenia.

Co można zrobić za pomocą narzędzi do generowania kodu

• Utwórz jedną lub więcej stron generatywnych w jednym przebiegu na podstawie wymagań sformułowanych prostym językiem
• Utwórz tabele pomocnicze Microsoft Dataverse, których potrzebują Twoje strony, lub użyj ponownie istniejących, w tym z przykładowymi danymi dla nowych tabel
• (Wersja zapoznawcza) Nawiązywanie połączenia z danymi poza usługą Dataverse przy użyciu łączników platformy Power Platform
• (Wersja zapoznawcza) Wywoływanie logiki biznesowej po stronie serwera przy użyciu niestandardowych interfejsów API usługi Dataverse
• Umieść artefakty w nowej lub istniejącej aplikacji albo w nowym lub istniejącym rozwiązaniu, w tym z możliwością utworzenia aplikacji lub rozwiązania w locie
• Aktualizowanie istniejących generatywnych stron poprzez wprowadzanie zmian lub ulepszeń za pomocą narzędzia sztucznej inteligencji
• Wdróż bezpośrednio do środowiska usługi Power Apps, używając poleceń PAC CLI
• Pracuj lokalnie w preferowanym środowisku IDE i za pomocą narzędzi programistycznych z obsługą funkcji npm install i IntelliSense dla wygenerowanego kodu

Jak to działa

1. Opisujesz, co chcesz zbudować w sposób naturalny, na przykład: "Utwórz pulpit nawigacyjny generatywnej strony wyświetlający najważniejsze konta według przychodów".
2. Agent planisty analizuje twoje żądanie i proponuje plan. Plan może zawierać co najmniej jedną stronę, tabele usługi Dataverse, źródła danych oparte na łącznikach lub niestandardowe interfejsy API, których potrzebują strony, oraz aplikację i rozwiązanie, w którym żyją artefakty. Następnie planista zleca wyspecjalizowanym agentom zbudowanie tego, co opisano w planie. Na przykład konstruktor tabeli i konstruktor strony.
3. Przeglądasz i dostosowujesz plan przed budynkiem. Możesz zmienić liczbę stron, zamienić lub dodać źródła danych, wybrać inną aplikację lub umieścić artefakty w innym rozwiązaniu.
4. Agenci generują gotowy do produkcji kod TypeScript i React dla strony lub stron wraz z plikami pomocniczymi na potrzeby programowania lokalnego.
5. Narzędzie wdraża artefakty w środowisku przy użyciu poleceń interfejsu wiersza polecenia PAC dla stron generatywnych i opcjonalnie uruchamia krok weryfikacji w przeglądarce, który polega na testowaniu strony za pomocą wygenerowanych testów.
6. Strona generatywna pojawia się w Twojej aplikacji opartej na modelu.

Wymagania wstępne

Przed rozpoczęciem upewnij się, że masz wymagane oprogramowanie i uprawnienia opisane tutaj.

Wymagania dotyczące oprogramowania

Wymagania dodatkowe

• Środowisko platformy Power Platform z aplikacją opartą na modelu do wdrażania stron.
• Uwierzytelniona sesja PAC CLI połączona ze środowiskiem docelowym.
  • Przejdź do Uwierzytelnianie interfejsu wiersza polecenia Power Platform, aby uzyskać więcej informacji na temat łączenia się.
• W przypadku stron korzystających z łączników (wersja zapoznawcza) istniejące uwierzytelnione połączenie platformy Power Platform dla każdego łącznika, którego chcesz użyć. Agent może w razie potrzeby utworzyć odwołanie do połączenia.
• W przypadku stron wywołujących niestandardowy interfejs API usługi Dataverse (wersja zapoznawcza) w środowisku docelowym musi istnieć obsługiwany niestandardowy interfejs API. Aby zaimplementować logikę po stronie serwera i udostępnić ją na stronie generatywnej, utwórz wtyczkę Dataverse, a następnie utwórz niestandardowy interfejs API przy użyciu narzędzia Plug-in Registration Tool i skojarz go z typem wtyczki. Aby uzyskać szczegółowe informacje o konfiguracji, zobacz Tworzenie i używanie niestandardowych interfejsów API.
• Aby wyeksportować telemetrię strony generatywnej do usługi aplikacja systemu Azure Insights (wersja zapoznawcza), administrator musi skonfigurować eksport danych usługi Application Insights dla środowiska w centrum administracyjnym Power Platform. Środowisko musi spełniać wymagania dotyczące eksportowania danych usługi Application Insights.

Instalowanie wtyczki

Uruchom instalatora, aby skonfigurować wszystkie wtyczki platformy Power Platform w programie PowerShell lub w oknie polecenia Windows.

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

Instalator automatycznie:

• Wykrywa dostępne narzędzia (interfejs wiersza polecenia GitHub Copilot, Claude Code)
• Rejestruje rynek wtyczek i instaluje wszystkie wtyczki
• Włącza automatyczną aktualizację, dzięki czemu wtyczki pozostają aktualne

Po zakończeniu instalacji uruchom ponownie narzędzie sztucznej inteligencji w razie potrzeby.

Zainstaluj tylko wtyczkę strony generującej

Aby zainstalować tylko wtyczkę strony generowania dla interfejsu wiersza polecenia narzędzia GitHub Copilot lub Claude Code:

1. Dodaj wtyczkę Power Platform Skills marketplace: /plugin marketplace add microsoft/power-platform-skills
2. Zainstaluj wtyczkę Power Apps: /plugin install model-apps@power-platform-skills

Po zainstalowaniu można użyć wtyczki za pomocą jednego z następujących elementów:

• Uruchomienie polecenia /genpage w sposób jawny.
• Opisywanie strony, którą chcesz utworzyć. Narzędzie automatycznie wykrywa wtyczkę i używa jej.

Korzystanie z innych narzędzi do generowania kodu sztucznej inteligencji

W przypadku innych narzędzi do generowania kodu sztucznej inteligencji upewnij się, że narzędzie ma dostęp do zasobów generatywnej strony z repozytorium GitHub Power Platform skills. Folder wtyczki aplikacji modelu zawiera dokumentację komponentów, przykładowy kod źródłowy, dokumentację poleceń CLI PAC i instrukcje przepływu pracy niezbędne do tworzenia kodu spełniającego wymagania stron generatywnych, w tym sposobu tworzenia stron obsługujących wiele języków i regionów. Zapoznaj się z plikiem Readme repozytorium, aby uzyskać informacje na temat dostępu do tych zasobów i korzystania z nich za pomocą swojego preferowanego narzędzia.

Omówienie umiejętności

Wtyczka Power Apps zapewnia tę umiejętność pracy ze stronami generatywnymi.

Ta umiejętność pozwala opisać, co chcesz zbudować, a narzędzie sztucznej inteligencji wygeneruje kompletny kod TypeScript i React dla twojej strony generatywnej, który zostanie następnie wdrożony bezpośrednio w środowisku Power Apps.

Utwórz nową stronę generatywną

Postępuj zgodnie z tym przepływem pracy podczas tworzenia nowej strony lub zestawu stron od podstaw.

1. Rozpocznij konwersację z narzędziem sztucznej inteligencji. Opisz, co chcesz utworzyć. Bądź tak konkretny albo tak ogólnikowy, jak chcesz — im bardziej nieprecyzyjne polecenie, tym więcej szczegółów agent uzupełni sam. Możesz również dołączyć obraz lub inne materiały, aby kierować wizualizacjami, motywami i układem. Przykład:

   • Utwórz stronę generatywną pulpitu nawigacyjnego pokazującą nasze 10 najważniejszych kont pod względem przychodu przy użyciu tabeli Account
   • Utwórz dwie strony do zarządzania zgłoszeniami wolontariuszy — jedną do przeglądania dostępnych dyżurów, a drugą do potwierdzania zgłoszenia — korzystając z przykładowych danych
   • "Utwórz stronę generowania na potrzeby wyświetlania raportów zdarzeń na mapie przy użyciu tabeli Incydent"
   • Utwórz stronę wyświetlającą dokumenty z listy SharePoint „Project files”.
   • „Utwórz stronę przeglądu zamówienia z przyciskiem Zatwierdź, który wywołuje niestandardowy interfejs API ApproveOrder”.

2. Wybierz opcję „Utwórz” lub „Edytuj”, jeśli pojawi się monit. Jeśli agent planowania nie ma pewności, czy chcesz utworzyć nową stronę, czy zaktualizować istniejącą, zapyta. Aby postępować zgodnie z tym przepływem pracy, wybierz opcję utworzenia nowej strony. Do edycji przejdź do pozycji Edytuj istniejącą stronę generowania.

3. Odpowiedz na pytania dotyczące tego, co należy zbudować. Planista może zapytać, jakiego rodzaju strony chcesz, zaoferować kilka przykładów i zaakceptować opis niestandardowy, na przykład dane do użycia, układ, jakie informacje mają być wyświetlane, interakcje itd. Należy określić wymagania biznesowe i wymagania dotyczące danych, wcześnie zidentyfikować wymagania dotyczące urządzeń przenośnych i wspomnieć o wszystkich składnikach interfejsu użytkownika lub preferencjach układu. Planista może również zadawać pytania doprecyzowujące, na przykład o to, czy użyć tabel Dataverse, łączników Power Platform, niestandardowych interfejsów API czy twardo zakodowanych danych przykładowych, a także czy dodać stronę do istniejącej aplikacji, czy utworzyć nową.

4. Przejrzyj i dostosuj plan. Moduł planowania przedstawia plan obejmujący stronę lub strony, które zamierza utworzyć, tabele usługi Dataverse, źródła danych oparte na łącznikach lub niestandardowe interfejsy API do wykorzystania, aplikację hostującą stronę (nową lub istniejącą) oraz rozwiązanie, w którym znajdują się artefakty. Wykonaj iterację za pomocą agenta, aby dostosować wszystko, co chcesz zmienić — na przykład liczbę stron, które tabele lub niestandardowe interfejsy API są używane, aplikacja docelowa lub rozwiązanie docelowe. Potwierdź plan, gdy jest zgodny z twoją intencją.

5. Pozwól agentom kompilować i wdrażać. Wyspecjalizowani agenci generują stronę lub strony, tabele pomocnicze, łącznik lub niestandardowe powiązania interfejsu API oraz kod, a następnie wdrażają je w środowisku.

6. Opcjonalnie sprawdź w przeglądarce. Po zakończeniu kompilacji agent może zaproponować uruchomienie kroku „verify-in-browser”, który uruchamia automatycznie wygenerowane testy Playwright dla strony, aby potwierdzić, że strona ładuje się i działa poprawnie. Ta funkcja umożliwia przechwycenie oczywistych problemów przed ręcznym testowaniem.

7. Testowanie i iterowanie. Otwórz aplikację opartą na modelu w Power Apps i przejdź do nowej strony. Jeśli musisz wprowadzić zmiany, wróć do narzędzia sztucznej inteligencji i opisz aktualizacje w języku naturalnym.

Korzystanie z danych łącznika (wersja zapoznawcza)

Obsługa łączników umożliwia stronie generatywnej używanie danych spoza platformy Dataverse za pośrednictwem ekosystemu łączników Power Platform. Obsługiwane są wszystkie łączniki platformy Power Platform.

Aby użyć danych łącznika, opisz usługę i dane, których strona ma używać w wierszu polecenia. Na przykład poproś agenta o utworzenie strony, która wyświetla dokumenty z SharePoint list. Podczas planowania agent:

1. Wyświetla listę połączeń i odwołań do połączeń dostępnych w wybranym środowisku.
2. Prosi o wybranie połączenia. Jeśli połączenie nie ma odwołania do połączenia, agent je utworzy.
3. Prosi o wybranie danych łącznika, takich jak zestaw danych i tabela lub operacja łącznika.
4. Dodaje powiązanie konektora do strony i uwzględnia je podczas wdrażania strony.

Przed zatwierdzeniem kompilacji przejrzyj w planie źródło danych dla łącznika. Przetestuj wygenerowaną stronę przy użyciu tożsamości i uprawnień, których będą używać użytkownicy.

Użyj niestandardowego interfejsu API (wersja zapoznawcza)

Użyj niestandardowej akcji lub funkcji interfejsu API Usługi Dataverse, gdy strona musi jawnie uruchomić logikę biznesową po stronie serwera, taką jak zatwierdzanie zamówienia, ponowne obliczanie ceny lub weryfikowanie transakcji.

Aby użyć niestandardowego interfejsu API, opisz operację i kiedy strona powinna wywołać ją w wierszu polecenia. Na przykład poproś agenta o dodanie przycisku „Zatwierdź”, który wywołuje niestandardowy interfejs API ApproveOrder dla bieżącego zamówienia. Podczas planowania agent:

1. Wyświetla listę obsługiwanych niestandardowych interfejsów API dostępnych w wybranym środowisku.
2. Prosi o wybranie niestandardowego interfejsu API, który powinien wywołać strona.
3. Używa właściwości żądania i odpowiedzi niestandardowego interfejsu API podczas generowania strony.
4. Dodaje niestandardowe powiązanie interfejsu API do strony i dołącza je po wdrożeniu strony.

Przed zatwierdzeniem kompilacji przejrzyj w planie niestandardowy interfejs API i jego dane wejściowe. Przetestuj wygenerowaną stronę przy użyciu tożsamości i uprawnień używanych przez użytkowników.

Monitorowanie strony generatywnej za pomocą usługi Application Insights (wersja zapoznawcza)

Power Apps może automatycznie eksportować telemetrię operacyjną dla stron generatywnych do usługi aplikacja systemu Azure Insights. Ta funkcja działa tak samo w przypadku stron utworzonych za pomocą narzędzi generowania kodu sztucznej inteligencji i stron utworzonych w Power Apps (make.powerapps.com).

Administrator musi najpierw skonfigurować eksportowanie danych usługi Application Insights dla środowiska w centrum administracyjnym platformy Power Platform. Po skonfigurowaniu eksportu usługa Power Apps automatycznie raportuje obsługiwane dane telemetryczne z opublikowanych stron generatywnych. Twoje polecenie i wygenerowany kod strony nie muszą inicjować zestawu JavaScript SDK usługi Application Insights, dołączać parametrów połączenia ani dodawać wywołań telemetrii.

Automatycznie wyeksportowane dane telemetryczne obejmują:

• Ukończone ładowanie strony w pageViews tabeli.
• Nieobsługiwane błędy renderowania strony i odrzucone obietnice w tabeli exceptions
• Obsługiwane operacje dataApi w tabeli dependencies.
• Nawigacja zainicjowana ze strony generatywnej w tabeli pageViews.

Telemetria usługi Application Insights dla stron generatywnych jest funkcją w wersji zapoznawczej. Dostępność może się różnić w zależności od środowiska podczas wdrażania funkcji.

Aby uzyskać instrukcje dotyczące konfiguracji, przejdź do tematu Eksportowanie danych do usługi Application Insights. Aby uzyskać wskazówki dotyczące schematu i zapytań dotyczących telemetrii aplikacji opartej na modelu, przejdź do tematu Zdarzenia telemetrii dla aplikacji opartych na modelu.

Edytowanie istniejącej strony generatywnej

Użyj tego przepływu pracy, aby zaktualizować stronę, która już istnieje w danym środowisku.

1. Pobierz istniejącą stronę. W narzędziu do generowania kodu sztucznej inteligencji poproś o pobranie istniejącej strony generowania, podając identyfikator strony (GUID) lub nazwę strony na mapie witryny i aplikację, w niej znajduje się. Na przykład "Chcę zaktualizować stronę generatywną Adopcji Zwierząt z poziomu aplikacji demonstracyjnej".

2. Opisz aktualizacje. Poinformuj narzędzie sztucznej inteligencji o zmianach, które chcesz wprowadzić. Przykład:

   • "Dodawanie filtru w celu wyświetlania tylko aktywnych rekordów"
   • "Zmień układ, aby wyświetlić karty w siatce zamiast listy"
   • "Dodaj wykres przedstawiający trendy wdrażania w czasie"
   • Zaktualizuj formularz, aby uwzględnić nowe niestandardowe pole dla temperamentu zwierząt.

3. Przeglądanie, publikowanie, testowanie i iterowanie. Narzędzie sztucznej inteligencji generuje zaktualizowany kod TypeScript na podstawie żądanych zmian. Postępuj zgodnie z tym samym procesem przeglądu, publikacji i testowania opisanym w sekcji "Tworzenie nowej strony generatywnej". Kontynuuj iterowanie przy użyciu instrukcji języka naturalnego, dopóki strona nie spełnia wymagań.

Lokalne pliki programistyczne

Gdy narzędzie sztucznej inteligencji generuje stronę, zapisuje również dwa pliki pomocnicze w lokalnym obszarze roboczym, aby ułatwić przeglądanie i iterowanie kodu:

• package.json — deklaruje zależności środowiska uruchomieniowego i programowania, względem których jest kompilowana wygenerowana strona. Uruchom polecenie npm install po wygenerowaniu, aby zainstalować te zależności.
• genpage.d.ts — deklaracje języka TypeScript otoczenia dla obiektów, które nie są zainstalowane za pośrednictwem narzędzia npm, takich jak dataApi i pageInput.

Gdy oba pliki zostały wdrożone i ukończono operację npm install, funkcja IntelliSense w edytorze, na przykład w programie VS Code, działa w oparciu o wygenerowany kod, dzięki czemu możesz przeglądać stronę lub edytować ją ręcznie bez wyświetlania czerwonych falistych podkreśleń z powodu nierozpoznanych typów.

Konfigurowanie strony w celu akceptowania parametrów wejściowych

Generatywne strony mogą akceptować parametry recordId, entityName i data, umożliwiając im odbieranie danych kontekstowych z innych stron lub kodu. Po poinstruowaniu narzędzia sztucznej inteligencji o skonfigurowaniu parametrów wejściowych generuje odpowiedni kod inicjowania, dzięki czemu strona odczytuje i używa tych wartości podczas ładowania.

Opisz żądane parametry w wierszu polecenia:

• Skonfiguruj stronę, aby akceptowała identyfikator rekordu konta i nazwę jednostki. Podczas ładowania strony użyj tych parametrów, aby pobrać i wyświetlić odpowiednie szczegóły konta.
• "Skonfiguruj tę stronę, aby akceptowała parametr danych zawierający obiekt filtru niestandardowego. Służy do filtrowania wyświetlanych rekordów podczas ładowania strony.

Aby przejść do i ze strony generatywnej oraz przekazać te parametry, zobacz Przechodzenie do i ze strony generatywnej przy użyciu interfejsu API klienta.

Lokalizacja

Podczas tworzenia strony generatywnej za pomocą umiejętności Power Apps lokalizacja jest obsługiwana automatycznie. Agent wykrywa wszystkie języki włączone w danym środowisku i generuje kod, aby strona współdziałała ze wszystkimi tymi językami. Strona uwzględnia preferowany język użytkownika i preferencje regionalne formatowania dat, liczb i waluty.

Jeśli chcesz ustawić inny zestaw języków niż te włączone w danym środowisku, możesz poprosić agenta o dostosowanie, na przykład:

"Zaktualizuj tę stronę, aby obsługiwać tylko angielski, francuski i hiszpański".

Aby uzyskać więcej informacji, przejdź do instrukcji dotyczących lokalizacji w repozytorium Umiejętności platformy Power Platform.

Rozwiązywanie problemów

Nie można załadować strony w Power Apps

Jeśli przejdziesz do strony generowania i zobaczysz komunikat o błędzie lub pusty ekran:

1. Otwórz narzędzia deweloperskie przeglądarki (F12 w większości przeglądarek).

2. Wybierz kartę Konsola .

3. Skopiuj pełny komunikat o błędzie, w tym ślad stosu.

4. Wróć do narzędzia generowania kodu sztucznej inteligencji i wklej błąd z kontekstem:

   "Otrzymuję ten błąd podczas otwierania strony: [błąd wklejania tutaj]. Rozwiąż ten problem.

   Narzędzie sztucznej inteligencji analizuje błąd, identyfikuje główną przyczynę i generuje poprawkę.

5. Przejrzyj poprawkę i poproś narzędzie o ponowne opublikowanie strony.

Przywracanie do wersji roboczej

Jeśli ostatnie zmiany uszkodziły Twoją stronę lub nasiliły problemy, możesz skorzystać z narzędzia sztucznej inteligencji, aby przywrócić poprzednią działającą wersję.

„Ostatnie zmiany zepsuły stronę. Wróć do ostatniej działającej wersji".

Następnie narzędzie sztucznej inteligencji:

1. Identyfikuje wprowadzone zmiany
2. Przywraca poprzedni kod roboczy
3. Ponownie wdraża stabilną wersję

Najlepsze praktyki

• Rozpocznij od prostego. Zacznij od podstawowej wersji strony i iteruj, aby zwiększyć złożoność.
• Testować częściej. Wdróż i przetestuj stronę po każdej znaczącej zmianie.
• Podawaj konkretne informacje. Podaj szczegółowe wymagania, aby uzyskać lepsze wyniki początkowe.
• Użyj istniejących wzorców. Odwołaj się do podobnych stron lub wzorców interfejsu użytkownika podczas opisywania wymagań.
• Zweryfikuj wygenerowany kod. Zawsze przejrzyj wygenerowany kod, aby upewnić się, że spełnia standardy i wymagania dotyczące zgodności organizacji.

Ograniczenia

Ograniczenia dotyczące stron generowania utworzonych za pomocą narzędzi generowania kodu sztucznej inteligencji są takie same jak w przypadku stron generowania utworzonych w portalu Power Apps maker:

• Obsługiwane źródła danych to tabele usługi Dataverse i łączniki platformy Power Platform (wersja zapoznawcza).
• Niestandardowe akcje i funkcje interfejsu API są obsługiwane w wersji zapoznawczej. Niestandardowe interfejsy API korzystające z typu powiązania EntityCollection lub parametrów Entity nie są obsługiwane.
• Współpraca nie jest obsługiwana — upewnij się, że tylko jeden twórca pracuje na stronie generatywnej w danym momencie.
• Obsługiwane są tylko te typy danych: Wybór, Waluta, Klient, Data i Godzina, Tylko data, Liczba dziesiętna, Liczba zmiennoprzecinkowa, Obraz, Wyszukiwanie, Tekst wielowierszowy, Stan, Przyczyna stanu, Tekst, Liczba całkowita, Tak/Nie, Unikatowy identyfikator.

Treści powiązane

• Generowanie strony przy użyciu języka naturalnego z aplikacjami opartymi na modelu
• Przechodzenie do i ze strony generatywnej za pomocą interfejsu API klienta
• metody obiektów dataApi dla stron generowania
• Dokumentacja Power Platform CLI