Tutorial: Membuat aplikasi Windows dengan GitHub Copilot

Dalam tutorial ini, Anda menggunakan GitHub Copilot dalam mode agen untuk membangun aplikasi WinUI 3 lengkap — aplikasi notes sederhana dengan daftar catatan, kemampuan untuk menambahkan dan menghapus entri, dan halaman pengaturan. Anda akan melihat dengan tepat prompt mana yang digunakan di setiap langkah, serta bagaimana plugin WinUI 3 dan Learn MCP Server menjaga keakuratan Copilot secara keseluruhan.

Bangun kerangka proyek WinUI 3 dengan Copilot
Membuat UI XAML dengan Copilot
Menambahkan logika bisnis dengan Copilot
Menambahkan pemberitahuan Windows menggunakan Learn MCP Server
Mengemas aplikasi dengan winapp CLI

Prasyarat

GitHub Copilot disiapkan dengan plugin WinUI 3 dan Learn MCP Server — lihat Siapkan GitHub Copilot untuk pengembangan Windows
Visual Studio 2026 dengan tugas pengembangan aplikasi WinUI
winapp CLI terinstal (winget install Microsoft.winappcli)

Bagian 1: Membangun Kerangka Proyek

Membuat proyek WinUI

Buat project WinUI 3 baru: di Visual Studio, pilih File>Baru>Project, filter menurut WinUI, dan pilih templat Aplikasi Kosong WinUI (Dikemas) C#. Beri nama proyek NotesApp dan buka.

Buka mode agen Copilot dan siapkan kerangka struktur

Buka panel Copilot Chat di Visual Studio dan beralih ke mode agent. Kemudian masukkan:

"Saya memiliki proyek WinUI 3 kosong baru yang disebut NotesApp. Siapkan arsitektur MVVM dengan struktur berikut: MainWindow dengan NavigationView, tiga halaman (Catatan, Favorit, Pengaturan), folder ViewModels dengan kelas ViewModel dasar dan NotesViewModel, dan folder Model dengan model Catatan yang memiliki properti Id, Judul, Konten, dan CreatedAt. Gunakan CommunityToolkit.Mvvm."

Copilot akan membuat struktur folder, menambahkan referensi paket CommunityToolkit.Mvvm NuGet, membuat kelas dasar, dan menyambungkan NavigationView. Tinjau output — jika ada yang salah, minta Copilot untuk memperbaikinya dalam sesi obrolan yang sama.

Petunjuk / Saran

Jika Copilot menghasilkan namespace Windows.UI.Xaml alih-alih Microsoft.UI.Xaml, instruksi kustom plugin WinUI 3 harus menangkap ini. Jika Anda melihatnya, perintah: "Perbaiki semua instans Windows.UI.Xaml — ini adalah proyek WinUI 3, jadi semua namespace XAML harus menggunakan Microsoft.UI.Xaml."

Bagian 2: Membangun UI

Buat halaman Catatan

Buat XAML untuk Halaman Catatan. Ini harus memiliki ListView yang menampilkan catatan dengan Judul dan pratinjau Konten terpotong, Kotak Teks dan Tombol di bagian bawah untuk menambahkan catatan baru, dan tombol Hapus pada setiap item. Hubungkan dengan NotesViewModel. Gunakan kontrol-kontrol dari WinUI 3 dan pengaturan spasi Fluent Design.

Copilot menghasilkan XAML, terikat ke ViewModel Anda. Mintalah untuk menyesuaikan gaya atau tata letak sesuai kebutuhan — misalnya:

"Buat item daftar menggunakan gaya kartu dengan bayangan halus, mirip dengan contoh kartu dari Galeri WinUI."

Buat halaman Pengaturan

"Buat halaman Pengaturan dengan tombol untuk tema gelap/terang dan tombol 'Hapus semua catatan' dengan dialog konfirmasi. Gunakan ContentDialog untuk konfirmasi — bukan MessageDialog."

Instruksi plugin WinUI 3 mengarahkan Copilot menuju ContentDialog (pendekatan WinUI 3 yang benar) dan menjauh dari MessageDialog yang tidak digunakan lagi.

Bagian 3: Menambahkan logika bisnis

Menerapkan persistensi catatan

"Terapkan persistensi catatan di NotesViewModel menggunakan System.Text.Json untuk menserialisasikan dan mendeserialisasi koleksi catatan ke file di ApplicationData.Current.LocalFolder. Muat catatan saat startup dan simpan setiap kali koleksi berubah."

Copilot menghasilkan logika muat/simpan. Mintalah untuk menambahkan penanganan kesalahan:

"Tambahkan blok try/catch pada operasi file dan catat kesalahan ke keluaran Debug."

Menerapkan pengalihan tema

"Terapkan tombol tema di SettingsViewModel. Ketika pengalih berubah, perbarui RequestedTheme pada jendela utama aplikasi menggunakan pendekatan WinUI 3 yang benar."

Bagian 4: Menambahkan pemberitahuan Windows

Minta Copilot untuk menambahkan pemberitahuan yang dipicu saat catatan disimpan.

"Tambahkan pemberitahuan aplikasi Windows yang menampilkan 'Catatan disimpan' dengan judul catatan sebagai subtitel saat catatan berhasil dipertahankan ke disk. Gunakan SDK Aplikasi Windows AppNotificationManager.

Dengan Learn MCP Server tersambung, Copilot dapat mencari API AppNotificationBuilder saat ini dan menghasilkan kode pemberitahuan yang benar. Ini harus menghasilkan sesuatu seperti:

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

Bagian 5: Mengemas aplikasi

Saat Anda siap mendistribusikan atau menerbitkan ke Microsoft Store, buat paket MSIX yang tepat:

winapp pack --output ./publish

Ini menghasilkan paket MSIX yang ditandatangani yang siap untuk sideloading atau pengunggahan ke Store. Minta Copilot untuk bantuan memperbarui manifes paket.

"Tunjukkan kepada saya cara memperbarui Package.appxmanifest untuk mengatur nama tampilan, deskripsi, dan penerbit untuk pengiriman Store."

RINGKASAN

Anda telah membuat aplikasi catatan WinUI 3 lengkap menggunakan:

mode agen Copilot untuk perancah, pembuatan UI, dan logika bisnis
Plugin WinUI 3 untuk menjaga Copilot tetap menggunakan API modern dan benar secara keseluruhan
Learn MCP Server untuk menelusuri API notifikasi SDK Aplikasi Windows
winapp CLI untuk identitas paket dan kemasan MSIX

Opsional: Menambahkan AI di perangkat ke aplikasi Anda

Aplikasi catatan berfungsi penuh — tetapi Anda dapat melakukannya lebih lanjut dengan menambahkan fitur AI yang berjalan sepenuhnya di perangkat pengguna. Foundry Local membuat ini mudah: menjalankan model bahasa secara lokal dan mengekspos API yang kompatibel dengan OpenAI.

Menginstal Foundry Local dan mengunduh model

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

Setelah model dimulai, akan mendengarkan di http://localhost:5272/openai/v1.

Menambahkan paket NuGet

dotnet add package Azure.AI.OpenAI

Menambahkan tombol "Ringkas" ke halaman Catatan

Tanya Copilot:

"Tambahkan tombol 'Ringkas' ke halaman Catatan. Saat diklik, konten catatan yang dipilih harus dikirim ke titik akhir AI lokal di http://localhost:5272/openai/v1 menggunakan paket Azure.AI.OpenAI, dan ringkasannya ditampilkan dalam ContentDialog. Nama model adalah phi-4-mini."

Copilot menghasilkan panggilan dan dialog AzureOpenAIClient — API yang kompatibel dengan OpenAI berarti kode terlihat identik dengan panggilan API cloud, hanya ditujukan ke 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}");

Apa yang dilihat pengguna

Tidak diperlukan koneksi internet. Tidak ada kunci API. Model ini berjalan pada PC mereka — dengan cepat, secara pribadi, dan gratis.