Introduzione a Electron
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!
javascript node.js electron
Commentami!