David Fencl
73 lines
4.1 KiB
Markdown
73 lines
4.1 KiB
Markdown
# 🌊 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):
|
|
```bash
|
|
npm install
|
|
```
|
|
2. Spusť lokální vývojový server:
|
|
```bash
|
|
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:
|
|
```bash
|
|
npm run data:update
|
|
```
|
|
|
|
Tento příkaz provede dvě věci:
|
|
1. `npm run scrape`: Otevře stránky povodí pro všech 12 přehrad, přečte tabulky s historickými měřeními a najde "Aktuální hodnoty", odkud vytáhne exaktní **přítok, objem, srážky a teplotu**. Tato data inteligentně sloučí s tvojí lokální databází (`public/data/*.json`). Pokud Povodí aktuálně počasí neposkytuje, skript zrecykluje tvou dřívější uloženou hodnotu, aby se graf "nerozbil".
|
|
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):
|
|
```bash
|
|
# 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ěč (Nejlehčí)
|
|
Pokud nechceš řešit složitý systémový crontab, napsal jsem pro tebe přímo do Node.js malý spouštěč. Stačí si otevřít další okno terminálu a napsat:
|
|
```bash
|
|
npm run data:watch 10
|
|
```
|
|
Tento příkaz ihned provede první stažení a následně bude aplikaci automaticky aktualizovat **každých 10 minut** (číslo na konci si můžeš libovolně přepsat podle toho, jak často chceš stahovat). Skript poběží, dokud okno terminálu nezavřeš.
|
|
|
|
---
|
|
|
|
## 📁 Struktura klíčových datových složek
|
|
|
|
* `/scripts/lakesConfig.ts` - Tady najdeš definici všech 12 sledovaných přehrad (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é přehrady.
|
|
* `/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).
|