Applicazioni desktop su Windows 10 utilizzando NW.js

Applicazioni desktop ibride, multipiattaforma scritte in html, css e JavaScript su Windows 10? Ecco come muovere i primi passi utilizzando 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! 🙂

Poiché su Windows 10 alcuni moduli Node.js scaricati tramite npm non sono compatibili con nw.js (se non dopo una ricompilazione), per scrivere applicazioni desktop con nw.js su Windows 10 è opportuno seguire esattamente la seguente procedura:

  1. Scaricare e installare Git (https://gitforwindows.org/)
  2. Scaricare e Installare Node.js (https://nodejs.org/it/) – versione LTS (consigliata)
  3. Scaricare il file zip dell’SDK di NW (https://nwjs.io/)
  4. Decomprimere il file zip del punto precedente dove si ritiene opportuno
  5. Inserire la cartella principale del punto 4 (attualmente nwjs-sdk-v0.34.0-win-x64) tra le variabili di sistema di Windows
  6. Prima di installare i moduli tramite node-gyp o npm, sostituire il file \node_modules\node-gyp\src\win_delay_load_hook.cc che si trova dentro la cartella in cui abbiamo installato npm – tipicamente qualcosa del tipo nodejs\node_modules\npm\node_modules\node-gyp\src\ – con quello presente al seguente link: https://github.com/nwjs/nw.js/blob/nw18/tools/win_delay_load_hook.cc
  7. Creare la cartella del progetto
  8. Decidere la struttura delle cartelle del progetto
  9. Creare il file package.json nella root del progetto
  10. Scrivere il codice…
  11. Dalla root del progetto, tramite il prompt dei comandi o Power shell, richiamare il comando nw . per esguire il codice scritto.

Procediamo…
I primi 4 punti dell’elenco sopra riportato sono abbastanza banali e verranno dati per effettuati.

Inserire la cartella principale dell’SDK di NW nelle variabili di sistema di Windows

Per fare questo bisogna digitare il termine “variabili” (senza i doppi apici) nella casella di ricerca di Windows e scegliere “Modifica variabili d’ambiente per l’account”.
Si aprirà la seguente schermata in cui, nella parte superiore, dobbiamo scegliere “Path” e cliccare su “Modifica”
variablidi_ambiente_windows
Una volta premuto su “Modifica” si aprirà la schermata che segue in cui dobbiamo cliccare su “Nuovo” e incollare il percorso esatto in cui abbiamo decompresso l’SDK di NW (nel mio caso: D:\workspace\SDKs\nwjs-sdk-v0.34.0-win-x64).
variablidi_ambiente_windows_nuova

Premiamo su “OK” per salvare tutto e riavviamo la macchina…
Al riavvio apriamo il prompt dei comandi o la Power Shell di Windows, digitiamo nw e diamo invio:
Se l’operazione di aggiunta della variabile è andata a buon fine, dopo qualche secondo dovremmo vedere una finestra come la seguente.
nw finestra di avvio

Anche il punto 6. del procedente elenco è abbastanza semplice: si tratta di scaricare un file e sostituire quello presente sulla nostra macchina… Non dovrebbe essere troppo complesso. Si assume che sia stato effettuato.

Creare la cartella del progetto e deciderne la struttura

Decidere la struttura delle cartelle che conterranno i file del nostro progetto è molto importante ed è qualcosa di estremamente soggettivo. In questa sede si suggerisce la seguente struttura:

nomeDelProgetto/
├── src/
│ ├── app/
│ │ └── main.js
│ ├── assets/
│ │ └── icon.png
│ ├── styles/
│ │ └── common.css
│ ├── views/
│ | └── main.html
└── package.json

In breve, si crea una cartella (nomeDelProgetto) che conterrà tutti i file del nostro progetto.
All’interno di tale cartella si crea la sotto cartella src e il file package.json.
Nella cartella src si creano 4 sotto cartelle: app (in cui inseriremo i file javascript), assets (in cui inseriremo immagini e icone), styles (in cui inseriremo i fogli di stile) e views (in cui inseriremo la schermate in formato HTML della nostra applicazione).

Creiamo il file package.json

Il file package.json è un file fondamentale nella scrittura del nostro progetto. Esso infatti contiene meta informazioni sul nostro progetto senza le quali non è possibile né l’esecuzione né la distribuzione della nostra applicazione. In futuro sarà importante entrare in confidenza con tale file. Per adesso accontentiamoci di crearne uno con il seguente contenuto:

{
    "name": "nome_del_progetto",
    "version": "1.0.0",    
    "main": "/src/views/main.html"
}

Come è facile intuire, questo file sta comunicando, a chi di competenza, alcune informazioni di base sul nostro progetto. In particolare il nome del progetto, la sua versione e la posizione (relativa al file package.json) del file main.html che sarà l’interfaccia grafica iniziale della nostra applicazione.
A questo punto dobbiamo scrivere del codice all’interno del nostro file main.html.

Scriviamo il codice HTML

Ora è il momento di scrivere un primo file HTML in grado di essere eseguito come applicazione desktop. Anche in questo caso avremo tempo e modo di conoscere meglio sia NW.js sia Node.js, ma nel frattempo scriviamo un banalissimo file HTML come il seguente:

<!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>Titolo della finestra</title>
</head>
<body>
    <h1>LA MIA APPLICAZIONE DESKTOP IN NW.JS</h1>
</body>
</html>

Ricordiamoci che il file main.html, in base a quanto dichiarato nel file package.json, deve trovarsi esattamente nella seguente posizione: /src/views/main.html.

Eseguiamo il progetto

Fatto tutto quanto sopra riportato, abbiamo finito. Dobbiamo soltanto verificare che il nostro progetto funzioni. Per farlo, apriamo il prompt dei comandi (o la Power Shell) di Windows, posizioniamoci nella root del nostro progetto (ossia all’interno della cartella nomeDelProgetto e digitiamo quanto segue (tra nw e il punto deve esserci uno spazio!):

nw .

Se abbiamo fatto tutto bene, dopo qualche secondo comparirà una finestra come la seguente
nw_prima_finestra

Discussione

Funzionato?
Bene, ma non abbiamo fatto ancora niente 😀
Ad esempio: un’applicazione desktop deve quasi certamente memorizzare dati e informazioni in modo persistente da qualche parte. Come facciamo a leggere e scrivere su disco fisso? E come facciamo a utilizzare una base di dati? E le eventuali comunicazioni tra le finestre?
Si può fare tutto ma serve tempo e studio…
La prima cosa da fare è studiare le API di NW.js. Ad esempio, dal seguente link http://docs.nwjs.io/en/latest/References/App/ si può leggere la documentazione dell’oggetto App che NW utilizza per consentire di accedere a informazioni della nostra applicazione. Dallo stesso link, sul menù di sinistra, scorrendo verso il basso, si possono trovare tutti gli altri oggetti di NW e imparare ad utilizzarli 🙂
Non basta.
Servirà senz’altro una base di dati.
Quale?
Le possiamo utilizzare tutte?
In questa sede si consiglia IndexedDB, un progetto del W3C e quindi cosa buona e giusta. Inoltre ci sono molte guide online su come interfacciarsi con questo DB ad oggetti e noSQL.

Inoltre i moduli caricati da Node.js non funzionano nello stesso modo su tutte le piattaforme. Pertanto per essere sicuri che tutto funzioni correttamente è opportuno lanciare un

npm install package.json

su ogni piattaforma su cui si desidera distribuire la propria applicazione desktop.

Infine prima o poi sarà necessario distribuire la nostra applicazione. Ci sono diversi modi per eseguire questo task. In questa sede si consiglia di utilizzare nwjs-builder-phoenix (https://github.com/evshiron/nwjs-builder-phoenix) non solo perché ci piace di più, ma soprattutto perché lo consigliano gli autori di NW.js 😉
È inoltre bene sapere che per distribuire la propria applicazione desktop è necessario distribuire in blocco i file presenti nella cartella dell’SDK (tranne nwjc, payload e chromedriver). Quindi è necessario copiare i file dell’SDK da qualche parte, magari in una cartella denominata dist all’interno del nostro progetto, e poi creare il pacchetto di distribuzione con tutto il contenuto della cartella.

Bene.
Abbiamo tutte le carte in regola per iniziare a studiare questo affascinante mondo.
Appena troverò il tempo, scriverò un altro articolo su come leggere e scrivere un file su disco e su come interfacciarsi con IndexedDB 😉
Intanto, se questo articolo ti è stato utile… allora potrebbe esserlo anche per qualcun altro. Quindi perché non lo condividi?

Hai letto questi articoli?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *