Windows API geliştirmesi için Electron'ı ayarlama

Bu kılavuz, Windows API geliştirme için Elektron geliştirme ortamınızı ayarlama konusunda size yol gösterir. Gerekli araçları yükleyecek, project başlatacak ve Windows SDK'larını yapılandıracaksınız.

Bu kılavuzun sonunda şunları içeren bir Electron uygulamanız olacak:

  • Modern Windows API'lerini (Windows SDK ve Windows App SDK) çağırır
  • Yapay zeka özellikleriyle yerel eklentileri kullanabilir (Phi Silika veya WinML)
  • Korumalı API'leri test için uygulama kimliğiyle çalışır
  • Dağıtım için imzalı MSIX olarak paketlenebilir

Önkoşullar

  • Windows 11 (Phi Silica kullanıyorsanız Copilot+ PC)
  • Node.js - winget install OpenJS.NodeJS --source winget
  • .NET SDK v10 - winget install Microsoft.DotNet.SDK.10 --source winget
  • Visual Studio ile Yerel Masaüstü İş Yükü - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

1. Adım: Yeni bir Elektron uygulaması oluşturma

Electron Forge kullanarak yeni bir Electron uygulamasıyla başlayın. Mevcut bir uygulamanız varsa bu adımı atlayın.

npm create electron-app@latest my-windows-app
cd my-windows-app

Uygulamanın çalıştığını doğrulayın:

npm start

2. Adım: winapp CLI'yi yükleme

npm install --save-dev @microsoft/winappcli

3. Adım: Windows geliştirme için project başlatma

npx winapp init

Sorulduğunda:

  • Paket adı: Varsayılanı kabul etmek için Enter tuşuna basın (my-windows-app)
  • Publisher name: Varsayılanı kabul etmek için Enter tuşuna basın veya adınızı girin
  • Sürüm: 1.0.0.0'ı kabul etmek için Enter'a basın
  • Giriş noktası: Varsayılanı kabul etmek için Enter tuşuna basın (my-windows-app.exe)
  • SDK'ları ayarlama: "Kararlı SDK'lar" seçeneğini belirleyin

Ne yapar winapp init ?

Bu komut, Windows geliştirme için ihtiyacınız olan her şeyi ayarlar:

  1. Klasör, Windows SDK ve Windows App SDK'nın başlıklarını ve kütüphanelerini içeren bir klasör oluşturur
  2. Oluşturur appxmanifest.xml - Uygulama kimliği ve MSIX paketlemesi için gereken uygulama bildirimi
  3. Klasör oluşturur Assets/ - Uygulama simgelerini ve görsel varlıkları içerir
  4. Creates winapp.yaml - SDK sürümlerini ve project yapılandırmasını izler
  5. Windows App SDK çalışma zamanı - Modern API'ler için gerekli çalışma zamanı bileşenleri
  6. Windows'da Geliştirici Modunu etkinleştirir - Hata ayıklama için gereklidir

Uyarı

.winapp/ klasörü, .gitignore'e otomatik olarak eklenir ve kaynak kontrolüne eklenmemelidir.

4. Adım: Derleme işlem hattınıza geri yükleme ekleme

Diğer geliştiriciler projeyi kopyaladığında Windows SDK'larının kullanılabilir olduğundan emin olmak için package.json'inize bir postinstall komut dosyası ekleyin.

{
  "scripts": {
    "postinstall": "winapp restore && winapp node add-electron-debug-identity"
  }
}

Bu betik npm install'den sonra çalışır.

  1. winapp restore - Tüm Windows SDK paketlerini indirir ve geri yükler
  2. winapp node add-electron-debug-identity - Electron uygulamanızı hata ayıklama kimliğiyle kaydeder

Platformlar arası projeler için oluşturun scripts/postinstall.js:

if (process.platform === 'win32') {
  const { execSync } = require('child_process');
  try {
    execSync('npx winapp restore && npx winapp cert generate --if-exists skip && npx winapp node add-electron-debug-identity', {
      stdio: 'inherit'
    });
  } catch (error) {
    console.warn('Warning: Windows-specific setup failed.');
  }
} else {
  console.log('Skipping Windows-specific setup on non-Windows platform.');
}

Ardından güncelleştirin package.json:

{
  "scripts": {
    "postinstall": "node scripts/postinstall.js"
  }
}

5. Adım: Hata ayıklama kimliğini anlama

Komut winapp node add-electron-debug-identity :

  1. appxmanifest.xml öğesini okuyarak uygulama ayrıntılarını ve özelliklerini alır
  2. electron.exe Geçici bir kimlikle kaydınızı gerçekleştirir node_modules
  3. Tam MSIX paketi oluşturmadan kimlik gerektiren API'leri test etmenizi sağlar

appxmanifest.xml veya bağlı varlıkları değiştirdiğinizde bu komutu manuel olarak çalıştırın.

npx winapp node add-electron-debug-identity

Kurulumunuzu test edin:

npm start

Uyarı

Seyrek paketlemesi olan "Electron" uygulamalarıyla ilgili, kilitlenmelere veya boş pencerelere neden olabilecek bilinen bir Windows hatası vardır. Başlangıç betiğinize bir çözüm olarak --no-sandbox ekleyin: "start": "electron-forge start -- --no-sandbox". Bu sorun tam MSIX paketlemesini etkilemez. Kimlik hata ayıklamayı geri almak için npx winapp node clear-electron-debug-identity komutunu çalıştırın.

Sonraki Adımlar

Geliştirme ortamınız ayarlandıysa yerel eklentiler oluşturun ve Windows API'lerini çağırabilirsiniz: