idea → development → success (short claim)
Představte si, že své sídlo firmy nebo dům můžete sledovat v reálném čase ve 3D a pozorovat, kdo se na pozemku pohybuje podobně, jako v počítačové hře. Přesně tohle umožňuje zabezpečovací systém od Accur8vision, který střeží celou plochu a dokáže v ní vykreslit objekty. Jednoduše tak zjistíte, jestli je narušitel auto, člověk nebo jen procházející kočka. Naším úkolem bylo převzít webového klienta a přetvořit ho v mobilní aplikaci pro iOS i Android. Jak se ale ukázalo, navázat na původní kód nebylo až tak jednoduché.
Accur8vision má za sebou silné zázemí společnosti LEICA a prestižní klienty z řad firem, golfových hřišť i bezpečnostních složek. Nyní chtěli svým zákazníkům nabídnout mobilní aplikaci, která by poskytovala zjednodušený pohled na střežený prostor a zasílala automaticky notifikace o narušitelích a dalších událostech. Do této chvíle totiž museli Accur8vision posílat upozornění přes e-mail, SMS či telefonicky. Společnost už měla připravené webové rozhraní a s mobilním vývojem obrátili právě na nás.
Potřebovali jsme překlopit webového klienta naší lite aplikace do plnohodnotné mobilní verze. Na základě referencí z jiných projektů jsme si vybrali Cookielab. Jejich proaktivní přístup a ochota jít nad rámec standardních služeb vedly k tomu, že máme špičkovou aplikaci pro naše klienty, která odpovídá našim náročným požadavkům na kvalitu. Cookielab doporučuji všem firmám, které nehledají jen programátory, ale partnery.
CEO TACTICAWARE, s.r.o.
I když původní vývojáři využili React Native for Web – technologii umožňující použít jeden kód napříč platformami, zde jsme narazili na jeho limity, protože software Accur8vision už byl příliš složitý. Další výzvou webového rozhraní bylo, že obsahovalo spoustu výjimek a my tak nemohli kód jednoduše použít pro mobilní aplikaci.
Tento krok byl velmi náročný a pokud jsme u vývoje od začátku, snažíme se mu předejít díky tzv. Product Discovery, kde zkoumáme aktuální potřeby, ale také možnosti pro budoucí škálování produktu.
Při vývoji jsme museli například ověřovat naše výpočty v reálném světě. Do aplikace jsme implementovali satelitní snímky z Google Maps, ale narazili jsme na nepřesnosti vykreslení zón. Například parkoviště se na základě dat od klienta zobrazilo jinde, než bylo na mapě.
Náš tým tak musel najít řešení, jak ověřit, zda je chyba v aplikaci nebo v datech. Využili jsme pro to tenisová hřiště, která mají standardizované rozměry. Nakonec jsme klienta požádali o úpravu nulového bodu v souřadnicích a vše už se vykreslovalo správně.
Push notifikace
Narušení zóny, zakrytí kamery, docházející baterie…
Archiv alarmů
Včetně možnosti přehrát zpětně pohyb narušitelů v konkrétním čase.
Potvrzování alarmů
Uživatel potvrdí, zda šlo o skutečný či falešný alarm a může doplnit poznámky.
Vykreslení zjednodušené mapy
Pohled na střežený prostor z ptačí perspektivy a sledování narušitelů v reálném čase.
V květnu 2024 jsme spustili vylepšení současné mobilní aplikace, které přineslo spoustu pozitiv pro uživatele:
pohyb narušitelů na mapě je výrazně plynulejší,
spotřeba baterie se snížila o cca 10 – 15 %,
je třeba o 96 % méně stahovaných dat,
víme s větší přesností a rychlostí, že je připojení na server stabilní a funkční.
Dále pracujeme na vývoji nového řešení pro web, které bude efektivněji pracovat s přenosem dat. Cílem je mít spolehlivou aplikaci, která bude responzivní na různých displejích a jednoduše integrovatelná do jiných řešení, například dashboardu pro velín apod. a tím i lépe škálovatelná. Zároveň se pouštíme do vývoje iOS a Android aplikace v nativních jazycích a vylepšení UI a UX.
Představte si, že se na sídlo své firmy nebo dům můžete podívat ve 3D a sledovat, kdo se na pozemku pohybuje podobně, jako když procházíte budovami v počítačové hře. To umožňuje zabezpečovací systém od Accur8vision, který střeží celou plochu a dokáže v ní vykreslit objekty. Jednoduše tak zjistíte, jestli je narušitel auto, člověk nebo jen procházející kočka. Naším úkolem bylo převzít webového klienta a přetvořit ho v mobilní aplikaci pro iOS i Android. Jak se ale ukázalo, navázat na původní kód nebylo až tak jednoduché.
Accur8vision má za sebou silné zázemí společnosti LEICA a prestižní klienty z řad firem, golfových hřišť i bezpečnostních složek. Nyní jim chtěli nabídnout mobilní aplikaci, která by poskytovala zjednodušený pohled na střežený prostor a zasílala notifikace o narušitelích a dalších událostech. Společnost Accur8vision už měla připravené webové rozhraní a s mobilním vývojem obrátili právě na nás.
„Co vnímám jako úspěch, je, že jsme dokázali vzít úplně cizí webovou aplikaci napsanou ne úplně standardním způsobem pro danou technologii a zprovoznili ji na mobilech za relativně krátkou dobu.“
Frontend Tech Lead, Cookielab
Naším zadáním bylo zprovoznit už hotovou webovou aplikaci na telefonech jako nativní aplikace a přidat několik funkcí. Bohužel se React Native for Web, v kterém to bylo napsáno, netvářil příliš nativně, protože kód byl upravený speciálně pro web a nepočítalo to s mobilní verzí. Strávili jsme proto 2-3 týdny postupným umazáváním funkcí, abychom získali minimum, které už půjde na mobilech spustit.
Od tohoto základu jsme se odpíchli a znovu přidávali funkce a opravovali kód. Pokud jsme u vývoje od začátku, snažíme se tomuto zdržení předejít díky tzv. Product Discovery, kde zkoumáme aktuální potřeby, ale také „zadní vrátka“ pro budoucí škálování produktu.
Přidání nových funkcí, jako například push notifikace, bylo poměrně jednoduché, zádrhel nastal u map. Accur8vision využívají LiDAR k modelování pohybu narušitelů prostoru v 3D modelu objektu. Pro účely mobilní aplikace však generují pohled z ptačí perspektivy, do kterého jsme potřebovali zakreslit tzv. intrudery jako body (kolečka). Na webu bylo toto zobrazení napsané v Canvasu, standardní HTML technologii, kterou však React Native nepodporuje.
Zkusili jsme využít formát SVG, ale u rozsáhlých map aplikace padala, protože použité knihovny převádí SVG do bitmapy, a na některých telefonech mohla dojít paměť. Přemýšleli jsme nad CSS, ale nakonec jsme se rozhodli upravit klasický Canvas.
Jenže i tam jsme narazili a museli trochu zavítat do matematiky. Standardní postup je, že když chcete vykreslit nějaký bod v geometrickém tvaru, dáte ho doprostřed. Jenže v případě Accur8vision jsme neměli klasické obdélníky, ale různé polygony, např. ve tvaru písmene C apod. Při klasických výpočtech pak byl střed úplně mimo danou oblast. Využili jsme pro to nakonec algoritmus od společnosti Mapbox speciálně vyvinutý pro tyto případy.
Další výzvou byly samotné mapy. Do aplikace jsme implementovali satelitní snímky z Google maps, ale narazili jsme na nepřesnosti vykreslení zón. Například parkoviště se na základě dat od klienta zobrazilo jinde, než bylo na mapě. Jako benchmark jsme využili tenisová hřiště, která mají snandardizované rozměry a ověřovali jsme, jestli je chyba v aplikaci nebo v datech. Nakonec jsme klienta požádali o úpravu nulového bodu v souřadnicích a vše klaplo.
Push notifikace
Narušení zóny, zakrytí kamery, docházející baterie…
Archiv alarmů
Včetně přehrání záznamu z kamer v aplikaci.
Potvrzování alarmů
Uživatel potvrdí, zda šlo o skutečný či falešný alarm.
Vykreslení zjednodušené mapy
Pohled na střežený prostor z ptačí perspektivy.
V současné chvíli pracujeme na vývoji nového řešení pro web a komunikaci se serverem. Důvodem je vylepšení designu i přenos dat. Doteď vše fungovalo tak, že my pošleme data a server nám vrátí jiná, ale abychom v mobilní aplikaci dokázali vykreslovat pohyb narušitelů v reálném čase, provoláváme server pořád. Potřebujeme zavolat asi 6 endpointů, což znamená, že každý dvě vteřiny provoláme 6krát API.
Na tenhle objem dat nebyla komunikace vůbec připravená a nejdřív jsme jednou instancí mobilní aplikace shodili celý server. Vše jsme nakonec vyřešili, ale do budoucna plánujeme pro komunikaci využít gRPC. Cílem je mít spolehlivou aplikaci pro web, která bude rezponzivní na různých displejích a jednoduše integrovatelná do jiných řešení, například dashboardu pro velín ostrahy apod.
