Menyiapkan Electron untuk pengembangan WINDOWS API

Panduan ini memandu Anda menyiapkan lingkungan pengembangan Electron untuk pengembangan Windows API. Anda akan menginstal alat yang diperlukan, menginisialisasi project, dan mengonfigurasi Windows SDK.

Di akhir panduan ini, Anda akan memiliki aplikasi Electron yang:

  • Memanggil API Windows modern (Windows SDK dan Windows App SDK)
  • Dapat menggunakan addon asli dengan kemampuan AI (Phi Silica atau WinML)
  • Berjalan dengan identitas aplikasi untuk menguji API yang dilindungi
  • Dapat dimas sebagai MSIX yang ditandatangani untuk distribusi

Prasyarat

  • Windows 11 (Copilot+ PC jika menggunakan Phi Silica)
  • Node.js - winget install OpenJS.NodeJS --source winget
  • .NET SDK v10 - winget install Microsoft.DotNet.SDK.10 --source winget
  • Visual Studio dengan Paket Kerja Desktop Native - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

Langkah 1: Buat aplikasi Electron baru

Mulailah dengan aplikasi Electron baru menggunakan Electron Forge. Jika Anda memiliki aplikasi yang sudah ada, lewati langkah ini.

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

Verifikasi bahwa aplikasi berjalan:

npm start

Langkah 2: Instal winapp CLI

npm install --save-dev @microsoft/winappcli

Langkah 3: Menginisialisasi project untuk pengembangan Windows

npx winapp init

Ketika diminta:

  • Nama paket: Tekan Enter untuk menerima default (my-windows-app)
  • Nama penerbit: Tekan Enter untuk menerima pengaturan standar atau masukkan nama Anda
  • Versi: Tekan Enter untuk menerima 1.0.0.0
  • Titik masuk: Tekan Enter untuk menerima default (my-windows-app.exe)
  • SDK Penyiapan: Pilih "SDK Stabil"

Apa yang harus winapp init dilakukan?

Perintah ini menyiapkan semua yang Anda butuhkan untuk pengembangan Windows:

  1. Buat folder .winapp/ yang berisi header dan pustaka dari Windows SDK dan Windows App SDK
  2. Menghasilkan appxmanifest.xml - Manifes aplikasi yang diperlukan untuk identitas aplikasi dan kemasan MSIX
  3. Assets/ Membuat folder - Berisi ikon aplikasi dan aset visual
  4. Buat winapp.yaml - Melacak versi SDK dan konfigurasi project
  5. Installs Windows App SDK runtime - Komponen runtime yang dibutuhkan untuk API modern
  6. Mengaktifkan Mode Pengembang di Windows - Diperlukan untuk debugging

Nota

Folder .winapp/ secara otomatis ditambahkan ke .gitignore dan tidak boleh dimasukkan ke dalam kontrol sumber.

Langkah 4: Tambahkan pemulihan ke alur build Anda

Tambahkan skrip postinstall ke package.json Anda untuk memastikan SDK Windows tersedia saat pengembang lain mengkloning project Anda:

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

Skrip ini berjalan setelah npm install dan:

  1. winapp restore - Mengunduh dan memulihkan semua paket Windows SDK
  2. winapp node add-electron-debug-identity - Mendaftarkan aplikasi Electron Anda dengan identitas debug

Untuk proyek lintas platform, buat 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.');
}

Kemudian perbarui package.json:

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

Langkah 5: Memahami identitas debug

Perintah winapp node add-electron-debug-identity:

  1. Memeriksa appxmanifest.xml Anda untuk mendapatkan detail dan kemampuan aplikasi
  2. Mendaftarkan electron.exe di node_modules Anda dengan identitas sementara
  3. Memungkinkan Anda menguji API yang diperlukan identitas tanpa membuat paket MSIX lengkap

Jalankan perintah ini secara manual setiap kali Anda memodifikasi appxmanifest.xml atau menautkan aset:

npx winapp node add-electron-debug-identity

Uji penyiapan Anda:

npm start

Nota

Ada bug Windows yang diketahui terkait aplikasi Electron dengan pengemasan sparse yang dapat menyebabkan crash atau jendela kosong. Tambahkan --no-sandbox ke skrip awal Anda sebagai solusinya: "start": "electron-forge start -- --no-sandbox". Masalah ini tidak memengaruhi kemasan MSIX penuh. Untuk membatalkan identitas debug, jalankan npx winapp node clear-electron-debug-identity.

Langkah berikutnya

Sekarang setelah lingkungan pengembangan Anda disiapkan, buat addon asli dan panggil WINDOWS API:

  • Last updated on