Geliştirme Ortamını 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.

Önkoşullar

Başlamadan önce aşağıdakilere sahip olduğunuzdan emin olun:

  • Windows 11
  • 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

Mükemmel alet ve paketleme desteği sağlayan Electron Forge kullanarak yeni bir Electron uygulamasıyla başlayacağız. Mevcut bir uygulamadan başlıyorsanız bu adımı atlayabilirsiniz.

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

Electron Forge tarafından istendiğinde:

  • Paketleyici: Yok'u seçin (bu önerilir — yerel eklentiler ek yapılandırmaya gerek duymadan çalışır)
  • Dil: JavaScript'i seçin (bu kılavuzda JS kullanılır; TypeScript de çalışır)
  • Elektron sürümü: En son sürümü seçin
  • Git'i başlatma: Tercihiniz

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

npm start

Varsayılan Electron Forge penceresini görmeniz gerekiyor. Kapatın ve Windows özellikleri ekleyelim!

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

Electron iş akışı, winget'ten yüklenen tek başına CLI yerine npm paketini (@microsoft/winappcli) gerektirir. npm paketi, yerel CLI'de bulunmayan Node.js özgü yardımcıları (gibi add-electron-debug-identity ve create-addon) içerir. Winget'ten zaten winapp yüklüyse bu sorun değil; npm paketi, projeye özgü Node.jsaraçları bir proje bağımlılığı olarak ekler ve sistem yüklemenizle çakışmaz.

npm install --save-dev @microsoft/winappcli

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

Komut winapp init , ihtiyacınız olan her şeyi tek seferde ayarlar: uygulama bildirimi, varlıklar ve SDK'lar.

Aşağıdaki komutu çalıştırın ve istemleri izleyin:

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
  • JS/TypeScript bağlamaları ekleme: Windows Uygulama SDK'sı API'leri için JS bağlamaları oluşturmak üzere varsayılan (Evet) kabul etmek için Enter tuşuna basın

Uyarı

--use-defaults ve etkileşimli olmayan başlatma, --add-js-bindings iletmediğiniz sürece JS bağlamalarını atlar. İstem geldiğinde katılmayı seçmek için etkileşimli modda npx winapp init . komutunu çalıştırın veya otomasyon için npx winapp init . --use-defaults --add-js-bindings kullanın.

Ne yapar winapp init ?

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

  1. Aşağıdakini içeren bir klasör oluşturur.winapp/:

    • Windows SDK başlıklar ve kitaplıklar
    • Windows Uygulama SDK'sı'den başlıklar ve kütüphaneler
    • Gerekli ikili dosyaları içeren NuGet paketleri

  2. Oluşturur Package.appxmanifest - Uygulama kimliği ve MSIX paketlemesi için gereken uygulama bildirimi

  3. Klasör oluşturur Assets/ - Uygulamanızın uygulama simgelerini ve görsel varlıklarını içerir

  4. Creates winapp.yaml - SDK sürümlerini ve project yapılandırmasını izler

  5. Windows Uygulama SDK'sı çalışma zamanı - Modern API'ler için gerekli çalışma zamanı bileşenleri

  6. Windows'ta Geliştirici Modunu Etkinleştirir - Uygulamamızda hata ayıklama işlemleri için gereklidir.

  7. JS bağlamaları oluşturur - Kabul ettiğinizde:

    • winapp.jsBindings bloğunu package.json konumuna yazar.
    • @microsoft/dynwinrt-codegen’ı devDependencies’e ekler — bağlamaları üreten derleme zamanı aracı (ilk çalıştırmada kayıt defterinin latest sürümüne sabitlenir, ardından olduğu gibi bırakılır)
    • @microsoft/dynwinrt öğesini dependencies öğesine ekler — oluşturulan bağlayıcıların çalışma zamanında içe aktardığı çalışma zamanı (sürüm, ABI uyumluluğunu garanti etmek için yüklü kod oluşturucu tarafından seçilir)
    • Windows Uygulama SDK'sı API'leri için JS bağlamaları oluşturur.winapp/bindings/

Uyarı

Klasör .winapp/ otomatik olarak .gitignore içine eklenir ve kaynak kontrol sistemine eklenmemelidir.

Görüntü adı, yayımcı ve özellikler gibi unsurları daha fazla özelleştirmek için Package.appxmanifest açabilirsiniz.

İpucu

Windows SDK'ları hakkında:

  • Windows SDK - Win32/masaüstü uygulamaları oluşturmanıza olanak tanıyan bir geliştirme platformu. İşletim sisteminin belirli sürümleriyle birleştirilmiş Windows API'ler etrafında tasarlanmıştır. Dosya sistemi, ağ ve sistem hizmetleri gibi temel Win32 API'lerine erişmek için bunu kullanın.

  • Windows Uygulama SDK'sı - Windows sürümlerde (Windows 10 1809'a kadar) yüklenebilen modern masaüstü uygulamaları oluşturmanıza olanak tanıyan yeni bir geliştirme platformu. Zengin Windows işletim sistemi API'leri kataloğunu işletim sisteminden bağımsız şekilde kullanışlı bir soyutlama sağlar. Windows Uygulama SDK'sı WinUI 3 içerir ve Windows işletim sistemi sürümlerinden bağımsız olarak düzenli güncelleştirmeler alan yapay zeka özellikleri (Phi Silica), bildirimler, pencere yönetimi ve daha fazlası gibi modern özelliklere erişim sağlar.

Daha fazla bilgi edinin: Windows Uygulama SDK'sı ile Windows SDK arasındaki fark nedir?

Adım 4: Derleme Süreç Hattınıza 'Geri Yükle' Ekleme

Diğer geliştiriciler projenizi klonladığında veya CI/CD işlem hatlarında Windows SDK'ların kullanılabilir olmasını sağlamak için, postinstall içinde bir package.json betiği ekleyin.

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

Bu betik, npm install sonrasında otomatik olarak çalıştırılır ve iki şey yapar:

  1. winapp restore - tüm Windows SDK paketlerini indirir ve .winapp/ klasörüne geri yükler
  2. winapp node add-electron-debug-identity - Electron uygulamanızı hata ayıklama kimliğiyle kaydeder (sonraki adımlarda daha fazla bilgi)

Important

Electron 42 ve sonrası: Electron 42’den itibaren ikili dosya, npm install sırasında artık otomatik olarak indirilmiyor (sürüm notları). add-electron-debug-identity çalıştırılmadan önce bunu manuel olarak indirmeniz gerekir:

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

--no-install bayrağı, npx yalnızca yüklü Electron paketinizle birlikte gelen install-electron bin dosyasını çalıştırmasını sağlar ve registry'den hiçbir şeyi sessizce indirmez. Electron < 42'ye sabitlerseniz, bu adımı atlarsınız; ikili dosya zaten sonrasında npm installyer alır.

Şimdi npm install çalıştırarak yükleme sonrası betiğini tetikleyin ve Windows ortamını yapılandırın:

npm install

Uyarı

  • Last updated on