Échafaudage de projet Power Apps Code Apps

Vous êtes un expert développeur Power Platform spécialisé dans la création de Power Apps Code Apps. Votre tâche consiste à mettre en place une structure complète de projet Power Apps Code App en suivant les meilleures pratiques Microsoft et les capacités actuelles en aperçu.

Contexte

Power Apps Code Apps (aperçu) permettent aux développeurs de créer des applications web personnalisées avec des approches code-first tout en s'intégrant aux capacités Power Platform. Ces applications peuvent accéder à 1 500+ connecteurs, utiliser l'authentification Microsoft Entra et s'exécuter sur l'infrastructure Power Platform gérée.

Tâche

Créez une structure de projet Power Apps Code App complète avec les composants suivants :

1. Initialisation du projet

Configurez un projet Vite + React + TypeScript configuré pour Code Apps
Configurez le projet pour s'exécuter sur le port 3000 (requis par le SDK Power Apps)
Installez et configurez le SDK Power Apps (@microsoft/power-apps ^0.3.1)
Initialisez le projet avec PAC CLI (pac code init)

2. Fichiers de configuration essentiels

vite.config.ts: Configuration selon les exigences Power Apps Code Apps
power.config.json: Généré par PAC CLI pour les métadonnées Power Platform
PowerProvider.tsx: Composant fournisseur React pour l'initialisation Power Platform
tsconfig.json: Configuration TypeScript compatible avec le SDK Power Apps
package.json: Scripts pour le développement et le déploiement

3. Structure du projet

Créez une structure de dossiers bien organisée :

src/
├── components/          # Composants UI réutilisables
├── services/           # Services de connecteur générés (créés par PAC CLI)
├── models/            # Modèles TypeScript générés (créés par PAC CLI)
├── hooks/             # Hooks React personnalisés pour l'intégration Power Platform
├── utils/             # Fonctions utilitaires
├── types/             # Définitions de types TypeScript
├── PowerProvider.tsx  # Composant d'initialisation Power Platform
└── main.tsx          # Point d'entrée de l'application

4. Configuration des scripts de développement

Configurez les scripts package.json selon les exemples officiels Microsoft :

dev: "concurrently \"vite\" \"pac code run\"" pour l'exécution parallèle
build: "tsc -b && vite build" pour la compilation TypeScript et la génération Vite
preview: "vite preview" pour l'aperçu production
lint: "eslint ." pour la qualité du code

5. Implémentation d'exemple

Incluez un exemple de base qui démontre :

L'authentification et l'initialisation Power Platform avec le composant PowerProvider
La connexion à au moins un connecteur supporté (Office 365 Users recommandé)
L'utilisation de TypeScript avec les modèles et services générés
La gestion des erreurs et les états de chargement avec des modèles try/catch
Une interface utilisative responsive utilisant les composants Fluent UI React (selon les exemples officiels)
Une implémentation correcte de PowerProvider avec useEffect et initialisation asynchrone

Motifs avancés à considérer (optionnel)

Configuration multi-environnement: Paramètres spécifiques à l'environnement pour dev/test/prod
Architecture offline-first: Service worker et stockage local pour la fonctionnalité hors ligne
Fonctionnalités d'accessibilité: Attributs ARIA, navigation au clavier, support lecteur d'écran
Configuration d'internationalisation: Structure i18n basique pour le support multilingue
Fondation du système de thème: Implémentation de bascule mode clair/sombre
Motifs de conception responsive: Approche mobile-first avec système de points d'arrêt
Intégration de framework d'animation: Framer Motion pour les transitions fluides

6. Documentation

Créez un README.md complet avec :

Prérequis et instructions de configuration
Configuration de l'authentification et de l'environnement
Configuration du connecteur et de la source de données
Processus de développement local et de déploiement
Dépannage des problèmes courants

Directives d'implémentation

Prérequis à mentionner

Visual Studio Code avec l'extension Power Platform Tools
Node.js (version LTS - v18.x ou v20.x recommandée)
Git pour la gestion des versions
Power Platform CLI (PAC CLI) - dernière version
Environnement Power Platform avec Code Apps activé (paramètre administrateur requis)
Licences Power Apps Premium pour les utilisateurs finaux
Compte Azure (si vous utilisez Azure SQL ou d'autres connecteurs Azure)

Commandes PAC CLI à inclure

pac auth create --environment {environment-id} - S'authentifier avec un environnement spécifique
pac env select --environment {environment-url} - Sélectionner l'environnement cible
pac code init --displayName "App Name" - Initialiser le projet d'application code
pac connection list - Lister les connexions disponibles
pac code add-data-source -a {api-name} -c {connection-id} - Ajouter un connecteur
pac code push - Déployer vers Power Platform

Connecteurs officiellement supportés

Concentrez-vous sur ces connecteurs officiellement supportés avec des exemples de configuration :

SQL Server (y compris Azure SQL): Opérations CRUD complètes, procédures stockées
SharePoint: Bibliothèques de documents, listes et sites
Office 365 Users: Informations de profil, photos utilisateur, adhésions aux groupes
Office 365 Groups: Informations d'équipe et collaboration
Azure Data Explorer: Analytique et requêtes big data
OneDrive for Business: Stockage et partage de fichiers
Microsoft Teams: Collaboration d'équipe et notifications
MSN Weather: Intégration de données météorologiques
Microsoft Translator V2: Traduction multilingue
Dataverse: Opérations CRUD complètes, relations et logique métier

Intégration d'exemple de connecteur

Incluez des exemples fonctionnels pour Office 365 Users :

// Exemple : Obtenir le profil utilisateur actuel
const profile = await Office365UsersService.MyProfile_V2("id,displayName,jobTitle,userPrincipalName");

// Exemple : Obtenir la photo utilisateur
const photoData = await Office365UsersService.UserPhoto_V2(profile.data.id);

Limitations actuelles à documenter

La politique de sécurité du contenu (CSP) n'est pas encore supportée
Les restrictions IP SAS de stockage ne sont pas supportées
Pas d'intégration Git Power Platform
Pas de support des solutions Dataverse
Pas d'intégration native Azure Application Insights

Meilleures pratiques à inclure

Utilisez le port 3000 pour le développement local (requis par le SDK Power Apps)
Définissez verbatimModuleSyntax: false dans la configuration TypeScript
Configurez vite.config.ts avec base: "./" et les alias de chemin appropriés
Stockez les données sensibles dans les sources de données, pas dans le code d'application
Suivez les politiques de plateforme gérée Power Platform
Implémentez la gestion appropriée des erreurs pour les opérations de connecteur
Utilisez les modèles et services TypeScript générés depuis PAC CLI
Incluez PowerProvider avec initialisation asynchrone appropriée et gestion des erreurs

Livrables

Échafaudage de projet complet avec tous les fichiers nécessaires
Application exemple fonctionnelle avec intégration de connecteur
Documentation complète et instructions de configuration
Scripts de développement et de déploiement
Configuration TypeScript optimisée pour Power Apps Code Apps
Exemples d'implémentation des meilleures pratiques

Assurez-vous que le projet généré suit la documentation officielle Microsoft Power Apps Code Apps et les exemples de https://github.com/microsoft/PowerAppsCodeApps, et peut être déployé avec succès sur Power Platform en utilisant la commande pac code push.

power-apps-code-app-scaffold