← Úroveň 4 – Dátar

Lekcia 5 z 6 ⏱ 55 minút Prémiové

Kniha návštev, ktorá vydrží navždy

Prepíš API tak, aby správy žili v SQLite. Reštart servera už nič nevymaže.

Čo staviame

To isté API ako v Úrovni 3 – GET /api/vzkazy a POST /api/vzkazy – ale namiesto poľa v pamäti čítame a zapisujeme do SQLite. React frontend môže ostať takmer rovnaký.

Ukážem ti: server s databázou

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

Ukážem ti: frontend

React komponent z Úrovne 3 funguje bez zmien – server vracia ten istý JSON, len s extra poľami id a vytvoreno. Môžeš ich zobraziť pod správou malým sivým textom.

Teraz ty 💪

  1. Nahraď pole vzkazy v server.js kódom vyššie (alebo postupne – najprv GET, potom POST).
  2. Spusti server a pošli 2 správy z Reactu.
  3. Vypni server, znova ho spusti, obnov stránku – správy musia zostať.
  4. Commitni zmeny do Gitu a pushni na GitHub (bez web.db – je v .gitignore).
⚠️

Na Render/Railway je disk niekedy dočasnýweb.db sa môže po redeploy vymazať. V produkcii neskôr použi hostovanú databázu (Render ponúka bezplatný PostgreSQL). Na učenie a localhost je SQLite perfektné.

Skontroluj sa: Kniha návštev prežije reštart. Validácia beží na serveri. Používaš parametrizované SQL.

Čo si z tejto lekcie odnášaš