Node-Webkit

Applicazioni desktop con HTML5, CSS3 e JavaScript

Che cos'è

Node-Webkit è un'app-runtime che consente di creare applicazioni desktop multipiattaforma utilizzando tecnologie web:

• HTML 5
• CSS 3
• JavaScript
• WebGL
• WebRTC
• WebSocket
• Accelerazione hardware

Sotto il cofano...

Node Webkit combina:

• Chromium / Webkit V8 Engine
• Node.js

Node.js

Node.js consente di implementare funzionalità tipiche di un'applicazione desktop

• lettura e scrittura del file system
• accedere alla shell di sistema
• avviare e gestire processi
• ecc...

Un esempio

Node.js è caratterizzato da una sintassi molto semplice e lineare:

Vantaggi

1. Multipiattaforma
   - Windows
   - Mac OS
   ​- Linux
2. Velocità e semplicità di sviluppo
3. Performance più che buone
4. Sviluppato e mantenuto da Intel

Casi di successo

E' realmente possibile fare applicazioni funzionali!

Alcuni esempi...

Creiamo la nostra prima Applicazione!

Materiale necessario

• Scaricare l'ultima versione disponibile per la piattaforma interessata

https://github.com/rogerwang/node-webkit

• Un buon editor di testo (debustibus)

Definiamo il Manifest

Il file package.json va creato nella root del nostro progetto.

Definisce informazioni basilari come:

• il Titolo della finestra
• Icona
• Dimensione e posizione
• Il file index da caricare all'avvio
• La presenza di eventuali plugin come Java 

{
    "name": "ennova_widget",
    "main": "index.html",
    "version": "0.0.1",
    "single-instance": true,

    "window": {
        "title": "Ennova Widget",
        "icon": "icon.png",
        "width": 900,
        "height": 400,
        "min_width": 900,
        "min_height": 400,
        "max_width": 900,
        "max_height": 400,
        "position": "center",
        "frame": false,
        "toolbar": false,
        "resizable": false,
        "always-on-top": false,
        "show_in_taskbar": true,
    },
    "webkit": {
        "plugin": true
    },
    "chromium-args": "--child-clean-exit"
}

Le proprietà di window

Le proprietà di window sono sicuramente quelle più interessanti, in quanto definiscono in maniera diretta l'aspetto della finestra della nostra app.

"frame": finestra con bordi o senza
"toolbar": finestra con/senza menù 
"resizable": ridimensionabile
"always-on-top": sempre in primo piano
"show_in_taskbar": nella taskbar dell'OS

Un pò di controllo

E' possibile intervenire attivamente sullo stato della finestra della nostra applicazione anche da codice:

var gui = require('nw.gui');
var win = gui.Window.get();

win.hide();
win.show();
win.maximize();
win.minimize();

window.open();
window.moveBy(10,30);
window.resizeTo(800,600);

Creiamo una Menubar

Creare una barra con dei menù è altrettanto semplice.

var gui = require('nw.gui');
var win = gui.Window.get();

// richiamo il menù di "sistema"
var rootMenu = new gui.Menu({ type: 'menubar' });

// creo un nuovo elemento
var mioMenu = new gui.Menu();

// aggiungo una voce di menù
mioMenu.append(new gui.MenuItem({
	type: 'normal',
	label: 'Il mio menù',
	click: function (){
		alert("Menù cliccato!");
	} }));

rootMenu.append(new gui.MenuItem({
	label: 'Menu personalizzato',
	submenu: mioMenu
}));

Creiamo un icona nella Tray

Come nel caso del widget, può capitare di volere l'icona dell'app nel vassoio di fianco l'orologio. Anche questo è molto semplice da ottenere!

// creo la trayicon
var tray = new gui.Tray({
    icon: 'icon.png'
  });

// creo un menù
var menu = new gui.Menu();
menu.append(new gui.MenuItem({
    type: 'checkbox',
    label: 'Always-on-top',
    click: function () {...}
  }));

// lo assegno alla tryicon
tray.menu = menu;

Modalità Kiosk

La modalità Kiosk consente di eseguire la propria applicazione a schermo intero, senza lasciare la possibilità all'utente di ritornare al sistema operativo.

Utile in contesti come Internet Point o Totem informativi.

// Nel manifest package.json
"window": {
    "kiosk": true
}

// Attiviamo la modoalità chiosco in codice
gui.Window.get().enterKioskMode();

// Disattiviamola...
gui.Window.get().leaveKioskMode();

Interfaccia Grafica

Nel disegno dell'interfaccia grafica si può usare tutta la versatilità di HTML5 e dei CSS3 per ottenere un risultato accattivante e consistente su tutte le piattaforme.

E' ovviamente possibile (e suggerito) usare framework che alleggeriscono il lavoro e migliorano il risultato finale:

• Bootstrap by Twitter
• Foundation Framwork by Zurb
• TopCoat by Adobe

Codice Javascript

Per la controparte Javascript possiamo godere a pieno di librerie e framwork tra i più diffusi, questi ultimi soprattutto nel caso di applicazioni dalla complessità medio / alta.

• JQuery
• Angular.js, Backbone.js,  Ember.js
• d3.js
• OpenTok

Sono disponibili ovviamente quasi tutte le features avanzate di HTML5: localstorage, WebSQL, supporto ai tag audio / video, geolocalizzazione, ecc..

Come debuggare?

Per il debug, Node-Webkit può sfruttare in toto le caratteristiche degli Strumenti per Sviluppatori già presenti su Chrome.

Distribuiamo la nostra applicazione

Per distribuire la nostra applicazione, basta zippare la cartella contenente il codice HTML, JS e tutti gli assets e rinominarla con estensione .nw.

Semplicemente concatenandola al binario di Node-Webkit, avremo un eseguibile stand-alone da distribuire.

Windows:
copy /b nw.exe+app.nw > foo.exe

Mac:
cp app.nw nw/Contents/Resources/

Linux:
cat nw app.nw > foo

Distribuiamo la nostra applicazione

E' così semplice?

Suggerimenti

Per finalizzare il nostro prodotto, può essere utile utilizzare node-webkit-builder, un complesso script Grunt che consente da riga di comando:

- scaricare l'ultima versione disponibile  disponibile per tutte le piattaforme

- creare un pacchetto per ogni piattaforma supportata

- offre degli hook con i quali automatizzare ulteriori steps.

npm install grunt-node-webkit-builder

Buona giornata a tutti :)