REF Reference · případová studie

⚠ Toto je pouze ukázka (v produkci není dostupná).
Draft

Meteopress Radar Kit

Radar pro ty, kdo radarům rozumějí

Vývoj frontendu
Fakta o projektu
Klient
Meteopress
Platformy
Web, 2D a 3D vizualizace radarových dat
Spolupráce
Vlastnictví frontendu, dvoutýdenní sprinty
Od roku
2024

01 Technologie · pod kapotou

SvelteFE frameworkTypeScriptLanguageNxBuild toolsPlaywrightE2E testingStorybookUI workshop

02 Případová studie · příběh

Meteopress je česká meteorologická společnost. Kromě předpovědí pro veřejnost vyvíjí software pro profesionály. Jedním z jejích klíčových produktů je Radar Kit, webová aplikace pro zkušené meteorology, kteří potřebují víc než barevnou skvrnu deště na mapě. Meteopress ji nasazuje zákazníkům na několika kontinentech, od Evropy přes Afriku, Asii a Oceánii po Ameriku, a sám ji řadí mezi nejpokročilejší aplikace svého druhu na trhu.

Meteorolog si v Radar Kitu vybere radarový zdroj a produkt, třeba základní odrazivost (DBZH) nebo diferenciální odrazivost (ZDR). Pak nastaví elevaci paprsku nebo výšku a prochází časovou osu posledních minut. Vedle sebe může mít několik panelů s různými produkty. Mapu může naklonit do 3D, kde data dostanou skutečný tvar radarového měření: kužele paprsků, které radar vysílal pod různými úhly.

Radar Kit se dvěma radarovými panely vedle sebe a vertikálním řezem radarovými daty podél čáry přes mapu
Radar Kit se dvěma radarovými panely vedle sebe a vertikálním řezem radarovými daty podél čáry přes mapu

Důležitý produkt, který rychle rostl

Když se FlowUp v červenci 2024 do projektu zapojil, Radar Kit už měl platící zákazníky a pro Meteopress byl strategicky důležitý. Aplikaci předtím vyvíjel jiný dodavatel a částečně i Meteopress sám. Jeho tým se ale soustředí hlavně na Python a radarová data a pro dlouhodobý rozvoj frontendu v JavaScriptovém ekosystému potřeboval posilu.

Aplikace rostla rychle, aby stíhala potřeby konkrétních zákazníků, a prioritou bylo doručovat nové funkce. S přibývajícími zákazníky a funkcemi ale bylo potřeba dát vývoji pevnější základ: automatizované kontroly, testy a jednotná pravidla. Aplikace přitom stojí na náročné kombinaci technologií: Svelte, WebGL, MapLibre GL pro mapu a Three.js pro 3D scénu.

Kdo co dělá

FlowUp v projektu vlastní vývoj a údržbu frontendu. Radarové API v Pythonu, které dodává data, spravuje Meteopress. Meteopress také určuje produktovou vizi a vyvíjí vlastní experimentální funkce, ke kterým mu FlowUp na vyžádání dělá code review.

Na projektu pracuje zhruba 2,5 vývojáře z FlowUp ve stabilní měsíční kapacitě. Vývoj běží ve dvoutýdenních sprintech zakončených demem pro Meteopress. Nejde o první spolupráci obou firem, a sdílený kód proto slouží i dalším aplikacím, které FlowUp pro Meteopress vyvíjí nebo udržuje.

Pevné základy, krok za krokem

Hlavním úkolem nebylo jen přidávat funkce. Aplikaci bylo potřeba postupně proměnit tak, aby se dala bezpečně a dlouhodobě rozvíjet, a to za plného provozu, bez zastavení dodávek pro zákazníky Meteopressu.

  • Monorepo a sdílený kód. Radar Kit jsme převedli do monorepa na pnpm workspace rozšířeném o Nx, s jednotným toolingem pro všechny aplikace a knihovny. Jednoduchou mapu jsme vyčlenili do sdílené knihovny, takže stejnou implementaci používají i další aplikace Meteopressu.

  • Bezpečnost závislostí. Přechod z npm na pnpm jsme využili k nastavení ochran proti supply chain útokům.

  • Aktuální technologie. Framework i závislosti pravidelně aktualizujeme, aby aplikace nezastarávala a neskrývala bezpečnostní rizika.

  • Přísnější kód. Zavedli jsme striktní type checking, linting a další statickou analýzu a kód jsme refaktorovali na vyšší standard.

  • Povinné pull requesty. Každá změna prochází CI na GitHub Actions, code review a manuálním testem.

  • Testy, které vidí canvas. Výstup Radar Kitu je převážně obrazový, takže klasické testy nestačí. E2E testy v Playwrightu pokrývají kritické scénáře pomocí screenshot testů nad mockovaným radarovým API s deterministickými daty. Případné regrese ve vykreslení tak zachytíme už v pull requestu.

  • UI Kit a Storybook. Opakující se vizuální prvky postupně sjednocujeme do knihovny komponent nad Tailwindem a Ark UI. Každý příběh ve Storybooku slouží zároveň jako komponentový test včetně kontroly přístupnosti.

  • Dokumentace. Celou codebase jsme zdokumentovali včetně doménového glosáře, aby se do ní snadno zorientoval nový vývojář i AI agent.

Dnes každá změna projde pull requestem, automatickými kontrolami a review. Případné chyby se vracejí autorovi ještě před nasazením.

Řezy radarovým objemem

K nejnáročnějším funkcím patří vertikální a horizontální řezy, o které jsme rozšířili 3D vizualizaci. Radar neměří po vodorovných vrstvách, ale po kuželích paprsků s rostoucí výškou. Aby meteorolog viděl bouřku v řezu mezi dvěma body nebo v konstantní výšce, musí aplikace data z několika kuželů přepočítat a interpolovat. Pro horizontální řez nabízí několik algoritmů, které se liší tím, jak naloží s místy, kde data nad nebo pod chybí.

Na obrazovce to vypadá působivě, ale za výsledkem je spousta R&D. Náš vývojář nastudoval odbornou literaturu a postupně převáděl představu meteorologů do algoritmů. Ta se během vývoje sama vyvíjela. Algoritmy pak ladil a optimalizoval pro plynulé vykreslování v prohlížeči. Opravdu porozumět use casům znamená uvažovat jako meteorolog, takže klíčová byla trpělivá komunikace a iterace. Řadu rozšíření šlo navíc doručit čistě jen díky přípravným refaktorům, které byly možné právě proto, že kód už měl testy a jasná pravidla.

Jak spolu pracujeme

Aby se Meteopress mohl soustředit na meteorologii a své zákazníky, převzal FlowUp i roli technického product ownera. Požadavky od Meteopressu převádíme na user stories, se kterými může vývojář rovnou pracovat. Technické úkoly, jako refaktoring, testy nebo tooling, většinou navrhujeme sami a Meteopress je schvaluje. Vývoj se tak řídí z velké části sám a Meteopress na konci každého sprintu vidí hotovou práci na demu.

Proces ale neznamená rigiditu. Když Meteopress chystá novou zakázku nebo se u zákazníka objeví kritická chyba, umíme priority pružně přeskládat. Zavedená pravidla nás přitom nebrzdí. Díky testům a review můžeme rychlou opravu nasadit s jistotou, že nic jiného nerozbije. Dlouhodobě nám tak proces čas spíš šetří, než aby ho ubíral.

Co se změnilo

O kvalitu Radar Kitu se dnes soustavně staráme. Technický dluh průběžně snižujeme a aplikaci systematicky testujeme. Když Meteopress potřebuje funkci pro nadcházející zakázku, umíme ji upřednostnit a nalezené chyby rychle opravit.

Na projekt se dá snadno zapojit. Proces i informace jsou transparentní a dohledatelné a testovací stavy jde připravit deterministicky. Díky tomu mohou FlowUp i Meteopress delegovat části vývoje AI agentům, i když jde o převážně vizuální aplikaci.

Pro Meteopress je FlowUp spolehlivou technickou oporou: partnerem, který drží kvalitu, dělá review jejich vlastních experimentů a krok za krokem posouvá Radar Kit k produktu připravenému na dlouhodobý růst.

Citace

Místo pro citaci Jakuba Bartela o spolupráci, čekáme na podklady od Meteopressu.

Jakub Bartel
Jakub BartelHead of SW and AI Development | Meteopress

03 Produkt · obrazovky

MeteopressWeb, 2D a 3D vizualizace radarových dat
Radar Kit se dvěma radarovými panely a vertikálním řezem

04 Pokračujte · další práce

Zpět na všechny reference