← Razina 4 – Data pro

Lekcija 5 od 6 ⏱ 55 minuta Premium

Knjiga gostiju koja traje zauvijek

Prepiši API da poruke žive u SQLiteu. Ponovno pokretanje servera više ništa ne briše.

Što gradimo

Isti API kao u razini 3 – GET /api/vzkazy i POST /api/vzkazy – ali umjesto niza u memoriji čitamo i pišemo u SQLite. React frontend može ostati gotovo isti.

Pokazat ću ti: server s bazom podataka

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");
});

Pokazat ću ti: frontend

React komponenta iz razine 3 radi bez promjena – server vraća isti JSON, samo s dodatnim poljima id i vytvoreno. Možeš ih prikazati ispod poruke sitnim sivim tekstom.

Sad si ti na redu 💪

  1. Zamijeni niz vzkazy u server.js gornjim kodom (ili postupno – prvo GET, zatim POST).
  2. Pokreni server i pošalji 2 poruke iz Reacta.
  3. Zaustavi server, ponovo ga pokreni, osvježi stranicu – poruke moraju ostati.
  4. Commitaj promjene u Git i pushaj na GitHub (bez web.db – u .gitignore je).
⚠️

Na Renderu/Railwayju je disk ponekad privremenweb.db se može obrisati nakon ponovnog deploya. U produkciji kasnije koristi hostiranu bazu (Render nudi besplatni PostgreSQL). Za učenje i localhost SQLite je savršen.

Provjera: Knjiga gostiju preživljava ponovno pokretanje. Provjera je na serveru. Koristiš parametrizirani SQL.

Što ćeš ponijeti iz ove lekcije