← Nível 4 – Data pro

Lição 5 de 6 ⏱ 55 minutos Premium

Um livro de visitas que dura para sempre

Reescreve a API para as mensagens viverem no SQLite. Um reinício do servidor já não apaga nada.

O que vamos construir

A mesma API do Nível 3 – GET /api/vzkazy e POST /api/vzkazy – mas em vez de um array na memória, lemos e escrevemos no SQLite. O frontend React pode ficar quase igual.

Vou mostrar-te: um servidor com base de dados

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

Vou mostrar-te: o frontend

O componente React do Nível 3 funciona sem alterações – o servidor devolve o mesmo JSON, só com campos extra id e vytvoreno. Podes mostrá-los abaixo da mensagem em texto pequeno a cinzento.

Agora és tu 💪

  1. Substitui o array vzkazy em server.js pelo código acima (ou faz gradualmente – GET primeiro, depois POST).
  2. Inicia o servidor e envia 2 mensagens do React.
  3. Para o servidor, inicia outra vez, atualiza a página – as mensagens têm de permanecer.
  4. Faz commit das alterações no Git e push para o GitHub (sem web.db – está no .gitignore).
⚠️

No Render/Railway, o disco é por vezes temporárioweb.db pode ser apagado após um redeploy. Em produção, usa mais tarde uma base de dados alojada (o Render oferece PostgreSQL gratuito). Para aprender e localhost, o SQLite é perfeito.

Verifica: O livro de visitas sobrevive a um reinício. A validação acontece no servidor. Estás a usar SQL parametrizado.

O que ficas a saber desta lição