Guida alla creazione e al test di API REST con JSON-Server

In questa guida, Guida alla creazione e al test di API REST con JSON-Server, vedremo come creare Api Rest con Json-server e come testare il nostro servizio WEB con i metodi CRUD

Indice dei contenuti

Introduzione

Cos’è JSON Server

JSON Server è un semplice progetto utilizzato nello sviluppo web per creare server backend leggeri e veloci, ideali per lo sviluppo di API REST. E’ possibile testare il progetto con operazioni CRUD molto velocemente. E’ un pacchetto contenuto in Node.js per cui sarà necessario installare Node.js.

Cos’è Node.js

Node.js è un ambiente di runtime JavaScript che permette di eseguire codice JavaScript al di fuori del browser. È basato sul motore V8 di Google Chrome, lo stesso che esegue JavaScript nei browser, ma con funzionalità aggiuntive per gestire file, database, server HTTP e molto altro. Node.js include npm (Node Package Manager), un gestore di pacchetti che ci permette di installare strumenti come json-server con un semplice comando

Installazione di Node.js

E’ possibile scaricare Node.js al seguente link: https://nodejs.org/en. Dopo aver eseguito il download far partire l’installer

Durante l’installazione flaggare l’opzione di scelta di installazione dei tool necessari. Al termine dell’installazione verrà aperta una scheda con il prompt dei comandi, seguire le indicazioni. In seguito verrà aperta una scheda Power Shell e, anche in questo caso seguire le indicazioni per installare tutti i tool necessari

Completata l’installazione eseguire i seguenti due comandi (bash) per verificare la corretta installazione di Node.js e nmp:

node -v

npm -v

Se tutto è andato a buon fine l’output di ogni comando restituirà la versione installata

Creazione del Server

Creare una directory (ad esempio REST API) ed aprire Visual studio Code in questa directory con il comando

 code .

Aprire un terminale in VSC e digitare

npm init -y

Questo comando serve ad inizializzare il progetto creando un file package.json

A cosa serve package.json? E’ un file all’interno del quale possiamo, ad esempio installare il json-server come dipendenza, semplicemente in modalità sviluppo per testarlo ed eventualmente condividerlo.

Nel nostro caso non modifichiamo il file package.json ma, sempre da terminale installiamo in modalità globale, json-server. Questo significa che, una volta installato non sarà necessario ripetere il comando per eventuali altri progetti:

npm install -g json-server  # Installazione globale (opzionale)

Creazione della REST API con json-server

Creazione del file db.json

Nella cartella di progetto, creare un file db.json e aggiungi dei dati iniziali:

{
  "users": [
    { "id": 1, "name": "Mario Rossi", "email": "mario@example.com" },
    { "id": 2, "name": "Luca Bianchi", "email": "luca@example.com" }
  ]
}

Avvio del Server

Eseguire il seguente comando per avviare il server:

json-server --watch db.json --port 3000

Se tutto è andato a buon fine, dal browser, richiamando localhost:3000 vediamo la home del nostro Json server e richiamando il nostro file users (localhost:3000/users) ne vediamo il contenuto:

Test dei Metodi CRUD con Postman o Thunder Client

Per testare il nostro Servizio dobbiamo verificare che i metodi Create, Read, Update e Delete funzionino correttamente. Per fare ciò abbiamo diversi tool a disposizione. Il primo è una estensione di VSC (Thunder Client). Se si vuole testare questo tool occorre installare questa estensione:

In alternativa possiamo scaricare ed installare il tool Postman al seguente link: https://www.postman.com/downloads

Adesso proviamo i metodi:

Lettura (GET, Read)

• Endpoint: GET http://localhost:3000/users
• Risultato atteso: Lista di utenti.

Cliccare l’icona Thunder in VSC e cliccare “new request”. Selezionare il metodo GET e digitare l’endpoint accanto al metodo. Clicchiamo su “SEND” e otteniamo:

Creazione (POST, Create)

• Endpoint: POST http://localhost:3000/users
• Body JSON:

{
  "id": "3",
  "name": "Giulia Verdi",
  "email": "giulia@example.com"
}

Quindi selezionare POST, non modificare l’endpoint e inserire un nuovo utente digitando nel body quanto indicato nel codice in alto. Cliccare su “SEND”. Selezionare ancora GET e premere “SEND”. Vediamo che l’utente è stato inserito:

Aggiornamento (PUT/PATCH, Update)

• PUT (sostituisce tutto)
• Endpoint: http://localhost:3000/users/3

Modifichiamo, ad esempio, il nome del record con id = 3. Scegliamo PUT, scriviamo l’endpoint e nel body scriviamo:

{
  "id": "3",
  "name": "Giuseppe Verdi",
  "email": "giulia@example.com"
}

Cliccando SEND vediamo la modifica:

Eliminazione (DELETE)

• Endpoint: DELETE http://localhost:3000/users/3
• Risultato atteso: Utente eliminato.

Proviamo ad eliminare l’utente con id = 3. Scegliere il metodo DELETE, scrivere l’endpoint e cliccare SEND. Se tutto è andato a buon fine selezionando GET e visualizzando il risultato della richiesta il record con id = 3 non dovrebbe essere presente

Postman

Il test dell’API REST appena creata può essereeseguito allo stesso modo anche attraverso l’applicazione Postman. Ricordare di selezionare “row” per inserire il testo nel body