json server
di
Guida alla creazione e al test di API REST con JSON Server | Prof. Giagnotti
PROF GIAGNOTTI · TORNA A → · GUIDE
🗺 GUIDE API · SVILUPPO WEB · JSON SERVER
A cura del Prof. Giagnotti · Docente di Informatica e Sistemi e Reti

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

Crea in 10 minuti un backend finto ma realistico per testare la tua app frontend: da Node.js a CRUD, filtri, paginazione e Thunder Client. Senza database, senza stress.

📦 Scarica ZIP progetto 🎬 Video realizzazione Web Server ⏱️ 14 min di lettura 🟡 Livello: Base-Intermedio 🎯 CRUD + Postman/Thunder Client
🎯 Obiettivi della guida
✓Capire perché usare un fake REST API nel ciclo di sviluppo frontend e quando ti salva tempo.
✓Installare Node.js e npm correttamente e verificare l'ambiente da terminale.
✓Creare un progetto JSON Server con db.json strutturato e lanciare il server su porta 3000.
✓Eseguire le 4 operazioni CRUD con GET, POST, PUT, DELETE e interpretare i codici di stato.
✓Usare filtri, ordinamento e paginazione (_like, _sort, _page, _limit) e preparare il backend per React/Vue.
// Indice della guida
1. Introduzione — perché JSON Server è il tuo migliore amico 2. Installazione di Node.js e npm — senza errori 3. Creazione del progetto e installazione JSON Server 4. Il file db.json — progettare dati realistici 5. Avvio del server e prima esplorazione 6. Test degli endpoint — CRUD con Thunder Client 7. Filtri avanzati, paginazione e best practice 8. Verifica pratica 9. Riepilogo e concetti chiave

1. Introduzione — perché JSON Server è il tuo migliore amico

📌 Definizione da ricordare

JSON Server è un server REST fake completo che trasforma un semplice file db.json in API CRUD reali in meno di 30 secondi.

Nel moderno sviluppo web non puoi aspettare che il backend sia pronto per iniziare il frontend. JSON Server risolve questo collo di bottiglia: è uno strumento leggerissimo che crea endpoint REST a partire da un JSON, supporta GET, POST, PUT, PATCH, DELETE, filtri e paginazione.

Funziona grazie a Node.js, il runtime JavaScript che esegue JS fuori dal browser. Con Node.js arriva npm (Node Package Manager), il gestore di pacchetti che useremo per installare json-server. In classe lo uso sempre per farvi capire le API senza dover configurare MySQL o PHP.

🎯 Esempio in classe

Stiamo sviluppando una app per la gestione dei compiti. Invece di aspettare il backend in PHP, creiamo in 2 minuti un db.json con studenti e compiti. Il frontend in React può già fare fetch, mostrare liste, aggiungere compiti. Quando il backend reale sarà pronto, cambiamo solo l'URL base.

💬 Tip del docente

Non installare mai JSON Server globalmente se lavori su progetti scolastici condivisi su GitHub. Usa l'installazione locale --save-dev così ogni compagno avrà la stessa versione con npm install. All'esame ti chiedo sempre: differenza tra dipendenza di sviluppo e di produzione.

2. Installazione di Node.js e npm — senza errori

Primo passo: avere Node.js. Senza di esso, nessun npm e nessun JSON Server.

Procedura ufficiale

  • Vai su https://nodejs.org/en e scarica la versione LTS (Long Term Support) — è la più stabile.
  • Avvia l'installer e spunta l'opzione “Automatically install the necessary tools” su Windows.
  • Chiudi e riapri il terminale / VS Code.
BASH · Verifica installazione
node -v # esempio output: v20.11.0npm -v # esempio output: 10.2.4
⚠️ Errore comune

Se node -v non viene riconosciuto dopo l'installazione, hai dimenticato di riavviare il terminale o VS Code. Su Windows, a volte serve anche riavviare il PC perché il PATH venga aggiornato. Non reinstallare subito — chiudi tutto e riprova.

✅ Cosa devi vedere

Se entrambi i comandi restituiscono un numero di versione (es. v20.x), Node.js e npm sono pronti. Non serve altro. Sei pronto per creare il progetto.

3. Creazione del progetto e installazione JSON Server

1. Inizializzare la cartella di progetto

Crea una cartella dedicata, ad esempio REST_API, e aprila direttamente in Visual Studio Code con il comando rapido:

BASH · Apri in VS Code
mkdir REST_API cd REST_API code .

Dal terminale integrato di VS Code (CTRL+ò), inizializza il progetto Node:

BASH · Init progetto
npm init -y # Crea package.json con valori di default

Questo comando crea il file package.json, la carta d'identità del progetto: contiene nome, versione, script e dipendenze.

💬 Tip del docente

Spiego sempre in classe: npm init -y è come dire “accetto tutto di default”. In un progetto reale compileresti i campi a mano, ma per una guida didattica va benissimo così. Ricorda: package.json va sempre su GitHub, node_modules mai.

2. Installazione di JSON Server

01 · CONSIGLIATA

Installazione locale

Installa solo per questo progetto, salvata in devDependencies. Ideale per lavori di gruppo.

02 · RAPIDA

Installazione globale

Disponibile ovunque nel sistema con comando diretto. Comoda ma meno riproducibile.

03 · MODERNA

Con npx (zero install)

Usa npx json-server senza installare nulla. Perfetto per test al volo.

BASH · Installazione locale (consigliata)
npm install json-server --save-dev# Alternativa globale (se vuoi): npm install -g json-server

4. Il file db.json — progettare dati realistici

📌 Regola d'oro

Ogni chiave di primo livello in db.json diventa automaticamente una risorsa REST con endpoint /chiave. Es: "users" → /users.

Nella cartella REST_API crea un file chiamato db.json. Questo sarà il tuo database finto. Metti dati credibili, non aaa, bbb — ti serviranno per testare il frontend.

JSON · db.json - Esempio didattico completo
{ "users": [ { "id": 1, "name": "Mario Rossi", "email": "mario.rossi@example.com", "age": 30 }, { "id": 2, "name": "Luisa Bianchi", "email": "luisa.bianchi@example.com", "age": 25 }, { "id": 3, "name": "Ahmed Khan", "email": "ahmed.khan@example.com", "age": 27 } ], "posts": [ { "id": 1, "title": "Primo post", "content": "Contenuto del primo post", "userId": 1 }, { "id": 2, "title": "Secondo post", "content": "Contenuto del secondo post", "userId": 2 } ] }
🎯 Esempio in classe - Relazioni

Nota il campo userId in posts. JSON Server capisce le relazioni! Se chiami /users/1/posts ottieni tutti i post di Mario. Se chiami /posts?userId=1 filtri. È perfetto per spiegare le foreign key senza SQL.

⚠️ Errore comune

Dimenticare l'id univoco. Se metti due oggetti con stesso id, JSON Server va in confusione e la POST può sovrascrivere. Usa sempre id numerici incrementali e lascia che sia il server ad assegnarli nelle POST (non inviare l'id nel body).

db.json { users: [...] } { posts: [...] } JSON Server --watch db.json :3000 API REST pronte GET /users POST /users PUT /users/:id DELETE /users/:id

5. Avvio del server e prima esplorazione

Ora la magia. Con un solo comando trasformi il JSON in API vere.

BASH · Avvio server
npx json-server --watch db.json --port 3000# Output atteso: # \{^_^}/ hi! # Loading db.json # Done # Resources: http://localhost:3000/users, http://localhost:3000/posts

Vuoi essere più professionale? Aggiungi uno script in package.json:

JSON · package.json - scripts
{ "scripts": { "server": "json-server --watch db.json --port 3000", "server:delay": "json-server --watch db.json --port 3000 --delay 800" } }

E poi lancia:

BASH · Script npm
npm run server # oppure per simulare latenza di rete: npm run server:delay
💬 Tip del docente

Uso sempre --delay 800 quando spiego le loading spinner in React. Così gli studenti vedono davvero il caricamento e capiscono perché serve uno stato isLoading. Senza delay sembra tutto istantaneo e non si impara.

Apri il browser su http://localhost:3000: vedrai una pagina di benvenuto con tutte le rotte disponibili. Clicca su /users e vedrai il JSON.

6. Test degli endpoint — CRUD con Thunder Client

📌 Le 4 operazioni fondamentali

Create (POST) – Read (GET) – Update (PUT/PATCH) – Delete (DELETE). Sono il cuore di ogni API REST.

Per testare le API puoi usare Thunder Client (estensione VS Code, più leggera di Postman) o Postman. Io consiglio Thunder Client in classe perché non richiede account.

OperazioneMetodoEndpointCosa fa
LetturaGET/usersRestituisce tutti gli utenti
DettaglioGET/users/1Singolo utente con id=1
CreazionePOST/usersCrea nuovo utente, id auto-incrementale
Aggiornamento totalePUT/users/1Sostituisce tutto l'oggetto
Aggiornamento parzialePATCH/users/1Aggiorna solo i campi inviati
EliminazioneDELETE/users/1Cancella la risorsa

1. Lettura (Read)

HTTP · GET tutti gli utenti
GET http://localhost:3000/users// Risposta 200 OK: [ { "id": 1, "name": "Mario Rossi", ... }, { "id": 2, "name": "Luisa Bianchi", ... } ]
🎯 Esempio in classe

In React farai: fetch('http://localhost:3000/users').then(r=>r.json()).then(setUsers). Se la lista non appare, apri prima il browser sull'endpoint per verificare che il server sia attivo. Il 90% degli errori è server spento.

2. Creazione (Create)

HTTP · POST nuovo utente
POST http://localhost:3000/users Content-Type: application/json{ "name": "Nuovo Utente", "email": "nuovo@example.com", "age": 28 }// Risposta 201 Created: { "id": 4, "name": "Nuovo Utente", "email": "nuovo@example.com", "age": 28 }
⚠️ Errore comune

Non inviare l'id nel body della POST. JSON Server lo genera da solo. Se lo invii, potresti creare duplicati o conflitti. Lascia che sia il server a decidere l'id — come fa un vero backend.

3. Aggiornamento (Update) — PUT vs PATCH

PUT sostituisce l'intera risorsa (devi inviare tutti i campi). PATCH aggiorna solo i campi che invii (più sicuro).

HTTP · PUT aggiornamento completo
PUT http://localhost:3000/users/1 Content-Type: application/json{ "name": "Mario Rossi Aggiornato", "email": "mario.rossi@example.com", "age": 31 }
HTTP · PATCH aggiornamento parziale (consigliato)
PATCH http://localhost:3000/users/1 Content-Type: application/json{ "age": 32 } // Aggiorna solo l'età, il resto rimane
💬 Tip del docente

All'interrogazione chiedo sempre: differenza tra PUT e PATCH? Risposta da 10: PUT è idempotente e sostituisce tutto, PATCH è parziale e più efficiente. In JSON Server puoi usare entrambi — in produzione, usa PATCH per non rischiare di cancellare campi.

4. Eliminazione (Delete)

HTTP · DELETE utente
DELETE http://localhost:3000/users/1// Risposta 200 OK, body vuoto // Il file db.json viene aggiornato automaticamente

7. Filtri avanzati, paginazione e best practice

JSON Server non è solo CRUD base. Supporta query potenti che userai nel frontend reale.

HTTP · Filtri e ricerca avanzata
GET /users?name_like=Rossi # ricerca parziale GET /users?age_gte=25&age_lte=30 # età tra 25 e 30 GET /users?_sort=age&_order=desc # ordina per età decrescente GET /users?_page=1&_limit=2 # paginazione: pagina 1, 2 risultati GET /posts?userId=1 # relazione: post dell'utente 1 GET /users/1/posts # alternativa: nested route GET /users?q=mario # full-text search su tutti i campi
TIP · PAGINAZIONE

_page e _limit

Usali per implementare infinite scroll o paginazione classica senza caricare 1000 record.

TIP · RELAZIONI

userId + _embed

/users?_embed=posts include i post dentro ogni utente. Comodo per dashboard.

TIP · PRODUZIONE

Non è per produzione!

JSON Server scrive su file. Perfetto per prototipi, non per 10.000 utenti reali.

🎯 Esempio pratico in classe

Creiamo una barra di ricerca: fetch('/users?q=' + searchTerm). Con un input e un debounce di 300ms hai una ricerca live funzionante. Gli studenti capiscono subito il valore delle query string.

8. Verifica pratica

🔬 Attività — Crea la tua prima API per un gestionale

Obiettivo: costruire da zero un backend finto per un'app di gestione corsi.

  1. Crea cartella corsi-its, inizializza con npm init -y e installa json-server in dev.
  2. Crea db.json con due risorse: corsi (id, nome, ore, docente) e studenti (id, nome, corsoId).
  3. Avvia il server su porta 3000 e verifica che http://localhost:3000/corsi risponda.
  4. Con Thunder Client: GET tutti i corsi, POST un nuovo corso, PATCH per cambiare docente, DELETE di un corso di test.
  5. Testa: /studenti?corsoId=1 e /corsi?_sort=ore&_order=desc. Fai screenshot delle risposte.
✅ Soluzione ragionata e criteri di valutazione

Soluzione: Il server deve mostrare Resources: /corsi /studenti. POST deve restituire 201 con id auto-generato. Se vedi 404, controlla di aver scritto db.json nella root e non in una sottocartella. Se la DELETE non cancella, verifica di non avere il file aperto in sola lettura.

Valutazione: 2 punti per installazione corretta, 3 punti per db.json ben strutturato, 3 punti per CRUD funzionante, 2 punti per filtri. Bonus se usi --delay e mostri lo spinner.

✓Node.js + npm = ambiente per eseguire JS e installare tool come json-server.
✓db.json: ogni chiave diventa endpoint REST automatico (/users, /posts).
✓npx json-server --watch db.json --port 3000 avvia il server fake in 1 comando.
✓CRUD: GET lettura, POST creazione (201), PUT/PATCH aggiornamento, DELETE rimozione.
✓Query avanzate: _like, _sort, _page, _limit, q= per filtri, ricerca e paginazione.
✓Best practice: installazione locale, non inviare id in POST, usa PATCH per aggiornamenti parziali.

Lascia un commento