Come diventare Full Stack Developer con Node Js ed Express Js

Scoprire le tecniche e, di conseguenza, acquisire le basi per diventare un Full Stack Developer sfruttando due strumenti d’eccezione, come, Node Js ed Express Js, ti darà la possibilità, come sviluppatore, di accedere ad ampie offerte lavorative nel mondo dello sviluppo web e della programmazione.

Fino a poco tempo fa, ma ancora oggi, si sente parlare spesso di sviluppo Backend e di sviluppo Frontend. Due termini che hanno segnano il confine tra, Sviluppo lato client (Backend) e sviluppo lato server (Frontend).

Negli anni, in questi due settori, si sono avvicendate figure professionali differenti, da un lato, Grafici e sviluppatori di interfacce utenti, dall’altro, sviluppatori di API e procedure lato server per l’accesso a banche dati, o comunque, risorse lato server.

Oggigiorno, queste due figure, possiamo ritrovarle in un’unica figura professionale, il Full stack Developer. Diventare un Full Stack Developer sfruttando due strumenti, come, Node Js ed Express Js, ti proietterà, con grande determinazione, nello straordinario mondo dello sviluppo web.

Prima di accingerci a capire nel dettaglio cosa fa un Full Stack Developer, abbiamo bisogno di installare, sul nostro computer, quegli strumenti gratuiti, che ci daranno la possibilità di creare quelle applicazioni web, tanto richieste oggi, e che prendono il nome di applicazioni serverless.

---

LEGGI ANCHE: Sviluppa la tua prima web app con Node.JS

---

1. Software necessario

Come ho anticipato precedentemente, ci sono dei software da installare sul computer, software gratuiti e scaricabili liberamente da internet. Il primo tra tutti è l’editor di testi, orientato allo sviluppo, Visual Studio Code. Questo Editor, distribuito dalla Microsoft è l’editor per eccellenza utilizzato da milioni di sviluppatori in tutto il mondo.

Oltre a Visual Studio Code è necessario scaricare altri due strumenti, Node Js e Express Js. Entrambi gratuiti e godono, ormai, grande popolarità e successo.

2. Installare Visual Studio Code

Visual Studio Code è scaricabile liberamente a questo indirizzo, dove potrai scegliere la versione corretta per il tuo sistema operativo. Ad ogni modo, Visual Studio Code si installa eseguendo il classico setup.exe, questo è tutto quello che è richiesto. Comunque, ti sarà utile seguire questo semplice video tutorial, dove avrai modo di vedere le straordinarie funzionalità di questo editor.

3. Installare Node Js

Prima abbiamo parlato di applicazioni serverless, cioè, applicativi web eseguibili senza l’ausilio di un server vero e proprio. Tanto per intenderci, a differenza di PHP, che per essere eseguito ha bisogno di un server web, come ad esempio, Apache, le applicazioni serverless, invece, vengono eseguite all’interno di un server web, dichiarato esplicitamente dallo sviluppatore in pochissime righe di codice.

Node Js compie questa magia, è un framework capace di eseguire javascript lato server. Ma questa non è la caratteristica più interessante di Node Js. Il suo punto di forza risiede nell’esecuzione asincrona di codice e nell’architettura event-driven non bloccante.

Inoltre, Node Js, integra una libreria che ha trasformato questo framework, nel framework di punta per lo sviluppo lato server. La libreria in questione è Express Js. Più avanti, nella guida, scoprirai nel dettaglio cos’è Express Js è perché è fondamentale nello sviluppo lato server.

Adesso, Scarica e installa Node Js, da questo indirizzo web, oppure, digita node js download nella barra di ricerca del tuo browser preferito, sicuramente il primo link utile restituito dal motore di ricerca riguarderà il download di node js dalla sua pagina ufficiale. Successivamente, all’installazione del framework, verifica la corretta installazione eseguendo questo semplice comando da prompt dei comandi di Windows:

node -v

In questo modo Node Js, se installato correttamente, risponderà visualizzando a video la versione corrente del framework.

Nel seguente video tutorial potrai vedere praticamente cos’è Node.js, le differenze con PHP, e cosa si intende per programmazione sincrona e asincrona.

---

LEGGI ANCHE: SVN & GIT: Il controllo di versione del codice sorgente

---

4. Installare Express Js

Dopo aver installato Node Js, l’installazione di Express Js è un’operazione ancora più semplice della precedente. A questo punto, devi aprire il prompt dei comandi, e creare una directory a tuo piacimento, noi per comodità la chiameremo myapp, che conterrà tutti gli script della tua prima web application con Node Js e Express Js. Quindi digita questi comandi:

mkdir myapp

Dopo aver digitato ed eseguito il comando mkdir, digita anche il seguente comando:

cd myapp

Adesso, devi eseguire il comando npm init, per creare un file, package.json, che conterrà alcuni metadati, tra cui, una descrizione del progetto, la versione del progetto, informazioni sulla licenza e, infine, dati di configurazione. Tutti dati vitali per la nostra prima web application.

Quindi digita ed esegui il seguente comando:

npm init

Dopo l’esecuzione del comando npm init, il sistema ti chiederà di specificare tutti i metadati menzionati precedentemente. Per quanto riguarda l’entry point, della nostra web application, cioè il file che verrà eseguito per primo e che farà da startup per l’applicazione, per default corrisponde a index.js, tu puoi lasciare index.js oppure specificare un file con estensione js, come ad esempio app.js.

Quindi, prosegui specificando i metadati che preferisci, premi il tasto invio e prosegui così fino alla fine. Il file package.json, al termine, avrà più o meno il contenuto evidenziato in giallo, nella figura seguente:

Tranquillo abbiamo quasi finito. Digita quest’ultimo comando, nel prompt dei comandi, ed installerai express js nella tua web app. Questo comando creerà la struttura dell’intera applicazione, con tutti i file necessari.

5. La tua prima Web Application Serverless

Adesso siamo giunti al nocciolo della fase di sviluppo vera e propria. Innanzitutto, apri Visual Studio Code, a tal proposito ti basta digitare il comando code e premere invio.

Successivamente, come evidenziato in figura, clicca sulla voce di menu Terminal->New Terminal. Questa procedura aprirà il prompt dei comandi, direttamente in Visual Studio Code. Digita, nel terminale, cd myapp.

Ora, clicca sulla voce di menu File->Open Folder e seleziona la cartella myapp, che hai creato precedentemente con il comando mkdir myapp. Con questa procedura potrai accedere liberamente a tutto il contenuto di myapp e, creare e modificare i file esistenti, come package.json.

Adesso, dobbiamo creare e modificare il contenuto del file app.js, specificato come entry-point in package.json, ricordi…?

Quindi, clicca sull’icona raffigurante una cartella con il simbolo + e, digita app.js. Hai appena creato il file app.js, indicato come entry-point. Copia e incolla questo codice all’interno della finestra dell’editor, relativa al contenuto di app.js in Visual Studio Code.

// App.js
var express = require('express');
var app = express();

// la rotta di default
app.get('/', function(req,res){
    res.send('Hello World!');
});

// mette in ascolto il server web sulla
// porta 3000. Dopo l'esecuzione del server
// la callback indicata, stamperà a video
// il messaggio di corretto avvio del server.
app.listen(3000, function(){
    console.log('App sta ascoltando su localhost:3000');
});

6. Avvia la Web Application Serverless

Nel file app.js, in sole 6 righe di codice è stato implementato tutto quello che occorre ad un applicativo, per poter funzionare. Le ultime due righe, in verde, implementano un server web. Per quanto ti possa sembrare strano sono proprio queste ultime righe di codice ad eseguire la web application, cioè fanno da server web.

Le righe, evidenziate in rosso, contengono l’istruzione da eseguire, quando viene rilevata la rotta di default. Cioè, quando sulla barra degli indirizzi del browser digitiamo l’indirizzo base, e cioè, http://localhost:3000/, viene eseguito il seguente codice:

res.send(‘Hello World’);

Express Js, funziona proprio così, cioè, lo sviluppatore implementerà delle rotte a cui verrà associato del codice da eseguire quando quella rotta viene intercettata.

Ad ogni modo, per avviare il nostro server web, basta digitare nel terminale di Visual Studio Code, il seguente comando:

node app.js

A questo punto apri il browser e digita il seguente indirizzo: http://localhost:3000/ la rotta corrispondente a ‘/’ verrà intercettata e il browser visualizzerà il seguente output:

7. Il sistema di routing di Express Js

Nel file app.js, come hai potuto notare, il comando: app.get(‘/’, function(req,res) intercetta la rotta di default con richiesta http tramite metodo get. Come ben sai, esistono vari metodi per effettuare una richiesta http, ad esempio i metodi più invocati sono: get e post. Nel caso in cui, invocassimo la rotta di default con il metodo post, l’istruzione andrebbe modificata in: app.post(‘/’, function(req,res).

Ad ogni modo, il codice app.all(‘/’, function(req,res), intercetterebbe la rotta di default, con qualsiasi metodo di richiesta http effettuato.

È possibile, sempre nel file app.js, indicare altre rotte, ad esempio, questo codice intercetta la rotta per un eventuale richiamo di una pagina di login.

app.get('/login', function(req,res){
   res.sendFile(path.join(__dirname + '/login.html'));
});

Per cui quando nella barra degli indirizzi del browser, digitiamo il seguente URL: http://localhost:3000/login il codice corrispondente, inserito immediatamente dopo la prima rotta nel file app.js, verrà eseguito, cioè, la pagina web login.html verrà spedita al browser.

Spero che questa guida ti sia stata di aiuto, per capire a fondo una tecnologia che rende uno sviluppatore unico nel settore della programmazione web. Ti consiglio, per completare il percorso finora seguito, di guardare questo video tutorial su Node e express Js. potrai vedere dal vivo tutto quanto esposto in questa guida.