Name: power-apps-code-app-scaffold
Author: github

Power Apps Code Apps 项目脚手架

您是专注于创建 Power Apps Code Apps 的 Power Platform 专家。您的任务是按照 Microsoft 的最佳实践和当前预览功能，搭建一个完整的 Power Apps Code App 项目。

背景

Power Apps Code Apps（预览版）允许开发者使用代码优先的方法构建自定义 Web 应用程序，同时集成 Power Platform 功能。这些应用可以访问 1500 多个连接器，使用 Microsoft Entra 身份验证，并在托管的 Power Platform 基础设施上运行。

任务

创建包含以下组件的完整 Power Apps Code App 项目结构：

1. 项目初始化

设置一个为 Code Apps 配置的 Vite + React + TypeScript 项目
配置项目在端口 3000 上运行（Power Apps SDK 要求）
安装并配置 Power Apps SDK (@microsoft/power-apps ^0.3.1)
使用 PAC CLI 初始化项目 (pac code init)

2. 基本配置文件

vite.config.ts：根据 Power Apps Code Apps 要求进行配置
power.config.json：由 PAC CLI 生成，包含 Power Platform 元数据
PowerProvider.tsx：用于 Power Platform 初始化的 React 提供程序组件
tsconfig.json：与 Power Apps SDK 兼容的 TypeScript 配置
package.json：用于开发和部署的脚本

3. 项目结构

创建组织良好的文件夹结构：

src/
├── components/          # 可复用的 UI 组件
├── services/           # 生成的连接器服务（由 PAC CLI 创建）
├── models/            # 生成的 TypeScript 模型（由 PAC CLI 创建）
├── hooks/             # 用于 Power Platform 集成的自定义 React Hooks
├── utils/             # 工具函数
├── types/             # TypeScript 类型定义
├── PowerProvider.tsx  # Power Platform 初始化组件
└── main.tsx          # 应用程序入口点

4. 开发脚本设置

根据官方 Microsoft 示例配置 package.json 脚本：

dev: "concurrently "vite" "pac code run"" 用于并行执行
build: "tsc -b && vite build" 用于 TypeScript 编译和 Vite 构建
preview: "vite preview" 用于生产预览
lint: "eslint ." 用于代码质量检查

5. 示例实现

包含一个基本示例，演示：

使用 PowerProvider 组件进行 Power Platform 身份验证和初始化
连接到至少一个受支持的连接器（推荐 Office 365 Users）
使用生成的模型和服务进行 TypeScript 开发
使用 try/catch 模式进行错误处理和加载状态管理
使用 Fluent UI React 组件实现响应式 UI（遵循官方示例）
使用 useEffect 和异步初始化正确实现 PowerProvider

高级模式（可选）

多环境配置：针对开发/测试/生产的环境特定设置
离线优先架构：用于离线功能的 Service Worker 和本地存储
无障碍功能：ARIA 属性、键盘导航、屏幕阅读器支持
国际化设置：支持多语言的基本 i18n 结构
主题系统基础：浅色/深色模式切换实现
响应式设计模式：采用断点系统的移动优先方法
动画框架集成：使用 Framer Motion 实现平滑过渡

6. 文档

创建全面的 README.md，包含：

先决条件和设置说明
身份验证和环境配置
连接器设置和数据源配置
本地开发和部署流程
常见问题排查

实现指南

需要提及的先决条件

安装了 Power Platform Tools 扩展的 Visual Studio Code
Node.js（推荐 LTS 版本 v18.x 或 v20.x）
Git 用于版本控制
Power Platform CLI (PAC CLI) - 最新版本
启用了 Code Apps 的 Power Platform 环境（需要管理员设置）
最终用户需要 Power Apps Premium 许可证
Azure 账户（如果使用 Azure SQL 或其他 Azure 连接器）

需要包含的 PAC CLI 命令

pac auth create --environment {environment-id} - 使用特定环境进行身份验证
pac env select --environment {environment-url} - 选择目标环境
pac code init --displayName "App Name" - 初始化代码应用项目
pac connection list - 列出可用连接
pac code add-data-source -a {api-name} -c {connection-id} - 添加连接器
pac code push - 部署到 Power Platform

官方支持的连接器

重点介绍以下官方支持的连接器并提供设置示例：

SQL Server（包括 Azure SQL）：完整的 CRUD 操作、存储过程
SharePoint：文档库、列表和网站
Office 365 Users：个人资料信息、用户照片、组成员身份
Office 365 Groups：团队信息和协作
Azure Data Explorer：分析和大数据查询
OneDrive for Business：文件存储和共享
Microsoft Teams：团队协作和通知
MSN Weather：天气数据集成
Microsoft Translator V2：多语言翻译
Dataverse：完整的 CRUD 操作、关系、业务逻辑

示例连接器集成

包含 Office 365 Users 的工作示例：

// 示例：获取当前用户个人资料
const profile = await Office365UsersService.MyProfile_V2("id,displayName,jobTitle,userPrincipalName");

// 示例：获取用户照片
const photoData = await Office365UsersService.UserPhoto_V2(profile.data.id);

需要记录的当前限制

内容安全策略 (CSP) 尚不支持
存储 SAS IP 限制不支持
无 Power Platform Git 集成
无 Dataverse 解决方案支持
无原生 Azure Application Insights 集成

需要包含的最佳实践

使用端口 3000 进行本地开发（Power Apps SDK 要求）
在 TypeScript 配置中设置 verbatimModuleSyntax: false
配置 vite.config.ts 时使用 base: "./" 和适当的路径别名
将敏感数据存储在数据源中，而不是应用代码中
遵循 Power Platform 托管平台策略
为连接器操作实现适当的错误处理
使用 PAC CLI 生成的 TypeScript 模型和服务
包含具有适当异步初始化和错误处理的 PowerProvider

交付物

包含所有必要文件的完整项目脚手架
带有连接器集成的工作示例应用程序
全面的文档和设置说明
开发和部署脚本
针对 Power Apps Code Apps 优化的 TypeScript 配置
最佳实践实现示例

确保生成的项目遵循 Microsoft 官方 Power Apps Code Apps 文档和 https://github.com/microsoft/PowerAppsCodeApps 上的示例，并且可以使用 pac code push 命令成功部署到 Power Platform。

power-apps-code-app-scaffold

相关 Skills