Abbiamo deciso di creare la nostra applicazione desktop tramite tecnologie web. Abbiamo diverse scelte tra cui, la più famosa, Electron. Tuttavia abbiamo deciso di utilizzare NW.js. Però questo è il nostro primo progetto con NW.js, quindi siamo totalmente a digiuno di tale tecnologia.
In questo caso, siamo nel posto giusto.
Di seguito troveremo i punti minimi necessari per preparare l’ambiente e lanciare il nostro primo progetto NW.js.
PUNTO 0:
Disinstallare NODE.js, se installato.
PUNTO 1:
Installare NVM (consente di utilizzare diverse versioni di NODE.js a seconda di quella che serve). Per Windows, si può scaricare NVM da qui:
https://github.com/coreybutler/nvm-windows
Clicca sul pulsante “Download Now!”, scorri verso il basso e scarica il file nvm-setup.exe. È possibile verificare la corretta installazione di NVM tramite il comando:nvm version
PUNTO 2:
Verifica la presenza di NODE.js tramite NVM. Digita:nvm list
Se ci sono versioni di NODE.js già installate vengono mostrate a video.
Utilizza il seguente comando NVM per installare l’ultima versione stabile di NODE.js:nvm install lts
PUNTO 3:
Creare la cartella del progetto NW.js. Dagli il nome che più ti piace, magari evitando gli spazi se composta da più parole.
PUNTO 4:
All’interno della cartella appena creata, creare il file package.json.
Struttura di base del file package.json (puoi fare copia/incolla e modificarlo in seguito).
{
"name": "prima-app-nw",
"version": "1.0.0",
"description": "La mia prima applicazione con NW.js",
"author": "Alessandro Stella",
"license": "ISC",
"main": "main.html",
"window": {
"title": "Titolo della finestra",
"width": 1280,
"height": 700,
"position": "center",
"min_width": 1024,
"min_height": 650
}
}
È anche possibile creare il file package.json tramite procedura guidata. Digitare, dalla root del progetto:npm init
PUNTO 5:
Creare un file main.html minimale, del tipo:
<!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>
<p id="pippo"></p>
</body>
<script>
console.log(process.versions);
document.getElementById('pippo').innerHTML = process.versions['node'];
</script>
</html>
Tale file deve avere lo stesso nome di quello indicato dalla proprietà “main” nel file package.json. Il codice qui sopra, ci fornisce, in console, tutte le info necessarie su NW e NODE.
PUNTO 6:
Creare le cartelle del progetto. Una tipica struttura potrebbe essere la seguente:
cartella_del_progetto/
|-- src/
|-- |-- fonts/
|-- |-- icons/
|-- |-- imgs/
|-- |-- styles/
|-- |-- scripts/
|-- |-- views/
|-- main.html
|-- package.jsonPUNTO 7:
Installare l’SDK di NW.js in sviluppo (dev) per il progetto. Dalla root del progetto, digitare:npm install --save-dev nw@sdk
Per sapere quale versione NW è stata installata, basta aprire il file package.json (è stato modificato dopo l’esecuzione del comando), oppure digitare, dalla root del progetto:npm list nw
PUNTO 8:
[opzionale] Scaricare la versione “normal” dal sito ufficiale di NW.js (servirà per la distribuzione del progetto in produzione). Oppure, rigorosamente dalla root del progetto, lanciare questo comando PRIMA della distribuzione del progetto per sostituire l’SDK con il “normal”:npm install nw --save
PUNTO 9:
Verificare la versione di NODE.js richiesta dalla versione di NW.js che sta utilizzando il nostro neonato progetto.
Per sapere quale versione di NODE.js è richiesta dalla versione NW.js installata, possiamo procedere in diversi modi. Il più semplice è entrare nella cartella node_modules che è stata creata in automatico nella root del nostro progetto. Poi entrare nella cartella nw e nella sua sottocartella contenente l’SDK di NW.js che abbiamo installato al punto 7. Dentro tale cartella, doppio click sul file nw.exe. Comparirà la schermata che segue in cui, in basso a destra, possiamo leggere la versione di NODE.js richiesta (in questo caso v24.5.0).
PUNTO 10:
Verificare (è fondamentale!!!) la versione di NODE.js attualmente attiva. Per farlo, dalla linea di comando digitiamo:nvm current
Bisogna assolutamente che la versione di NODE.js attiva sia quella richiesta dalla versione di NW.js con cui stiamo realizzando il progetto. Quindi, rifacendoci all’immagine qui sopra, il comando nvm current deve rispondere con v24.5.0. Se risponde con un’altra versione, allora dobbiamo lanciare il comando:nvm list
Tale comando fornisce tutte le versioni di NODE.js installate sulla nostra macchina. Se tra le versioni non c’è la versione 24.5.0, la dobbiamo installare e attivare. Altrimenti ci basta attivarla. I comandi per installare e attivare una specifica versione di NODE.js, tramite NVM, sono i seguenti:nvm install <versione di node> nvm use <versione di node>
Quindi, rifacendoci a quanto visto nell’immagine qui sopra che ci comunica Node v24.5.0:nvm install 24.5.0nvm use 24.5.0
Adesso il comando nvm current deve rispondere con v24.5.0. Non procediamo oltre se non otteniamo il risultato voluto!
PUNTO 11:
Lanciamo il progetto.
Dalla root del progetto, digitiamo (compreso il punto finale e lo spazio tra nw e il punto!!!):npx nw .
Bonus nwjs-builder
Quando saremo pronti a distribuire le nostra applicazione, avremo bisogno di creare i file per distribuirla. La cosa potrebbe essere tutt’altro che semplice. Per questo motivo, ho creato NWJS-BUILDER.
Tramite una semplice (spero!) interfaccia grafica, il sistema consente di creare una cartella dentro la quale viene creato il file eseguibile (per Windows a 64 bit) della propria applicazione realizzata tramite NW.js.
Conclusioni
Siamo giunti alla fine di questo percorso.
Se tutto è filato liscio, abbiamo la nostra prima applicazione NW.js pronta per essere programmata. Molte, moltissime le cose che dobbiamo imparare adesso, ma intanto il sistema è pronto ed è configurato correttamente.
Siamo pronti!
Prossimo passo?
Leggiamo la documentazione ufficiale: https://docs.nwjs.io/.