Scaffolding de Projetos de Power Apps Code Apps

Você é um desenvolvedor especialista em Power Platform, especializado na criação de Power Apps Code Apps. Sua tarefa é criar a estrutura completa de um projeto de Power Apps Code App, seguindo as melhores práticas da Microsoft e as capacidades atuais em pré-visualização.

Contexto

Power Apps Code Apps (em pré-visualização) permitem que desenvolvedores criem aplicativos web personalizados usando abordagens "code-first", enquanto se integram com as capacidades do Power Platform. Esses aplicativos podem acessar mais de 1.500 conectores, usar autenticação do Microsoft Entra e rodar em infraestrutura gerenciada do Power Platform.

Tarefa

Crie uma estrutura completa de projeto de Power Apps Code App com os seguintes componentes:

1. Inicialização do Projeto

• Configure um projeto Vite + React + TypeScript para Code Apps
• Configure o projeto para rodar na porta 3000 (exigido pelo Power Apps SDK)
• Instale e configure o Power Apps SDK (@microsoft/power-apps ^0.3.1)
• Inicialize o projeto com o PAC CLI (pac code init)

2. Arquivos Essenciais de Configuração

• vite.config.ts: Configure para os requisitos de Power Apps Code Apps
• power.config.json: Gerado pelo PAC CLI para metadados do Power Platform
• PowerProvider.tsx: Componente provedor React para inicialização do Power Platform
• tsconfig.json: Configuração TypeScript compatível com o Power Apps SDK
• package.json: Scripts para desenvolvimento e implantação

3. Estrutura do Projeto

Crie uma estrutura de pastas bem organizada:

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. Configuração de Scripts de Desenvolvimento

Configure os scripts do package.json com base em exemplos oficiais da Microsoft:

• dev: "concurrently "vite" "pac code run"" para execução paralela
• build: "tsc -b && vite build" para compilação TypeScript e build do Vite
• preview: "vite preview" para pré-visualização em produção
• lint: "eslint ." para qualidade do código

5. Implementação de Exemplo

Inclua um exemplo básico que demonstre:

• Autenticação e inicialização do Power Platform usando o componente PowerProvider
• Conexão com pelo menos um conector suportado (Office 365 Users recomendado)
• Uso de TypeScript com modelos e serviços gerados
• Tratamento de erros e estados de carregamento com padrões try/catch
• UI responsiva usando componentes Fluent UI React (seguindo exemplos oficiais)
• Implementação adequada do PowerProvider com useEffect e inicialização assíncrona

Padrões Avançados a Considerar (Opcional)

• Configuração multi-ambiente: Configurações específicas de ambiente para dev/test/prod
• Arquitetura offline-first: Service worker e armazenamento local para funcionalidade offline
• Recursos de acessibilidade: Atributos ARIA, navegação por teclado, suporte a leitores de tela
• Configuração de internacionalização: Estrutura básica de i18n para suporte a múltiplos idiomas
• Fundação do sistema de temas: Implementação de alternância entre modo claro/escuro
• Padrões de design responsivo: Abordagem mobile-first com sistema de breakpoints
• Integração de framework de animação: Framer Motion para transições suaves

6. Documentação

Crie um README.md abrangente com:

• Pré-requisitos e instruções de configuração
• Configuração de autenticação e ambiente
• Configuração de conectores e fontes de dados
• Processos de desenvolvimento local e implantação
• Solução de problemas comuns

Diretrizes de Implementação

Pré-requisitos a Mencionar

• Visual Studio Code com a extensão Power Platform Tools
• Node.js (versão LTS - v18.x ou v20.x recomendado)
• Git para controle de versão
• Power Platform CLI (PAC CLI) - versão mais recente
• Ambiente do Power Platform com Code Apps habilitado (configuração de administrador necessária)
• Licenças Power Apps Premium para usuários finais
• Conta Azure (se estiver usando Azure SQL ou outros conectores Azure)

Comandos PAC CLI a Incluir

• pac auth create --environment {environment-id} - Autenticar com um ambiente específico
• pac env select --environment {environment-url} - Selecionar ambiente de destino
• pac code init --displayName "App Name" - Inicializar projeto de code app
• pac connection list - Listar conexões disponíveis

…