NICE TRY

LABS

Torna al Blog

Guida Electron framework – Template avvio veloce app

Bevenuti alla guida per Electron, un potente framework open-source che ti consente di creare applicazioni desktop multipiattaforma con tecnologie web come JavaScript, HTML e CSS. Ti guideremo passo dopo passo nell’installazione e configurazione di Electron, dalla creazione del tuo primo progetto alla gestione avanzata dei processi e della comunicazione tra di essi. Con esempi pratici e un template di avvio veloce, sarai pronto a sviluppare la tua app in pochissimo tempo.

Scrivere una guida Electron è essenziale poiché questo framework sta diventando uno strumento sempre più diffuso per creare applicazioni desktop multipiattaforma utilizzando tecnologie web come JavaScript, HTML e CSS. Una guida Electron ben realizzata fornisce agli sviluppatori un riferimento chiaro per affrontare le sfide del framework, accelerando il processo di apprendimento e sviluppo. Inoltre, una guida Electron aiuta a sfruttare al meglio le funzionalità offerte, riducendo gli errori e migliorando l’efficienza del lavoro.

1. Introduzione a Electron

Cos’è Electron?

Electron è un framework open-source sviluppato da GitHub che consente di creare applicazioni desktop multipiattaforma utilizzando tecnologie web come JavaScript, HTML e CSS. Basato su Node.js e Chromium, Electron combina la flessibilità e la potenza del backend di Node.js con le capacità di rendering del frontend di Chromium. Questo permette agli sviluppatori di web app di trasferire le loro competenze e conoscenze nel mondo delle applicazioni desktop senza dover imparare nuovi linguaggi o strumenti.

Perché usare Electron per sviluppare applicazioni desktop?

1.1. Multipiattaforma

Una delle caratteristiche principali di Electron è la sua capacità di creare applicazioni che funzionano su Windows, macOS e Linux con una base di codice unica. Questo riduce significativamente il tempo e le risorse necessarie per sviluppare e mantenere versioni separate per ciascun sistema operativo.

1.2. Utilizzo di Tecnologie Web

Con Electron, gli sviluppatori possono utilizzare le tecnologie web che già conoscono e amano. JavaScript, HTML e CSS sono i mattoni fondamentali di un’applicazione Electron, permettendo a chi ha esperienza nello sviluppo web di adattarsi rapidamente e iniziare a costruire applicazioni desktop.

1.3. Integrazione con Node.js

Electron permette di sfruttare tutta la potenza di Node.js, consentendo l’accesso a un’ampia gamma di moduli e pacchetti attraverso npm. Questo significa che gli sviluppatori possono utilizzare librerie e strumenti esistenti per aggiungere funzionalità avanzate alle loro applicazioni desktop, come la gestione di file, la connessione a database, la comunicazione di rete e molto altro.

1.4. Ampia Comunità e Supporto

Essendo un progetto open-source molto popolare, Electron gode di un’ampia comunità di sviluppatori che contribuiscono costantemente al miglioramento del framework. Questo si traduce in una vasta gamma di risorse disponibili, tra cui documentazione dettagliata, tutorial, esempi di codice e forum di supporto, rendendo più facile trovare soluzioni ai problemi e ottenere consigli su best practice.

1.5. Aggiornamenti Continui

GitHub e la comunità di sviluppatori mantengono Electron aggiornato con le ultime versioni di Node.js e Chromium, assicurando che le applicazioni costruite con Electron beneficino delle più recenti funzionalità e miglioramenti in termini di prestazioni e sicurezza.

In sintesi, Electron offre una piattaforma robusta e versatile per lo sviluppo di applicazioni desktop moderne, sfruttando le competenze esistenti nello sviluppo web e offrendo una serie di vantaggi che lo rendono una scelta eccellente per molti progetti.

 

2. Installazione di Electron

Prerequisiti

Prima di iniziare con Electron, è necessario assicurarsi di avere i seguenti strumenti installati sul proprio sistema:

  • Node.js: Electron è basato su Node.js, quindi è necessario installare Node.js sul proprio computer. È consigliabile installare l’ultima versione stabile di Node.js.
  • npm: npm (Node Package Manager) viene generalmente installato insieme a Node.js e viene utilizzato per gestire i pacchetti necessari per lo sviluppo con Electron.

Installazione di Node.js e npm

Per installare Node.js e npm, segui questi passaggi:

  1. Vai al sito ufficiale di Node.js: https://nodejs.org
  2. Scarica il programma di installazione per il tuo sistema operativo (Windows, macOS o Linux).
  3. Esegui il programma di installazione e segui le istruzioni sullo schermo.
  4. Per verificare l’installazione, apri un terminale e digita i seguenti comandi:
node -v

Dovrebbe apparire la versione installata di Node.js. Successivamente, digita:

npm -v

Questo comando dovrebbe restituire la versione di npm installata.

Installazione di Electron

Ora che Node.js e npm sono installati, puoi procedere con l’installazione di Electron. Esistono due modi principali per installare Electron: globalmente e localmente.

Installazione Globale

Installare Electron globalmente ti consente di utilizzare il comando electron da qualsiasi punto del tuo sistema. Tuttavia, questa pratica è meno comune rispetto all’installazione locale per specifici progetti.

Per installare Electron globalmente, esegui il seguente comando:

npm install -g electron

Installazione Locale

Installare Electron localmente nel tuo progetto è la pratica consigliata, poiché consente di mantenere le dipendenze del progetto isolate. Per farlo, segui questi passaggi:

  1. Crea una nuova directory per il tuo progetto e spostati al suo interno:
mkdir my-electron-app
cd my-electron-app
  1. Inizializza un nuovo progetto Node.js (questo creerà un file package.json):
npm init -y
  1. Installa Electron come dipendenza di sviluppo:
npm install --save-dev electron

Verifica dell’Installazione

Per verificare che Electron sia stato installato correttamente, crea un file index.js nella directory del tuo progetto con il seguente contenuto:

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

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

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

Crea anche un file index.html con il seguente contenuto:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Electron</title>
  </head>
  <body>
    <h1>Hello, Electron!</h1>
  </body>
</html>

Ora, esegui l’applicazione con il seguente comando:

npx electron .

Dovrebbe aprirsi una finestra con il messaggio “Hello, Electron!”. Questo conferma che Electron è stato installato correttamente e che è pronto per essere utilizzato nel tuo progetto.

 

3. Concetti di Base di Electron

Struttura di un Progetto Electron

Un progetto Electron tipico ha una struttura ben definita. Ecco un esempio di struttura di base di un progetto Electron:

my-electron-app/
├── package.json
├── main.js
└── index.html

Di seguito una breve descrizione di ciascun file:

  • package.json: Contiene le informazioni del progetto e le dipendenze necessarie.
  • main.js: Questo è il file principale dell’applicazione. Contiene il codice per creare la finestra dell’applicazione e gestire gli eventi principali.
  • index.html: Il file HTML caricato nella finestra dell’applicazione.

Processi Main e Renderer

Electron utilizza due tipi di processi:

  • Processo Main: Questo è il processo principale che esegue lo script specificato nel campo “main” del file package.json. Il processo main è responsabile della gestione delle finestre e della comunicazione con i processi renderer. Ha accesso completo all’API di Node.js.
  • Processo Renderer: Ogni finestra in Electron è eseguita in un processo renderer separato. Questi processi eseguono il codice HTML e JavaScript del frontend. Sono simili ai processi di rendering del browser e hanno accesso limitato all’API di Node.js per motivi di sicurezza.

Comunicazione tra Processi

La comunicazione tra il processo main e i processi renderer è essenziale per molte applicazioni Electron. Electron fornisce il modulo ipcMain per il processo main e il modulo ipcRenderer per i processi renderer per facilitare questa comunicazione.

Esempio di Comunicazione

Nel processo main (main.js):

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg); // Stampa "ping"
  event.reply('asynchronous-reply', 'pong');
});

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

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

Nel processo renderer (index.html):

<!DOCTYPE html>
<html>
  <head>
    <title>IPC Example</title>
  </head>
  <body>
    <h1>IPC Example</h1>
    <script>
      const { ipcRenderer } = require('electron');
      ipcRenderer.send('asynchronous-message', 'ping');
      ipcRenderer.on('asynchronous-reply', (event, arg) => {
        console.log(arg); // Stampa "pong"
      });
    </script>
  </body>
</html>

In questo esempio, il processo renderer invia un messaggio asincrono al processo main con ipcRenderer.send, e il processo main risponde con event.reply. Questa comunicazione bidirezionale è utile per scambiare dati tra i processi.

 

4. Creare la Prima Applicazione Electron

Configurazione del Progetto

Per iniziare a creare la tua prima applicazione Electron, segui questi passaggi:

  1. Crea una nuova directory per il tuo progetto e spostati al suo interno:
mkdir my-electron-app
cd my-electron-app
  1. Inizializza un nuovo progetto Node.js:
npm init -y

Creazione del File Principale (main.js)

Il file principale dell’applicazione (main.js) è responsabile della creazione della finestra dell’applicazione e della gestione degli eventi principali. Crea un file chiamato main.js nella directory del tuo progetto con il seguente contenuto:

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

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

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

Configurazione del package.json

Il file package.json contiene le informazioni sul progetto e le dipendenze necessarie. Modifica il tuo file package.json per includere il campo “main” che punta a main.js:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^latest"
  }
}

Assicurati di avere electron come dipendenza di sviluppo nel tuo package.json. Se non è già presente, puoi aggiungerla eseguendo:

npm install --save-dev electron

Creazione della Finestra Principale

La finestra principale dell’applicazione viene definita nel file index.html. Crea un file chiamato index.html nella directory del tuo progetto con il seguente contenuto:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Electron App</title>
  </head>
  <body>
    <h1>Hello, Electron!</h1>
  </body>
</html>

Avvio dell’Applicazione

Ora che hai configurato il tuo progetto, puoi avviare la tua applicazione Electron. Esegui il seguente comando nella directory del tuo progetto:

npm start

Dovrebbe aprirsi una finestra con il messaggio “Hello, Electron!”. Questo conferma che la tua applicazione Electron è stata creata e avviata correttamente.

 

5. Integrazione con Node.js

Utilizzo di Moduli Node.js in Electron

Una delle caratteristiche più potenti di Electron è la possibilità di utilizzare i moduli di Node.js direttamente nelle tue applicazioni. Questo consente di aggiungere funzionalità avanzate alle tue applicazioni desktop utilizzando le numerose librerie disponibili nell’ecosistema Node.js.

Ad esempio, è possibile utilizzare moduli come fs per lavorare con il file system, http per creare server web, e molti altri. Di seguito è riportato un esempio di come utilizzare il modulo fs in un’applicazione Electron.

Esempio di Utilizzo del Modulo fs

Supponiamo di voler leggere il contenuto di un file e visualizzarlo in una finestra Electron. Segui questi passaggi:

  1. Aggiungi il codice per leggere un file nel tuo main.js:
const { app, BrowserWindow, ipcMain } = require('electron');
const fs = require('fs');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

ipcMain.on('read-file', (event, filePath) => {
  fs.readFile(filePath, 'utf8', (err, data) => {
    if (err) {
      event.reply('file-content', `Error reading file: ${err.message}`);
      return;
    }
    event.reply('file-content', data);
  });
});

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});
  1. Aggiungi il codice per inviare il percorso del file dal processo renderer (index.html):
<!DOCTYPE html>
<html>
  <head>
    <title>File Reader</title>
  </head>
  <body>
    <h1>File Reader</h1>
    <input type="file" id="fileInput" />
    <pre id="fileContent"></pre>

    <script>
      const { ipcRenderer } = require('electron');

      document.getElementById('fileInput').addEventListener('change', (event) => {
        const file = event.target.files[0];
        if (file) {
          ipcRenderer.send('read-file', file.path);
        }
      });

      ipcRenderer.on('file-content', (event, content) => {
        document.getElementById('fileContent').textContent = content;
      });
    </script>
  </body>
</html>

In questo esempio, il processo renderer invia il percorso del file selezionato al processo main, che legge il contenuto del file utilizzando il modulo fs e restituisce il contenuto al processo renderer per la visualizzazione.

Esempi di Integrazione

Le possibilità di integrazione con Node.js in Electron sono praticamente illimitate. Ecco alcuni altri esempi di ciò che puoi fare:

  • Utilizzare il modulo http per creare un server web locale che serva contenuti dinamici.
  • Utilizzare il modulo child_process per eseguire comandi di sistema o script esterni.
  • Utilizzare il modulo path per gestire e manipolare percorsi di file e directory.
  • Utilizzare moduli di terze parti come axios per effettuare richieste HTTP o sqlite3 per interagire con un database SQLite.

Grazie alla possibilità di utilizzare l’intero ecosistema Node.js, puoi aggiungere una vasta gamma di funzionalità alle tue applicazioni Electron, rendendole potenti e versatili.

 

6. Sviluppo Avanzato con Electron

Gestione delle Finestre Multiple

In Electron, è possibile creare e gestire più finestre all’interno della stessa applicazione. Questo è utile per creare applicazioni più complesse che richiedono finestre separate per diverse funzionalità. Ecco un esempio di come creare una seconda finestra:

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

let mainWindow;
let secondaryWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');

  mainWindow.on('closed', () => {
    mainWindow = null;
  });

  secondaryWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true
    }
  });

  secondaryWindow.loadFile('secondary.html');

  secondaryWindow.on('closed', () => {
    secondaryWindow = null;
  });
}

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

In questo esempio, vengono create due finestre: mainWindow e secondaryWindow, ognuna delle quali carica un diverso file HTML.

Utilizzo di Menu e Tray

Electron permette di creare menu personalizzati e aggiungere icone nella tray (area di notifica) del sistema operativo. Ecco un esempio di come creare un menu personalizzato:

const { app, Menu } = require('electron');

const template = [
  {
    label: 'File',
    submenu: [
      { role: 'quit' }
    ]
  },
  {
    label: 'Edit',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' }
    ]
  }
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

Questo codice crea un menu con le voci “File” e “Edit” e le loro relative azioni. Per aggiungere un’icona nella tray, utilizza il seguente esempio:

const { app, Tray, Menu } = require('electron');

let tray = null;
app.whenReady().then(() => {
  tray = new Tray('path/to/icon.png');
  const contextMenu = Menu.buildFromTemplate([
    { label: 'Item1', type: 'radio' },
    { label: 'Item2', type: 'radio' }
  ]);
  tray.setToolTip('This is my application.');
  tray.setContextMenu(contextMenu);
});

Questo codice aggiunge un’icona nella tray con un menu contestuale personalizzato.

Gestione delle Notifiche

Electron supporta le notifiche di sistema, che possono essere utilizzate per mostrare messaggi agli utenti. Ecco un esempio di come creare una notifica:

const { Notification } = require('electron');

new Notification({ title: 'Title', body: 'Notification body' }).show();

Questo codice mostra una notifica con un titolo e un corpo del messaggio.

Persistenza dei Dati

Per salvare e recuperare dati in un’applicazione Electron, puoi utilizzare diverse soluzioni, come l’archiviazione locale (local storage), file system o database. Ecco un esempio di come salvare dati in un file JSON:

const fs = require('fs');
const path = require('path');

const dataPath = path.join(app.getPath('userData'), 'data.json');

function saveData(data) {
  fs.writeFileSync(dataPath, JSON.stringify(data));
}

function loadData() {
  if (fs.existsSync(dataPath)) {
    const rawData = fs.readFileSync(dataPath);
    return JSON.parse(rawData);
  }
  return {};
}

Questo esempio mostra come salvare e caricare dati da un file JSON nella directory dei dati dell’utente dell’applicazione.

 

7. Debugging e Testing

Debugging di Applicazioni Electron

Il debugging di applicazioni Electron può essere eseguito utilizzando strumenti di sviluppo simili a quelli usati per le applicazioni web. Ecco alcune tecniche comuni:

Strumenti di Sviluppo di Chromium

Electron integra gli strumenti di sviluppo di Chromium, che sono accessibili tramite la finestra dell’applicazione. Per aprire gli strumenti di sviluppo, aggiungi il seguente codice al tuo file main.js:

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
  win.webContents.openDevTools(); // Apre gli strumenti di sviluppo
}

app.whenReady().then(createWindow);

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

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

Questo codice aprirà automaticamente gli strumenti di sviluppo quando viene creata una nuova finestra.

Debugging del Processo Main

Per eseguire il debugging del processo main, puoi utilizzare un debugger esterno come Visual Studio Code. Ecco come configurarlo:

  1. Apri il tuo progetto Electron in Visual Studio Code.
  2. Crea un file .vscode/launch.json con il seguente contenuto:
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/main.js",
      "cwd": "${workspaceFolder}",
      "preLaunchTask": "npm: start",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "runtimeArgs": [
        "."
      ],
      "sourceMaps": true,
      "protocol": "inspector",
      "skipFiles": [
        "/**"
      ]
    }
  ]
}

Questo file configura Visual Studio Code per eseguire e fare il debugging del processo main di Electron.

Strumenti di Testing

Il testing delle applicazioni Electron è essenziale per garantire che funzionino correttamente su tutte le piattaforme supportate. Ecco alcuni strumenti comuni per il testing delle applicazioni Electron:

Mocha e Chai

Mocha e Chai sono due strumenti popolari per il testing di applicazioni JavaScript. Ecco come configurare Mocha e Chai per testare un’applicazione Electron:

  1. Installa Mocha e Chai:
npm install --save-dev mocha chai
  1. Crea una cartella test nella directory del tuo progetto e aggiungi un file di test test/example.js:
const { expect } = require('chai');

describe('Example Test', function() {
  it('should return true', function() {
    expect(true).to.be.true;
  });
});
  1. Aggiungi uno script di test al tuo package.json:
{
  "scripts": {
    "test": "mocha"
  }
}

Ora puoi eseguire i tuoi test con il comando npm test.

Spectron

Spectron è un framework di testing end-to-end specifico per le applicazioni Electron, basato su WebDriver. Ecco come configurare Spectron per testare un’applicazione Electron:

  1. Installa Spectron:
npm install --save-dev spectron
  1. Aggiungi un file di test test/app.test.js:
const Application = require('spectron').Application;
const assert = require('assert');
const path = require('path');

describe('Application launch', function () {
  this.timeout(10000);

  beforeEach(function () {
    this.app = new Application({
      path: path.join(__dirname, '..', 'node_modules', '.bin', 'electron'),
      args: [path.join(__dirname, '..')]
    });
    return this.app.start();
  });

  afterEach(function () {
    if (this.app && this.app.isRunning()) {
      return this.app.stop();
    }
  });

  it('shows an initial window', function () {
    return this.app.client.getWindowCount().then(function (count) {
      assert.equal(count, 1);
    });
  });
});

Questo test avvia l’applicazione Electron e verifica che venga mostrata una finestra iniziale.

Utilizzando questi strumenti di debugging e testing, puoi assicurarti che la tua applicazione Electron sia stabile e funzionante su tutte le piattaforme supportate.

 

8. Distribuzione di Applicazioni Electron

Preparazione per la Distribuzione

Prima di distribuire la tua applicazione Electron, è importante assicurarsi che tutto funzioni correttamente e che l’applicazione sia ottimizzata per la distribuzione. Ecco alcuni passaggi chiave da seguire:

  • Minificazione: Minifica i file JavaScript e CSS per ridurre le dimensioni del pacchetto.
  • Rimozione del codice non necessario: Assicurati di rimuovere qualsiasi codice di debug o di sviluppo che non è necessario per l’esecuzione dell’applicazione in produzione.
  • Verifica delle dipendenze: Assicurati che tutte le dipendenze siano installate correttamente e che non ci siano dipendenze non utilizzate nel file package.json.

Creazione di Eseguibili per Windows, macOS e Linux

Electron fornisce strumenti per creare pacchetti di installazione per diverse piattaforme. Uno degli strumenti più popolari è electron-builder. Ecco come utilizzarlo:

  1. Installa electron-builder come dipendenza di sviluppo:
npm install --save-dev electron-builder
  1. Aggiungi uno script di build al tuo package.json:
{
  "scripts": {
    "build": "electron-builder"
  }
}
  1. Configura electron-builder aggiungendo un campo build al tuo package.json:
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.example.myapp",
    "directories": {
      "output": "dist"
    },
    "files": [
      "main.js",
      "index.html",
      "package.json"
    ],
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    },
    "linux": {
      "target": "AppImage"
    }
  },
  "devDependencies": {
    "electron": "^latest",
    "electron-builder": "^latest"
  }
}

Questa configurazione specifica che electron-builder creerà pacchetti per Windows (NSIS), macOS (DMG) e Linux (AppImage).

  1. Esegui il comando di build:
npm run build

Questo comando creerà i pacchetti di installazione nella directory dist. Puoi distribuire questi pacchetti agli utenti finali.

Configurazioni Aggiuntive

Puoi personalizzare ulteriormente il processo di build aggiungendo più opzioni al campo build nel tuo package.json. Ad esempio, puoi configurare icone personalizzate, impostazioni di firma del codice, e altro ancora. Consulta la documentazione di electron-builder per ulteriori dettagli.

Firma del Codice

Per macOS e Windows, è consigliabile firmare il codice per garantire che l’applicazione provenga da una fonte attendibile. La firma del codice aiuta anche a evitare avvisi di sicurezza durante l’installazione. Ecco le risorse per la firma del codice su ciascuna piattaforma:

Aggiornamenti Automatici

Electron supporta gli aggiornamenti automatici, che consentono di aggiornare la tua applicazione senza richiedere agli utenti di reinstallarla manualmente. Puoi utilizzare servizi come electron-updater per configurare gli aggiornamenti automatici.

Configurazione degli Aggiornamenti Automatici

  1. Installa electron-updater:
npm install --save electron-updater
  1. Aggiungi il seguente codice al tuo main.js per configurare gli aggiornamenti automatici:
const { app, BrowserWindow } = require('electron');
const { autoUpdater } = require('electron-updater');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');

  autoUpdater.checkForUpdatesAndNotify();
}

app.whenReady().then(createWindow);

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

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

autoUpdater.on('update-downloaded', () => {
  autoUpdater.quitAndInstall();
});

Questo codice configura electron-updater per verificare e notificare la disponibilità di aggiornamenti.

Seguendo questi passaggi, puoi distribuire la tua applicazione Electron in modo efficiente e fornire aggiornamenti automatici agli utenti finali.

 

9. Template di Startup Veloce

Presentazione del Template

Per facilitare la creazione rapida di una nuova applicazione Electron, è utile avere un template di startup. Questo template fornisce una struttura di base e alcune configurazioni iniziali, permettendoti di concentrarti sullo sviluppo delle funzionalità specifiche della tua applicazione.

Struttura del Template

La struttura del template di startup è simile a quella di un progetto Electron di base, con alcune aggiunte per migliorare l’organizzazione e la configurazione iniziale:

my-electron-app/
├── package.json
├── main.js
├── index.html
├── preload.js
├── renderer/
│   └── renderer.js
└── assets/
    └── icon.png

Di seguito una breve descrizione di ciascun file e directory:

  • package.json: Contiene le informazioni del progetto e le dipendenze necessarie.
  • main.js: Questo è il file principale dell’applicazione, responsabile della creazione della finestra dell’applicazione e della gestione degli eventi principali.
  • index.html: Il file HTML caricato nella finestra dell’applicazione.
  • preload.js: Uno script eseguito prima del processo di rendering, utile per esporre API sicure al contesto di rendering.
  • renderer/: Contiene i file JavaScript specifici del processo renderer.
  • assets/: Contiene risorse statiche come icone e immagini.

Come Utilizzare il Template per Creare una Nuova Applicazione

Per utilizzare il template di startup, segui questi passaggi:

  1. Clona il Repository del Template
git clone https://github.com/username/my-electron-template.git my-electron-app
cd my-electron-app
  1. Installa le Dipendenze
npm install
  1. Modifica il package.json

Apri il file package.json e aggiorna le informazioni del progetto come nome, versione, descrizione, autore, ecc.

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Una nuova applicazione Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.example.myapp",
    "directories": {
      "output": "dist"
    },
    "files": [
      "main.js",
      "index.html",
      "preload.js",
      "renderer/",
      "assets/",
      "package.json"
    ],
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    },
    "linux": {
      "target": "AppImage"
    }
  },
  "devDependencies": {
    "electron": "^latest",
    "electron-builder": "^latest"
  }
}
  1. Avvia l’Applicazione
npm start

Dovrebbe aprirsi una finestra con il contenuto di index.html. Ora puoi iniziare a modificare i file nel template per aggiungere le funzionalità specifiche della tua applicazione.

Esempio di File main.js

Di seguito è riportato un esempio di main.js incluso nel template:

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  win.loadFile('index.html');
  win.webContents.openDevTools();
}

app.whenReady().then(createWindow);

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

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

Esempio di File preload.js

Di seguito è riportato un esempio di preload.js incluso nel template:

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('api', {
  send: (channel, data) => ipcRenderer.send(channel, data),
  receive: (channel, func) => ipcRenderer.on(channel, (event, ...args) => func(...args))
});

Questo script espone un’API sicura al contesto di rendering, permettendo di comunicare con il processo main.

Utilizzando questo template di startup, puoi rapidamente iniziare a sviluppare la tua applicazione Electron senza dover configurare tutto da zero.

 

10. Conclusioni guida Electron

In questo articolo, abbiamo esplorato il framework Electron per Node.js, coprendo vari aspetti del suo utilizzo, dall’installazione alla creazione di una prima applicazione, passando per lo sviluppo avanzato e la distribuzione. Electron offre una piattaforma potente e flessibile per lo sviluppo di applicazioni desktop multipiattaforma utilizzando tecnologie web familiari come JavaScript, HTML e CSS.

Vantaggi di Electron

Electron presenta numerosi vantaggi che lo rendono una scelta eccellente per lo sviluppo di applicazioni desktop:

  • Multipiattaforma: Consente di creare applicazioni che funzionano su Windows, macOS e Linux con una base di codice unica.
  • Utilizzo di Tecnologie Web: Permette di sfruttare le conoscenze esistenti in JavaScript, HTML e CSS per lo sviluppo di applicazioni desktop.
  • Integrazione con Node.js: Fornisce l’accesso a un’ampia gamma di moduli e pacchetti attraverso npm.
  • Comunità Ampia e Attiva: Beneficia di una vasta comunità di sviluppatori e di una ricca documentazione e risorse.
  • Aggiornamenti Continui: Viene costantemente aggiornato con le ultime versioni di Node.js e Chromium.

Svantaggi di Electron

Nonostante i suoi numerosi vantaggi, Electron presenta anche alcuni svantaggi che è importante considerare:

  • Dimensioni delle Applicazioni: Le applicazioni Electron tendono ad avere dimensioni maggiori rispetto alle applicazioni native, a causa dell’inclusione di Chromium e Node.js.
  • Consumo di Risorse: Le applicazioni Electron possono consumare più risorse di sistema rispetto alle controparti native, specialmente in termini di memoria e CPU.
  • Sicurezza: Essendo basato su tecnologie web, è essenziale prestare particolare attenzione alla sicurezza, specialmente quando si utilizzano funzionalità avanzate di Node.js.

Risorse Aggiuntive e Comunità

Per continuare ad approfondire le tue conoscenze su Electron e ottenere supporto dalla comunità, ecco alcune risorse utili:

In conclusione, Electron è una soluzione potente e versatile per lo sviluppo di applicazioni desktop, che offre numerose opportunità per sfruttare le competenze esistenti nel campo dello sviluppo web. Con una vasta gamma di risorse disponibili e una comunità attiva, Electron continua a crescere e a migliorare, rendendolo una scelta solida per molti progetti di sviluppo desktop.

11. Risorse Aggiuntive

Per approfondire ulteriormente le tue conoscenze su Electron e migliorare le tue competenze nello sviluppo di applicazioni desktop, ecco alcune risorse aggiuntive utili:

Documentazione Ufficiale

Comunità e Forum di Supporto

  • Repository GitHub di Electron: La pagina ufficiale del progetto Electron su GitHub, dove puoi trovare il codice sorgente, aprire issue e contribuire al progetto.
  • Community di Electron: Un punto di incontro per gli sviluppatori di Electron, dove puoi porre domande, condividere esperienze e ottenere supporto dalla comunità.
  • Stack Overflow: Un sito di domande e risposte dove puoi trovare soluzioni a problemi comuni e ottenere aiuto dalla comunità di sviluppatori.

Tutorial e Corsi

Esempi di Progetti Open-Source

  • Electron Apps: Una raccolta di applicazioni open-source sviluppate con Electron, utili come riferimento per il tuo sviluppo.
  • Electron API Demos: Un’applicazione che dimostra le varie API di Electron con esempi pratici.
  • Awesome Electron: Una lista curata di risorse, strumenti e librerie utili per lo sviluppo con Electron.

Blog e Articoli

  • Electron Blog: Il blog ufficiale di Electron, con articoli, aggiornamenti e annunci relativi al framework.
  • DEV.to: Una piattaforma di blogging per sviluppatori, con numerosi articoli e tutorial su Electron.

Queste risorse aggiuntive ti aiuteranno a migliorare le tue competenze nello sviluppo con Electron e a rimanere aggiornato sulle ultime novità e best practice. Buon sviluppo!

Indice

Copertina di una presentazione intitolata 'Introduzione al Marketing di Affiliazione', con il logo di Nicetry Labs in alto a sinistra e un grafico con barre colorate e linee in background.
Introduzione al Marketing di Affiliazione
Siete nuovi su questo blog o vi state avvicinando al mondo del marketing di affiliazione? Questa introduzione...
Read More

NICE TRY

LABS