← Nivå 4 – Data pro

Leksjon 5 av 6 ⏱ 55 minutter Premium

En gjestebok, der varer resten av livet

Skriv API'en om, så meldinger lever i SQLite. En servergenstart sletter ikke længere noe.

Hva vi bygger

Den samme API som i nivå 3 – GET /api/vzkazy og POST /api/vzkazy – men i stedet for et array i minnen leser og skriver vi til SQLite. React-frontenden kan forbli nesten nøyaktig den samme.

Jeg viser deg: 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");
});

Jeg viser deg: frontenden

React-komponenten fra nivå 3 fungerer uden endringer – serveren returnerer den samme JSON, bare med ekstra id og vytvoreno-felter. Du kan vise dem under meldingen i lille grå tekst.

Nå er det din tur 💪

  1. Erstat vzkazy-arrayet i server.js med koden ovenfor (eller gjør det gradvist – GET først, så POST).
  2. Start serveren og send 2 meldinger fra React.
  3. Stop serveren, start den igen, oppdater siden – meldingerne skal forblive.
  4. Commit endringerne til Git og push til GitHub (uden web.db – den er i .gitignore).
⚠️

På Render/Railway er disken noen gange midlertidigweb.db kan bli slettet etter en redeploy. I produktion, bruk en hostet database senere (Render tilbyder gratis PostgreSQL). Til læring og localhost er SQLite perfekt.

Sjekk: Gæstebogen overlever en genstart. Validering sker på serveren. Du bruker parametriseret SQL.

Dette tar du med deg fra leksjonen