Applicazioni desktop ibride, multipiattaforma scritte in html, css e JavaScript? Ecco come muovere i primi passi utilizzando NW JS.
Sono oramai diversi anni che le applicazioni ibride si sono fatte spazio nel panorama della programmazione software. HTML5, CSS3 e JavaScript hanno prima conquistato il mercato delle APP per dispositivi mobili e poi, sempre più diffusamente, sono stati utilizzati per realizzare applicazioni desktop multipiattaforma, ossia in grado di funzionare sui tre maggiori sistemi operativi: Linux, MacOS, Windows.
Per quanto concerne la programmazione desktop, al momento, sono due le tecnologie maggiormente utilizzate per scrivere un’applicazione multipiattaforma tramite html, css e JavaScript: Electron (https://electronjs.org/) e NWjs (https://nwjs.io/). Sono già molti gli articoli presenti online che si occupano di analizzare le differenze tra questi due strumenti, si rimanda pertanto a tali articoli per venirne a conoscenza.
Questo articolo tratta di NW.js.
Sul sito ufficiale di NW possiamo leggere:
NW.js is based on Chromium and Node.js. It lets you call Node.js code and modules directly from browser and also use Web technologies in your app. Further, you can easily package a web application to a native application.
Ossia NW ci consente, tra le altre cose, di impacchettare un’applicazione web in un’applicazione nativa. Non è per niente robetta da scuola elementare! 🙂
In questo articolo verrà indicato come configurare la macchina da utilizzare per scrivere il codice e come realizzare un primo mini progetto (ma proprio mini) in NW.
Iniziamo.
CONFIGURIAMO LA MACCHINA
La prima cosa da fare è scegliere un IDE, cioè un programma che ci aiuti nella scrittura del nostro codice. Possiamo utilizzare Eclipse, Netbeans, Atom, SublimeText, Visual Studio e molti altri…
Scelto e installato il nostro IDE preferito, procediamo come segue:
- Scarichiamo e installiamo Git (https://gitforwindows.org/)
- Scarichiamo e installiamo NODE.JS (https://nodejs.org/it/), scaricando la release “corrente”.
REALIZZIAMO UN PRIMO MINI PROGETTO IN NW.JS
La struttura delle cartelle che dovranno contenere tutti file del nostro progetto è una scelta del tutto personale.
In questa sede si suggerisce la seguente struttura.
nomeDelProgetto/
├── src/
│ ├── app/
│ │ └── main.js
│ ├── assets/
│ │ └── icon.png
│ ├── styles/
│ │ └── common.css
│ ├── views/
│ │ └── main.html
│ └── package.json
└── package.json
La cartella principale, nomeDelProgetto è la cartella che darà il nome al nostro progetto e che conterrà tutti i relativi file.
In tale cartella ci sarà una sotto cartella, denominata src (che conterrà tutti i file sorgente del progetto) e un file denominato package.json.
Dentro la cartella src troviamo 4 cartelle e un file:
- la cartella app conterrà la logica JavaScript dell’applicazione,
- la cartella assets le immagini,
- la cartella styles i file css,
- la cartella views la varie interfacce grafiche (finestre) dell’applicazione,
- il file package.json (richiesto da NW) contenente i metadati dell’applicazione.
Come si può osservare ci sono 2 file con lo stesso nome in posizioni diverse. Si tratta del file package.json.
Tale file viene utilizzato in due posti diversi con 2 scopi diversi. Il package.json nella root del progetto (nomeDelProgetto/package.json) serve per automatizzare il processo di run e di distribuzione del progetto. Il package.json nella cartella src (nomeDelProgetto/src/package.json) serve invece per definire i metadati del progetto (nome, versione, file principale, ecc.).
Vedremo tutto meglio in seguito.
INSTALLIAMO NW e NW-BUILDER
Prima di creare qualunque file dobbiamo installare nw e nw-builder. Il primo ci serve per vedere lo nostra applicazione mentre la sviluppiamo, il secondo per creare gli eseguibili per distribuirla.
Iniziamo con il creare la cartella del nostro progetto, nomeDelProgetto e lasciamola vuota.
Ora utilizzeremo Node.js per istallare NW. Durante tale operazione verrà creata in automatico la cartella node_modules dentro la root del nostro progetto.
Quindi apriamo il prompt dei comandi, posizioniamoci nella root della nostra applicazione (cioè nella cartella nomeDelProgetto ed è molto importante essere nella root) e digitiamo quanto segue:
npm install nw
Il comando che abbiamo appena visto installerà NW, ma durante lo sviluppo di un’applicazione tramite NW è molto importante utilizzare l’SDK. Affinché venga installato l’SDK bisogna lanciare quest’altro comando (verrà automaticamente installata l’ultima versione):
npm install nw --nwjs_build_type=sdk
Anche se si ha a disposizione una buona rete, con questi comandi bisogna avere qualche secondo di pazienza…
Come anticipato, verrà creata la cartella node_modules con all’interno molte, moltissime sotto cartelle. È normale.
Sistemata la faccenda NW, ora installiamo anche il builder, ossia il programmino che ci consentirà di creare i file eseguibili per i vari sistemi operativi.
Per farlo, sempre dalla root del nostro progetto (è molto importante essere nella root!!!), lanciamo il seguente comando:
npm install nw-builder --save-dev
Bene.
Ora abbiamo tutto il necessario e possiamo iniziare a scrivere il codice 🙂
CREIAMO I FILE DEL NOSTRO PROGETTO
Andiamo nella cartella nomeDelProgetto/src/views/ e creiamo il file main.html. Esso sarà l’interfaccia da cui partirà il nostro software. Il nome del file è del tutto arbitrario, qui è stato scelto main.html, ma si può chiamare anche pippo.html o in qualunque altro modo. Nel nostro esempio di base (molto base) creeremo un banale file HTML5 come quello che segue:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PRIMO PROGETTO</title>
</head>
<body>
<h1>TITOLO</h1>
</body>
</html>
Ora dobbiamo comunicare a NW che il file main.html è l’interfaccia di partenza del nostro progetto. Dobbiamo poi dirgli il nome che vogliamo dare al progetto e la relativa versione. Niente di particolarmente complesso. Per farlo, creiamo il file nomeDelProgetto/src/package.json (quindi quello dentro la cartella nomeDelProgetto/src/) e ci scriviamo dentro quanto segue.
{
"name": "Nome_Del_Progetto",
"version": "1.0.0",
"main": "views/main.html"
}
Potremmo già mandare in run il nostro primo progetto, ma prima di farlo automatizziamo tale processo creando il file package.json della root, ossia nomeDelProgetto/package.json.
Dentro tale file scriviamo quanto segue.
{
"name": "Nome_Del_Progetto",
"version": "1.0.0",
"devDependencies": {
"nw": "^0.33.4",
"nw-builder": "^3.5.4"
},
"scripts":{
"dev":"nw src/",
"prod":"nwbuild --platforms win32,win64 --buildDir dist/ src/"
}
}
Le righe 5 e 6 riportano il numero di versione di nw e nw-builder. Per sapere quali versioni abbiamo installate sulla macchina, ci basta entrare nella cartella nomeDelProgetto/node_modules/nw (nomeDelProgetto/node_modules/nw-builder), aprire il file package.json e leggere il valore della proprietà _id.
È molto importante la riga 10. In tale istruzione stiamo producendo gli eseguibili, a 32 e a 64 bit, per i sistemi Windows. Possiamo però produrre gli eseguibili per Linux e per MacOS. Per farlo la riga 10 può essere modificata come segue:
“prod”:”nwbuild –platforms win32,win64,osx64,linux32,linux64 –buildDir dist/ src/”
LANCIAMO IL PROGETTO
A questo punto siamo pronti per lanciare la nostra applicazione 🙂
Posizioniamoci con il prompt nella root del nostro progetto e digitiamo quanto segue:
npm run dev
Una volta che il sistema sarà finito e vogliamo quindi produrre gli eseguibili da distribuire, dobbiamo digitare il seguente comando:
npm run prod
Nella root del nostro progetto verrà creata la cartella dist con dentro un’altra cartella con il nome del progetto e dentro quest’ultima altre 2 cartelle: una cartella per gli eseguibili a 32 bit e una per quelli a 64 bit.
Entrando in tali cartelle, una cosa dovrebbe essere subito evidente: nelle cartelle con gli eseguibili ci sono tantissimi file e, soprattutto, ogni cartella occupa oltre 200 MB!!! Abbiamo creato un’applicazione con una sola schermata che non fa assolutamente nulla e… dobbiamo distribuire oltre 200 megabyte di file! Ebbene… è una delle controindicazioni per le applicazioni ibride 🙂
Tuttavia nel 2018… nessuno dovrebbe avere problemi a recuperare 200 MB di spazio su disco 😉
Prima di concludere c’è una cosa da sapere nel caso si decidesse di approcciare a NW: NW consente di utilizzare tutti i pacchetti/moduli presenti su NodeJS, ma… purtroppo per utilizzarli su Windows è necessario ricostruire il codice utilizzando il comando nw-gyp ed è necessario installare Python (e altri ammennicoli vari) per la compilazione utilizzando il seguente comando in una finestra del prompt come amministratori:
npm install --global --production windows-build-tools
CONCLUSIONI
In questo articolo, abbiamo visto come sia possibile creare un eseguibile per Windows scrivendo codice HTML, CSS e JavaScript.
Abbiamo anche visto che i file da distribuire sono davvero tanti e occupano davvero tanto spazio.
Poiché è possibile rilevare l’ambiente, è anche possibile sviluppare un’applicazione che viene eseguita su un normale server Web e sul computer client utilizzando NW.js. Con alcuni accorgimenti, e grazie a un potente motore Chromium (che viene utilizzato da NW), gli utenti difficilmente sentiranno la differenza rispetto a un’applicazione nativa.
Quando si crea un nuovo progetto NW.js, per prima cosa bisogna determinare i framework (AngularJS, Bootstrap, React, ecc.), i caricatori di moduli e i preprocessori che vogliamo utilizzare, a seconda di ciò che ci è più familiare. Oppure possiamo semplicemente iniziare da zero scrivendo il codice JavaScript e CSS. Fatto ciò, bisogna decidere la struttura delle cartelle del progetto che si adatti alle nostre esigenze. Se non troviamo alcuna struttura delle cartelle a noi congeniale, è possibile utilizzare un’applicazione basata sulla struttura delle cartelle di questo tutorial.
Hai ritenuto questo articolo utile?
Bene! Allora condividilo! Potrebbe essere utile anche ad altri e poi… è gratis! 😉