Creare una API-REST con JSON-server

Quando scrivi il frontend della tua applicazione web e hai la necessità di connetterti ad una API REST, ma ancora non hai sviluppato il backend (o il tuo collega nerd è ancora indietro!), hai un modo molto semplice per simulare i tuoi servizi: JSON-server!

Puoi trovare la documentazione a questo indirizzo: https://github.com/typicode/json-server

Vediamo come installare la libreria e utilizzarla. Per prima cosa dobbiamo avere installato Node.js (trovate l’installer a questa pagina: https://nodejs.org/it/)

Ora creiamo una directory e posizioniamoci al suo interno. Apriamo un terminale e inizializziamo la nostra applicazione

npm init

Rispondiamo alle domande del wizard (o diamo INVIO per confermare le opzioni di default) impostando il nome del package, la versione, una descrizione, etc..

Al termine del wizard troveremo nella nostra directory il file package.json che si occupa di gestire, tra le altre cose, le dipendenze della nostra applicazione.

Installiamo la libreria json-server:

npm install json-server

quindi creiamo un file JSON che sarà il nostro database.

Il file db.json sarà strutturato in modo da avere uno o più array di oggetti; il nome che daremo a questi array, coinciderà anche le risorse della nostra API.

Nell’esempio che segue, ho creato una lista di ricette (“recipes“) e una lista di categorie di ricette (“categories“).

{
    "categories": [
        {
            "id": 1,
            "name": "Primi piatti"
        },
        {
            "id": 2,
            "name": "Secondi piatti"
        },
        {
            "id": 3,
            "name": "Dolci"
        }
    ],
    "recipes": [
        {
            "categoryId": 1,
            "id": 1,
            "name": "Spaghetti allo scoglio",
            "steps": "Per preparare gli spaghetti allo scoglio cominciate dalla pulizia di cozze e delle vongole..."
        },
        {
            "categoryId": 1,
            "id": 2,
            "name": "Risotto ai funghi",
            "steps": "Per preparare il risotto ai funghi iniziate dalla pulizia degli Champignon..."
        },
        {
            "categoryId": 3,
            "id": 3,
            "name": "Torta al limone",
            "steps": "Per preparare la torta soffice al limone, per prima cosa spremete il succo di un limone..."
        }
    ]
}

A partire dal contenuto del nostro db.json, JSON-Server creerà per noi le seguenti API REST.

GET    /recipes
GET    /recipes/1
POST   /recipes
PUT    /recipes/1
PATCH  /recipes/1
DELETE /recipes/1

GET    /categories
GET    /categories/1
POST   /categories
PUT    /categories/1
PATCH  /categories/1
DELETE /categories/1

GET    /db

Per avviare il nostro server ed esporre l’API REST, è sufficiente digitare il comando:

npx json-server --watch db.json

Il server è ora in ascolto sulla porta indicata.

Apriamo un browser e digitiamo: http://localhost:3000

JSON-server ha elaborato il nostro file e ora siamo in grado di interrogare le nostre API.

Possiamo utilizzare semplicemente il browser per effettuare le richieste in GET. Ecco qualche richiesta di esempio:

Elenco di tutte le ricette	http://localhost:3000/recipes
Elenco di tutte le ricette ordinate alfabeticamente per l’attributo name	http://localhost:3000/recipes?_sort=name&_order=asc
Elenco di tutte le ricette che contengono la parola “pulizia”	http://localhost:3000/recipes?q=pulizia
Ricetta con id = 1	http://localhost:3000/recipes/1
Ricetta con attributo name=”Risotto ai funghi”	http://localhost:3000/recipes?name=Risotto ai funghi

Una cosa interessante, a mio parere, è la possibilità di alimentare il nostro database con nuovi dati, attraverso il metodo POST.
JSON-server assegnerà alla nuova risorsa un id univoco.

Inoltre è possibile navigare le relazioni tra le risorse. Nel nostro esempio, ad una ricetta è associata una determinata categoria. Quindi potremmo pensare di richiedere l’elenco di tutte le ricette di una specifica categoria.

Possiamo fare questo utilizzando la richiesta:

http://localhost:3000/categories/1/recipes

Per testare gli altri metodi (POST, PUT, DELETE) vi consiglio di utilizzare uno strumento come Postman (https://www.postman.com/)