Início Rápido: Desenvolver aplicativos Azure com IA assistida por agente

Neste guia de início rápido, use o GitHub Copilot para criar um aplicativo de tarefas em React e implantá-lo no Serviço de Aplicativo do Azure usando desenvolvimento assistido por IA. Ao desenvolver localmente, comece com o modo Planejar do Copilot para criar um plano de implementação detalhado e depois mude para o modo de agente para desenvolver e implantar. Ao usar o VS Code para a Web, use o modo de agente por toda parte. No final, você tem experiência prática com:

• GitHub Copilot no modo Planejar para analisar seu projeto e criar planos de implementação (desenvolvimento local)
• Modo agente do GitHub Copilot para criar a estrutura, configurar e implantar um aplicativo completo
• Azure Skills para aprimorar o Copilot com conhecimentos e ferramentas específicos do Azure
• Um aplicativo de tarefas funcional em execução no Serviço de Aplicativo do Azure
• Um endpoint de API para seu aplicativo de tarefas
• Azure Developer CLI (azd) para provisionar e implantar recursos do Azure a partir de um modelo de infraestrutura

O modo de plano permite que Copilot pesquise sua base de código e crie um plano de implementação estruturado antes de escrever qualquer código, garantindo que seus requisitos sejam claros e sua abordagem seja sólida. O modo de agente permite ao Copilot executar comandos de forma autônoma, editar arquivos e iterar a partir dos erros. Você fornece a meta e Copilot determina as etapas.

Pré-requisitos

• Uma conta do Azure com uma assinatura ativa. Criar um gratuitamente.
• Uma assinatura GitHub Copilot.

# Visual Studio Code
code --version

# GitHub Copilot
code --list-extensions | grep -i github.copilot

# Node.js
node --version

# Azure Developer CLI
azd version

# Azure Skills
code --list-extensions | grep -i ms-azuretools.vscode-azure-mcp-server

Criar um espaço de trabalho

Habilitar habilidades de Azure

Azure Skills fornece ao Copilot expertise selecionada sobre o Azure, fluxos de trabalho e proteções para que o agente possa tomar decisões bem fundamentadas sobre serviços, infraestrutura e implantação no Azure. A extensão mcp Azure instala uma extensão complementar que traz as habilidades de Azure para o VS Code. Juntos, eles configuram o servidor MCP Azure, o MCP do Foundry e a camada de habilidades completas automaticamente. Para obter mais informações, consulte o repositório Azure Skills Plugin.

Planeje seu aplicativo

Plano permite que Copilot pesquise seu projeto e gere um plano de implementação detalhado antes de escrever qualquer código. Examine e refina o plano e, em seguida, entregue-o ao modo de agente para execução.

1. Abra a exibição Copilot Chat selecionando o ícone de chat na Barra de Atividades.

2. Entre no GitHub Copilot se ainda não tiver feito isso. Selecione o logotipo GitHub Copilot Sign-in na barra de status Visual Studio Code e siga os prompts para autenticar com sua conta GitHub.

3. Selecione Plan na lista suspensa de agentes no painel de conversa ou digite /plan seguido da descrição da sua tarefa.

   Copie e cole o seguinte prompt no painel de chat do Copilot:

   /plan 
   Create a Vite + React single-page application (SPA) to-do app
   with the following features:
   - Add, remove, and mark complete/incomplete to-do items.
   - Use localStorage to persist to-do items between sessions.
   - Choose low-cost Azure resources.
   - Create a deployment template for Azure Developer CLI (azd).
   - Create a README file with instructions on how to test, run, and deploy the app.
   

   Note

   Se você ainda não configurou GitHub Copilot, será solicitado que você entre em sua conta GitHub e configure Copilot antes de enviar o prompt. Se você não tiver uma assinatura Copilot, você estará associado a uma conta gratuita que oferece um limite mensal de conclusões e interações de chat.

4. Responda a quaisquer perguntas esclarecedoras feitas pelo agente do Plano depois de pesquisar sua tarefa. Por exemplo: TypeScript ou JavaScript para o aplicativo React? Qual abordagem de estilo deve ser usada? O modelo azd deve incluir um fluxo de trabalho de CI/CD do GitHub Actions?

5. Examine o plano gerado. Seu plano tem esta aparência:

   Plan: Vite + React To-Do SPA with Azure Deployment
   A Vite + React + TypeScript SPA scaffolded inside todo-app, with localStorage persistence,
   and deployed to Azure Static Web Apps (Free tier) via azd. 
   No backend required — all state is client-side.
   ... 
   

   O agente de Plano produz um resumo de alto nível, etapas de implementação e etapas de verificação. Você pode enviar prompts subsequentes para refinar o plano de forma iterativa até que ele atenda aos seus requisitos.

Modo de agente

O modo de agente fornece GitHub Copilot a capacidade de executar comandos de terminal, criar e editar arquivos e auto-corrigir quando algo der errado. Você fornece uma meta de alto nível e o agente decide quais etapas tomar.

1. Selecione o modelo Claude Sonnet 4.6 , o modo agente e o Autopilot (versão prévia) no painel de chat.

   • O modelo padrão Auto permite que Copilot escolha o melhor modelo para cada etapa dinamicamente. Para este início rápido, use um modelo específico, como o Claude Sonnet 4.6, para obter um comportamento mais determinístico, de modo que as etapas que o Copilot executa para implementar seu plano sejam mais previsíveis.
   • O modo agente e o piloto automático permitem que Copilot execute comandos de terminal e faça alterações de arquivo de forma autônoma. O modo Autopilot dá ao Copilot a capacidade de se autocorrigir e iterar sem precisar de mais informações suas. Se preferir mais controle, escolha o modo de aprovações padrão para aprovar cada etapa antes de ser executada.

2. No painel de chat, selecione Iniciar Implementação ou Iniciar com o Autopilot para entregar o plano ao modo de agente para execução. O modo de piloto automático dá ao Copilot a capacidade de continuar iterando sem precisar de novas informações suas. Se preferir mais controle, escolha o modo de aprovações padrão para aprovar cada etapa antes de ser executada.

Quando Copilot concluir a implementação, você verá a saída no painel de chat semelhante a esta:

All done. Here's a summary of what was built:

App (src/)

src/types.ts — Todo interface
src/hooks/useTodos.ts — addTodo, removeTodo, toggleTodo with localStorage persistence
src/components/TodoForm.tsx, TodoItem.tsx, TodoList.tsx — UI components
src/App.tsx — wired together with task remaining counter
src/App.css / src/index.css — vanilla CSS, light/dark mode
Azure / azd

azure.yaml — host: staticwebapp, dist: dist
infra/main.bicep — subscription-scoped resource group + Static Web App (Free tier)
infra/staticwebapp.bicep, main.parameters.json, abbreviations.json
Docs — README.md with local dev, build, azd up deploy, and azd down teardown instructions.

Build passes with no errors (tsc + Vite). Run npm run dev to start locally, 
or azd up to provision and deploy to Azure.

O aplicativo agora é estruturado com os recursos especificados e o modelo de infraestrutura Azure está pronto para implantação. O arquivo README inclui instruções sobre como testar e implantar o aplicativo. Antes de implantar no Azure, teste o aplicativo localmente para confirmar se ele funciona conforme o esperado.

Testar o aplicativo

Dependendo de como você respondeu às perguntas durante o modo de planejamento, testar seu aplicativo localmente pode depender da implementação. Examine o arquivo README para teste localmente.

npm install && npm run dev

  VITE v5.4.21  ready in 271 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

npm install && npm run dev

  VITE v5.4.21  ready in 271 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Quando terminar de testar, interrompa o servidor de desenvolvimento pressionando Ctrl + C o terminal.

Perguntar sobre serviços de Azure

Agora que você tem um aplicativo de trabalho, pergunte ao agente sobre quais serviços de Azure seriam adequados para hospedar o aplicativo e o armazenamento para dados persistentes.

Copie e cole o seguinte prompt:

I want to change the storage persistence. What are my no-cost or low-cost storage options for this app in Azure?

O agente usa Azure Skills para analisar a arquitetura do aplicativo, as necessidades de armazenamento de dados e os padrões de API para recomendar um serviço de Azure apropriado para hospedar seus dados to-do. O agente considera fatores como custo, escalabilidade, facilidade de integração e adequação para a carga de trabalho do aplicativo. Em seguida, o agente explica sua recomendação como o seguinte exemplo:

For this to-do app, these are the best no-cost or low-cost Azure persistence options, ordered from cheapest/simple to stronger capability.

1. Azure Cosmos DB for NoSQL with free tier
- Cost profile: can be zero if you stay within free-tier limits.
- Best for: JSON to-do items, easy API fit, good scaling path.
- Pros: schema-flexible, globally available, SDK support, free tier available.
- Cons: RU-based model can become costly if queries are inefficient.
- Good default choice if you want cloud-native persistence with minimal redesign.

2. Azure Table Storage
- Cost profile: typically very low (often cents to a few dollars at small scale).
- Best for: simple key-based to-do storage.
- Pros: cheapest at low volume, straightforward, durable.
- Cons: limited query features versus Cosmos DB/SQL.
- Great choice if your app only needs basic CRUD by id/user partition.
...

Publicar no Azure

Depois de testar o aplicativo localmente e confirmar que ele funciona conforme o esperado, implante-o em Azure para que você possa vê-lo em execução na nuvem.

1. Como você está usando azd para implantar, entre no Azure no terminal se ainda não estiver. Executar:

   azd auth login
   

2. Implante o aplicativo para Azure.

   azd up
   

   Escolha um nome de ambiente exclusivo para a implantação quando solicitado. Esse nome é usado para criar um grupo de recursos no Azure e deve ser globalmente exclusivo.

   Selecione a assinatura de Azure para a qual você deseja implantar quando solicitado.

O comando azd up provisiona os recursos de Azure definidos na pasta infra/, cria o aplicativo e o implanta em Azure. A saída do terminal inclui a URL do aplicativo implantado.

Solução de problemas

Se a implantação falhar ou o site dinâmico não atender aos arquivos de produção criados, use o prompt a seguir para que o agente diagnostice e corrija a implantação automaticamente.

Deploy the app using `azd up`. If deployment is misconfigured, diagnose and fix automatically until the live site serves built production files, not source or default pages.
Final verification must confirm HTML references production assets and that the main JS/CSS asset URLs return HTTP 200.
Update the README. Return a concise summary and the app website URL.

Durante o desenvolvimento, você pode usar GitHub Copilot para ajudá-lo a depurar problemas. Se você encontrar um erro, copie e cole a saída de erro na janela de chat e peça ao agente para ajudá-lo a entender e corrigir o problema.

Explore os recursos implantados

Use a URL do aplicativo implantado na saída do terminal ou no chat do GitHub Copilot para acessá-lo em um navegador. Acesse seu aplicativo e teste se ele está funcionando conforme o esperado na nuvem. Adicione, alterne e remova tarefas para confirmar se tudo funciona.

Você pode explorar seus recursos de Azure diretamente no VS Code.

1. Abra o modo de exibição Azure selecionando o ícone Azure na Barra de Atividades.
2. No nó Recursos, selecione o ícone Agrupar por e escolha Agrupar por Grupo de Recursos para organizar os recursos por grupos de recursos.
3. Expanda recursos e localize o grupo de recursos para a implantação criada por azd up.
4. Expanda o grupo de recursos para ver os serviços implantados, como o Serviço de Aplicativo que hospeda seu aplicativo Web e quaisquer outros recursos criados por azd up.
5. Clique com o botão direito do mouse no aplicativo Web e selecione Browse Website para abrir seu aplicativo to-do implantado ou selecione View no Portal para ver o recurso no portal do Azure e na URL de implantação.

Limpar os recursos

Quando terminar de explorar, exclua os recursos do Azure para evitar incorrer em encargos:

azd down

Esse comando exclui todos os recursos Azure criados durante a implantação, incluindo o grupo de recursos.

Próximas Etapas 

Você usou o modo Planejar e o modo Agente do GitHub Copilot para planejar, criar a estrutura inicial e implantar um aplicativo React de lista de tarefas no Azure sem precisar escrever código manualmente. Continue desenvolvendo com base no que você aprendeu:

• Documentação do GitHub Copilot para Azure – saiba mais sobre o desenvolvimento do Azure assistido por IA.
• VS Code for the Web for Azure development - Saiba mais sobre o ambiente de desenvolvimento baseado em navegador.
• Azure Skills Plugin – Instale as habilidades de Azure para melhorar o desenvolvimento Azure com Copilot.
• Modelos da CLI do Desenvolvedor do Azure – localizar modelos para diferentes linguagens e arquiteturas.