Introduzione a Electron

Mattepuffo's logo
Introduzione a Electron

Introduzione a Electron

Programmazione, Javascript - AJAX

Electron è un framework, basato su Node.js, per la creazione di applicazione desktop usando Javascript e HTML.

Se pensate che su questo framework si basano programmi del callibro di Atom.io, Visual Studio Code e GitHub Desktop, vi renderete conto delle sue potenzialità.

Oggi vediamo un'introduzione basica.

Prima di tutto installiamo Electron (conviene farlo a livello globale):

# npm -g install electron

A questo punto create una directory per il vostro progetto, e dentro mettetici questi tre file:

  • packege.json
  • index.html
  • main.js

Partendo dal primo:

{
    "name": "TestElectron",
    "version": "1.0.0",
    "author": "matte",
    "main": "main.js"
}

Nulla di che in questo; questo invece il file main.js:

const {app, BrowserWindow, Menu} = require('electron');
const path = require('path');
const url = require('url');
let win;

function createWindow() {
    win = new BrowserWindow({width: 800, height: 600});
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

//    win.webContents.openDevTools();

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

app.on('ready', createWindow);

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

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

La riga commentata serve per indicare se vogliamo che gli strumenti per sviluppatori si aprino in automatico; inoltre la finestra viene fornita con un menu di default (in un altro articolo vedremo come definire il nostro menu).

Infine il file index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Electron</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        We are using node <script>document.write(process.versions.node)</script>,
        Chrome <script>document.write(process.versions.chrome)</script>,
        and Electron <script>document.write(process.versions.electron)</script>.
    </body>
</html>

Ci starebbero altre cose da dire, ma vi lascio studiare un pò.

Per avviare il tutto:

$ cd progetto_electron
$ electron .

Enjoy!

Condividi

Commentami!