Electron

Punti di forza

Dove si usa

• Editor di codice e strumenti per sviluppatori
• Client desktop per chat e collaborazione
• Applicazioni aziendali interne
• Portare un prodotto web esistente sul desktop

Installazione

1. 1

   Preparare Node.js

   Electron si installa e si avvia tramite Node.js e npm. Installa una versione LTS di Node.js e verifica che vengano mostrate entrambe le versioni.

   node -v && npm -v

   Copia
2. 2

   Aggiungere Electron a un progetto

   Crea un package.json in una nuova cartella e installa electron come dipendenza di sviluppo. Poi imposta il campo main su main.js e aggiungi uno script start che esegua electron .

   mkdir my-electron-app && cd my-electron-app && npm init -y && npm install --save-dev electron

   Copia
3. 3

   Iniziare con Electron Forge

   Per un progetto che includa già pacchettizzazione e pubblicazione, usa il comando di creazione di Electron Forge, lo strumento ufficiale. Nella cartella generata, npm start avvia l'app.

   npm init electron-app@latest my-app

   Copia

Il tuo primo programma

Aprire la prima finestra

main.js è il punto di ingresso del processo principale. Quando l'app è pronta crea una BrowserWindow di 800×600 e carica index.html dalla stessa cartella. Su macOS le app di solito restano attive dopo la chiusura dell'ultima finestra, quindi l'app termina solo sulle altre piattaforme. Metti un semplice index.html accanto a main.js ed esegui npm start.

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

npm init -y
npm install --save-dev electron
npm pkg set main=main.js scripts.start="electron ."
npm start

Strumenti di tutti i giorni

Electron Forge

Strumento ufficiale completo per creare il progetto, avviarlo in sviluppo, pacchettizzarlo, generare installer e pubblicarlo.

electron-builder

Strumento di pacchettizzazione molto diffuso per installer multipiattaforma, firma del codice e aggiornamenti automatici.

Electron Fiddle

Ambiente di prova ufficiale per scrivere piccoli esperimenti ed eseguirli con diverse versioni di Electron.

Playwright

Avvia la tua app Electron per test end-to-end che controllano le finestre e valutano codice nel processo principale.

Documentazione ufficiale e risorse

• UfficialeElectron
• UfficialeElectron Documentation
• UfficialeElectron Forge
• ImparaElectron Tutorial
• ImparaElectron Fiddle
• RiferimentoBrowserWindow API
• RiferimentoElectron Security Checklist
• Communityelectron/electron on GitHub

Linguaggi

• TypeScriptTypeScript aggiunge i tipi statici a JavaScript: individua gli errori prima dell'esecuzione e rende più gestibili i progetti di grandi dimensioni.
• JavaScriptJavaScript è un linguaggio di programmazione dinamico, standardizzato come ECMAScript, che gira in ogni browser web e in ambienti come Node.js.