Condividi tramite

Esercitazione: Creare un'app di Windows con GitHub Copilot

In questa esercitazione si usa GitHub Copilot in modalità agente per creare un'app WinUI 3 completa, una semplice app note con un elenco di note, la possibilità di aggiungere ed eliminare voci e una pagina delle impostazioni. Vedrai esattamente quali prompt usare in ogni passaggio e come il plug-in WinUI 3 e il server Learn MCP mantengono Copilot accurato.

  • Eseguire lo scaffolding di un progetto WinUI 3 con Copilot
  • Generare un'interfaccia utente XAML con Copilot
  • Aggiungere logica di business con Copilot
  • Aggiungere una notifica di Windows usando il server MCP Learn
  • Creare un pacchetto dell'app con l'interfaccia della riga di comando winapp

Prerequisiti

Parte 1: Creare l'impalcatura del progetto

Creare il progetto WinUI

Creare un nuovo progetto WinUI 3: in Visual Studio selezionare File>Nuovo>progetto, filtrare in base a WinUI e scegliere il modello C# App vuota WinUI (in pacchetto). Denominare il progetto NotesApp e aprirlo.

Aprire la modalità agente di Copilot e preparare la struttura

Aprire il pannello Chat di Copilot in Visual Studio e passare alla modalità agente. Immettere quindi:

"Ho un nuovo progetto WinUI 3 vuoto denominato NotesApp. Configurare un'architettura MVVM con la struttura seguente: MainWindow con navigationView, tre pagine (Note, Preferiti, Impostazioni), una cartella ViewModels con una classe ViewModel di base e una cartella NotesViewModel e una cartella Models con un modello Note con proprietà Id, Title, Content e CreatedAt. Usare CommunityToolkit.Mvvm."

Copilot creerà la struttura di cartelle, aggiungerà il riferimento al pacchetto NuGet CommunityToolkit.Mvvm, genererà le classi di base e collegarà NavigationView. Esaminare l'output. In caso di problemi, chiedere a Copilot di correggerlo nella stessa sessione di chat.

Suggerimento

Qualora Copilot generi Windows.UI.Xaml namespace invece di Microsoft.UI.Xaml, le istruzioni personalizzate del plug-in WinUI 3 dovrebbero rilevarlo. Se viene visualizzato, prompt: "Correggi tutte le istanze di Windows.UI.Xaml: si tratta di un progetto WinUI 3, quindi tutti gli spazi dei nomi XAML devono usare Microsoft.UI.Xaml."

Parte 2: Compilare l'interfaccia utente

Generare la pagina Note

"Generare il codice XAML per la pagina Note. Dovrebbe essere presente un controllo ListView che mostra le note con titolo e un'anteprima del contenuto troncata, un controllo TextBox e un pulsante nella parte inferiore per aggiungere una nuova nota e un pulsante Elimina per ogni elemento. Associarlo a NotesViewModel. Usare i controlli WinUI 3 e la spaziatura Fluent Design."

Copilot genera il codice XAML associato a ViewModel. Chiedere di regolare lo stile o il layout in base alle esigenze, ad esempio:

"Fare in modo che gli elementi dell'elenco usino uno stile di scheda con un'ombreggiatura sottile, simile agli esempi di schede di WinUI Gallery".

Generare la pagina Impostazioni

"Genera una pagina Impostazioni con un interruttore per il tema scuro/chiaro e un pulsante "Cancella tutte le note" con una finestra di dialogo di conferma. Usare ContentDialog per la conferma, non MessageDialog."

Le istruzioni del plug-in WinUI 3 guidano Copilot verso ContentDialog (l'approccio winUI 3 corretto) e lontano dalla deprecata MessageDialog.

Parte 3: Aggiungere la logica di business

Implementare la persistenza delle note

"Implementare la persistenza delle note in NotesViewModel usando System.Text.Json per serializzare e deserializzare la raccolta note in un file in ApplicationData.Current.LocalFolder. Caricare le note all'avvio e salvare ogni volta che la raccolta viene modificata."

Copilot genera la logica di caricamento/salvataggio. Chiedere di aggiungere la gestione degli errori:

"Aggiungere try/catch attorno alle operazioni sui file e registrare gli errori nell'output di Debug."

Implementare il cambio di tema

Implementare l'alternatore del tema in SettingsViewModel. Quando l'interruttore cambia, aggiorna RequestedTheme nella finestra principale dell'applicazione utilizzando l'approccio corretto di WinUI 3.

Parte 4: Aggiungere una notifica di Windows

L'identità del pacchetto è necessaria per le notifiche di Windows. Prima di tutto, configurarlo con l'interfaccia della riga di comando di winapp:

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

Chiedere ora a Copilot di aggiungere una notifica che viene attivata quando viene salvata una nota:

"Aggiungi una notifica dell'app di Windows che mostra 'Note saved' con il titolo della nota come sottotitolo quando una nota viene salvata correttamente su disco. Usare AppNotificationManager di Windows App SDK."

Con il server MCP Learn connesso, Copilot può cercare l'API corrente AppNotificationBuilder e generare codice di notifica corretto. Dovrebbe produrre un risultato simile al seguente:

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

Parte 5: Creare un pacchetto dell'app

Quando si è pronti per distribuire o pubblicare in Microsoft Store, compilare un pacchetto MSIX appropriato:

winapp pack --output ./publish

Viene generato un pacchetto MSIX firmato, pronto per il caricamento locale o per l'invio nello Store. Chiedere a Copilot di assistenza per aggiornare il manifesto del pacchetto:

"Mostra come aggiornare Package.appxmanifest per impostare il nome visualizzato, la descrizione e l'editore per l'invio nello Store".

Sommario

Hai creato un'app per note completa con WinUI 3 utilizzando:

  • Modalità agente Copilot per lo scaffolding, la generazione dell'interfaccia utente e la logica aziendale
  • Plug-in WinUI 3 per garantire che Copilot utilizzi API moderne e corrette per tutta la durata
  • Scopri MCP Server per cercare le API di notifica di Windows App SDK
  • CLI di winapp per l'identità del pacchetto e il packaging MSIX

Facoltativo: aggiungere l'intelligenza artificiale sul dispositivo all'app

L'app di note è completamente funzionale, ma è possibile migliorarla ulteriormente con una funzionalità di intelligenza artificiale eseguita interamente sul dispositivo dell'utente. Foundry Local semplifica questa operazione: esegue un modello linguistico in locale ed espone un'API compatibile con OpenAI.

Installare Foundry Local e scaricare un modello

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

Dopo l'avvio del modello, inizia ad ascoltare su http://localhost:5272/openai/v1.

Aggiungere il pacchetto NuGet 

dotnet add package Azure.AI.OpenAI

Aggiungere il pulsante "Riepiloga" alla pagina delle Note

Chiedi a Copilot:

"Aggiungere un pulsante "Riepilogo" alla pagina Note. Quando si fa clic, deve inviare il contenuto della nota selezionata a un endpoint di intelligenza artificiale locale all'indirizzo http://localhost:5272/openai/v1 usando il pacchetto Azure.AI.OpenAI e visualizzare il riepilogo in un oggetto ContentDialog. Il nome del modello è phi-4-mini".

Copilot genera la chiamata e il AzureOpenAIClient dialogo: l'API compatibile con OpenAI indica che il codice è identico a una chiamata API cloud, indirizzato 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}");

Oggetti visibili all'utente

Nessuna connessione Internet necessaria. Nessuna chiave API. Il modello viene eseguito sul loro PC — veloce, privato e gratuito.

Suggerimento

Per le app destinate a PC Copilot+ è possibile scambiare Foundry Local per Phi Silica per usare direttamente la NPU per un'inferenza ancora più veloce. La superficie dell'API è diversa (API windows per intelligenza artificiale anziché compatibile con OpenAI), ma Copilot può essere utile per effettuare il passaggio.

Modernizzare o convertire un'app di Windows con Copilot

  • Last updated on