Back to Details

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

交付成果

  1. Complete project scaffolding with all necessary files
  2. Working sample application with connector integration
  3. Comprehensive documentation and setup instructions
  4. Development and deployment scripts
  5. TypeScript configuration optimized for Power Apps Code Apps
  6. 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.
  1. 包含所有必要文件的完整项目搭建模板
  2. 集成连接器的可运行示例应用
  3. 全面的文档和设置说明
  4. 开发和部署脚本
  5. 针对Power Apps Code Apps优化的TypeScript配置
  6. 最佳实践实现示例
确保生成的项目遵循微软官方Power Apps Code Apps文档和https://github.com/microsoft/PowerAppsCodeApps中的示例，并且可以通过`pac code push`命令成功部署到Power Platform。