Node.js - Framework Express

Ciao, aspiranti programmatori! Oggi ci imbarcheremo in un viaggio entusiasmante nel mondo di Node.js e del framework Express. Come il vostro amico insegnante di scienze informatiche del quartiere, sono entusiasta di guidarvi in questa avventura. Non preoccupatevi se non avete mai scritto una riga di codice prima – inizieremo dal principio e scaleremo insieme.

Cos'è Express?

Prima di immergerci, parliamo di cosa sia effettivamente Express. Immagina di costruire una casa. Potresti iniziare da zero, facendo i tuoi mattoni e tagliando il tuo legno. Oppure, potresti usare materiali pre-fatti che rendono il lavoro più facile e veloce. Express è come quei materiali pre-fatti, ma per le applicazioni web. È un framework che fornisce un set robusto di funzionalità per applicazioni web e mobili, rendendo più facile e veloce costruire applicazioni web con Node.js.

Installazione di Express

Iniziamo installando Express. Prima di tutto, assicurati di avere Node.js installato sul tuo computer. Se non lo hai, vai sul sito ufficiale di Node.js e scaricalo.

Una volta installato Node.js, apri il tuo terminale (o la riga di comando se sei su Windows) e digita il seguente comando:

npm install express

Questo comando utilizza npm (Node Package Manager) per installare Express. Immagina npm come una cassetta degli attrezzi magica che contiene una serie di strumenti utili (chiamati pacchetti) che possiamo utilizzare nei nostri progetti Node.js.

Esempio Hello World

Ora che abbiamo installato Express, creiamo il nostro primo applicazione Express. Inizieremo con l'esempio classico "Hello, World!".

Crea un nuovo file chiamato app.js e digita il seguente codice:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

Ecco una spiegazione dettagliata:

1. Importiamo il modulo Express e creiamo un'applicazione Express.
2. Definiamo un numero di porta (3000 in questo caso).
3. Configuriamo una rotta per l'URL di base ('/') che invia "Hello, World!" come risposta.
4. Indichiamo alla nostra applicazione di ascoltare sulla porta specificata.

Per eseguire questa applicazione, vai al tuo terminale, naviga nella directory che contiene app.js, e esegui:

node app.js

Ora, apri il tuo browser web e vai a http://localhost:3000. Dovresti vedere "Hello, World!" visualizzato sulla pagina. Congratulazioni! Hai appena creato la tua prima applicazione Express!

Oggetto Application

Nel nostro esempio precedente, abbiamo creato un oggetto applicazione Express:

const app = express();

Questo oggetto app è centrale nel modo in cui utilizziamo Express. Ha metodi per il routing delle richieste HTTP, la configurazione dei middleware, il rendering delle viste HTML, la registrazione di un motore di template e altro ancora.

Ecco alcuni dei metodi più comunemente utilizzati dell'oggetto app:

Metodo	Descrizione
app.get()	Route le richieste HTTP GET al percorso specificato con le funzioni di callback specificate
app.post()	Route le richieste HTTP POST al percorso specificato con le funzioni di callback specificate
app.use()	Monta la funzione o le funzioni di middleware specificate al percorso specificato
app.listen()	Bind e ascolta le connessioni sull'host e sulla porta specificati

Routing di Base

Il routing si riferisce a come un'applicazione risponde a una richiesta del client per un endpoint specifico, che è un URI (o percorso) e un metodo di richiesta HTTP specifico (GET, POST, ecc.).

Espandiamo la nostra applicazione per includere più rotte:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/about', (req, res) => {
res.send('This is the about page');
});

app.post('/submit', (req, res) => {
res.send('Got a POST request');
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

In questo esempio, abbiamo aggiunto due nuove rotte:

• Una rotta GET per '/about' che restituisce "This is the about page"
• Una rotta POST per '/submit' che restituisce "Got a POST request"

Per testare la rotta POST, avrai bisogno di uno strumento come Postman, o puoi creare un modulo HTML che invia a questa rotta.

Servire File Statici

Spesso, vorrai servire file statici come immagini, file CSS e file JavaScript. Express fornisce una funzione di middleware integrata express.static per questo scopo.

Creiamo una directory chiamata public nella nostra cartella del progetto e mettiamo un file immagine ( diciamo cat.jpg) al suo interno. Poi, modificiamo il nostro app.js come segue:

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/cat', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'cat.jpg'));
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

In questo esempio, abbiamo fatto due cose:

1. Abbiamo utilizzato app.use(express.static('public')) per servire file statici dalla directory 'public'.
2. Abbiamo aggiunto una nuova rotta '/cat' che invia il file cat.jpg come risposta.

Ora, puoi accedere alla tua immagine del gatto direttamente a http://localhost:3000/cat.jpg, o attraverso la rotta '/cat' che abbiamo definito.

Ecco fatto! Abbiamo coperto le basi di Express, dalla installazione al servizio di file statici. Ricorda, imparare a codificare è come imparare una nuova lingua – richiede pratica e pazienza. Non essere scoraggiato se non capisci tutto subito. Continua a sperimentare, continua a costruire e, soprattutto, divertiti!

Nella nostra prossima lezione, approfondiremo i middleware di Express e le tecniche di routing avanzate. Finora, buon coding!

Credits: Image by storyset