Criar e editar páginas generativas com ferramentas de geração de código por IA

Este artigo descreve como usar ferramentas de geração de código por IA, como o GitHub Copilot CLI e Claude Code, para criar e editar páginas generativas para aplicações orientadas a modelos no Power Apps. Esta abordagem permite-lhe integrar capacidades avançadas de geração de código diretamente no seu fluxo de trabalho de desenvolvimento, permitindo-lhe criar novas páginas generativas ou iterar sobre as existentes usando instruções em linguagem natural.

A utilização de ferramentas de geração de código por IA com páginas generativas oferece uma abordagem alternativa de desenvolvimento que complementa a experiência baseada em UI no Power Apps (make.powerapps.com). Esta abordagem centrada no código é concebida para programadores e criadores técnicos que preferem trabalhar com ferramentas de desenvolvimento locais e fluxos de trabalho baseados em CLI.

O que podes fazer com ferramentas de geração de código

• Crie uma ou mais páginas generativas numa única execução a partir de requisitos de linguagem simples
• Crie as tabelas Microsoft Dataverse de suporte de que as suas páginas precisam, ou reutilize as existentes, incluindo dados de exemplo para novas tabelas
• Coloque artefactos numa aplicação e solução nova ou existente, incluindo a criação de uma aplicação ou solução em tempo real
• Atualize as páginas generativas existentes solicitando alterações ou melhorias através da sua ferramenta de IA
• Implemente diretamente no seu ambiente Power Apps usando comandos PAC CLI
• Trabalhe localmente com o seu IDE e ferramentas de desenvolvimento preferidas, com npm install suporte IntelliSense para o código gerado

Como funciona

1. Descreve o que quer construir em linguagem natural, por exemplo, "Crie um painel de página generativo que mostre as principais contas por receita."
2. Um agente de planeamento analisa o seu pedido e propõe um plano. O plano pode incluir uma ou mais páginas, as tabelas Dataverse de que as páginas precisam (novas ou existentes), e a aplicação e solução onde os artefactos se encontram. O planeador delega então a agentes especializados para construir o que o plano descreve. Por exemplo, um construtor de tabelas e um construtor de páginas.
3. Revês e ajustas o plano antes de construir. Pode alterar o número de páginas, trocar ou adicionar tabelas, direcionar uma aplicação diferente ou colocar os artefactos numa solução diferente.
4. Os agentes geram código TypeScript e React prontos para produção para a sua página ou páginas, juntamente com ficheiros de apoio para desenvolvimento local.
5. A ferramenta implementa os artefactos no seu ambiente usando comandos PAC CLI de página generativa e, opcionalmente, executa uma etapa de verificação no navegador que testa a página com testes gerados.
6. A sua página generativa aparece na sua aplicação orientada a modelos.

Pré-requisitos

Antes de começar, certifique-se de que possui o software e as permissões necessárias aqui descritas.

Requisitos de software

Requisitos adicionais

• Um ambiente Power Platform com uma aplicação orientada a modelos para implementar páginas.
• Uma sessão PAC CLI autenticada ligada ao seu ambiente alvo.
  • Consulte Autenticar Power Platform CLI para mais informações sobre como estabelecer a ligação.

Instala o plugin

Executa o instalador para configurar todos os plugins do Power Platform no PowerShell ou numa janela de comandos do Windows.

iwr https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js -OutFile install.js; node install.js; del install.js

curl -fsSL https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js | node

O instalador automaticamente:

• Detetar ferramentas disponíveis (Claude Code, GitHub Copilot CLI)
• Regista o marketplace de plugins e instala todos os plugins
• Ativa a atualização automática para que os plugins se mantenham atualizados

Após a instalação, reinicie a sua ferramenta de IA se necessário.

Instale apenas o plugin de página generativa

Para instalar apenas o plugin de geração de página para GitHub Copilot CLI ou Claude Code:

1. Adicione o plugin do mercado Power Platform Skills: /plugin marketplace add microsoft/power-platform-skills
2. Instale o plugin Power Apps: /plugin install model-apps@power-platform-skills

Depois de instalado, pode usar o plugin através de:

• Ao executar o comando /genpage explicitamente.
• Descrever a página que quer criar. A ferramenta deteta e utiliza automaticamente o plugin.

Utilização de outras ferramentas de geração de código por IA

Para outras ferramentas de geração de código por IA, assegure-se de que a sua ferramenta tem acesso aos recursos de página generativa do repositório Power Platform Skills no GitHub. A pasta do plugin model-apps inclui documentação de componentes, código de exemplo, referência de comandos PAC CLI e instruções de fluxo de trabalho necessárias para criar código que cumpra os requisitos das páginas generativas, incluindo como criar páginas que suportem múltiplas linguagens e regiões. Consulte o readme do repositório para obter informações sobre como aceder e utilizar estes recursos com a sua ferramenta preferida.

Visão geral das competências

O plugin Power Apps fornece esta competência para trabalhar com páginas generativas.

Esta competência permite-lhe descrever o que pretende construir e fazer com que a ferramenta de IA gere código completo em TypeScript e React para a sua página generativa, para depois implementá-lo diretamente no seu ambiente Power Apps.

Criar uma nova página generativa

Siga este fluxo de trabalho ao construir uma nova página ou conjunto de páginas do zero.

1. Inicia uma conversa com a tua ferramenta de IA. Descreve o que queres criar. Seja tão específico ou tão vago quanto quiser — quanto mais vago for o pedido, mais o agente completa por si só. Também pode anexar uma imagem ou outros materiais para guiar os visuais, a temática e o layout. Por exemplo:

   • "Crie um painel de página generativa que mostre as nossas 10 contas principais por receitas usando a tabela de contas"
   • "Construir duas páginas para gerir as minhas inscrições de voluntários — uma para navegar pelos turnos abertos e outra para confirmar uma inscrição — usando dados de exemplo"
   • "Crie uma página generativa para mostrar relatórios de incidentes num mapa usando a tabela de Incidentes"

2. Escolha criar ou editar, se lhe for pedido. Se o agente do planeador não tiver a certeza se quer uma nova página ou atualizar uma já existente, ele pergunta. Para seguir este fluxo de trabalho, escolha criar uma nova página. Para editar, vá a Editar uma página generativa existente.

3. Responda a perguntas sobre o que construir. O planeador pode perguntar que tipo de página queres, oferecendo alguns exemplos e aceitando uma descrição personalizada, como que dados usar, layout, que informação mostrar, interações, e assim por diante. Seja específico quanto às necessidades do negócio e aos requisitos de dados, identifique cedo os requisitos móveis e mencione quaisquer componentes da interface ou preferências de layout. O planeador pode também colocar questões esclarecedoras, como se deve usar tabelas Dataverse ou dados de exemplo codificados fixamente, e se deve adicionar a página a uma aplicação existente ou criar uma nova aplicação.

4. Revê e ajusta o plano. O planeador apresenta um plano que inclui a(s) página(s) que pretende construir, as tabelas Dataverse para usar ou criar (com as colunas que planeia usar), a aplicação para hospedar a página (nova ou existente) e a solução onde os artefactos se encontram. Itere com o agente para ajustar qualquer coisa que queira alterar — por exemplo, o número de páginas, que tabelas são usadas ou criadas, a aplicação de destino ou a solução de destino. Confirma o plano quando corresponder à tua intenção.

5. Deixe os agentes construir e implementar. Os agentes especializados geram a página ou páginas, as tabelas de suporte e o código, e depois implementam no seu ambiente.

6. Opcionalmente, verifica no navegador. Após a compilação, o agente pode propor executar uma etapa de verificação no navegador que executa testes Playwright gerados automaticamente na página para confirmar que a página carrega e funciona corretamente. Use isto para detetar problemas óbvios antes de testar manualmente.

7. Testa e itera. Abra a sua aplicação orientada a modelos no Power Apps e navegue até à nova página. Se precisar de fazer alterações, volte à sua ferramenta de IA e descreva as atualizações em linguagem natural.

Editar uma página generativa existente

Usa este fluxo de trabalho para atualizar uma página que já existe no teu ambiente.

1. Recupere a página existente. Na sua ferramenta de geração de código de IA, peça para recuperar a página generativa existente fornecendo o ID da página (GUID) ou o nome da página no sitemap e na aplicação onde está. Por exemplo, "Quero atualizar a página generativa de adoção de animais de estimação da aplicação Demo."

2. Descreva as suas atualizações. Diz à ferramenta de IA que alterações queres fazer. Por exemplo:

   • "Adicionar um filtro para mostrar apenas registos ativos"
   • "Alterar o layout para mostrar cartões numa grelha em vez de uma lista"
   • "Adicione um gráfico que mostre as tendências de adoção ao longo do tempo"
   • "Atualize o formulário para incluir o novo campo personalizado para o temperamento dos animais de estimação"

3. Revê, publica, testa e itera. A ferramenta de IA gera código TypeScript atualizado com base nas alterações solicitadas. Siga o mesmo processo de revisão, publicação e teste descrito na secção "Criar uma nova página generativa". Continue a iterar com instruções em linguagem natural até que a página cumpra os seus requisitos.

Ficheiros de desenvolvimento local

Quando a ferramenta de IA gera uma página, também escreve dois ficheiros de suporte para o seu espaço de trabalho local para facilitar a revisão e iteração do código:

• package.json — declara as dependências de runtime e desenvolvimento contra as quais a página gerada compila. Executa npm install após a geração para instalar estas dependências.
• genpage.d.ts — declarações ambient TypeScript para objetos que não são instalados via npm, como dataApi e pageInput.

Com ambos os ficheiros prontos e npm install completos, o IntelliSense do seu editor, como no VS Code, funciona contra o código gerado, por isso pode rever ou editar manualmente a página sem ver rabiscos vermelhos para tipos não resolvidos.

Configurar uma página para aceitar parâmetros de entrada

As páginas generativas podem aceitar os parâmetros recordIdde entrada , entityName, e data, permitindo-lhes receber dados contextuais quando navegadas a partir de outras páginas ou código. Quando instrui a ferramenta de IA a configurar parâmetros de entrada, ela gera o código de inicialização apropriado para que a página leia e use esses valores quando carrega.

Descreva os parâmetros que pretende no seu prompt:

• "Configura a página para aceitar um recordId e um entityName da Conta. Quando a página for carregada, utilize estes parâmetros para obter e exibir os dados da conta correspondentes.
• "Configure esta página para aceitar um parâmetro de dados contendo um objeto de filtro personalizado. Use-o para filtrar os registos exibidos quando a página é carregada.

Para navegar até à página e passar estes parâmetros, consulte Navegar para e a partir de uma página generativa usando a API do Cliente.

Localização

Quando crias uma página generativa usando o plugin Power Apps para Claude Code ou GitHub Copilot CLI, a localização é tratada automaticamente. O agente deteta todas as linguagens ativadas no seu ambiente e gera código para que a página funcione com todas essas línguas. A página respeita a língua preferida de cada utilizador e as preferências regionais de formatação para datas, números e moeda.

Se quiser direcionar um conjunto diferente de linguagens daquelas ativadas no seu ambiente, pode pedir ao agente para ajustar, por exemplo:

"Atualize esta página para suportar apenas Inglês, Francês e Espanhol."

Para mais informações, consulte as instruções de localização no repositório Power Platform Skills.

Resolução de problemas

A página não carrega no Power Apps

Se navegar até à sua página generativa e observar uma mensagem de erro ou um ecrã em branco:

1. Abrir ferramentas para programadores de navegadores (F12 na maioria dos navegadores).

2. Selecione a aba Consola.

3. Copie a mensagem de erro completa, incluindo o stack trace.

4. Volte à sua ferramenta de geração de código por IA e cole o erro com contexto:

   "Estou a receber este erro ao abrir a página: [erro de colagem aqui]. Por favor, resolvam o problema."

   A ferramenta de IA analisa o erro, identifica a causa raiz e gera uma correção.

5. Revê a correção e pede à ferramenta para republicar a página.

Reverter para uma versão funcional

Se alterações recentes quebraram a sua página ou pioraram os problemas, pode pedir à ferramenta de IA para reverter para uma versão anterior funcional.

"As alterações recentes danificaram a página. Por favor, volte à última versão funcional."

A ferramenta de IA então:

1. Identifica as alterações feitas
2. Restaura o código de funcionamento anterior
3. Redistribui a versão estável

Melhores práticas

• Comece simples. Começa com uma versão básica da tua página e vai iterando para adicionar complexidade.
• Teste frequentemente. Implemente e teste a sua página após cada alteração significativa.
• Seja específico. Forneça requisitos detalhados para obter melhores resultados iniciais.
• Usa padrões já existentes. Consulte páginas semelhantes ou padrões de interface ao descrever os seus requisitos.
• Validar o código gerado. Reveja sempre o código gerado para garantir que cumpre os padrões e os requisitos de conformidade da sua organização.

Limitações

As limitações para páginas generativas criadas com ferramentas de geração de código por IA são as mesmas que para páginas generativas criadas no portal Power Apps Maker:

• A sua página só pode ligar-se às tabelas do Dataverse.
• A colaboração não é suportada — certifique-se de que apenas um criador está a trabalhar numa página generativa de cada vez.
• Apenas estes tipos de dados são suportados: Escolha, Moeda, Cliente, Data e Hora, Apenas Data, Número Decimal, Número de Vírgula Flutuante, Imagem, Consulta, Texto Multilinha, Estado, Razão de Estado, Texto, Número Inteiro, Sim/Não, Identificador Único.

Conteúdo relacionado

• Gerar uma página usando linguagem natural com aplicações orientadas a modelos
• Navegar para e a partir de uma página generativa usando a API do Cliente
• Métodos de objetos dataApi para páginas generativas
• Referência CLI da Power Platform