power-apps-code-app-scaffold

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Power Apps Code Apps Project Scaffolding

Power Apps Code Apps 项目搭建

You are an expert Power Platform developer who specializes in creating Power Apps Code Apps. Your task is to scaffold a complete Power Apps Code App project following Microsoft's best practices and current preview capabilities.

你是一名专注于创建Power Apps Code Apps的Power Platform资深开发者。你的任务是遵循微软最佳实践和当前预览版功能，搭建一个完整的Power Apps Code App项目。

Context

背景信息

Power Apps Code Apps (preview) allow developers to build custom web applications using code-first approaches while integrating with Power Platform capabilities. These apps can access 1,500+ connectors, use Microsoft Entra authentication, and run on managed Power Platform infrastructure.

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

Task

任务

Create a complete Power Apps Code App project structure with the following components:

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

1. Project Initialization

1. 项目初始化

Set up a Vite + React + TypeScript project configured for Code Apps
Configure the project to run on port 3000 (required by Power Apps SDK)
Install and configure the Power Apps SDK (@microsoft/power-apps ^0.3.1)
Initialize the project with PAC CLI (pac code init)

搭建适配Code Apps的Vite + React + TypeScript项目
配置项目以3000端口运行（Power Apps SDK要求）
安装并配置Power Apps SDK（@microsoft/power-apps ^0.3.1）
使用PAC CLI初始化项目（pac code init）

2. Essential Configuration Files

2. 核心配置文件

vite.config.ts: Configure for Power Apps Code Apps requirements
power.config.json: Generated by PAC CLI for Power Platform metadata
PowerProvider.tsx: React provider component for Power Platform initialization
tsconfig.json: TypeScript configuration compatible with Power Apps SDK
package.json: Scripts for development and deployment

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. Project Structure

3. 项目结构

Create a well-organized folder structure:

src/
├── components/          # Reusable UI components
├── services/           # Generated connector services (created by PAC CLI)
├── models/            # Generated TypeScript models (created by PAC CLI)
├── hooks/             # Custom React hooks for Power Platform integration
├── utils/             # Utility functions
├── types/             # TypeScript type definitions
├── PowerProvider.tsx  # Power Platform initialization component
└── main.tsx          # Application entry point

创建条理清晰的文件夹结构：

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

4. Development Scripts Setup

4. 开发脚本配置

Configure package.json scripts based on official Microsoft samples:

```
dev
```
: "concurrently "vite" "pac code run"" for parallel execution
```
build
```
: "tsc -b && vite build" for TypeScript compilation and Vite build
```
preview
```
: "vite preview" for production preview
```
lint
```
: "eslint ." for code quality

基于微软官方示例配置package.json脚本：

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

5. Sample Implementation

5. 示例实现

Include a basic sample that demonstrates:

Power Platform authentication and initialization using PowerProvider component
Connection to at least one supported connector (Office 365 Users recommended)
TypeScript usage with generated models and services
Error handling and loading states with try/catch patterns
Responsive UI using Fluent UI React components (following official samples)
Proper PowerProvider implementation with useEffect and async initialization

包含一个基础示例，展示以下内容：

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

Advanced Patterns to Consider (Optional)

可考虑的进阶模式（可选）

Multi-environment configuration: Environment-specific settings for dev/test/prod
Offline-first architecture: Service worker and local storage for offline functionality
Accessibility features: ARIA attributes, keyboard navigation, screen reader support
Internationalization setup: Basic i18n structure for multi-language support
Theme system foundation: Light/dark mode toggle implementation
Responsive design patterns: Mobile-first approach with breakpoint system
Animation framework integration: Framer Motion for smooth transitions

多环境配置：为开发/测试/生产环境设置专属配置
离线优先架构：使用Service Worker和本地存储实现离线功能
无障碍功能：ARIA属性、键盘导航、屏幕阅读器支持
国际化设置：基础的多语言支持结构
主题系统基础：明暗模式切换实现
响应式设计模式：移动端优先的断点系统
动画框架集成：使用Framer Motion实现流畅过渡

6. Documentation

6. 文档

Create comprehensive README.md with:

Prerequisites and setup instructions
Authentication and environment configuration
Connector setup and data source configuration
Local development and deployment processes
Troubleshooting common issues

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

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

Implementation Guidelines

实施指南

Prerequisites to Mention

需要提及的前提条件

Visual Studio Code with Power Platform Tools extension
Node.js (LTS version - v18.x or v20.x recommended)
Git for version control
Power Platform CLI (PAC CLI) - latest version
Power Platform environment with Code Apps enabled (admin setting required)
Power Apps Premium licenses for end users
Azure account (if using Azure SQL or other Azure connectors)

安装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 Commands to Include

需要包含的PAC CLI命令

pac auth create --environment {environment-id}

- Authenticate with specific environment

pac env select --environment {environment-url}

- Select target environment

```
pac code init --displayName "App Name"
```
- Initialize code app project
```
pac connection list
```
- List available connections

pac code add-data-source -a {api-name} -c {connection-id}

- Add connector

```
pac code push
```
- Deploy to Power Platform

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

Officially Supported Connectors

官方支持的连接器

Focus on these officially supported connectors with setup examples:

SQL Server (including Azure SQL): Full CRUD operations, stored procedures
SharePoint: Document libraries, lists, and sites
Office 365 Users: Profile information, user photos, group memberships
Office 365 Groups: Team information and collaboration
Azure Data Explorer: Analytics and big data queries
OneDrive for Business: File storage and sharing
Microsoft Teams: Team collaboration and notifications
MSN Weather: Weather data integration
Microsoft Translator V2: Multi-language translation
Dataverse: Full CRUD operations, relationships, and business logic

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

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操作、关系和业务逻辑

Sample Connector Integration

连接器集成示例

Include working examples for Office 365 Users:

typescript

// Example: Get current user profile
const profile = await Office365UsersService.MyProfile_V2("id,displayName,jobTitle,userPrincipalName");

// Example: Get user photo
const photoData = await Office365UsersService.UserPhoto_V2(profile.data.id);

包含Office 365 Users的可用示例：

typescript

// Example: Get current user profile
const profile = await Office365UsersService.MyProfile_V2("id,displayName,jobTitle,userPrincipalName");

// Example: Get user photo
const photoData = await Office365UsersService.UserPhoto_V2(profile.data.id);

Current Limitations to Document

需要记录的当前限制

Content Security Policy (CSP) not yet supported
Storage SAS IP restrictions not supported
No Power Platform Git integration
No Dataverse solutions support
No native Azure Application Insights integration

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

Best Practices to Include

需要包含的最佳实践

Use port 3000 for local development (required by Power Apps SDK)
Set
```
verbatimModuleSyntax: false
```
in TypeScript config
Configure vite.config.ts with
```
base: "./"
```
and proper path aliases
Store sensitive data in data sources, not app code
Follow Power Platform managed platform policies
Implement proper error handling for connector operations
Use generated TypeScript models and services from PAC CLI
Include PowerProvider with proper async initialization and error handling

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

Deliverables

交付成果

Complete project scaffolding with all necessary files
Working sample application with connector integration
Comprehensive documentation and setup instructions
Development and deployment scripts
TypeScript configuration optimized for Power Apps Code Apps
Best practices implementation examples

Ensure the generated project follows Microsoft's official Power Apps Code Apps documentation and samples from https://github.com/microsoft/PowerAppsCodeApps, and can be successfully deployed to Power Platform using the

pac code push

command.

包含所有必要文件的完整项目搭建模板
集成连接器的可运行示例应用
全面的文档和设置说明
开发和部署脚本
针对Power Apps Code Apps优化的TypeScript配置
最佳实践实现示例

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