使用 AI 代码生成工具创建和编辑生成页面

本文介绍如何使用 AI 代码生成工具（如 GitHub Copilot CLI 和 Claude Code）为 Power Apps 中的模型驱动应用创建和编辑生成页面。 此方法允许将高级代码生成功能直接集成到开发工作流中，从而允许使用自然语言说明创建新的生成页面或循环访问现有页面。

将 AI 代码生成工具与生成页面结合使用可提供替代开发方法，以补充 Power Apps 中基于 UI 的体验（make.powerapps.com）。 此代码优先方法专为喜欢使用本地开发工具和基于 CLI 的工作流的开发人员和技术人员设计。

可以用代码生成工具做些什么

• 通过纯语言要求在单个运行中创建一个或多个生成页面
• 创建页面所需的 Microsoft Dataverse 支持表，或重用现有表，并为新表添加示例数据
• 将工件添加到新的或现有的应用和解决方案中，包括即时创建应用或解决方案
• 通过使用 AI 工具请求更改或增强来更新现有生成页面
• 使用 PAC CLI 命令将其直接部署到 Power Apps 环境
• 使用您偏好的 IDE 和开发工具在本地进行开发，并为生成的代码提供 npm install 和 IntelliSense 支持

工作原理

1. 描述想要以自然语言构建的内容，例如，“创建按收入显示顶级帐户的生成页面仪表板”。
2. 规划器代理会分析你的请求并提出计划。 该计划可能包括一个或多个页面、这些页面所需的 Dataverse 表（新的或现有的），以及工件所在的应用和解决方案。 然后，规划器将委托给专用代理，以生成计划所描述的内容。 例如，表生成器和页面生成器。
3. 你在构建之前审查并调整计划。 可以更改页数、交换或添加表、以其他应用为目标，或将项目放置在不同的解决方案中。
4. 代理会为页面或页面生成生产就绪的 TypeScript 和 React 代码，以及用于本地开发的支持文件。
5. 该工具使用 生成式页面 PAC CLI 命令将构件部署到你的环境中，并可选择运行一个浏览器内验证步骤，使用生成的测试对页面进行验证。
6. 您的生成页面将出现在模型驱动应用中。

先决条件

在开始之前，请确保拥有此处所述的所需软件和权限。

软件要求

其他要求

• 具有模型驱动应用的 Power Platform 环境，用于部署页面。
• 连接到目标环境的 经过身份验证的 PAC CLI 会话 。
  • 有关连接的详细信息，请转到 对 Power Platform CLI 进行身份验证 。

安装插件

运行安装程序以在 PowerShell 或 Windows 命令窗口中设置所有 Power Platform 插件。

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

安装程序自动：

• 检测可用工具 （Claude Code， GitHub Copilot CLI）
• 注册插件市场并安装所有插件
• 启用自动更新，以便插件保持最新状态

安装后，根据需要重启 AI 工具。

仅安装生成页插件

若要仅安装用于 GitHub Copilot CLI 或 Claude Code 的页面生成插件，请执行以下步骤：

1. 添加 Power Platform Skills 市场插件： /plugin marketplace add microsoft/power-platform-skills
2. 安装 Power Apps 插件： /plugin install model-apps@power-platform-skills

安装后，可以通过以下任一方式使用插件：

• 显式运行/genpage命令。
• 描述要创建的页面。 该工具会自动检测和使用插件。

使用其他 AI 代码生成工具

对于其他 AI 代码生成工具，请确保您的工具拥有从 Power Platform skills GitHub 存储库访问生成页面资源的权限。 模型应用插件文件夹包括组件文档、示例代码、PAC CLI 命令参考和创建符合生成页面要求的代码所需的工作流说明，包括如何创建支持多种语言和区域的页面。 有关使用首选工具访问和使用这些资源的信息，请参阅存储库 自述文件 。

技能概述

Power Apps 插件提供此技能，用于处理生成页面。

利用此技能，可以描述要生成的内容，让 AI 工具为生成页面生成完整的 TypeScript 和 React 代码，然后将其直接部署到 Power Apps 环境。

创建新的生成页面

从头开始生成新页面或一组页面时，请遵循此工作流。

1. 开始与 AI 工具的对话。 描述要创建的内容。 您可以根据需要指定具体细节，也可以保持开放式 — 请求越模糊，智能体就越能自动补全。 还可以附加图像或其他材料来指导视觉对象、主题和布局。 例如：

   • 使用“帐户”表创建一个生成性页面仪表板，展示按收入排序的前 10 个帐户。
   • 创建两个页面来管理我的志愿者报名——一个用于浏览开放班次，另一个用于确认报名——使用示例数据
   • “创建基于事件表的地图化事件报告生成式页面”

2. 选择“创建”或“编辑”（如果系统询问）。 如果规划器代理不确定是想要新页面还是更新现有页面，则会询问。 若要遵循此工作流，请选择创建新页面。 如需编辑，请转到 “编辑现有生成式页面”。

3. 回答有关构建内容的问题。 规划器可能会询问所需的页面类型、提供一些示例并接受自定义说明，例如要使用的数据、布局、要显示的信息、交互等。 特定于业务需求和数据要求，尽早识别移动要求，并提及任何 UI 组件或布局首选项。 规划器还可以提出澄清问题，例如是使用 Dataverse 表还是硬编码的示例数据，以及是将页面添加到现有应用还是创建新应用。

4. 查看并调整计划。 规划器会呈现一份计划，其中包括计划构建的页面、将使用或创建的 Dataverse 表（以及计划使用的列）、托管页面的应用程序（新建或现有），以及存放构建成果的解决方案。 循环访问代理以调整所需更改的任何内容，例如，使用或创建哪些表、目标应用或目标解决方案的页数。 当计划符合你的意图时，确认该计划。

5. 让智能体负责构建和部署。 专用代理将生成页面或页面、支持表和代码，然后部署到环境。

6. （可选）在浏览器中验证。 构建完成后，代理可能会提供在浏览器中验证这一步骤，该步骤会运行针对该页面自动生成的 Playwright 测试，以确认页面能够正确加载并正常运行。 在手动测试之前，使用此方法可捕获明显的问题。

7. 测试和迭代。 在Power Apps中打开模型驱动应用并导航到新页面。 如果需要进行更改，请返回到 AI 工具，并使用自然语言描述更新。

编辑现有生成页面

使用此工作流更新环境中已存在的页面。

1. 检索现有页面。 在 AI 代码生成工具中，请求通过提供页面 ID（GUID）或站点地图中的页面名称及其在其中的应用来检索现有生成页面。 例如：“需更新 Demo 应用中的宠物领养生成式页面”

2. 描述您的更新。 告知 AI 工具要进行哪些更改。 例如：

   • “添加筛选器以仅显示活动记录”
   • “更改布局以在网格而不是列表中显示卡片”
   • “添加显示一段时间内采用趋势的图表”
   • “更新表单以包括宠物气质的新自定义域”

3. 查看、发布、测试和迭代。 AI 工具根据请求的更改生成更新的 TypeScript 代码。 按照“创建新生成页面”部分中所述的相同审阅、发布和测试过程进行作。 继续以自然语言指令进行迭代，直到页面符合您的要求。

本地开发文件

当 AI 工具生成页面时，它还将两个支持文件写入本地工作区，以便更轻松地查看和迭代代码：

• package.json — 声明生成的页面在编译时所依据的运行时依赖项和开发依赖项。 生成后运行 npm install 以安装这些依赖项。
• genpage.d.ts - 未通过 npm 安装的对象的环境 TypeScript 声明，例如 dataApi 和 pageInput。

当两个文件就位且 npm install 完成后，您的编辑器（如 VS Code）的 IntelliSense 功能将对生成的代码生效，因此您可以在审查或手动编辑页面时，不会看到因未解析类型而出现的红色波浪线。

设置页面以接受输入参数

生成页可以接受输入参数 recordId、entityName 和 data，使其在从其他页面或代码导航至该页时接收上下文数据。 当你指示 AI 工具配置输入参数时，它会生成适当的初始化代码，以便页面在加载时读取和使用这些值。

在提示中描述所需的参数：

• “将页面配置为接受 Account recordId 和 entityName。 页面加载时，使用这些参数提取并显示相应的帐户详细信息。
• “配置此页面以接受包含自定义筛选器对象的数据参数。 使用它筛选页面加载时显示的记录。

若要导航到页面并传递这些参数，请参阅 使用客户端 API 导航到生成页和从生成页导航。

本地化

使用适用于 Claude Code 或 GitHub Copilot CLI 的 Power Apps 插件创建生成页时，会自动处理本地化。 代理会检测环境中启用的所有语言并生成代码，使页面能够与所有这些语言一起使用。 该页面尊重每个用户的首选语言以及区域格式偏好，包括日期、数字和货币。

如果要将一组不同于环境中启用的语言设定为目标，可以要求代理进行调整，例如：

“更新此页面以仅支持英语、法语和西班牙语。

有关详细信息，请转到 Power Platform Skills 存储库中的 本地化说明 。

故障排除

在 Power Apps 中加载页面失败

如果导航到生成页面并观察错误消息或空白屏幕：

1. 在大多数浏览器中打开浏览器开发人员工具（F12）。

2. 选择 “控制台 ”选项卡。

3. 复制完整的错误消息，包括堆栈跟踪。

4. 返回到 AI 代码生成工具，并在上下文中粘贴错误：

   “打开页面时出现此错误：[在此粘贴错误信息]。 请修复此问题。

   AI 工具分析错误、标识根本原因并生成修补程序。

5. 查看修补程序，并要求该工具重新发布页面。

还原到可用版本

如果最近的更改破坏了页面或使问题变得更糟，可以要求 AI 工具回滚到以前的工作版本：

最近的更改导致页面故障。 请还原至上次正常运行的版本。”

AI 工具将：

1. 识别所做的更改
2. 还原以前的工作代码
3. 重新部署稳定版本

最佳做法

• 从简单开始。 从页面的基本版本开始，逐步迭代以增加复杂程度。
• 经常测试。 在每个重大更改后部署和测试页面。
• 具体。 提供详细的要求，以获得更好的初始结果。
• 使用现有模式。 在描述要求时引用类似的页面或 UI 模式。
• 验证生成的代码。 请始终查看生成的代码，以确保它满足组织的标准和合规性要求。

局限性

使用 AI 代码生成工具创建的生成页面的限制与在 Power Apps Maker 门户中创建的生成页面的限制相同：

• 您的页面仅能连接 Dataverse 表。
• 不支持协作 - 请确保每次只有一个创建者在生成性页面上工作。
• 仅支持以下数据类型：选项、货币、客户、日期和时间、仅日期、十进制数、浮点数、图像、查找、多行文本、状态、状态、状态原因、文本、整数、是/否、唯一标识符。

相关内容

• 使用自然语言和模型驱动应用生成页面
• 使用客户端 API 导航到生成页面并从中返回
• 生成页面的 dataApi 对象方法
• Power Platform 命令行界面参考