Sviluppa la tua prima web app con Node JS

Come sai, Javascript è un linguaggio utilizzabile solo ed esclusivamente lato client, cioè, è eseguibile soltanto da un browser web. Node js, invece, è un sistema utilizzato per eseguire e sviluppare applicazioni Javascript lato server. Cioè, tramite Node.Js, Javascript è eseguibile da un server web.

Questo ci permette di sfruttare uno stesso linguaggio, sia per sviluppare il front-end di un’applicazione, sia per sviluppare il back-end. Cioè uno stesso linguaggio per sviluppare un’intera applicazione web.

Il comando, lato server, per eseguire applicazioni Node.Js è node, mentre, il suo Package Manager è npm. Attraverso il Package Manager, di Node.Js, è possibile installare moduli e librerie aggiuntive, che di volta in volta, sono necessarie per una determinata tipologia di applicazioni. Estendendo di fatto Node.Js.

In questa guida vedremo come realizzare una prima applicazione Node.Js sfruttando Visual Studio Code, il noto editor di testi open source della Microsoft.

---

LEGGI ANCHE: 5 alternative open source a Visual Studio Code

---

Visual Studio Code supporta vari linguaggi di programmazione, JavaScript e TypeScript sono presenti in modalità predefinita oltre alle funzionalità di debug di Node.js. Tuttavia, per eseguire un’applicazione Node.js, dovrai installarlo sul tuo computer.

Per poter iniziare correttamente, in questo video, troverai una guida utile su come installare Node.js sul tuo computer. 

Il Node Package Manager è già incluso nella distribuzione Node JS. Dovrai solo aprire un nuova finestra del terminale o prompt dei comandi e, potrai accedere direttamente ai comandi node e npm da riga di comando. Se così non fosse, assicurati che la directory di installazione di node js sia presente all’interno della variabile d’ambiente PATH.

Oppure, per verificare che Node js sia installato correttamente sul tuo computer, apri il terminale e digita node –version e dovresti vedere a video la versione corrente di Node.js installata.

1. Iniziamo con il classico Hello World con Node.JS

Iniziamo creando l’applicazione Node.js più semplice possibile, il classico “Hello World”. Quindi, crea una cartella vuota e chiamala “hello“. In ambiente Windows, cerca e apri VS Code sul tuo computer. In ambiente Linux, apri il terminale, e digita le seguenti righe di codice:

mkdir hello
cd hello
code .

Il simbolo punto ‘.’ fa riferimento alla cartella corrente, quindi VS Code si avvierà e aprirà la cartella Hello. Essendo Visual Studio Code un editor di testo avanzato, non gestisce progetti, come fa Visual Studio, per cui, la cartella hello e i file presenti al suo interno, rappresentano, per VS Code, il progetto da gestire. Quindi, dalla barra degli strumenti di Esplora file, premere il pulsante Nuovo file:

e nominare il file appena creato come app.js:

L’utilizzo dell’estensione js, del file, informa VS Code che il file app.js, va interpretato come file JavaScript e valuterà il suo contenuto con l’interprete del linguaggio JavaScript presente per default in VS Code. Ad ogni modo, fai riferimento a questa guida del linguaggio JavaScript di VS Code per ulteriori informazioni sul supporto a JavaScript.

Ora, inserisci le seguenti righe di codice all’interno del file app.js, creando una semplice variabile stringa e inviando il contenuto della stringa alla console:

var msg = 'Hello World';
console.log(msg);

E’ da notare che, quando in VS Code si digitano dei comandi da tastiera, la funzionalità IntelliSense dell’editor, presenta automaticamente a video tutto ciò che ha a che fare con l’oggetto console. Pertanto vedrai visualizzati tutti i metodi e le proprietà gestite da questo tipo di oggetto.

Inoltre, VS Code, ha già capito che msg, è una stringa inizializzata a “Hello World”. Pertanto, se digiti msg, IntelliSense mostrerà tutte le funzionalità disponibili su una stringa.

Dopo aver apportato tutte le modifiche al file app.js, puoi salvare il file premendo la combinazione di tasti (Ctrl+S).

2. Come eseguire Hello World

Eseguire app.js è molto semplice, basta digitare da terminale il seguente comando:

node app.js

Dovresti vedere l’output “Hello World” sul terminale e successivamente Node.js passerà il controllo a Vs Code. Per testare le applicazioni all’interno di VS Code non è necessario aprire e chiudere in continuazione l’editor, ma, puoi sfruttare il terminale integrato in VS Code e di conseguenza puoi utilizzarlo per eseguire i comandi direttamente all’interno della sua shell integrata. Quindi, puoi eseguire Node.js direttamente dal terminale di Vs Code ed evitare di uscire dall’editor durante l’esecuzione del programma.

Pertanto dal menùprincipaledi VS Code recati su Visualizza > Terminale ( Ctrl+ò) e si aprirà il terminale integrato dove potrai eseguire il seguente comando: node app.js

3. Esegui il Debug con Node.JS

Come tutti gli editor che si rispettano, VS Code viene fornito con un debugger già preinstallato per le applicazioni Node.js. Il Debug è uno strumento fondamentale per uno sviluppatore, infatti ti permette di eseguire passo-passo il codice, monitorando variabili e oggetti in fase di esecuzione. Adesso, proviamo a lanciare il debug della nostra semplice applicazione Hello World.

Come tutti i debug, anche questo si attiva nel punto stabilito precedentemente dal programmatore. Questo punto si chiama BreakPoint, o punto di interruzione.

Per impostare un punto di interruzione, o un BreakPoint, in app.js, devi posizionare il cursore presente nell’editor sulla riga di codice interessata e premere il tasto funzione F9, o, cliccare con il pulsante sinistro del mouse nel margine sinistro dell’editor accanto ai numeri di riga. Vedrai apparire un cerchio rosso accanto alla riga di codice come conferma della corretta impostazione del BreakPoint in quel preciso punto dello script.

A questo punto non ti resta che eseguire lo script, app.js, avviando il debug, e cioè, seleziona la voce Esegui o Run, presente nel menù principale, e successivamente premere F5:

Il tuo punto di interruzione verrà raggiunto, in men che non si dica, e potrai visualizzare gli oggetti e le variabili che passo-passo Node.js inizializzerà. Nota che VS Code visualizza una barra di stato di colore diverso per indicare che è in modalità di Debug e viene visualizzata anche la console di debug. Tramite la console di debug, avrai la possibilità di eseguire una riga alla volta lo script e monitorare eventuali oggetti e variabili presenti.

Adesso proveremo a creare un altro tipo di applicazione molto usata in Node.js. Quindi chiudi tutto in VS Code e proviamo a creare un’applicazione Express Node.js. Se vuoi, puoi anche eliminare la cartella “Hello“, creata precedentemente, poiché non è più necessaria.

4. Un semplice server web scritto con Node.JS

Node.js ha una caratteristica fondamentale che, lo distingue da javascript. Parlo della programmazione ad eventi asincroni. In questo esempio, è mostrato come creare con poche semplici righe di codice un vero e proprio server web perfettamente funzionante. Il codice seguente, non ha bisogno di spiegazioni, infatti, la parte di codice evidenziata non fa altro che istanziare un oggetto server che, una volta invocato tramite il browser, stamperà la classica frase Hello World nella finestra del browser stesso.

Sostanzialmente il codice Node.JS, sotto riportato, resterà inattivo fino a quando nella barra degli indirizzi del browser, non verrà invocato la seguente URL: http://localhost:3000, prima però è necessario avviare lo script tramite: node nomescript.js.

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log('Server avviato su http://${hostname}:${port}/');
});

Ma torniamo a noi, cosa c’entra in tutto questo la programmazione ad eventi asincrona? Beh, una funzione di CallBack è una funzione passata come parametro ad un’altra funzione. Ad esempio, in questo codice Javascript, la funzione di CallBack è un EventListener, invocato nel momento in cui si clicca sul pulsante HTML con ID = ‘Button1’:

document.getElementById("Button1").addEventListener("click", function() {
console.log("Tasto premuto");
}, false);

In Node.JS questo modo di programmare rientra nella normalità delle cose. Nel codice riguardante il nostro semplice server web, la funzione di callback Listen, viene richiamata nel momento in cui il browser invoca l’indirizzo web specificato nello script stesso. Questo permette a Node.JS di estendere le funzioni, in questo caso Listen, personalizzandola secondo quanto previsto dallo sviluppatore.

Inoltre, Node.JS, ha la capacità di eseguire il codice in modalità bloccante e non bloccante. Questo significa che, esistono in Node.JS, delle funzioni a cui è possibile passare delle callback, che eseguono il codice in modalità asincrona o sincrona.

Nell’esempio che segue, leggeremo un file di testo in modalità sincrona, cioè bloccante, in quanto readFileSync non prevede funzioni di callback da chiamare:

var fs = require("fs");

var data = fs.readFileSync('input.txt');

console.log(data.toString());

In quest’altro esempio, leggeremo un file di testo in modalità asincrona, cioè non bloccante, in quanto a readFile è stata passata una funzione di callback, che leggerà input.txt in modalità asincrona:

var fs = require("fs");

fs.readFile('input.txt', function (err, data) {
    console.log(data.toString());
});

console.log('Questo messaggio viene elaborato mentre readFile legge input.txt');

5. Come creare un’applicazione Express Node.JS

Express è un framework molto popolare per la creazione e l’esecuzione di applicazioni Node.js. Express ti permette di creare un’applicazione Node.js con determinate caratteristiche, utilizzando lo strumento Express Generator. Express Generator viene fornito come modulo separato, per cui per installarlo devi ricorrere al famoso node package manager, e cioè, npm.

Prima di proseguire, sempre tramite la console dei comandi o il terminale, verifica di aver npm installato correttamente sul computer, quindi, digita npm –help da terminale, e dovresti vedere la documentazione di utilizzo di npm.

Nel caso in cui, npm non fosse installato, digita questo comando dal terminale di VS Code: npm npm.

Dopo di che devi necessariamente installare l’Express Generator digitando le seguenti righe di codice da un terminale:

npm install -g express-generator

Lo switch –g, presente nel comando precedentemente eseguito, installa l’Express Generator come strumento globale sulla tua macchina e di conseguenza potrai eseguirlo da qualsiasi directory.

Siamo arrivati finalmente al punto in cui dobbiamo creare la nostra prima applicazione express. L’applicazione express che creeremo si chiamerà myExpressApp. Quindi, ora digita questo comando da terminale:

express myExpressApp --view pug

Il comando express, creerà una nuova cartella chiamata myExpressApp, contenente l’intera struttura della tua applicazione. I parametri –view pug, indicano al generatore di codice di utilizzare il motore pug per la generazione dell’intera struttura dell’applicazione.

Per installare tutte le dipendenze dell’applicazione, cioè, tutte le librerie necessarie a Express per funzionare all’interno di myExpressApp, devi posizionarti all’interno della nuova cartella creata ed eseguire npm install:

cd myExpressApp
npm install

A questo punto, dovremmo verificare che l’applicazione funzioni. L’applicazione Express generata ha un file, nominato package.json, che include uno script di startup che verrà eseguito, da terminale, con questo comando:

npm start

Verrà avviato il server Web Node.js e da questo momento in poi ti sarà possibile accedere a http://localhost:3000 per vedere l’applicazione myExpressApp in esecuzione all’interno del tuo browser web preferito.

6. Come modificare e personalizzare un’applicazione Express Node.JS

E’ logico che Express Node.js, crea una struttura di base dell’applicazione web da sviluppare, mentre il resto va specificato dal programmatore successivamente e modificando opportunamente alcuni file prodotti tramite l’Express Generator. In questo video, avrai modo di vedere come prendere possesso di un’applicazione sviluppata con Express Node.JS.

7. Imparare Node.JS in poco più di un’ora

In questo video tutorial avrai modo di imparare a programmare con Node.JS, in poco più di un’ora. Questo ti permetterà di esplorare tutte le caratteristiche del framework e tutti i suoi punti di forza.