Tutorial: Criar um aplicativo Windows com GitHub Copilot

Neste tutorial, você usará GitHub Copilot no modo de agente para criar um aplicativo WinUI 3 completo – um aplicativo notes simples com uma lista de anotações, a capacidade de adicionar e excluir entradas e uma página de configurações. Você verá exatamente quais prompts usar em cada etapa e como o plugin WinUI 3 e o Learn MCP Server mantêm o Copilot preciso o tempo todo.

Pré-requisitos

• GitHub Copilot configurado com o plug-in WinUI 3 e o Learn MCP Server: consulte Configurar o GitHub Copilot para desenvolvimento no Windows
• Visual Studio 2026 com a carga de trabalho de desenvolvimento de aplicativos WinUI
• winapp CLI instalada (winget install Microsoft.winappcli)

Parte 1: Estruturar o projeto

Criar o projeto WinUI

Crie um novo WinUI 3 project: em Visual Studio, selecione File>New>Project, filtre por WinUI e escolha o modelo WinUI Blank App (Packaged) C#. Nomeie o projeto NotesApp e abra-o.

Abra o modo agente do Copilot e estruture a base

Abra o painel Copilot Chat em Visual Studio e alterne para agent mode. Em seguida, insira:

"Tenho um novo projeto WinUI 3 em branco chamado NotesApp. Configure uma arquitetura MVVM com a seguinte estrutura: um MainWindow com um NavigationView, três páginas (Anotações, Favoritos, Configurações), uma pasta ViewModels com uma classe ViewModel base e um NotesViewModel e uma pasta Models com um modelo de Observação que tenha propriedades ID, Título, Conteúdo e CreatedAt. Utilize CommunityToolkit.Mvvm."

Copilot criará a estrutura de pastas, adicionará a referência do pacote NuGet CommunityToolkit.Mvvm, gerará as classes base e conectará o NavigationView. Examine a saída – se algo parecer errado, peça Copilot para corrigi-la na mesma sessão de chat.

Parte 2: Criar a interface do usuário

Gerar a página Anotações

"Gere o XAML para a página Anotações. Ele deve ter um ListView mostrando anotações com título e uma prévia de conteúdo truncada, um TextBox e um botão na parte inferior para adicionar uma nova anotação, e um botão de excluir em cada item. Associe-o ao NotesViewModel. Use os controles do WinUI 3 e o espaçamento do Fluent Design.

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

"Faça com que os itens de lista usem um estilo de cartão com uma sombra sutil, semelhante aos exemplos de cartão da Galeria WinUI."

Gerar a página Configurações

Gere uma página de configurações com uma opção de alternância para tema escuro/claro e um botão 'Limpar todas as anotações' com uma caixa de diálogo de confirmação. Use ContentDialog para a confirmação , não MessageDialog."

As instruções do plug-in WinUI 3 direcionam Copilot para ContentDialog (a abordagem correta do WinUI 3) e para longe do MessageDialog preterido.

Parte 3: Adicionar lógica de negócios

Implementar persistência de anotação

"Implemente a persistência de anotação em NotesViewModel usando System.Text.Json para serializar e desserializar a coleção de anotações em um arquivo em ApplicationData.Current.LocalFolder. Carregue anotações sobre a inicialização e salve sempre que a coleção for alterada."

Copilot gera a lógica de carregamento/salvamento. Peça a ele para adicionar tratamento de erros:

"Adicione try/catch nas operações de arquivo e registre os erros na saída de depuração."

Implementar alternância de tema

"Implemente a alternância de tema em SettingsViewModel. Quando o botão de alternância for alterado, atualize o RequestedTheme na janela principal do aplicativo utilizando a abordagem correta do WinUI 3.

Parte 4: Adicionar uma notificação de Windows

Peça ao Copilot para adicionar uma notificação que dispare quando uma anotação for salva.

Adicione uma notificação do aplicativo do Windows que exibe 'Observação salva' com o título da anotação como subtítulo quando uma anotação é salva com êxito no disco. Use o SDK do Aplicativo Windows AppNotificationManager".

Com o Learn MCP Server conectado, o Copilot pode pesquisar a atual API de AppNotificationBuilder e gerar o código de notificação correto. Ele deve produzir algo como:

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

Parte 5: Empacotar o aplicativo

Quando estiver pronto para distribuir ou publicar no Microsoft Store, crie um pacote MSIX adequado:

winapp pack --output ./publish

Isso gera um pacote MSIX assinado pronto para instalação direta ou envio para a loja da Microsoft. Peça ao Copilot ajuda para atualizar o manifesto do pacote.

"Mostre-me como atualizar o Package.appxmanifest para definir o nome de exibição, a descrição e o publicador para envio à Loja."

Resumo

Você criou um aplicativo de anotações completo do WinUI 3 usando:

• Modo agente Copilot para estruturação, geração de interface do usuário e lógica de negócios
• Plugin WinUI 3 para manter o Copilot em APIs modernas e corretas ao longo de todo o processo
• Learn MCP Server para consultar APIs de notificação do SDK do Aplicativo Windows
• WinApp CLI para identidade de pacote e empacotamento MSIX

Opcional: adicionar IA no dispositivo ao seu aplicativo

O aplicativo de anotações é totalmente funcional — mas você pode ampliá-lo adicionando um recurso de inteligência artificial que funciona inteiramente no dispositivo do usuário. O Foundry Local torna isso simples: ele executa um modelo de idioma localmente e expõe uma API compatível com OpenAI.

Instalar o Foundry Local e baixar um modelo

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

Quando o modelo é iniciado, ele escuta em http://localhost:5272/openai/v1.

Adicionar o pacote NuGet

dotnet add package Azure.AI.OpenAI

Adicionar um botão "Resumir" à página Anotações

Pergunte ao Copilot:

"Adicione um botão 'Resumir' à página Anotações. Ao clicar, deve enviar o conteúdo da anotação selecionada para um endpoint local de IA em http://localhost:5272/openai/v1 usando o pacote Azure.AI.OpenAI e exibir o resumo em uma caixa de diálogo de conteúdo. O nome do modelo é phi-4-mini."

Copilot gera a AzureOpenAIClient chamada e o diálogo — a API compatível com OpenAI faz com que o código pareça idêntico a uma chamada de API de nuvem, apenas direcionado 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 usuário vê

Nenhuma conexão com a Internet é necessária. Nenhuma chave de API. O modelo é executado em seu computador – rápido, privado e gratuito.

• Ferramentas de IA Agente para desenvolvimento do Windows
• Visão geral do Foundry Local — executar qualquer modelo localmente no Windows
• Phi Silica — inferência acelerada por NPU em computadores Copilot+
• Visão geral das APIs de IA Windows
• CLI de Desenvolvimento de Aplicativos do Windows (CLI do winapp)
• SDK do Aplicativo Windows documentação