Nel lavoro di uno sviluppatore front end molto spesso capita di dover utilizzare dei dati fake per riempire di contenuti il sito che sta costruendo. Per farlo lo sviluppatore web simula un servizio API REST di backend per fornire alcuni dati in formato JSON all'applicazione front end e, quindi, verifica che tutto funzioni come previsto.
Api rest: cosa sono
Le API rappresentano un insieme di procedure che servono per far comunicare due o più applicazioni tra di loro.
Ovviamente, è possibile creare un server backend completo utilizzando lo stack che si preferisce. Tuttavia questo richiede molto tempo di sviluppo.
In questo articolo vedremo come accelerare i tempi per lo sviluppo del front end.
JSON Server è un semplice progetto che aiuta a configurare un’ API REST con operazioni CRUD molto velocemente.
Vedremo, prima di tutto, come configurare il server JSON e pubblicare un esempio di API REST; successivamente, si vedrà come utilizzare un'altra libreria, Faker.js, per generare dati falsi per l'API REST esposta tramite il server JSON.
Prerequisiti
Per utilizzare queste librerie avrai bisogno di:
- Node.js
- npm
Iniziamo!
Iniziamo installando JSON server all’interno del nostro progetto, lanciando questo comando in console
npm install -g json-server
Aggiungendo l'opzione -g ci assicuriamo che il pacchetto sia installato globalmente in tutto il sistema e quindi non dovrai reinstallarlo per progetti futuri.
File JSON
Ora creiamo un nuovo file JSON con nome db.json. Questo file è un file json esempio, che in questo caso è utile, ma ce ne sono svariati per le diverse situazioni. Questo file contiene i dati che devono essere esposti dall'API REST. Per gli oggetti contenuti nella struttura JSON vengono creati automaticamente i punti CRUD.
Vediamo un esempio :
{
"teachers": [
{
"id": 1,
"name": "Marco",
"surname": "Insabato",
"email": "marco@aulab.it"
},
{
"id": 2,
"name": "Andrea",
"surname": "Mininni",
"email": "andrea@aulab.it"
},
{
"id": 3,
"name": "Francesco",
"surname": "Talamona",
"email": "francesco@aulab.it"
}
]
}
La struttura JSON consiste in un oggetto “teachers” a cui sono assegnati tre set di dati. Ogni oggetto “teacher” è composto da quattro proprietà: id, name, surname ed email.
Lanciamo il server!
Avviamo il server JSON lanciando il seguente comando in console:
json-server --watch db.json
Come parametro dobbiamo passare il file contenente la nostra struttura JSON (db.json). Inoltre, utilizziamo l’opzione –watch.
Utilizzando quest’opzione, ci assicuriamo che il server sia avviato in modalità watch, ovvero che osservi le modifiche al file e aggiorni di conseguenza l'API esposta.
Ora possiamo aprire l'URL http://localhost:3000 nel browser e otterremo il seguente risultato:
Possiamo notare che la risorsa docenti è stata riconosciuta correttamente.
Cliccando sul link “teachers” verremo rimandati a http://localhost:3000/teachers con il seguente risultato
I seguenti endpoint HTTP vengono creati automaticamente dal server JSON:
GET /teachers
GET /teachers/{id}
POST /teachers
PUT /teachers/{id}
PATCH /teachers/{id}
DELETE /teachers/{id}
Se si effettuano richieste POST, PUT, PATCH o DELETE, le modifiche saranno salvate automaticamente in db.json. Una richiesta POST, PUT o PATCH deve includere un header Content-Type: application/json per utilizzare il JSON nel corpo della richiesta. In caso contrario, il risultato sarà un 200 OK, ma senza che vengano apportate modifiche ai dati.
È possibile estendere gli URL con ulteriori parametri. Ad esempio, è possibile applicare un filtro utilizzando i parametri dell'URL, come si può vedere nel seguente esempio:
http://localhost:3000/employees?surname=Talamona
Questo restituisce come risultato un solo oggetto teacher. Oppure eseguire un testo completo su tutte le proprietà:
http://localhost:3000/employees?q=Marco
Per un elenco completo dei parametri URL disponibili, consultare la documentazione di JSON Server.
Creiamo dati
Bene, è arrivato il momento di riempire il nostro JSON server di dati fake con l'utilizzo di faker.js, una libreria che consente di generare dei dati fake e la cui integrazione con JSON server è estremamente semplice.
Lanciamo i seguenti comandi nel nostro progetto
npm init
npm install @faker-js/faker
Faker.js è installato nella cartella node_modules. Creiamo un altro file teachers.js e inseriamo il seguente codice JavaScript:
// teachers.js
let {faker} = require('@faker-js/faker')
function generateTeachers() {
let teachers = []
for (let id = 0; id < 50; id++) {
let name = faker.name.firstName()
let surname = faker.name.lastName()
let email = faker.internet.email()
teachers.push({
"id": id,
"name": name,
"surname": surname,
"email": email
})
}
return { "teachers": teachers }
}
module.exports = generateTeachers
Stiamo implementando la funzione generateTeachers() per generare un oggetto JSON contenente 50 docenti. Per ottenere i dati falsi di nome, cognome ed email, utilizziamo i seguenti metodi della libreria Faker.js:
- faker.name.firstName()
- faker.name.lastName()
- faker.internet.email()
Il server JSON richiede di esportare la funzione generateTeachers(), responsabile della generazione dei dati falsi. Per farlo, si utilizza la seguente riga di codice:
module.exports = generateTeachers
Avendo aggiunto questa esportazione, siamo in grado di passare il file employee.js direttamente al comando json-server:
json-server teachers.js
Ora l'API REST esposta consente di accedere a tutti i 50 set di dati dei dipendenti creati con Faker.js.
