Создание и изменение формируемых страниц с помощью средств создания кода ИИ

В этой статье описывается, как использовать средства создания кода ИИ, такие как GitHub Copilot CLI, для создания и изменения формируемых страниц для приложений, управляемых моделью, в Power Apps. С помощью этого подхода можно интегрировать расширенные возможности создания кода непосредственно в рабочий процесс разработки для создания новых формируемых страниц или итерации существующих с помощью инструкций естественного языка.

Подсказка

Этот подход — это рекомендуемый путь для создания формируемых страниц. Он предоставляет доступ к новейшим моделям ИИ, работает по всему миру в общедоступных облаках и позволяет создавать несколько страниц, а также поддерживать таблицы Dataverse в одном запуске.

Использование инструментов ИИ для генерации кода вместе с генеративными страницами дополняет работу через пользовательский интерфейс в Power Apps (make.powerapps.com). Этот подход, ориентированный на код, подходит любому мейкеру или разработчику, который хочет получить доступ к новейшим моделям ИИ или предпочитает работать с локальными инструментами разработки и процессами с использованием CLI.

Замечание

Для планирования, сборки или редактирования всего приложения на основе модели вместо отдельных формирующих страниц используйте навык построителя моделей предварительной версии. Дополнительные сведения: создание и изменение приложений на основе модели с помощью средств создания кода ИИ (предварительная версия)

Что можно сделать с помощью средств создания кода

  • Создание одной или нескольких формируемых страниц в одном запуске с учетом требований обычного языка
  • Создайте вспомогательные таблицы Microsoft Dataverse, которые нужны вашим страницам, или повторно используйте существующие, включая образцы данных для новых таблиц
  • Поместите артефакты в новое или существующее приложение и решение, включая создание приложения или решения на лету
  • Обновление существующих формируемых страниц путем запроса изменений или улучшений с помощью средства искусственного интеллекта
  • Развертывать решения непосредственно в среде Power Apps с помощью команд PAC CLI
  • Работайте локально с предпочитаемыми инструментами npm install интегрированной среды разработки и поддержкой IntelliSense для созданного кода.

Принцип работы

  1. Вы описываете, что вы хотите создать, на естественном языке, например, "Создай генеративную страницу с панелью мониторинга, на которой показаны главные клиенты по объему выручки".
  2. Агент планировщика анализирует запрос и предлагает план. План может включать одну или несколько страниц, таблицы Dataverse, необходимые для этих страниц (новые или существующие), а также приложение и решение, в которых находятся эти артефакты. Затем планировщик поручает специализированным агентам создать то, что описано в плане. Например, построитель таблиц и построитель страниц.
  3. Перед созданием вы просматриваете и корректируете план. Можно изменить количество страниц, переключить или добавить таблицы, нацелить другое приложение или поместить артефакты в другое решение.
  4. Агенты создают готовый для продакшена код на TypeScript и React для вашей страницы или страниц, а также вспомогательные файлы для локальной разработки.
  5. Средство развертывает артефакты в вашей среде с помощью команд PAC CLI для генеративных страниц и при необходимости также выполняет этап проверки в браузере, который проверяет страницу с помощью сгенерированных тестов.
  6. Сгенерированная страница отображается в приложении на основе модели.

Предпосылки

Перед началом работы убедитесь, что у вас есть необходимое программное обеспечение и разрешения, описанные здесь.

Требования к программному обеспечению

Компонент Минимальная версия Дополнительная информация
Node.js 18.0 или более поздняя Скачать Node.js
Интерфейс командной строки Power Platform (PAC CLI) Latest Установка CLI PAC
GitHub Copilot CLI, Claude Code или другое средство создания кода Latest GitHub Copilot CLI или Claude Code

Дополнительные требования

  • Среда Power Platform с моделируемым приложением для развертывания страниц.
  • Прошедший проверку подлинности сеанс PAC CLI, подключенный к целевой среде.

Замечание

Эта возможность доступна во всем мире в общедоступных облаках.

Установка подключаемого модуля

Запустите установщик, чтобы настроить все подключаемые модули Power Platform в PowerShell или в командном окне 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

Установщик автоматически:

  • Обнаруживает доступные средства (GitHub Copilot CLI, Claude Code)
  • Регистрирует подключаемый модуль Marketplace и устанавливает все подключаемые модули
  • Включает автоматическое обновление, чтобы подключаемые модули оставались текущими

После установки перезапустите средство ИИ при необходимости.

Установите только генеративный плагин страницы

Чтобы установить только подключаемый модуль генеративных страниц для CLI GitHub Copilot или Claude Code:

  1. Добавьте плагин Power Platform Skills Marketplace: /plugin marketplace add microsoft/power-platform-skills
  2. Установите плагин Power Apps: /plugin install model-apps@power-platform-skills

Замечание

Для Claude Code можно установить плагин с различными областями применения, такими как глобальная, локальная или пользовательская. В зависимости от области для использования подключаемого модуля необходимо находиться в правильном каталоге Claude Code. Перейдите в раздел Расширьте возможности Claude с помощью навыков.

После установки можно использовать плагин следующим образом:

  • Явное выполнение команды /genpage.
  • Описание страницы, которую вы хотите создать. Инструмент автоматически обнаруживает и использует подключаемый модуль.

Подсказка

Включите автоматическое обновление, чтобы автоматически получать обновления для Marketplace и навыков. Используйте команду /plugin, перейдите в Маркетплейсы, выберите маркетплейс и включите автоматическое обновление.

Использование других средств создания кода ИИ

Для других инструментов генерации кода ИИ убедитесь, что ваш инструмент имеет доступ к ресурсам генеративной страницы из Power Platform skills на GitHub. Папка плагина модельных приложений включает документацию по компонентам, образцы кода, справочник по командам PAC CLI и инструкции по рабочему процессу, которые необходимы для написания кода, соответствующего требованиям генеративных страниц, включая информацию о том, как создавать страницы, поддерживающие несколько языков и регионов. Ознакомьтесь с файлом readme в репозитории для получения информации о доступе и использовании этих ресурсов с предпочитаемым инструментом.

Обзор навыков

Подключаемый модуль Power Apps предоставляет этот навык для работы с генерируемыми страницами.

Навык COMMAND Description
Генеривные страницы /genpage Создание кода для созданных страниц (для сценариев создания или редактирования)

Этот навык позволяет вам описать, что вы хотите создать, и с помощью инструмента ИИ сгенерировать полный код TypeScript и React для вашей создаваемой страницы, а затем развернуть его непосредственно в среде Power Apps.

Создать новую генеративную страницу

Следуйте этому рабочему процессу при создании новой страницы или наборе страниц с нуля.

  1. Запустите беседу с помощью средства искусственного интеллекта. Описать то, что нужно создать. Формулируйте запрос настолько конкретно или расплывчато, насколько хотите — чем более расплывчат запрос, тем больше агент сам заполняет недостающие детали. Вы также можете присоединить изображение или другие материалы для руководства визуальными элементами, темами и макетом. Рассмотрим пример.

    • "Создай генеративную страницу с панелью мониторинга, на которой показаны первые 10 клиентов по объему выручки, используя таблицу «Организаций»"
    • Создайте две страницы для управления моими записями на волонтёрские смены — одну для просмотра открытых смен и одну для подтверждения записи — используя тестовые данные.
    • Создание создаваемой страницы для отображения отчетов об инцидентах на карте с помощью таблицы "Инциденты"

  2. Если появится запрос, выберите команду "Создать" или "Изменить". Если агент-планировщик не уверен, хотите ли вы создать новую страницу или обновить существующую, он спрашивает. Чтобы следовать этому рабочему процессу, выберите создать новую страницу. Чтобы отредактировать, перейдите к Редактировать существующую генеративную страницу.

  3. Ответьте на вопросы о том, что нужно создать. Планировщик может спросить, какую страницу вы хотите, предложить несколько примеров, а также принять произвольное описание, например какие данные использовать, какой выбрать макет, какую информацию отображать, какие предусмотреть взаимодействия и т. д. Будьте конкретны в отношении бизнес-потребностей и требований к данным, заранее определите требования к мобильным устройствам и укажите все компоненты пользовательского интерфейса или предпочтения по макету. Планировщик также может задавать уточняющие вопросы, такие как использование таблиц Dataverse или жестко закодированных примеров данных, а также добавление страницы в существующее приложение или создание нового приложения.

  4. Просмотрите и измените план. Планировщик предлагает план, включающий страницу или страницы, которые он собирается создать, таблицы Dataverse, которые он собирается использовать или создать (со столбцами, которые он планирует использовать), приложение, в котором будет размещена страница (новое или существующее), и решение, где хранятся артефакты. Работайте с агентом в итеративном режиме, чтобы настроить всё, что вы хотите изменить, — например, количество страниц, используемые или создаваемые таблицы, целевое приложение или целевое решение. Подтвердите план, когда он соответствует вашему намерению.

  5. Пусть агенты создают и развертывают. Специализированные агенты генерируют страницу или страницы, вспомогательные таблицы и код, а затем развертывают их в вашей среде.

  6. При необходимости проверьте в браузере. После сборки агент может предложить выполнить шаг проверки в браузере, который запускает автоматически созданные тесты Playwright для страницы, чтобы убедиться, что она загружается и работает корректно. Используйте это, чтобы выявить очевидные проблемы перед ручным тестированием.

  7. Тестируйте и повторяйте. Откройте приложение на основе модели в Power Apps и перейдите на новую страницу. Если вам нужно внести изменения, вернитесь к средству искусственного интеллекта и опишите обновления на естественном языке.

Замечание

Имя или положение созданной страницы на карте сайта можно изменить в любое время из конструктора приложений на основе модели.

Изменение существующей генеративной страницы

Используйте этот рабочий процесс для обновления страницы, которая уже существует в вашей среде.

  1. Получение существующей страницы. В вашем инструменте генерации кода ИИ сделайте запрос на получение существующей генеративной страницы, предоставив идентификатор страницы (GUID) или имя страницы в карте сайта и приложения, в котором она находится. Например, "Я хочу обновить генеративную страницу усыновления домашних животных в демонстрационном приложении".

  2. Описание обновлений. Сообщите инструменту ИИ о том, какие изменения вы хотите внести. Рассмотрим пример.

    • "Добавление фильтра для отображения только активных записей"
    • "Изменение макета для отображения карточек в сетке вместо списка"
    • "Добавление диаграммы с тенденциями внедрения с течением времени"
    • "Обновите форму, чтобы включить новое настраиваемое поле для темперамента домашних животных"

  3. Просмотр, публикация, тестирование, а также итерация. Средство искусственного интеллекта создает обновленный код TypeScript на основе запрошенных изменений. Выполните те же действия проверки, публикации и тестирования, описанные в разделе "Создание новой создаваемой страницы". Продолжайте итерацию с помощью инструкций естественного языка, пока страница не соответствует вашим требованиям.

Локальные файлы разработки

Когда средство искусственного интеллекта создает страницу, она также записывает два вспомогательных файла в локальную рабочую область, чтобы упростить проверку и итерацию кода:

  • package.json — объявляет зависимости среды выполнения и разработки, на которые компилируется созданная страница. Запустите npm install после генерации, чтобы установить эти зависимости.
  • genpage.d.ts — объявления ambient TypeScript для объектов, которые не установлены через npm, например dataApi и pageInput.

После выполнения обоих файлов и завершения npm install IntelliSense в вашем редакторе (например, VS Code) работает со сгенерированным кодом, поэтому вы можете просматривать или вручную редактировать страницу без появления ошибок (красных подчеркиваний) из-за неразрешенных типов.

Настройка страницы для приема входных параметров

Генеривные страницы могут принимать входные параметры recordIdиentityNamedata, позволяя им получать контекстные данные при переходе с других страниц или кода. При настройке входных параметров средство искусственного интеллекта создает соответствующий код инициализации, чтобы страница считывала и использует эти значения при загрузке.

Опишите нужные параметры в запросе:

  • "Настрой страницу, чтобы принимать recordId и entityName организации. При загрузке страницы используйте эти параметры для получения и отображения соответствующих сведений об учетной записи".
  • "Настройте эту страницу, чтобы принять параметр данных, содержащий пользовательский объект фильтра. Используйте его для фильтрации отображаемых записей при загрузке страницы".

Чтобы перейти на страницу и передать эти параметры, см. статью "Навигация к генеративной странице и обратно с помощью клиентского API".

Локализация

При создании генеративной страницы с помощью навыка Power Apps локализация выполняется автоматически. Агент обнаруживает все языки, включенные в вашей среде, и создает код, чтобы страница работала со всеми этими языками. Страница учитывает предпочитаемый язык каждого пользователя и региональные параметры форматирования дат, чисел и валют.

Если вы хотите нацелить другой набор языков, отличный от включенных в вашей среде, можно попросить агента настроить, например:

"Обновите эту страницу для поддержки только английского, французского и испанского языков".

Замечание

Запись карты сайта для генеративной страницы по умолчанию не локализуется. Чтобы локализовать записи карты сайта, обновите их отдельно в конструкторе приложений.

Дополнительные сведения см. в инструкциях по локализации в репозитории навыков Power Platform.

Устранение неполадок

Не удается загрузить страницу в Power Apps

Если вы перейдете на созданную страницу и увидите сообщение об ошибке или пустой экран:

  1. Откройте средства разработчика браузера (F12 в большинстве браузеров).

  2. Перейдите на вкладку "Консоль ".

  3. Скопируйте полное сообщение об ошибке, включая трассировку стека.

  4. Вернитесь к средству создания кода ИИ и вставьте ошибку с контекстом:

    "При открытии страницы я получаю эту ошибку: [ошибка вставки здесь]. Исправьте проблему".

    Средство искусственного интеллекта анализирует ошибку, определяет первопричину и создает исправление.

  5. Просмотрите исправление и попросите средство повторно опубликовать страницу.

Возврат к рабочей версии

Если последние изменения сломали страницу или сделали проблемы хуже, вы можете попросить средство ИИ откатить к предыдущей рабочей версии:

"Последние изменения испортили страницу. Вернитесь к последней рабочей версии".

Затем средство искусственного интеллекта:

  1. Определяет внесенные изменения
  2. Восстанавливает предыдущий рабочий код
  3. Повторно развертывает стабильную версию

Лучшие практики

  • Начните с простого. Начните с базовой версии страницы и выполните итерацию, чтобы добавить сложность.
  • Часто тестировать. Разверните и проверьте страницу после каждого значительного изменения.
  • Быть конкретными. Укажите подробные требования, чтобы получить лучшие начальные результаты.
  • Используйте существующие шаблоны. Ссылайтесь на аналогичные страницы или шаблоны пользовательского интерфейса при описании требований.
  • Проверьте созданный код. Всегда просматривайте созданный код, чтобы он соответствовал стандартам и требованиям соответствия вашей организации.

Это важно

Хотя средства создания кода искусственного интеллекта позволяют создавать полный готовый к работе код с помощью специальных возможностей и рекомендаций по обеспечению безопасности, вы в конечном итоге отвечаете за проверку кода. Убедитесь, что созданный код соответствует стандартам, политикам и требованиям соответствия вашей организации.

Ограничения

Ограничения для страниц, созданных с использованием инструментов генерации кода искусственного интеллекта, совпадают с ограничениями для страниц, созданных в портале Power Apps Maker.

  • Страница может подключаться только к таблицам Dataverse.
  • Совместная работа не поддерживается— убедитесь, что только один производитель работает на созданной странице одновременно.
  • Поддерживаются только эти типы данных: выбор, валюта, клиент, дата и время, только десятичное число, число с плавающей запятой, изображение, поиск, многострочный текст, состояние, причина состояния, текст, целое число, да/нет, уникальный идентификатор.

Связанный контент

  • Last updated on