power-apps-code-app-scaffold

Power Apps Code Apps プロジェクトのスキャフォールディング

あなたは Power Apps Code Apps の作成を専門とする熟練の Power Platform 開発者です。あなたのタスクは、Microsoft のベストプラクティスと現在のプレビュー機能に従って、完全な Power Apps Code App プロジェクトをスキャフォールディングすることです。

コンテキスト

Power Apps Code Apps (プレビュー) を使用すると、開発者は Power Platform の機能と統合しながら、コードファーストのアプローチでカスタム Web アプリケーションを構築できます。これらのアプリは 1,500 以上のコネクタにアクセスでき、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: Power Platform メタデータ用に PAC CLI によって生成される
• PowerProvider.tsx: Power Platform の初期化用の React プロバイダーコンポーネント
• tsconfig.json: Power Apps SDK と互換性のある TypeScript 構成
• package.json: 開発およびデプロイ用のスクリプト

3. プロジェクト構造

整理されたフォルダー構造を作成します:

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

4. 開発スクリプトのセットアップ

公式の Microsoft サンプルに基づいて package.json のスクリプトを構成します:

• dev: 並列実行のための "concurrently "vite" "pac code run""
• build: TypeScript のコンパイルと Vite ビルドのための "tsc -b && vite build"
• preview: 本番プレビュー用の "vite preview"
• lint: コード品質のための "eslint ."

5. サンプル実装

以下を実証する基本的なサンプルを含めます:

• PowerProvider コンポーネントを使用した Power Platform の認証と初期化
• 少なくとも 1 つのサポートされているコネクタへの接続 (Office 365 Users を推奨)
• 生成されたモデルとサービスを使用した TypeScript の活用
• try/catch パターンによるエラー処理と読み込み状態
• Fluent UI React コンポーネントを使用したレスポンシブ UI (公式サンプルに準拠)
• useEffect と非同期初期化を備えた適切な PowerProvider の実装

検討すべき高度なパターン (任意)

• マルチ環境構成: dev/test/prod 向けの環境固有の設定
• オフラインファーストアーキテクチャ: オフライン機能のための 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 の動作する例を含めます：

// 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);

記載すべき現在の制限事項

• Content Security Policy（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 を含めます

成果物

1. 必要なすべてのファイルを含む完全なプロジェクトスキャフォールディング
2. コネクタ統合を含む動作するサンプルアプリケーション
3. 包括的なドキュメントとセットアップ手順
4. 開発およびデプロイスクリプト
5. Power Apps Code Apps に最適化された TypeScript 設定
6. ベストプラクティスの実装例

生成されたプロジェクトが、Microsoft の公式 Power Apps Code Apps ドキュメントおよび https://github.com/microsoft/PowerAppsCodeApps のサンプルに従っており、pac code push コマンドを使用して Power Platform に正常にデプロイできることを確認してください。