Inicio rápido: Desarrollo de aplicaciones de Azure con inteligencia artificial asistida por agente

En este inicio rápido, use GitHub Copilot para compilar una aplicación de React to-do e implementarla en Azure App Service mediante el desarrollo asistido por IA. Al desarrollar localmente, comience con el modo Plan de Copilot para crear un plan de implementación detallado y, a continuación, cambie al modo Agente para desarrollar e implementar. Al usar VS Code para web, use el modo de agente en todo. Al final, tiene experiencia práctica con:

  • modo GitHub Copilot Plan para investigar el proyecto y crear planes de implementación (desarrollo local)
  • Modo agente de GitHub Copilot para crear la estructura, configurar y desplegar una aplicación completa
  • Azure Skills para mejorar Copilot con conocimientos y herramientas específicos de Azure
  • Una aplicación de tareas funcional que se ejecuta en Azure App Service
  • Un punto de conexión de una API para tu aplicación de tareas
  • Azure CLI para desarrolladores (azd) para aprovisionar e implementar Azure recursos desde una plantilla de infraestructura

El modo de plan permite Copilot investigar el código base y crear un plan de implementación estructurado antes de escribir cualquier código, lo que garantiza que los requisitos son claros y su enfoque es sólido. El modo agente permite a Copilot ejecutar comandos de forma autónoma, editar archivos e iterar a partir de los errores. Proporciona el objetivo y Copilot determina los pasos.

Prerequisites

No se requiere ninguna instalación local. VS Code for the Web (vscode.dev/azure) proporciona un entorno de VS Code basado en explorador con la CLI del desarrollador de Azure, Node.jsy varias extensiones de Azure preinstaladas.

Crear un área de trabajo

  1. Abra vscode.dev/azure en el explorador.

  2. Inicie sesión con su cuenta de Azure cuando se le solicite.

  3. En la ventana Terminal , cree un nuevo directorio para el proyecto y cámbielo.

    mkdir todo-app && cd todo-app

Habilitar aptitudes de Azure

Azure Skills ofrece a Copilot conocimientos especializados sobre Azure, flujos de trabajo y salvaguardas cuidadosamente seleccionados para que el agente pueda tomar decisiones fundamentadas sobre los servicios, la infraestructura y el despliegue de Azure. La extensión mcP de Azure instala una extensión complementaria que aporta las aptitudes de Azure a VS Code. Juntos configuran el Azure servidor MCP, Foundry MCP y la capa completa de aptitudes automáticamente. Para obtener más información, consulte el repositorio Azure Skills Plugin.

  1. Abra la paleta de comandos.
  2. Seleccione MCP: Enumerar servidores.
  3. Si el servidor MCP de Azure no se está ejecutando, inícielo seleccionando Azure MCP>Start server.

Planeamiento de la aplicación

Plan modo permite Copilot investigar el proyecto y generar un plan de implementación detallado antes de escribir código. Revisa y perfecciona el plan y, a continuación, pásalo al modo agente para que lo ejecute.

  1. Abra la vista Copilot Chat seleccionando el icono de chat en la barra de actividades.

  2. Inicie sesión en GitHub Copilot si aún no lo ha hecho. Seleccione el logotipo de GitHub Copilot Sign-in en la barra de estado de Visual Studio Code y siga las indicaciones para autenticarse con la cuenta de GitHub.

  3. Seleccione Planear en la lista desplegable agentes en el panel de chat o escriba /plan seguido de la descripción de la tarea.

    Copie y pegue el siguiente mensaje en el panel de chat de 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.

    Nota:

    Si aún no configuró GitHub Copilot, se le pedirá que inicie sesión en su cuenta de GitHub y configure Copilot antes de poder enviar el mensaje. Si no tiene una suscripción de Copilot, está asociada a una cuenta gratuita que le proporciona un límite mensual de finalizaciones e interacciones de chat.

  4. Responda a las preguntas aclarantes que el agente de plan hace después de investigar la tarea. Por ejemplo: TypeScript o JavaScript para la aplicación React? ¿Qué enfoque de estilo se debe usar? ¿Debe la plantilla azd incluir un flujo de trabajo de CI/CD de Acciones de GitHub?

  5. Revise el plan generado. El plan tiene un aspecto similar al siguiente:

    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.
...

    El agente de plan genera un resumen de alto nivel, los pasos de implementación y los pasos de comprobación. Puede enviar avisos de seguimiento para iterar en el plan hasta que cumpla sus requisitos.

Modo de agente

El modo de agente ofrece GitHub Copilot la capacidad de ejecutar comandos de terminal, crear y editar archivos y auto corregir cuando algo va mal. Proporcione un objetivo de alto nivel y el agente decida qué pasos se deben seguir.

  1. Seleccione Claude Sonnet 4.6 modelo, modo agente y Autopilot (versión preliminar) en el panel de chat.

    • El modelo predeterminado Auto permite Copilot elegir el mejor modelo para cada paso dinámicamente. En este inicio rápido, use un modelo específico como Claude Sonnet 4.6 para un comportamiento más determinista para que los pasos que Copilot lleve a cabo para implementar el plan son más predecibles.
    • El modo de agente y autopilot permiten que Copilot ejecuten comandos de terminal y realicen cambios de archivo de forma autónoma. El modo Piloto automático permite a Copilot autocorregirse e iterar sin necesidad de más indicaciones por tu parte. Si prefiere más control, elija el modo de aprobaciones predeterminadas para aprobar cada paso antes de que se ejecute.

  2. En el panel de chat, seleccione Iniciar implementación o Iniciar con Autopilot para entregar el plan al modo de agente para su ejecución. El modo Piloto automático permite a Copilot iterar sin necesidad de más intervención por tu parte. Si prefiere más control, elija el modo de aprobaciones predeterminadas para aprobar cada paso antes de que se ejecute.

Cuando Copilot finaliza la implementación, verá la salida en el panel de chat similar 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.

La aplicación ya cuenta con la estructura base generada con las funcionalidades especificadas, y la plantilla de infraestructura de Azure está lista para su implementación. El archivo LÉAME incluye instrucciones sobre cómo probar e implementar la aplicación. Antes de realizar la implementación en Azure, pruebe la aplicación localmente para confirmar que funciona según lo previsto.

Prueba de la aplicación

Dependiendo de cómo respondiste a preguntas durante el modo de planeación, probar la aplicación localmente podría depender de la implementación. Revise el archivo LÉAME para probarlo localmente.

Suponiendo que la aplicación es una SPA de Vite + React como se genera en los pasos de planeación, inicie el servidor de desarrollo con el siguiente comando:

npm install && npm run dev

El comando inicia el servidor de desarrollo de Vite. La salida del terminal incluye la dirección URL de localhost donde se ejecuta la aplicación.

  VITE v5.4.21  ready in 271 ms

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

En la pestaña Puertos, abra la URL del puerto Dirección reenviada en el navegador para ver la aplicación de tareas en el navegador.

Captura de pantalla de la pestaña Puertos de VS Code con la URL de la dirección reenviada del puerto 5173 resaltada.

Pruebe la funcionalidad agregando, alternando y quitando tareas para confirmar que todo funciona según lo previsto.

Captura de pantalla de To-Do aplicación que muestra 2 de 3 tareas restantes con una tarea completada y un campo de entrada para agregar nuevas tareas.

Cuando haya terminado de probar, detenga el servidor de desarrollo presionando Ctrl + C en el terminal.

Pregunte sobre los servicios de Azure

Ahora que tiene una aplicación en funcionamiento, pregunte al agente qué servicios Azure sería una buena opción para hospedar la aplicación y el almacenamiento para los datos persistentes.

Copie y pegue el siguiente texto:

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

El agente usa Azure Skills para analizar la arquitectura de la aplicación, las necesidades de almacenamiento de datos y los patrones de API para recomendar un servicio de Azure adecuado para hospedar los datos de to-do. El agente considera factores como el costo, la escalabilidad, la facilidad de integración y la idoneidad para la carga de trabajo de la aplicación. A continuación, el agente explica su recomendación como en el ejemplo siguiente:

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.
...

Implementar en Azure

Después de probar la aplicación localmente y confirmar que funciona según lo previsto, impleméntela en Azure para que pueda verla en ejecución en la nube.

  1. Puesto que usa azd para implementarlo, inicie sesión en Azure en el terminal si aún no lo está. ¡Corre!

    azd auth login

  2. Implemente la aplicación en Azure.

    azd up

    Elija Un nombre de entorno único para la implementación cuando se le solicite. Este nombre se usa para crear un grupo de recursos en Azure y debe ser único globalmente.

    Seleccione la suscripción Azure en la que desea implementar cuando se le solicite.

El comando azd up aprovisiona los recursos Azure definidos en la carpeta infra/, compila la aplicación e la implementa en Azure. La salida del terminal incluye la dirección URL de la aplicación implementada.

Solución de problemas

Si se produce un error en la implementación o el sitio activo no sirve los archivos de producción creados, use la siguiente solicitud para que el agente diagnostique y corrija la implementación automáticamente.

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 el desarrollo, puede usar GitHub Copilot para ayudarle a depurar problemas. Si se produce un error, copie y pegue la salida del error en la ventana de chat y pida al agente que le ayude a comprender y corregir el problema.

Explora tus recursos implementados

Use la dirección URL de la aplicación implementada desde la salida del terminal o GitHub Copilot chat para acceder a ella en un explorador. Vaya a la aplicación y pruebe que funciona según lo previsto en la nube. Agregue, alterne y quite tareas para confirmar que todo funciona.

Captura de pantalla de la aplicación web To-Do desplegada en Azure Static Web Apps con dos tareas completadas y una pendiente.

Puede explorar los recursos de Azure directamente en VS Code.

  1. Abra la vista Azure seleccionando el icono de Azure en la barra de actividad.
  2. En el nodo Recursos, seleccione el icono Agrupar por y elija Agrupar por grupo de recursos para organizar los recursos por sus grupos de recursos.
  3. Expanda Recursos y busque el grupo de recursos para la implementación creada por azd up.
  4. Expanda el grupo de recursos para ver los servicios implementados, como App Service que hospeda la aplicación web y cualquier otro recurso creado por azd up.
  5. Haga clic con el botón derecho en la aplicación web y seleccione Browse Website para abrir la aplicación implementada to-do o seleccione View in Portal para ver el recurso en el Azure Portal y la dirección URL de implementación.

Limpieza de recursos

Cuando haya terminado de explorar, elimine los recursos de Azure para evitar incurrir en cargos:

azd down

Este comando elimina todos los recursos Azure creados durante la implementación, incluido el grupo de recursos.

Pasos siguientes

Has usado el modo Plan y el modo Agente de GitHub Copilot para planificar, generar la estructura base e implementar una aplicación de lista de tareas en React en Azure sin tener que escribir código manualmente. Continúe desarrollando lo aprendido:

  • Last updated on