Files
davisfe.cz/README.md
T

5.4 KiB

🌊 HLADINATOR

HLADINATOR je interaktivní a vizuálně poutavá webová aplikace pro sledování aktuálního stavu a historie českých přehrad. Aplikace poskytuje přesná data o výšce hladiny, odtoku, přítoku, aktuálním objemu a navíc sbírá historii počasí (teploty a srážek) přímo od zdroje.

Zdroj dat: Povodí Vltavy (pvl.cz) a další povodí v ČR.


🚀 Jak spustit aplikaci lokálně

Aplikace je postavena na moderním stacku (React, Vite, TypeScript, Recharts, Leaflet). Pro její spuštění nepotřebuješ žádný složitý backend, data se čtou z předgenerovaných JSON souborů.

  1. Nainstaluj závislosti (pokud jsi to ještě neudělal):
    npm install
    
  2. Spusť lokální vývojový server:
    npm run dev
    
  3. Otevři prohlížeč na adrese http://localhost:5173.

🔄 Jak aktualizovat data (Scraping)

Povodí Vltavy neposkytuje standardní API pro historii srážek a teplot, ani nepodporuje přímé dotazy z klientského prohlížeče (kvůli CORS a bezpečnosti). Proto využíváme vlastní scraper.

Pro ruční stažení těch nejnovějších dat z webu povodí spusť v terminálu:

npm run data:update

Tento příkaz provede dvě věci:

  1. npm run scrape: Otevře stránky povodí pro všech 53 nádrží a říčních stanic, přečte tabulky s historickými měřeními a najde "Aktuální hodnoty", odkud vytáhne exaktní přítok, odtok, objem, srážky a teplotu. Tato data inteligentně sloučí s tvojí lokální databází (public/data/*.json) a automaticky doplňuje chybějící hodnoty přítoku/objemu z minula, aby graf neměl výpadky k nule.
  2. npm run build-index: Zaktualizuje hlavní indexový soubor lakes_index.json, který aplikace využívá pro vykreslení rychlých náhledů (např. v levém menu nebo na mapě).

Automatické stahování dat (Cron / Spouštěč)

Aby se ti automaticky budovala bohatá historie počasí a srážek i ve chvíli, kdy spíš, doporučuji nastavit automatické spouštění skriptu npm run data:update.

Zde jsou nejběžnější možnosti, jak si to můžeš nastavit ty sám:

Možnost A: Přes Crontab na Macu / Linuxu (Lokálně)

Pokud ti běží počítač (nebo domácí server/Raspberry Pi) nepřetržitě, můžeš využít systémový cron.

  1. Otevři terminál a napiš: crontab -e
  2. Na konec souboru vlož následující řádek (uprav cestu ke svému projektu a Node.js):
    # Spustit scraping každých 15 minut
    */15 * * * * cd /Users/davis/WebstormProjects/davisfe.cz && /usr/local/bin/npm run data:update >> scraper.log 2>&1
    
  3. Ulož a zavři editor. Od této chvíle se systém postará o automatický sběr dat!

Možnost B: Pomocí GitHub Actions (Pro Produkci)

Až projekt nahraješ na GitHub, můžeš si vytvořit workflow soubor (např. .github/workflows/scrape.yml), který bude skript spouštět na serverech GitHubu zdarma každou hodinu, a výsledné .json soubory automaticky commitne a publikuje na web.

Možnost C: Jednoduchý integrovaný spouštěč (Doporučeno pro vývoj)

Pokud nechceš řešit složitý systémový crontab, je v projektu připraven inteligentní plánovač. Stačí si otevřít další okno terminálu a napsat:

npm run data:watch

Tento příkaz provede okamžitou aktualizaci a poté automaticky spouští stahování vždy 7 minut po každém 10minutovém kroku (např. 18:07, 18:17, 18:27...). Tento posun zaručuje, že Povodí už stihlo na svůj web nahrát nová data a nestahuješ staré hodnoty.


🐳 Spuštění v Dockeru (Produkce a vlastní server)

Pokud chceš aplikaci nasadit na vlastní server a rovnou s ní spustit i databázi PostgreSQL (TimescaleDB) pro budoucí ukládání dat, je připravena konfigurace pro Docker Compose.

Požadavky:

  • Nainstalovaný Docker a Docker Compose.

Spuštění:

  1. Spusť sestavení a start kontejnerů na pozadí:

    docker-compose up -d --build
    
  2. Docker Compose spustí dva kontejnery:

    • hladinator-db: Kontejner s databází PostgreSQL (TimescaleDB) běžící na portu 5432 se svazkem pgdata pro persistenci.
    • hladinator-web: Webový server Apache servírující zkompilovanou React aplikaci na portu 80.
  3. Web je následně dostupný na portu 80 vašeho serveru.


🛠️ Oprava chyb v historii (Zuby / Nuly v grafu)

Pokud ti aplikace delší dobu neběžela (např. při vypnutém počítači) a následně došlo k doplnění dat z historie, mohly se v grafech přítoku a objemu objevit falešné propady k nule (zuby). Pro vyčištění celé historie a dopočítání těchto bodů z posledních známých hodnot spusť:

npm run data:fix

Tento skript projde všechny datové JSON soubory, detekuje anomálie/nuly a opraví je.

📁 Struktura klíčových datových složek

  • /scripts/lakesConfig.ts - Tady najdeš definici všech 53 sledovaných nádrží a řek (včetně jejich ID pro Povodí Vltavy, GPS souřadnic, maximálních objemů a stavebních kót). Sem můžeš přidávat nové stanice.
  • /public/data/ - Zde se ukládají vygenerovaná JSON data. V produkci musí být tyto soubory přístupné jako statické assety.
  • /src/components/ - Obsahuje samotné vizuální karty, Leaflet mapu a detailní LakeDetail.tsx (kde se vykresluje hydrologický a meteorologický graf přes Recharts s automatickým čištěním chyb a senzorických úletů).