Hvad vi bygger
Den samme API som i niveau 3 – GET /api/vzkazy og POST /api/vzkazy – men i stedet for et array i hukommelsen læser og skriver vi til SQLite. React-frontenden kan forblive næsten præcis den samme.
Vis mig: en server med 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");
});
Vis mig: frontenden
React-komponenten fra niveau 3 virker uden ændringer – serveren returnerer den samme JSON, bare med ekstra id og vytvoreno-felter. Du kan vise dem under beskeden i lille grå tekst.
Nu er det din tur 💪
- Erstat
vzkazy-arrayet iserver.jsmed koden ovenfor (eller gør det gradvist – GET først, så POST). - Start serveren og send 2 beskeder fra React.
- Stop serveren, start den igen, opdater siden – beskederne skal forblive.
- Commit ændringerne til Git og push til GitHub (uden
web.db– den er i.gitignore).
På Render/Railway er disken nogle gange midlertidig – web.db kan blive slettet efter en redeploy. I produktion, brug en hostet database senere (Render tilbyder gratis PostgreSQL). Til læring og localhost er SQLite perfekt.
Tjek: Gæstebogen overlever en genstart. Validering sker på serveren. Du bruger parametriseret SQL.
Det tager du med fra denne lektion
- API + SQLite = permanente data.
prepare+?for sikre INSERTs.web.dbhører ikke til i Git; brug PostgreSQL i skyen senere.
© 2026 Ing. Martin Polak / AlgoRhino · Vilkår for indholdsbrug