CONTATTACI

Blog

Creare Api Rest con Json server

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:

  1. Node.js
  2. 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.

 

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.