← Livello 4 – Data pro

Lezione 5 di 6 ⏱ 55 minuti Premium

Un libro degli ospiti che dura per sempre

Riscrivi l'API così i messaggi vivono in SQLite. Un riavvio del server non cancellerà più nulla.

Cosa stiamo costruendo

La stessa API del Livello 3 – GET /api/vzkazy e POST /api/vzkazy – ma invece di un array in memoria, leggiamo e scriviamo in SQLite. Il frontend React può restare quasi identico.

Te lo mostro: un server con database

const express = require("express");
const cors = require("cors");
const Database = require("better-sqlite3");

const aplikace = express();
const db = new Database("web.db");

db.exec(`
  CREATE TABLE IF NOT EXISTS vzkazy (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    jmeno TEXT NOT NULL,
    text TEXT NOT NULL,
    vytvoreno TEXT DEFAULT CURRENT_TIMESTAMP
  )
`);

aplikace.use(cors());
aplikace.use(express.json());

// GET – all messages from the database
aplikace.get("/api/vzkazy", (pozadavek, odpoved) => {
  const radky = db.prepare(
    "SELECT id, jmeno, text, vytvoreno FROM vzkazy ORDER BY id DESC"
  ).all();
  odpoved.json(radky);
});

// POST – a new message into the database
aplikace.post("/api/vzkazy", (pozadavek, odpoved) => {
  const { jmeno, text } = pozadavek.body;

  if (!jmeno || !text || jmeno.length > 50 || text.length > 500) {
    return odpoved.status(400).json({ chyba: "Invalid message." });
  }

  const vloz = db.prepare("INSERT INTO vzkazy (jmeno, text) VALUES (?, ?)");
  const vysledek = vloz.run(jmeno, text);

  odpoved.json({ ulozeno: true, id: vysledek.lastInsertRowid });
});

aplikace.listen(3900, () => {
  console.log("Server running at http://localhost:3900");
});

Te lo mostro: il frontend

Il componente React del Livello 3 funziona senza modifiche – il server restituisce lo stesso JSON, solo con campi extra id e vytvoreno. Puoi mostrarli sotto il messaggio in piccolo testo grigio.

Ora tocca a te 💪

  1. Sostituisci l’array vzkazy in server.js con il codice sopra (o fallo gradualmente – prima GET, poi POST).
  2. Avvia il server e invia 2 messaggi da React.
  3. Ferma il server, riavvialo, aggiorna la pagina – i messaggi devono restare.
  4. Committa le modifiche su Git e fai push su GitHub (senza web.db – è in .gitignore).
⚠️

Su Render/Railway, il disco a volte è temporaneoweb.db può essere cancellato dopo un redeploy. In produzione, usa più avanti un database hostato (Render offre PostgreSQL gratuito). Per imparare e localhost, SQLite è perfetto.

Controllo: Il libro degli ospiti sopravvive a un riavvio. La validazione avviene sul server. Stai usando SQL parametrizzato.

Cosa porti via da questa lezione