Come creare REST API con Express e Node.js

Introduzione

In questo tutorial ti verrà mostrato come creare una REST API utilizzando Node.js e il framework Express, guidandoti nella creazione di una semplice app per la gestione di libri.

REST API sta per REpresentation State Transfer (REST) e Application Programming Interface: con questo nome ci si riferisce ai metodi tramite cui un client può richiedere informazioni dal server seguendo il protocollo HTTP. L'applicazione di tali metodi trova impiego nella gestione, tramite il protocollo HTTP, di dati su cui vengono eseguite operazioni molto frequenti, definite come CRUD (Create, Read, Update, Delete).

Per seguire questa guida, dovresti avere una certa dimestichezza con Node.js e Express, oltre a una conoscenza base del linguaggio Javascript e HTML.

ExpressJS è una libreria per Node che fornisce alcune funzionalità per gestire i server HTTP. Express è semplice da installare e imparare ad usare, oltre a essere facilmente personalizzabile tramite applicativi middleware.

La corrispondenza tra CRUD e richieste HTML

Ci sono alcuni tipi di richieste HTML che potrai usare per eseguire le cosiddette CRUD tasks:

• POST: usato per inviare dati (crea o modifica entità nel server)
• GET: usato per richiedere dati dal server (legge i dati)
• PUT: usato per sostituire le risorse già esistenti con quelle inserite (aggiorna i dati)
• DELETE: usato per cancellare una entità dal server

Come mostrato, le operazioni CRUD possono quindi essere riprodotte con questi metodi del protocollo HTTP.

Comprese le parti in gioco, è il momento di provare a coinvolgerle per costruire un piccolo progetto.

In questo caso, sarai guidato nella costruzione di un app che memorizzi le principali informazioni sui libri.

Impostare il progetto Node.js

Per prima cosa dovrai connetterti al tuo server tramite una connessione SSH. Se non l’hai ancora fatto, ti consigliamo di seguire la nostra guida per connetterti in sicurezza con il protocollo SSH. In caso di server locale puoi passare al punto successivo e aprire il terminale del tuo server.

Inizializza un nuovo progetto di Node.js:

$ npm init

Ti verranno chieste alcune informazioni da specificare per inizializzare i dati del tuo progetto.

Ora, installa il web framework Express tramite il comando:

$ npm install --save express

Creare un Endpoint

Inizia provando a costruire una piccola app che visualizzerà il messaggio "Hello World" quando verrà aperta nel browser.

Comincia creando un file chiamato hello-world.js e importa il framework Express:

$ nano hello-world.js

Al suo interno, inserisci le seguenti dichiarazioni:

const express = require('express');

const app = express();

Includi anche la porta:

const port = 3000;

Ora, puoi creare un endpoint GET. Quando l'utente toccherà l'endpoint, potrà visualizzare il messaggio "Hello world".

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

Volendo far scattare questo endpoint nella homepage, basterà inserire il carattere / come valore nella parentesi di app.get.

A questo punto, inizializza i client:

app.listen(port, () => console.log(`Hello world app listening on port ${port}!`))

Adesso, puoi mandare l'applicazione in esecuzione e visitare l'endpoint tramite il browser:

$ node hello-world.js

In primis, otterrai un ouput di conferma all'interno del terminale:

Hello world app listening on port 3000!

Collegandoti all'indirizzo IP del tuo server o al localhost e specificando il numero di porta, potrai osservare l'esecuzione dell'app:

Usare un Middleware con Express

Un middleware è un'estensione del server express che fornisce delle funzionalità che agiscono "nel mezzo" di una richiesta. Alcune estensioni possono essere morgan per il login, multer per gli upload di files multipli, etc..

Per installarne alcuni, puoi cominciare con body-parser, che ti aiuterà a decodificare il corpo di una richiesta HTTP:

$ npm install --save body-parser

Un altro middleware utile è CORS, abbreviazione di cross-origin resource sharing:

$ npm install --save cors

Creare API REST

Aggiungere libri

Per cominciare a costruire l'app sui libri, inizia creando il file book-api.js:

$ nano book-api.js

Al suo interno, incolla il seguente codice:

const express = require('express')
const bodyParser = require('body-parser');
const cors = require('cors');

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


let books = [];

app.use(cors());


app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post('/book', (req, res) => {
    const book = req.body;


    console.log(book);
    books.push(book);

    res.send('Book is added to the database');
});

app.listen(port, () => console.log(`Hello world app listening on port ${port}!`));

Vengono di seguito presentati alcuni passaggi e punti del codice su cui fare attenzione:

• body-parser viene importato e passato al metodo app.use per essere abilitato come middleware della istanza di app Express.
• l'array books viene utilizzato per salvare la tua collezione di libri. Al suo posto, si sarebbe potuto trovare un database.
• ci sono diversi tipi di corpo nelle richieste HTTP. Per esempio, application/x-www-form-urlencoded è il corpo di default per i form, mentre application/json è qualcosa che useresti per richiedere una risorsa tramite jQuery o tramite un client backend REST.
• il middleware body-parser raccoglierà il corpo dell'HTTP, decodificherà le informazioni e le passerà a req.body. Da li, potrai riprendere le informazioni sul form (del libro in oggetto, in questo caso).

Adesso, sarà sufficiente creare il form in HTML, richiedendo come campi di input i principali dati dei libri.

Chiama il file new-book.html e, tramite l'attributo action potrai passare i valori all'API.

All'interno del blocco di codice:

• Il tag form racchiude il blocco di informazioni che verranno inviate all'API tramite il bottone submit.
• All'interno del campo action dovrai inserire il localhost o l'indirizzo IP del tuo server più la dicitura per specificare la porta della tua API (:numeroporta)

Dopo l'inserimento, la pagina dovrebbe mostrarti il messaggio di conferma come nell'esempio:

Nel terminale del server, dovresti invece poter vedere i dati appena inseriti:

Estrapolare i dati dei libri inseriti

Ora, dovrai creare un endpoint per prendere tutti i libri dell'API:

app.get('/books', (req, res) => {
    res.json(books);
});

Riavvia il server con CTRL+C e il comando node book-api.js.

Connettendoti all'indirizzo http://ip_or_localhost:3000/books, dovresti poter vedere un JSON con i libri inseriti in precedenza.

Il prossimo passaggio, è creare una pagina HTML che, tramite un file book-list.js, possa visualizzare i libri con la formattazione di una pagina web.

Ecco il codice di una potenziale pagina book-list.html:

Il codice del file .js dovrebbe essere invece:

Tramite questo codice e la pagina HTML collegata, dovrebbe esserti possibile visualizzare le informazioni sui libri già inseriti, assieme ad alcuni pulsanti da implementare per poter modificare o cancellare le informazioni.

Le informazioni verranno prese tramite una richiesta di tipo GET.

N.B. Sono già state dichiarate, nel codice, le parti da implementare per aggiungere la funzionalità di modifica e cancellazione.

Mostrare solo un libro con uno specifico ISBN

Per mostrare solo un libro specifico, c'è bisogno di utilizzare un id univoco che possa identificare uno specifico oggetto tra tutti quelli registrati.

Questo id è naturalmente presente nelle informazioni dei libri, ovvero l'ISBN.

Ampliando l'indirizzo del server con la directory e, successivamente, con l'ISBN, puoi ottenere un metodo per richiedere un libro specifico.

Per esempio, il libro con ISBN 1010101010 dovrebbe essere richiesto tramite l'URL:

http://ip_or_localhost:3000/book/1010101010

Per creare un endpoint associato all'ISBN, dovrai inserire questo codice:

app.get('/book/:isbn', (req, res) => {

    const isbn = req.params.isbn;


    for (let book of books) {
        if (book.isbn === isbn) {
            res.json(book);
            return;
        }
    }


    res.status(404).send('Book not found');

});

A questo punto, inserendo l'indirizzo del server e specificando un ISBN, dovresti poter ricevere le informazioni sul libro ricercato.

Cancellare i libri

Usando il filtro per ISBN definito prima, potrai implementare un metodo per cancellare i dati all'interno del server tramite la richiesta HTTP DELETE.

app.delete('/book/:isbn', (req, res) => {

    const isbn = req.params.isbn;


    books = books.filter(i => {
        if (i.isbn !== isbn) {
            return true;
        }
        return false;
    });

    res.send('Book is deleted');
});

Tramite il metodo app.delete viene accettata la richiesta DELETE e, tramite il metodo filter dell'array dei libri per cancellare quello con l'ISBN richiesto.

Ora, non ti resta che implementare il metodo deleteBook nel file book-list.js:

const deleteBook = (isbn) => {
    const xhttp = new XMLHttpRequest();

    xhttp.open("DELETE", `http://localhost:3000/book/${isbn}`, false);
    xhttp.send();

    location.reload();
}

Nel codice sopra, la richiesta di cancellazione sarà inviata alla pressione del tasto corrispondente e, dopo aver svolto la procedura, la pagina verrà aggiornata.

Modificare i libri

La modifica e l'aggiornamento delle informazioni segue lo stesso sviluppo del metodo di cancellazione. In primis, va filtrato l'elemento tramite il suo ISBN.

Successivamente, si utilizzerà una richiesta di POST o PUT per inviare le nuove informazioni.

Tornando nel file book-api.js, quindi:

app.post('/book/:isbn', (req, res) => {

    const isbn = req.params.isbn;
    const newBook = req.body;

    for (let i = 0; i < books.length; i++) {
        let book = books[i]
        if (book.isbn === isbn) {
            books[i] = newBook;
        }
    }

    res.send('Book is edited');
});

Tramite una richiesta di POST, il libro con lo specifico ISBN verrà aggiornato con le nuove informazioni inserite.

Ora, basterà che tu sviluppi il metodo setEditModal per raccogliere le informazioni sul libro interessato quando viene premuto il tasto per la sua modifica.

Imposterai anche il parametro action del form con l'URL del libro richiesto per la modifica:

const setEditModal = (isbn) => {

    const xhttp = new XMLHttpRequest();

    xhttp.open("GET", `http://localhost:3000/book/${isbn}`, false);
    xhttp.send();

    const book = JSON.parse(xhttp.responseText);

    const {
        title,
        author,
        publisher,
        publish_date,
        numOfPages
    } = book;

    document.getElementById('isbn').value = isbn;
    document.getElementById('title').value = title;
    document.getElementById('author').value = author;
    document.getElementById('publisher').value = publisher;
    document.getElementById('publish_date').value = publish_date;
    document.getElementById('numOfPages').value = numOfPages;

    document.getElementById('editForm').action = `http://localhost:3000/book/${isbn}`;
}

Se il codice inserito funziona correttamente dovresti essere in grado di aggiornare le informazioni su un libro già esistenti. In questo caso, all'invio dei nuovi dati, riceverai un messaggio di conferma dell'avvenuta procedura.

Conclusioni

Seguendo l'esempio contenuto in questo tutorial hai imparato a sviluppare un API RESTful con Node.js, sviluppando un'applicazione web per la gestione di libri basata sul framework Express. Ora dovresti essere in grado di costruire anche tu una semplice REST API tramite Node.js e Express.

Ricorda che Express può essere utile anche per scopi differenti dalla costruzione delle REST API, oggetto di questa guida. Per approfondire tutte le possibilità offerte dalla libreria Express, puoi consultare la documentazione ufficiale sul sito web di Express.