Quickstart: Desenvolver aplicações Azure com IA assistida por agentes

Neste guia de início rápido, utilize o GitHub Copilot para criar uma aplicação de lista de tarefas em React e implementá-la no Serviço de Aplicações do Azure, recorrendo ao desenvolvimento assistido por IA. Ao desenvolver localmente, comece com o modo Copilot Plan para criar um plano de implementação detalhado, depois mude para o modo agente para construir e implementar. Ao usar VS Code para a Web, utilize o modo agente em todo o processo. No final, tem experiência prática com:

  • GitHub Copilot modo de planeamento para analisar o seu projeto e criar planos de implementação (desenvolvimento local)
  • Modo de agente do GitHub Copilot para criar a estrutura base, configurar e implementar em produção uma aplicação completa
  • Azure Skills para melhorar o Copilot com conhecimento e ferramentas específicos do Azure
  • Uma aplicação de tarefas funcional em execução no Serviço de Aplicações do Azure
  • Um endpoint da API para a sua aplicação de tarefas
  • Azure Developer CLI (azd) para provisionar e implementar recursos Azure a partir de um modelo de infraestrutura

O modo Plano permite ao Copilot pesquisar a sua base de código e criar um plano de implementação estruturado antes de escrever qualquer código, garantindo que os seus requisitos são claros e a sua abordagem é sólida. O modo Agente permite ao Copilot executar comandos de forma autónoma, editar ficheiros e iterar sobre erros. Tu forneces o objetivo e o Copilot determina os passos.

Pré-requisitos

Não é necessária instalação local. VS Code for the Web (vscode.dev/azure) oferece-lhe um ambiente VS Code baseado em navegador com a Azure Developer CLI, Node.jse várias extensões Azure pré-instaladas.

Criar uma nova área de trabalho

  1. Abre vscode.dev/azure no teu navegador.

  2. Inicie sessão usando a sua conta Azure quando solicitado.

  3. Na janela do Terminal , crie um novo diretório para o seu projeto e mude para ele.

    mkdir todo-app && cd todo-app

Ativar Azure Skills

O Azure Skills oferece ao Copilot experiência selecionada no Azure, fluxos de trabalho e guarda-vidas para que o agente possa tomar decisões informadas sobre os serviços, infraestrutura e implementação do Azure. A extensão Azure MCP instala uma extensão complementar que traz as competências do Azure para o VS Code. Juntos, configuram automaticamente o Azure MCP Server, o Foundry MCP e toda a camada de competências. Para mais informações, consulte o repositório Azure Skills Plugin.

  1. Abra a Paleta de comandos.
  2. Selecionar MCP: Listar servidores.
  3. Se o servidor Azure MCP não estiver a funcionar, inicie-o ao selecionar Azure MCP>Iniciar servidor.

Planeie a sua candidatura

Modo de planeamento permite ao Copilot analisar o seu projeto e gerar um plano de implementação detalhado antes de escrever qualquer código. Revês e refinas o plano, depois passas-no para o modo agente para execução.

  1. Abra a vista Copilot Chat selecionando o ícone de chat na Barra de Atividade.

  2. Inicia sessão no GitHub Copilot se ainda não o fizeste. Selecione o botão do logótipo GitHub Copilot Log-in na barra de estado Visual Studio Code e siga as instruções para autenticar com a sua conta GitHub.

  3. Selecione a opção Plan na lista pendente de agentes no painel de conversação ou introduza /plan seguido da descrição da 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 ainda não configuraste o GitHub Copilot, és solicitado a iniciar sessão na tua conta GitHub e configurar o Copilot antes de poderes enviar o prompt. Se não tiver uma subscrição do Copilot, está associado a uma conta gratuita que lhe dá um limite mensal de concluições e interações por chat.

  4. Responda a quaisquer perguntas esclarecedoras que o agente do plano faça após pesquisar a sua tarefa. Por exemplo: TypeScript ou JavaScript para a aplicação React? Que abordagem de estilo deve ser usada? O modelo do azd deve incluir um fluxo de trabalho de CI/CD do GitHub Actions?

  5. Analise o plano gerado. O teu plano é mais ou menos assim:

    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 do Plano produz um resumo de alto nível, passos de implementação e passos de verificação. Pode enviar pedidos de seguimento para aperfeiçoar o plano iterativamente até satisfazer os seus requisitos.

Modo de agente

O modo Agente dá ao GitHub Copilot a capacidade de executar comandos de terminal, criar e editar ficheiros, e auto-corrigir-se quando algo corre mal. Apresentas um objetivo de alto nível, e o agente decide que passos tomar.

  1. Selecione o modelo Claude Sonnet 4.6 , modo Agente e Autopilot (Pré-visualização) no painel de chat.

    • O modelo padrão Auto permite-Copilot escolher dinamicamente o melhor modelo para cada passo. Para este quickstart, usa um modelo específico como o Claude Sonnet 4.6 para um comportamento mais determinístico, de modo a que os passos que o Copilot dá para implementar o teu plano sejam mais previsíveis.
    • O modo agente e o piloto automático permitem ao Copilot executar comandos de terminal e fazer alterações de ficheiros de forma autónoma. O modo Piloto automático permite ao Copilot autocorrigir-se e iterar sem necessitar de mais informações da sua parte. Se preferir mais controlo, escolha o modo de aprovação por defeito para aprovar cada passo antes de executar.

  2. No painel de chat, selecione Iniciar Implementação ou Iniciar com Autopilot para passar o plano para o modo agente para execução. O modo de piloto automático permite ao Copilot iterar sem necessitar de mais intervenção sua. Se preferir mais controlo, escolha o modo de aprovação por defeito para aprovar cada passo antes de executar.

Quando o Copilot termina a implementação, vê um resultado no painel de chat semelhante a este:

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.

A aplicação está agora estruturada com as funcionalidades especificadas, e o modelo de infraestrutura do Azure está pronto para implementação. O ficheiro README inclui instruções sobre como testar e implementar a aplicação. Antes de implementar no Azure, teste a aplicação localmente para confirmar se funciona como esperado.

Testar a aplicação

Dependendo de como respondeste às perguntas durante o modo de planeamento, testar a tua aplicação localmente pode depender da implementação. Consulte o ficheiro README para testes locais.

Assumindo que a aplicação é uma SPA Vite + React gerada nos passos de planeamento, inicie o servidor de desenvolvimento com o seguinte comando:

npm install && npm run dev

O comando inicia o servidor de desenvolvimento do Vite. A saída do terminal inclui o URL localhost onde a aplicação está a correr.

  VITE v5.4.21  ready in 271 ms

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

No separador Portas, abra o URL da porta Endereço reencaminhado no navegador para ver a aplicação de tarefas.

Captura de ecrã do separador VS Code Ports com o URL de Endereço Encaminhado destacado para a porta 5173.

Testa a funcionalidade adicionando, alternando e removendo tarefas para confirmar que tudo funciona como esperado.

Captura de ecrã de To-Do aplicação a mostrar 2 das 3 tarefas restantes, com uma tarefa concluída e um campo de entrada para adicionar novas tarefas.

Quando terminares os testes, pára o servidor de desenvolvimento pressionando Ctrl + C o terminal.

Pergunte sobre os serviços do Azure

Agora que tens uma aplicação a funcionar, pergunta ao agente quais os serviços do Azure que seriam adequados para alojar a aplicação e armazenar 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 utiliza Azure Skills para analisar a arquitetura da sua aplicação, as necessidades de armazenamento de dados e os padrões da API, para recomendar um serviço de Azure adequado para alojar os seus dados to-do. O agente considera fatores como custo, escalabilidade, facilidade de integração e adequação à carga de trabalho da aplicação. O agente explica então a sua recomendação do 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 testares a aplicação localmente e confirmares que funciona como esperado, implementa-a no Azure para poderes vê-la a correr na cloud.

  1. Como estás a usar azd para implementar, inicia sessão para Azure no terminal se ainda não o fizeste. Corrida:

    azd auth login

  2. Implemente a aplicação no Azure.

    azd up

    Escolha um nome de ambiente único para a implementação quando solicitado. Este nome é usado para criar um grupo de recursos no Azure e deve ser globalmente único.

    Selecione a subscrição do Azure onde quer implementar quando solicitado.

O comando azd up prevê os recursos de Azure definidos na pasta infra/, constrói a aplicação e implementa-a para Azure. A saída do terminal inclui o URL da sua aplicação implementada.

Solução de problemas

Se a implementação falhar ou o site ao vivo não servir os ficheiros de produção construídos, use o seguinte prompt para que o agente diagnostique e corrija a implementaçã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, pode usar o GitHub Copilot para ajudar a depurar problemas. Se encontrares um erro, copia e cola a saída do erro na janela de chat e pede ao agente para te ajudar a perceber e corrigir o problema.

Explore os seus recursos implementados

Use a URL da aplicação implementada a partir da saída do terminal ou do chat do GitHub Copilot para aceder a ela num navegador. Vai à tua aplicação e verifica se está a funcionar como esperado na cloud. Adiciona, alterna e remove tarefas para confirmar que tudo funciona.

Captura de ecrã da aplicação web To-Do implementada no Aplicações Web Estáticas do Azure com duas tarefas concluídas e uma restante.

Podes explorar os teus recursos do Azure diretamente no VS Code.

  1. Abra a vista 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 grupo de recursos.
  3. Expanda Recursos e encontre o grupo de recursos para a implementação criada por azd up.
  4. Expanda o grupo de recursos para ver os serviços implementados, como o Serviço de Aplicações que hospeda a sua aplicação web e quaisquer outros recursos criados por azd up.
  5. Clique com o botão direito na aplicação web e selecione Navegar pelo Website para abrir a sua aplicação de to-do implementada ou selecione Ver no Portal para ver o recurso no portal do Azure e o URL de implementação.

Limpeza de recursos

Quando terminares de explorar, elimina os recursos do Azure para evitar incorrer em encargos:

azd down

Este comando elimina todos os recursos do Azure criados durante a implementação, incluindo o grupo de recursos.

Passos seguintes

Usaste GitHub Copilot modo Plano e modo agente para planear, estruturar e implementar uma aplicação React to-do para Azure sem escrever código manualmente. Continua a construir sobre o que aprendeste:

  • Last updated on