Memulai: Menambahkan API Windows ke Aplikasi Electron Anda

Panduan ini memandu Anda menambahkan kemampuan asli Windows ke aplikasi Electron menggunakan Windows App Development CLI. Anda akan mempelajari cara memanggil API Windows modern dari aplikasi Electron Anda, menguji dengan identitas aplikasi, dan paket untuk distribusi.

Apa yang akan Anda Bangun

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

  • ✅ Memanggil API Windows modern (Windows SDK dan SDK Aplikasi Windows)
  • ✅Menggunakan kemampuan AI Windows dari JavaScript (Phi Silica atau WinML)
  • ✅ Secara opsional menggunakan addon asli saat API membutuhkan kode asli
  • ✅ Berjalan dengan identitas aplikasi untuk menguji API yang dilindungi
  • ✅ Paket sebagai MSIX yang ditandatangani untuk distribusi

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

  • 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"

Proses

Ikuti panduan ini untuk menyiapkan aplikasi Electron Anda, memanggil API Windows modern, dan mengemasnya untuk distribusi:

1. Menyiapkan Lingkungan Pengembangan

Pertama, Anda akan menyiapkan lingkungan pengembangan dengan alat dan SDK yang diperlukan. Hal ini mencakup:

  • Membuat atau mengonfigurasi aplikasi Electron
  • Menginstal winapp CLI
  • Menginisialisasi SDK Windows dan aset yang diperlukan
  • Menyiapkan alur build Anda

Mulai penyetelan →

2. Memanggil API Windows dari JavaScript

Jika Anda mengaktifkan binding JS selama penyiapan, .winapp/bindings/ berisi kelas pembungkus .js yang dihasilkan dan deklarasi .d.ts yang sesuai untuk API SDK Aplikasi Windows. Impor #winapp/bindings untuk mengakses semua kelas yang diekspor. Impor paket #winapp/bindings membutuhkan @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8; proyek lama dapat tetap menggunakan jalur yang relatif terhadap file yang mengimpor (misalnya, require('../.winapp/bindings/index.js') dari src/index.js) atau memutakhirkan dengan npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings.

3. Opsional: Membuat Addon Asli

Lewati langkah ini jika pengikatan JS yang dihasilkan mencakup API SDK Aplikasi Windows yang Anda butuhkan. Buat addon asli hanya saat Anda memerlukan batas asli, seperti Win32, COM murni, pustaka C/C++ asli, atau rakitan .NET terkelola.

Opsi A: Membuat Addon Pemberitahuan C++

Pelajari cara membuat addon C++ yang memanggil API pemberitahuan SDK Aplikasi Windows. Ini adalah titik awal yang bagus untuk memahami addon asli sebelum menyelami skenario yang lebih kompleks.

Membuat Tambahan Pemberitahuan C++

Opsi B: Membuat Addon Phi Silica

Pelajari cara membuat addon C# yang menggunakan model Phi Silica AI untuk meringkas teks di perangkat. Phi Silica adalah model bahasa kecil yang berjalan secara lokal di perangkat Windows 11 dengan NPU.

Membuat → Addon Phi Silica

Opsi C: Membuat Addon WinML

Pelajari cara membuat addon C# yang menggunakan Windows Pembelajaran Mesin (WinML) untuk menjalankan model ONNX kustom untuk klasifikasi gambar, deteksi objek, dan banyak lagi.

Membuat → WinML Addon

4. Kemasan untuk Distribusi

Terakhir, Anda akan mengemas aplikasi sebagai MSIX untuk distribusi. Hal ini mencakup:

  • Membangun aplikasi Anda untuk produksi
  • Membuat dan menandatangani paket MSIX
  • Menguji paket yang diinstal
  • Memahami opsi distribusi

Kemas Aplikasi Anda →

Navigasi Cepat

Fase Panduan Apa yang akan Anda Pelajari
1️⃣ Siapkan Menginstal alat, menginisialisasi SDK, mengonfigurasi alur build
2️⃣ Binding JS untuk Notifikasi Menampilkan pemberitahuan SDK Aplikasi Windows langsung dari JavaScript
2️⃣ pengikatan JS API Windows Panggil API SDK Aplikasi Windows, lalu perluas pengikatan ke API SDK Windows
2️⃣ Pengikatan Phi Silica JS Memanggil model bahasa lokal langsung dari JavaScript
2️⃣ Pengikatan WinML JS Daftarkan penyedia eksekusi WinML dan jalankan ONNX Runtime dari JavaScript
3️⃣ Addon Pemberitahuan C++ Buat addon C++, panggil API pemberitahuan, uji menggunakan identitas debug
3️⃣ Phi Silica Addon Membuat alternatif addon C# untuk API AI
3️⃣ WinML Addon Membuat alternatif addon C# untuk WinML
4️⃣ Kemasan Membangun aplikasi produksi, membuat MSIX, mendistribusikan

Sumber Daya Tambahan

Mendapatkan Bantuan

  • Last updated on