Mock data a JSON server 📊
Mock data jsou data, která jsou simulována a nejsou součástí reálné aplikace.
V této části se podíváme na práci s daty pomocí JSON serveru, který nám umožní simulovat načítání dat z API pro naši aplikaci.
🎯 Proč mock data?
Výhody mock dat:
✅ Rychlý vývoj - nemusíme čekat na připravený backend ✅ Konzistentní data - stejná data pro všechny vývojáře ✅ Testování - můžeme testovat různé scénáře ✅ Offline práce - aplikace funguje i bez internetu a přístupu k API ✅ Prototypování - rychlé ověření nápadů
🚀 JSON Server
JSON Serverje jednoduchý nástroj, který nám umožní rychle vytvořitREST API(o tom, co je REST API tento kurz není - zkuste si najít) z JSON souboru.
Vytvoření databáze (db.json):
Vytvoříme si soubor
data.json
[
{
"name": "Alfred Novák",
"email": "alfred.novak@example.com",
"position": "Software Engineer"
},
{
"name": "Jana Svobodová",
"email": "jana.svobodova@example.com",
"position": "Product Manager"
}
]** Díky Bundleru to bude fungovat a můžeme načíst přímo JSON do objektu.
import data from './data.json';V reálné aplikaci ale tohle určitě nechceme (nebo ne pravidelně).
Spíš budeme načítat data z nějakého serveru (API)
Spuštění serveru:
Vytvoříme si z těchto našich dat JSON Server, který nám data bude posílat a my je můžeme načíst pomocí
fetchap.
# Nainstalujeme JSON server
npm i -g json-server
# Spustíme
json-server --watch 01-mock-employees.json --port 3001
# Případně spustíme s NPX
npx json-server --watch 01-mock-employees.json --port 3001