Öğretici: GitHub Copilot ile Windows uygulaması oluşturma

Bu öğreticide, eksiksiz bir WinUI 3 uygulaması oluşturmak için aracı modunda GitHub Copilot kullanacaksınız: not listesi içeren basit bir notes uygulaması girdi ekleme ve silme özelliği ve ayarlar sayfası. Her adımda tam olarak hangi istemleri kullanacağınızı ve WinUI 3 eklentisinin ve Learn MCP Server'ın Copilot'un doğruluğunu nasıl sağladığını göreceksiniz.

  • Copilot ile WinUI 3 projesi oluşturma
  • Copilot ile XAML kullanıcı arabirimi oluşturma
  • Copilot ile iş mantığı ekleme
  • Learn MCP Sunucusunu kullanarak Windows bildirimi ekleme
  • Uygulamayı winapp CLI ile paketleme

Önkoşullar

Bölüm 1: Projeyi taslağını hazırlama

WinUI projesini oluşturma

Yeni bir WinUI 3 projesi oluşturun: Visual Studio'da File>New>Project seçeneklerini belirleyin, WinUI ile filtreleyin ve WinUI Boş Uygulaması (Paketlenmiş) C# şablonunu seçin. Projeyi NotesApp adlandırın ve açın.

Copilot aracısı modunu açma ve yapı iskelesi kurma

Copilot Chat panelini Visual Studio açın ve agent moduna geçin. Ardından girin:

"NotesApp adlı boş bir WinUI 3 projem var. Aşağıdaki yapıya sahip bir MVVM mimarisi ayarlayın: NavigationView içeren bir MainWindow, üç sayfa (Notlar, Sık Kullanılanlar, Ayarlar), temel ViewModel sınıfı ve NotesViewModel içeren bir ViewModels klasörü ve Id, Title, Content ve CreatedAt özelliklerine sahip bir Not modeline sahip Models klasörü. CommunityToolkit.Mvvm'i kullanın."

Copilot klasör yapısını oluşturur, CommunityToolkit.Mvvm NuGet paket başvurusu ekler, temel sınıfları oluşturur ve NavigationView'u bağlayacaktır. Çıktıyı gözden geçirin; bir sorun varsa Copilot aynı sohbet oturumunda düzeltmesini isteyin.

Tip

Copilot Windows.UI.Xaml yerine Microsoft.UI.Xaml ad alanları oluşturursa, WinUI 3 eklentisinin özel yönergeleri bunu yakalamalıdır. Görürseniz, şunu sor: "Windows.UI.Xaml durumlarını düzeltin — bu bir WinUI 3 projesidir, bu yüzden tüm XAML ad alanları Microsoft.UI.Xaml kullanmalıdır."

Bölüm 2: Kullanıcı arabirimini oluşturma

Notlar sayfasını oluşturma

"Notlar sayfası için XAML oluşturun. Başlık ve kesilmiş içerik önizlemesi gösteren bir ListView, altta yeni not eklemek için bir TextBox ve bir Buton ve her öğenin üzerinde bir Sil butonu bulunmalıdır. NotesViewModel'e bağlayın. WinUI 3 denetimlerini ve Fluent Design boşluklarını kullanın.

Copilot ViewModel'inize bağlı XAML'yi oluşturur. Stil veya düzeni gerektiği gibi ayarlamasını isteyin; örneğin:

"Liste öğelerinin WinUI Galerisi'nin kart örneklerine benzer şekilde ince gölgeli bir kart stili kullanmasını sağlayın."

Ayarlar sayfasını oluşturma

"Koyu/açık tema için bir geçiş tuşu ve onay iletişim kutusuyla 'Tüm notları temizle' düğmesini içeren bir Ayarlar sayfası oluşturun. Onay için ContentDialog kullanın, MessageDialog'ı değil."

WinUI 3 eklentisinin yönergeleri, Copilot'u ContentDialog doğru (doğru WinUI 3 yaklaşımı) yönüne ve kullanım dışı olan MessageDialog yönünden uzaklaştırır.

Bölüm 3: İş mantığı ekleme

Not kalıcılığını gerçekleştirme

Notlar koleksiyonunu ApplicationData.Current.LocalFolder dosyasına serileştirmek ve serileştirmeden çıkarmak için System.Text.Json kullanarak NotesViewModel'de notların kalıcılığını sağlayın. Başlangıç sırasında notları yükleyin ve koleksiyon her değiştiğinde kaydedin."

Copilot yükleme/kaydetme mantığını oluşturur. Hata işleme eklemesini isteyin:

"Dosya işlemleri etrafına try/catch bloğu ekleyin ve hataları Debug çıkışına günlükleyin."

Tema değiştirme işlevini uygulama

"SettingsViewModel'de tema geçişini uygulayın. Anahtarlama değiştiğinde, doğru WinUI 3 yaklaşımını kullanarak uygulamanın ana penceresindeki RequestedTheme'i güncelleyin.

Bölüm 4: Windows bildirimi ekleme

Copilot'a Sor, not kaydedildiğinde tetiklenecek bir bildirim ekle.

"Not başarıyla diskte kalıcı hale geldiğinde not başlığı alt başlık olarak 'Not kaydedildi' ifadesini gösteren bir Windows uygulama bildirimi ekleyin. Windows Uygulama SDK'sı AppNotificationManager'ı kullanın."

Learn MCP Sunucusu bağlı olduğunda, Copilot geçerli AppNotificationBuilder API'sini arayabilir ve doğru bildirim kodu oluşturabilir. Aşağıdakine benzer bir şey üretmelidir:

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

Bölüm 5: Uygulamayı paketleme

Microsoft Store dağıtmaya veya yayımlamaya hazır olduğunuzda uygun bir MSIX paketi oluşturun:

winapp pack --output ./publish

Bu, dışarıdan yüklemeye veya Mağaza gönderimine hazır imzalı bir MSIX paketi oluşturur. Paket bildirimini güncellemek için Copilot'tan yardım isteyin:

"Store gönderimi için görünen adı, açıklamayı ve yayımcıyı ayarlamak için Package.appxmanifest dosyasını nasıl güncelleştireceğini göster."

Özet

Şunu kullanarak eksiksiz bir WinUI 3 not uygulaması oluşturdunuz:

  • yapı iskelesi, kullanıcı arabirimi oluşturma ve iş mantığı için Copilot aracısı modu
  • WinUI 3 eklentisi, Copilot'un modern ve doğru API'lerle uyumlu kalmasını sağlamak için
  • MCP Server'ı Öğren ve Windows Uygulama SDK'sı bildirim API'lerini ara
  • paket kimliği ve MSIX paketlemesi için winapp CLI

İsteğe bağlı: Uygulamanıza cihaz içi yapay zeka ekleme

Notlar uygulaması tamamen işlevseldir; ancak tamamen kullanıcının cihazında çalışan bir yapay zeka özelliği ekleyerek uygulamayı daha ileri taşıyabilirsiniz. Foundry Local bunu basitleştirir: yerel olarak bir dil modeli çalıştırır ve OpenAI uyumlu bir API'yi kullanıma sunar.

Foundry Local'ı yükleme ve model indirme

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

Model başladıktan sonra http://localhost:5272/openai/v1 üzerinde dinler.

NuGet paketini ekleyin

dotnet add package Azure.AI.OpenAI

Notlar sayfasına "Özetle" düğmesi ekleme

Copilot’a Sor:

"Notlar sayfasına bir 'Özetle' düğmesi ekleyin. Tıklandığında, seçilen notun içeriğini Azure.AI.OpenAI paketini kullanarak http://localhost:5272/openai/v1 konumundaki yerel yapay zeka uç noktasına göndermeli ve özetini bir ContentDialog içinde görüntülemelidir. Model adı phi-4-mini."

Copilot AzureOpenAIClient çağrı ve diyalog oluşturur — OpenAI uyumlu API, kodun localhost'a yönlendirildiğinde bulut API çağrısıyla aynı göründüğü anlamına gelir:

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}");

Kullanıcının gördüğü

İnternet bağlantısı gerekmez. API anahtarı yok. Model hızlı, özel ve ücretsiz olarak kendi bilgisayarlarında çalışır.

Tip

Copilot+ bilgisayarları hedefleyen uygulamalar için, doğrudan NPU'yu kullanarak daha da hızlı çıkarım yapmak üzere Foundry Local'ı Phi Silica ile değiştirebilirsiniz. API yüzeyi farklıdır (OpenAI uyumlu yerine Windows AI API'leri), ancak Copilot geçişi yapmanıza yardımcı olabilir.

Modernize et veya bir Windows uygulamasını Copilot ile taşı

  • Last updated on