← Taso 4 – Data pro

Oppitunti 5/6 ⏱ 55 minuuttia Premium

Vieraskirja joka kestää ikuisesti

Kirjoita API uudelleen niin, että viestit elävät SQLitessä. Palvelimen uudelleenkäynnistys ei enää pyyhi mitään.

Mitä rakennamme

Sama API kuin Tasolla 3 – GET /api/vzkazy ja POST /api/vzkazy – mutta muistin taulukon sijaan luemme ja kirjoitamme SQLiteen. React-frontend voi pysyä melkein täsmälleen samana.

Näytän sinulle: palvelin tietokannalla

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

Näytän sinulle: frontend

Taso 3 -React-komponentti toimii ilman muutoksia – palvelin palauttaa saman JSON:in, vain ylimääräisillä id- ja vytvoreno-kentillä. Voit näyttää ne viestin alla pienellä harmaalla tekstillä.

Nyt sinun vuorosi 💪

  1. Korvaa vzkazy-taulukko server.js:ssä yllä olevalla koodilla (tai tee se vaiheittain – ensin GET, sitten POST).
  2. Käynnistä palvelin ja lähetä 2 viestiä Reactista.
  3. Pysäytä palvelin, käynnistä uudelleen, päivitä sivu – viestien pitää jäädä.
  4. Commitoi muutokset Gitiin ja push GitHubiin (ilman web.db:tä – se on .gitignore:ssa).
⚠️

Render/Railway:lla levy on joskus väliaikainenweb.db saattaa poistua uudelleenjulkaisun jälkeen. Tuotannossa käytä myöhemmin hostattua tietokantaa (Render tarjoaa ilmaisen PostgreSQL:n). Oppimiseen ja localhostiin SQLite on täydellinen.

Tarkista: Vieraskirja selviää uudelleenkäynnistyksestä. Tarkistus tapahtuu palvelimella. Käytät parametrisoituja SQL-kyselyitä.

Mitä opit tästä oppitunnista