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, para criar e editar páginas generativas para aplicações orientadas a modelos no Power Apps. Ao utilizar esta abordagem, pode integrar capacidades avançadas de geração de código diretamente no seu fluxo de trabalho de desenvolvimento para criar novas páginas generativas ou iterar sobre as existentes usando instruções em linguagem natural. As páginas podem usar tabelas do Microsoft Dataverse, conectores do Power Platform (pré-visualização) e APIs personalizadas do Dataverse (pré-visualização).

A utilização de ferramentas de geração de código por IA com páginas generativas complementa a experiência baseada em UI em Power Apps (make.powerapps.com). Esta abordagem centrada no código adequa-se a qualquer criador ou programador que queira acesso aos modelos de IA mais recentes ou que prefira 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
• (Pré-visualização) Ligue a dados fora do Dataverse usando conectores Power Platform
• (Pré-visualização) Chamar lógica de negócio do lado do servidor usando APIs personalizadas do Dataverse
• 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 do Dataverse, origens de dados suportadas por conectores ou APIs personalizadas de que as páginas necessitam, bem como a aplicação e a 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 fontes de dados, 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 utilizando comandos PAC CLI de página generativa e, opcionalmente, executa um passo de verificação no browser 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.
• Para páginas suportadas por conectores (pré-visualização), uma ligação do Power Platform autenticada existente para cada conector que pretende utilizar. O agente pode criar uma referência de ligação, se necessário.
• Para páginas que chamam uma API personalizada do Dataverse (pré-visualização), uma API personalizada existente e suportada no ambiente de destino. Para implementar lógica do lado do servidor e expô-la a uma página generativa, crie um plug-in Dataverse e depois crie uma API personalizada usando a Ferramenta de Registo de Plug-ins e associe-a ao tipo de plug-in. Para detalhes de configuração, veja Criar e usar APIs personalizadas.
• Para exportar a telemetria de páginas generativas para o Aplicação Azure Insights (pré-visualização), um administrador deve configurar a exportação de dados do Application Insights para o ambiente no centro de administração do Power Platform. O ambiente deve cumprir os requisitos para a exportação de dados do Application Insights.

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:

• Deteta ferramentas disponíveis (GitHub Copilot CLI, Claude Code)
• 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 preencherá os detalhes por si próprio. 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"
   • "Crie uma página que mostre documentos da Project files SharePoint list."
   • "Crie uma página de revisão de encomendas com um botão Aprovar que chame a ApproveOrder API personalizada."

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, oferecer alguns exemplos e aceitar 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, conectores Power Platform, APIs personalizadas 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, fontes de dados apoiadas por conectores ou APIs personalizadas a utilizar, a aplicação para alojar 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 mudar – por exemplo, o número de páginas, que tabelas ou APIs personalizadas são usadas, a aplicação de destino ou a solução de destino. Confirme o plano quando corresponder à sua intenção.

5. Deixe os agentes construir e implementar. Os agentes especializados geram a página ou páginas, tabelas de suporte, conectores ou ligações personalizadas de API, e 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.

Usar dados do conector (versão preliminar)

O suporte a conectores permite que uma página generativa utilize dados fora do Dataverse através do ecossistema de conectores Power Platform. Todos os conectores Power Platform são suportados.

Para usar dados de conectores, descreva o serviço e os dados que quer que a página use no seu prompt. Por exemplo, peça ao agente para criar uma página que apresente documentos de uma lista do SharePoint. Durante o planeamento, o agente:

1. Lista as ligações e referências de ligação disponíveis no ambiente selecionado.
2. Pede-te para escolheres uma ligação. Se a ligação não tiver referência de ligação, o agente cria uma.
3. Pede que selecione os dados do conector, como um conjunto de dados e uma tabela ou uma operação do conector.
4. Adiciona a ligação do conector à página e inclui-a quando a página é implementada.

Revise a fonte de dados do conector no plano antes de aprovar a construção. Teste a página gerada com as identidades e permissões que os seus utilizadores irão usar.

Use uma API personalizada (pré-visualização)

Use uma ação ou função personalizada da API Dataverse quando a sua página precisar de executar explicitamente lógica de negócio do lado do servidor, como aprovar uma encomenda, recalcular um preço ou validar uma transação.

Para usar uma API personalizada, descreva a operação e quando a página deve chamá-la no seu prompt. Por exemplo, peça ao agente para adicionar um botão "Aprovar" que invoque a API personalizada ApproveOrder para a encomenda atual. Durante o planeamento, o agente:

1. Lista as APIs personalizadas suportadas disponíveis no ambiente selecionado.
2. Pede-te para selecionares a API personalizada que a página deve chamar.
3. Utiliza as propriedades de pedido e resposta da API personalizada quando gera a página.
4. Adiciona a ligação personalizada da API à página e inclui-a quando a página é implementada.

Revê a API personalizada e as suas entradas no plano antes de aprovares a build. Teste a página gerada com as identidades e permissões que os seus utilizadores usam.

Monitorize uma página generativa com Application Insights (pré-visualização)

O Power Apps pode exportar automaticamente telemetria operacional para páginas gerativas para o Aplicação Azure Insights. Esta funcionalidade funciona da mesma forma para páginas criadas com ferramentas de geração de código por IA e páginas criadas em Power Apps (make.powerapps.com).

Um administrador deve primeiro configurar a exportação de dados do Application Insights para o ambiente no centro de administração do Power Platform. Depois de configurada a exportação, o Power Apps reporta automaticamente a telemetria suportada a partir das páginas generativas publicadas. O seu prompt e o código de página gerado não precisam de inicializar o SDK JavaScript do Application Insights, incluir uma cadeia de ligação ou adicionar chamadas de telemetria.

A telemetria exportada automaticamente inclui:

• Carregamentos de página concluídos na tabela pageViews.
• Erros não tratados de renderização de páginas e rejeições de promessas na tabela exceptions.
• Operações dataApi suportadas na tabela dependencies.
• Navegação iniciada a partir de uma página gerada na tabela pageViews.

A telemetria do Application Insights para páginas generativas é uma funcionalidade em pré-visualização. A disponibilidade pode variar consoante o ambiente enquanto a funcionalidade está a ser implementada.

Para instruções de configuração, vá a Exportar dados para Application Insights. Para o esquema de telemetria e as orientações sobre consultas para aplicações condicionadas por modelo, consulte Eventos de telemetria para aplicações condicionadas por modelo.

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. Execute 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 concluído, o IntelliSense do seu editor, como no VS Code, funciona sobre o código gerado, permitindo rever ou editar manualmente a página sem ver linhas ondulantes vermelhas 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 a competência Power Apps, 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:

• As fontes de dados suportadas são as tabelas Dataverse e os conectores do Power Platform (pré-visualização).
• Ações e funções personalizadas da API são suportadas em pré-visualização. APIs personalizadas que utilizam o tipo de ligação EntityCollection ou parâmetros Entity não são suportadas.
• 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