Node JS per principianti

Corso completo Web Developer - Parte 3 - 3.1

Introduzione

Benvenuto/a nella sezione Backend di questo corso! In questa sezione impareremo a scrivere codice lato server con Node JS.

Emanuele partiamo dalle fondamenta...che cosa vuol dire lato server?

Non preoccuparti, di tanto in tanto volontariamente utilizzo termini anche se non ci siamo ancora bene soffermati sulla loro spiegazione. Questo perchè quando affronteremo il concetto in questione avrai già sentito il termine e quindi ti sarà più facile connettere tutti i punti insieme.

Man mano che andiamo avanti vedremo che cosa significa lato server mentre stiamo praticando questo concetto. Per quanto la teoria è parte importante di quando si sta cercando d'imparare un nuovo concetto, la pratica aiuta molto di più a capire realmente il concetto e di conseguenza a ricordarlo.

Quindi man mano che andiamo avanti vedremo che cosa significa scrivere codice lato server (backend) rispetto a scrivere codice lato client (frontend).

Come funziona la Node REPL

Iniziamo finalmente a provare Node JS. Apriamo il terminale o la Windows Power Shell ed eseguiamo al suo interno la console di Node JS. Per farlo eseguiamo il comando node:

node

Come facciamo ad uscire dalla console di Node JS? E' molto semplice, basta digitare .exit e premere invio:

node

.exit

In realtà si può uscire dalla console in vari modi e .exit è solo un esempio. Vediamoli insieme:

• .exit
• Ctrl + C (per due volte di seguito)
• Ctrl + D

Questa che vedi è la console di Node JS, chiamata REPL (Read-Eval-Print-Loop).

Questa console ci permette di eseguire codice JavaScript in tempo reale. Vediamo un esempio:

node

console.log("Hello World")

Che cosa significa "Read Eval Print Loop" ? Praticamente significa che la console di Node JS legge il codice che scriviamo, lo esegue, stampa il risultato e aspetta per il prossimo comando per ripetere il processo.

Quindi all'interno della Node REPL puoi eseguire codice JavaScript allo stesso modo in cui lo faresti nella console del Browser o in un file JavaScript che viene eseguito nel browser.

Una cosa da tenere presente però è che alcune cose che abbiamo utilizzato nella sezione JavaScript della parte Frontend del corso non saranno disponibili in Node JS. Vediamo un esempio:

node

document // ReferenceError: document is not defined

Se per esempio provassimo ad eseguire document vedremo che questo non sarà disponibile. Questo perchè document fa parte di una API disponibile nel Browser e non in Node JS utilizzato nel Backend.

Un'altra API molto utilizzata nel Frontend ma che non è disponibile nel Backend è window.

Eseguire un file JavaScript con Node

Abbiamo visto come utilizzare la REPL ma questa è molto limitante in termini di utilizzo e logica che possiamo scrivere. Per poter scrivere della logica più complessa abbiamo bisogno di un vero e proprio file JavaScript che poi possiamo eseguire con Node JS.

Iniziamo a creare un file JavaScript. Crea una cartella per questa parte del corso e crea un file chiamato app.js. Al suo interno scrivi il seguente codice:

console.log("Hello World")

Ora eseguiamo il file app.js con Node JS. Per farlo eseguiamo il comando node nel terminale seguito dal nome del file:

const randomName = 'John Doe';
console.log(randomName); // John Doe

Assicurati di essere nella cartella dove hai creato il file app.js altrimenti il comando non funzionerà.

Come puoi vedere quando esegui soltanto il comando node la console REPL viene aperta mentre quando esegui il comando node e di seguito passi il nome del file questo verrà eseguito e vedrai l'output nella console.

Questo è come possiamo eseguire un file JavaScript nel Backend con Node JS! Complimenti per aver eseguito per la prima volta del codice basico lato server con Node JS!

L'obiettivo della parte Backend di questo corso è d'imparare le fondamenta dello Sviluppo Web. Magari ti starai chiedendo il perchè.

Lo Sviluppo Web è un'ottima porta d'ingresso nel mondo della programmazione. Vieni esposto/a a tanti concetti che sono transferibili in altri settori della programmazione.

Detto ciò, due cose importanti da sapere nel Backend con Node JS sono process e argv. Andiamoli a scoprire insieme cosa sono.

Cosa sono Process e Argv

process e argv sono due oggetti che sono disponibili in Node JS nel "global scope". Questo significa che sono a nostra disposizione ovunque scriviamo JavaScript lato server.

process è un oggetto che contiene informazioni sul processo corrente. Questo oggetto è molto utile per ottenere informazioni sul processo corrente.

Supponiamo di avere una cartella chiamata cataloghi e dentro di essa un file chiamato dati.txt. Se volessimo leggere il contenuto di questo file all'interno del nostro programma dovremmo specificare il percorso completo del file dati.txt.

Una funzione molto comune utilizzata con l'oggetto process è process.cwd() che ci permette di ottenere il percorso della cartella corrente.

Supponiamo che la cartella cataloghi sia la cartella in cui siamo locati nel terminale e che questa cartella si trovi sul Desktop, il percorso completo del file dati.txt sarà:

/Users/username/Desktop/cataloghi/dati.txt

Se volessimo ottenere il percorso completo del file dati.txt all'interno del nostro programma possiamo utilizzare process.cwd():

console.log(process.cwd()); // /Users/username/Desktop/cataloghi

Un'altra funzione molto utile è process.argv che ci permette di ottenere i parametri passati al programma quando viene eseguito.

Questo ci tornerà utile quando abbiamo una logica nel nostro file JavaScript che per funzionare ha bisogno di alcuni parametri.

Per esempio supponiamo di avere un file JavaScript che prende in input un nome e un cognome e stampa il nome completo. Possiamo passare questi parametri al programma quando lo eseguiamo con il comando node.

node app.js John Doe

In questo caso nota che eseguiamo il comando node dopodichè passiamo il nome del file app.js ed infine diamo due argomenti: John e Doe. Questi due sono i parametri che passiamo al programma quando viene eseguito. All'interno del programma possiamo accedere a questi parametri con process.argv.

Ora che abbiamo letto le basi di cwd e argv possiamo passare alla parte più interessante del corso e mettere in pratica questi concetti.

Nella prossima sezione impareremo che cos'è il modulo File System (fs) e come possiamo utilizzarlo con process.cwd() e process.argv per creare dei file che compongono la struttura base di un progetto: index.html, style.css e app.js.

Il modulo File System

Man mano che utilizzeremo Node JS scopriremo che questo ha tutta una serie di oggetti e funzioni che sono disponibili soltanto in Node JS e che sono assenti in JavaScript nel Frontend.

Questo perchè nonstante Node JS sia basato su JavaScript, la logica che viene sviluppata per il Backend risolve problemi diversi rispetto a quelli che vengono risolti con il Frontend (lato client e lato server).

Il modulo File System o fs è un modulo presente in Node JS e molto utile quando vogliamo lavorare con files e cartelle. Questo modulo ci permette di creare, leggere, modificare e cancellare files e cartelle nel nostro computer attraverso codice JavaScript. Interessante, no?! 😃

Perchè non proviamo ad automatizzare la creazione del modello base di un progetto Frontend che ha tre files: index.html, style.css e app.js? Questo ora lo possiamo fare attraverso l'utilizzo del modulo fs! 🚀

Ad esempio il nostro modello base di progetto potrebbe essere così:

NomeProgetto (cartella)
  - index.html
  - style.css
  - app.js

Iniziamo a scrivere codice JavaScript adesso!

touch boilerplate.js (in Windows PowerShell usa il comando "New-Item" al posto di "touch")

Ora apriamo il file boilerplate.js e scriviamo il seguente codice:

const fs = require('fs');

const folderName = process.argv[2] || 'Project';

try {
  fs.mkdirSync(folderName);
  fs.writeFileSync(`${folderName}/index.html`, '');
  fs.writeFileSync(`${folderName}/style.css`, '');
  fs.writeFileSync(`${folderName}/app.js`, '');
  console.log('folder and files created', folderName);
} catch (e) {
  console.log('something went wrong', e);
}

Spieghiamo cosa stiamo facendo.

Prima di tutto importiamo il modulo fs con const fs = require('fs');.

Dopodichè creiamo una costante folderName che contiene il nome della cartella che vogliamo creare. Il nome della cartella viene passato come argomento al programma quando viene eseguito. Se non viene passato alcun argomento il nome della cartella che verrà assegnto come default sarà Project.

A questo punto chiamiamo la funzione fs.mkdirSync che ci permette di creare la cartella del nostro progetto frontend.

Una volta che la cartella viene creata possiamo creare i files al suo interno. Quindi chiamiamo la funzione fs.writeFyleSync per creare i files index.html, style.css e app.js.

Abbiamo scritto il codice all'interno di un try/catch block per riuscire a gestire eventuali errori nel caso dovessero esserci.

Ora che abbiamo scritto il codice JavaScript possiamo eseguirlo con il comando node:

node boilerplate.js myNewProject

Al posto di myNewProject possiamo passare il nome che vogliamo dare alla cartella che verrà creata.

A questo punto avremo una nuova cartella con il nome che abbiamo passato al comando node ed al suo interno i files per un progetto base Frontend, tutto creato con Node JS!

Conclusione

Ed eccoci arrivati alla fine della prima lezione di programmazione web Backend con Node JS! 🎉

In questa lezione abbiamo imparato:

• Che cos'è la Node REPL
• Come eseguire un file JavaScript con il comando node
• Le basi di process.cwd() e process.argv
• Il modulo fs e come possiamo utilizzarlo per creare una cartella e dei files

È stata una bella lezione come introduzione al Backend, no? 😃

Nella prossima lezione andremo a vedere come possiamo integrare librerie di codice esterne nei nostri software attraverso l'utilizzo di NPM. Preparati! 🚀