Partilhar via

Tutorial: Constrói uma aplicação para Windows com o GitHub Copilot

Neste tutorial, usas GitHub Copilot em modo agente para construir uma aplicação WinUI 3 completa — uma simples aplicação notas com uma lista de notas, a possibilidade de adicionar e eliminar entradas e uma página de definições. Vais ver exatamente quais os prompts a usar em cada etapa, e como o plugin WinUI 3 e o Learn MCP Server mantêm o Copilot preciso em todo o processo.

  • Estruturar um projeto WinUI 3 com o Copilot
  • Gerar uma interface XAML com o Copilot
  • Adicionar lógica de negócio com o Copilot
  • Adicione uma notificação Windows usando o Learn MCP Server
  • Empacotar a aplicação com a linha de comando winapp

Pré-requisitos

Parte 1: Estruturar o projeto

Criar o projeto WinUI

Crie um novo projeto WinUI 3: no Visual Studio, selecione Ficheiro>Novo>Projeto, filtre por WinUI e escolha o modelo Aplicação WinUI em Branco (Empacotada) C#. Nomeia o projeto NotesApp e abre-o.

Abrir o modo agente do Copilot e apoiar a estrutura

Abra o painel Copilot Chat no Visual Studio e mude para agent mode. Depois, introduz:

"Tenho um novo projeto vazio no WinUI 3 chamado NotesApp. Configure uma arquitetura MVVM com a seguinte estrutura: uma MainWindow com um NavigationView, três páginas (Notas, Favoritos, Definições), uma pasta ViewModels com uma classe base ViewModel e um NotesViewModel, e uma pasta Models com um modelo Note que tem as propriedades Id, Título, Conteúdo e CreatedAt. Utilize CommunityToolkit.Mvvm."

O Copilot irá criar a estrutura de pastas, adicionar a referência do pacote NuGet CommunityToolkit.Mvvm, gerar as classes base e ligar o NavigationView. Revise o resultado — se algo parecer errado, peça ao Copilot para corrigir na mesma sessão de chat.

Sugestão

Se o Copilot gerar espaços de nomes Windows.UI.Xaml em vez de Microsoft.UI.Xaml, as instruções personalizadas do plug-in WinUI 3 deverão detetar isto. Se o vires, avisa: "Corrige quaisquer instâncias de Windows.UI.Xaml — este é um projeto WinUI 3, por isso todos os namespaces XAML devem usar Microsoft.UI.Xaml."

Parte 2: Construir a UI

Gerar a página de Notas

Gerar o XAML para a Página de Notas. Deverá ter uma ListView a mostrar notas com Título e uma pré-visualização de Conteúdo truncada, uma Caixa de Texto e um Botão na parte inferior para adicionar uma nova nota, e um botão Eliminar em cada item. Associe-o ao NotesViewModel. Utilize os controlos do WinUI 3 e o espaçamento do Fluent Design.

O Copilot gera o XAML, vinculado ao teu ViewModel. Peça-lhe para ajustar o estilo ou o layout conforme necessário — por exemplo:

"Faz com que os itens da lista usem um estilo de carta com uma sombra subtil, semelhante aos exemplos de cartas do WinUI Gallery."

Gerar a página de Definições

"Gerar uma página de Definições com uma opção para tema escuro/claro e um botão 'Limpar todas as notas' com um diálogo de confirmação. Use o ContentDialog para confirmação — não o MessageDialog."

As instruções do plugin do WinUI 3 direcionam o Copilot para ContentDialog (a abordagem correta do WinUI 3) e afastam-no do obsoleto MessageDialog.

Parte 3: Adicionar lógica de negócio

Implementar persistência de notas

"Implementar persistência de notas no NotesViewModel usando System.Text.Json para serializar e desserializar a coleção de notas para um ficheiro no ApplicationData.Current.LocalFolder. Carregar notas no arranque e guardar sempre que a coleção mudar.

O Copilot gera a lógica de carregamento/guardar. Peça-lhe para adicionar tratamento de erros:

"Adicionar try/catch em torno das operações de ficheiro e registar erros na saída de debug."

Implementar a troca de temas

"Implementa a opção de alternar tema no SettingsViewModel. Quando a opção mudar, atualize o RequestedTheme na janela principal da aplicação usando a abordagem correta do WinUI 3."

Parte 4: Adicionar uma notificação no Windows

A identidade do pacote é necessária para as notificações do Windows. Primeiro, configure-o com a linha de comando do winapp:

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

Agora peça ao Copilot para adicionar uma notificação que dispare quando uma nota é guardada:

"Adicione uma notificação de aplicação Windows que mostre 'Nota guardada' com o título da nota como legenda quando uma nota for persistida com sucesso no disco. Utilize o SDK de Aplicações Windows AppNotificationManager.

Com o servidor Learn MCP ligado, Copilot pode consultar a API atual AppNotificationBuilder e gerar o código de notificação correto. Deverá produzir algo como:

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

Parte 5: Empacotar a aplicação

Quando estiveres pronto para distribuir ou publicar na Microsoft Store, constrói um pacote MSIX adequado:

winapp pack --output ./publish

Isto gera um pacote MSIX assinado, pronto para carregamento lateral ou submissão na Loja. Peça ao Copilot para obter ajuda na atualização do manifesto do pacote.

"Mostra-me como atualizar o Package.appxmanifest para definir o nome de visualização, descrição e editor para submissão na Loja."

Resumo

Criaste uma aplicação completa de notas para WinUI 3 usando:

  • agente do Copilot para andaimes, geração de UI e lógica de negócio
  • WinUI 3 plugin para manter Copilot em APIs modernas e corretas ao longo de todo o processo
  • Learn MCP Server para consultar as APIs de notificações do SDK de Aplicações Windows
  • winapp CLI para identidade de pacote e empacotamento MSIX

Opcional: Adicionar IA no dispositivo à sua aplicação

A aplicação de notas é totalmente funcional — mas pode ir mais longe adicionando uma funcionalidade de IA que funciona inteiramente no dispositivo do utilizador. O Foundry Local torna isto simples: executa um modelo de linguagem localmente e expõe uma API compatível com OpenAI.

Instale o Foundry Local e descarregue um modelo

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

Quando o modelo começa, ele ouve em http://localhost:5272/openai/v1.

Adicionar o pacote NuGet 

dotnet add package Azure.AI.OpenAI

Adicione um botão "Resumir" à página de Notas

Pergunte ao Copilot

"Adicione um botão 'Resumir' à página de Notas. Quando clicado, deve enviar o conteúdo da nota selecionada para um endpoint de IA local em http://localhost:5272/openai/v1 usando o pacote Azure.AI.OpenAI, e mostrar o resumo num ContentDialog. O nome do modelo é phi-4-mini."

Copilot gera a chamada e o diálogo AzureOpenAIClient — a API compatível com OpenAI significa que o código se assemelha a uma chamada API na nuvem, mas está apontado diretamente para 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}");

O que o utilizador visualiza

Não é necessária ligação à internet. Sem chave API. O modelo corre no PC deles — rápido, privado e gratuito.

Sugestão

Para aplicações direcionadas a PCs Copilot+, podes trocar o Foundry Local por Phi Silica para usares a NPU diretamente para inferências ainda mais rápidas. A superfície da API é diferente (APIs de IA do Windows em vez de compatíveis com OpenAI), mas o Copilot pode ajudar-te a fazer a mudança.

Moderniza ou porta uma aplicação de Windows com Copilot

  • Last updated on