Compartir a través de

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.

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

Abrir el modo de agente de Copilot y estructurar la estructura.

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. Debe tener un control ListView que muestre notas con título y una vista previa truncada del contenido, un cuadro de texto y un botón en la parte inferior para agregar una nueva nota y un botón eliminar en cada elemento. Enlazarlo a NotesViewModel. Use los controles 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:

"Agregue intento/captura alrededor de las operaciones de archivo y registre 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 conmutador, actualice la propiedad 'RequestedTheme' en la ventana principal de la aplicación mediante el método adecuado de WinUI 3.

Parte 4: Agregar una notificación de Windows

La identidad del paquete es necesaria para Windows notificaciones. En primer lugar, establézcalo con la CLI de winapp:

winapp create-debug-identity --publisher "CN=NotesApp"

Ahora 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 Learn MCP Server conectado, Copilot puede buscar la API de AppNotificationBuilder actual y generar el código correcto de notificación. 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 WinUI 3 para mantener Copilot en las API modernas y correctas constantemente.
  • Learn MCP Server para buscar la API de notificaciones de SDK de Aplicaciones para 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 y el cuadro de diálogo AzureOpenAIClient: la API compatible con OpenAI significa que el código es idéntico a una llamada API en la nube, simplemente 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

  • Last updated on