Introduzione: Aggiunta delle API di Windows all'app Electron

Questa guida illustra come aggiungere funzionalità native di Windows a un'applicazione Electron usando l'interfaccia della riga di comando di sviluppo app di Windows. Si apprenderà come chiamare le API Windows moderne dall'app Electron, testare con l'identità dell'app e creare un pacchetto per la distribuzione.

Cosa costruirai

Al termine di questa guida, si avrà un'app Electron che:

  • ✅ Chiama le moderne API di Windows (Windows SDK e SDK per app di Windows)
  • ✅ Usa un componente aggiuntivo nativo con funzionalità di intelligenza artificiale (Phi Silica o WinML)
  • ✅ Viene eseguito con l'identità dell'app per testare le API protette
  • ✅ Pacchetti come MSIX con firma digitale per la distribuzione

Prerequisiti

Prima di iniziare, assicurarsi di avere:

  • Windows 11 (Copilot+ PC se si utilizza Phi Silica)
  • Node.js - winget install OpenJS.NodeJS --source winget
  • .NET SDK v10 - winget install Microsoft.DotNet.SDK.10 --source winget
  • Visual Studio con il set di strumenti Desktop nativo - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

Processo

La creazione di un'app Electron abilitata per Windows prevede tre fasi principali:

1. Configurazione dell'ambiente di sviluppo

Prima di tutto, si configurerà l'ambiente di sviluppo con gli strumenti e gli SDK necessari. Sono inclusi:

  • Creazione o configurazione di un'app Electron
  • Installazione della CLI di winapp
  • Inizializzazione Windows SDK e asset necessari
  • Configurazione della pipeline di compilazione

Introduzione all'installazione →

2. Creazione di un componente aggiuntivo nativo

Si creerà quindi un componente aggiuntivo nativo che chiama le API Windows. Scegliere una delle guide seguenti:

Opzione A: Creazione di un componente aggiuntivo di notifica C++

Informazioni su come creare un componente aggiuntivo C++ che chiama le API di notifica SDK per app di Windows. Questo è un ottimo punto di partenza per comprendere i componenti aggiuntivi nativi prima di approfondire scenari più complessi.

Creare un componente aggiuntivo di notifica C++ →

Opzione B: Creazione di un componente aggiuntivo Phi Silica

Informazioni su come creare un componente aggiuntivo C# che usa il modello di intelligenza artificiale Phi Silica per riepilogare il testo sul dispositivo. Phi Silica è un piccolo modello linguistico che viene eseguito localmente sui dispositivi Windows 11 con unità di elaborazione neurale.

Creare un Add-on Phi Silica →

Opzione C: Creazione di un componente aggiuntivo WinML

Informazioni su come creare un componente aggiuntivo C# che usa Windows Machine Learning (WinML) per eseguire modelli ONNX personalizzati per la classificazione delle immagini, il rilevamento degli oggetti e altro ancora.

Creare un componente aggiuntivo WinML →

3. Creazione di pacchetti per la distribuzione

Infine, impacchetterai la tua app come MSIX per distribuirla. Sono inclusi:

  • Preparazione dell'app per il rilascio
  • Creazione e firma di un pacchetto MSIX
  • Test del pacchetto installato
  • Informazioni sulle opzioni di distribuzione

Pacchettizza la tua app →

Navigazione rapida

Fase Guida Cosa Imparerai
1️⃣ Setup Installare gli strumenti, inizializzare gli SDK, configurare la pipeline di compilazione
2️⃣ Componente aggiuntivo notifiche C++ Creare un componente aggiuntivo C++, richiamare le API di notifica, testare con l'identità di debug
2️⃣ Phi Silica Addon Creare un componente aggiuntivo C#, chiamare le API di intelligenza artificiale, testare con l'identità di debug
2️⃣ Componente aggiuntivo WinML Creare un componente aggiuntivo C#, chiamare le API WinML, eseguire modelli ONNX, integrare ML
3️⃣ Imballaggio Creare un'app di produzione, creare MSIX, distribuire

Risorse aggiuntive

Ottenere informazioni

  • Last updated on