Tutorial: Compilación de una aplicación de Windows con GitHub Copilot

En este tutorial, usas GitHub Copilot en modo agente para crear una aplicación completa de WinUI 3, una sencilla aplicación de notas con una lista de notas, la capacidad de agregar y eliminar entradas, y una página de configuración. Verá exactamente qué indicaciones usar en cada paso y cómo el complemento WinUI 3 y Learn MCP Server mantienen a Copilot preciso en todo momento.

Note

Este artículo se centra en GitHub Copilot y sus herramientas de desarrollo de Windows. Si no está familiarizado con el desarrollo asistido por IA, empiece por Crear una aplicación de tareas winUI 3 con un asistente de IA para aprender un flujo de trabajo independiente de herramientas para inspeccionar y comprobar el código generado.

  • Generar la estructura de un proyecto de WinUI 3 usando Copilot
  • Generación de una interfaz de usuario XAML con Copilot
  • Adición de lógica de negocios con Copilot
  • Adición de una notificación de Windows mediante el servidor MCP de Learn
  • Empaquetar la aplicación con la CLI de winapp

Prerrequisitos

Parte 1: Estructurar el proyecto

Creación del proyecto de WinUI

Cree un nuevo project WinUI 3: en Visual Studio, seleccione File>New>Project, filtre por WinUI y elija la plantilla WinUI Blank App (Empaquetado) C#. Asigne al proyecto el nombre NotesApp y ábralo.

Abre el modo agente de Copilot y crea la estructura básica

Abra el panel Copilot Chat en Visual Studio y cambie al modo agent. A continuación, escriba:

Tengo un nuevo proyecto de WinUI 3 en blanco llamado NotesApp. Configure una arquitectura MVVM con la siguiente estructura: un MainWindow con un NavigationView, tres páginas (Notas, Favoritos, Configuración), una carpeta ViewModels con una clase ViewModel base y un NotesViewModel, y una carpeta Models con un modelo Note que tenga propiedades Id, Title, Content y CreatedAt. Utilice CommunityToolkit.Mvvm.

Copilot creará la estructura de carpetas, agregará la referencia del paquete NuGet CommunityToolkit.Mvvm, generará las clases base y conectará NavigationView. Revise la salida: si algo parece incorrecto, pida Copilot corregirlo en la misma sesión de chat.

Sugerencia

Si Copilot genera Windows.UI.Xaml espacios de nombres en lugar de Microsoft.UI.Xaml, las instrucciones personalizadas del complemento WinUI 3 deben detectar esto. Si lo ves, indica: "Corregir todas las instancias de Windows.UI.Xaml — este es un proyecto de WinUI 3, por lo que todos los espacios de nombres XAML deben utilizar Microsoft.UI.Xaml."

Parte 2: Compilación de la interfaz de usuario

Generar la página Notas

Generar el XAML para la página de Notas. Debería tener un ListView que muestre notas con el título y una vista previa truncada del contenido, un TextBox y un botón en la parte inferior para añadir una nueva nota, y un botón Eliminar en cada elemento. Enlazarlo a NotesViewModel. Utiliza controles de WinUI 3 y el espaciado de Fluent Design.

Copilot genera el XAML enlazado a tu ViewModel. Pídale que ajuste el estilo o el diseño según sea necesario, por ejemplo:

"Hacer que los elementos de lista usen un estilo de tarjeta con una sombra sutil, similar a los ejemplos de tarjetas de la Galería de WinUI".

Generar la página Configuración

"Generar una página configuración con un botón de alternancia para el tema oscuro o claro y un botón "Borrar todas las notas" con un cuadro de diálogo de confirmación. Use ContentDialog para la confirmación, no MessageDialog".

Las instrucciones del complemento WinUI 3 dirigen Copilot hacia ContentDialog (el enfoque correcto de WinUI 3) y lejos de la MessageDialog en desuso.

Parte 3: Agregar lógica de negocios

Implementación de la persistencia de notas

"Implemente la persistencia de notas en NotesViewModel mediante System.Text.Json para serializar y deserializar la colección de notas en un archivo de ApplicationData.Current.LocalFolder. Cargue notas al iniciar y guarde cada vez que cambie la colección".

Copilot genera la lógica de carga y guardado. Pídale que agregue el control de errores:

Añade try/catch alrededor de las operaciones con archivos y registra los errores en la salida de depuración.

Implementación del cambio de tema

"Implemente el botón de alternancia de tema en SettingsViewModel. Cuando cambie el interruptor, actualiza el RequestedTheme en la ventana principal de la aplicación utilizando el enfoque correcto de WinUI 3.

Parte 4: Agregar una notificación de Windows

Pídele a Copilot que agregue una notificación que se active cuando se guarde una nota:

"Agregue una notificación de aplicación Windows que muestre "Note saved" (Nota guardada) con el título de la nota como subtítulo cuando una nota se conserva correctamente en el disco. Utilice el SDK de Aplicaciones para Windows AppNotificationManager.

Con el servidor Learn MCP conectado, Copilot puede consultar la AppNotificationBuilder API actual y generar el código de notificación correcto. Debería producir algo parecido a:

var notification = new AppNotificationBuilder()
    .AddText("Note saved")
    .AddText(note.Title)
    .BuildNotification();
AppNotificationManager.Default.Show(notification);

Parte 5: Empaquetar la aplicación

Cuando esté listo para distribuir o publicar en la Microsoft Store, compile un paquete MSIX adecuado:

winapp pack --output ./publish

Esto genera un paquete MSIX firmado listo para carga lateral o para envío a la Tienda. Pide ayuda a Copilot para actualizar el manifiesto del paquete.

"Muéstrame cómo actualizar el Package.appxmanifest para establecer el nombre para mostrar, la descripción y el editor para el envío a la tienda".

Resumen

Ha creado una aplicación completa de notas de WinUI 3 con:

  • modo agente de Copilot para andamiaje, generación de interfaz de usuario y lógica empresarial
  • Complemento de WinUI 3 para que Copilot utilice siempre las API modernas y correctas
  • Servidor de Learn MCP para buscar las API de notificación del SDK de aplicaciones de Windows
  • CLI de winapp para la identidad del Paquete y el Empaquetado MSIX

Opcional: Agregar inteligencia artificial en el dispositivo a tu aplicación

La aplicación de notas es totalmente funcional, pero puede seguir agregando una característica de inteligencia artificial que se ejecuta completamente en el dispositivo del usuario. Foundry Local facilita este proceso: ejecuta un modelo de lenguaje localmente y expone una API compatible con OpenAI.

Instalación de Foundry Local y descarga de un modelo

winget install Microsoft.AIFoundry.Local
foundry model run phi-4-mini

Una vez que se inicia el modelo, escucha en http://localhost:5272/openai/v1.

Incorporación del paquete NuGet

dotnet add package Azure.AI.OpenAI

Agregar un botón "Resumir" a la página Notas

Pregunta a Copilot:

"Agregar un botón "Resumir" a la página Notas. Al hacer clic, debe enviar el contenido de la nota seleccionada a un punto de conexión de IA local en http://localhost:5272/openai/v1 mediante el paquete Azure.AI.OpenAI y mostrar el resumen en ContentDialog. El nombre del modelo es phi-4-mini".

Copilot genera la llamada AzureOpenAIClient y el cuadro de diálogo; al tratarse de una API compatible con OpenAI, el código tiene el mismo aspecto que una llamada a una API en la nube, solo que apuntando a localhost:

var client = new AzureOpenAIClient(
    new Uri("http://localhost:5272/openai/v1"),
    new ApiKeyCredential("foundry-local"));

var completion = await client.GetChatClient("phi-4-mini")
    .CompleteChatAsync($"Summarize this note in 2 sentences: {note.Content}");

Lo que ve el usuario

No se requiere conexión a Internet. Sin clave de API. El modelo se ejecuta en su PC, rápido, privado y gratuito.

Sugerencia

En el caso de las aplicaciones destinadas a equipos Copilot+, puede intercambiar Foundry Local por Phi Silica, usar la NPU directamente para obtener una inferencia más rápida aún. La interfaz de API es diferente (APIs de Windows AI en lugar de las compatibles con OpenAI), pero Copilot puede ayudarle a hacer la transición.

Modernize o portar una aplicación de Windows con Copilot

  • Se actualizó por última vez el