Co bylo výzvou
Cílem projektu bylo vytvoření systému pro management akce s až 300 000 návštěvníky, která se konala po dobu 5 dnů. Přičemž systém musel umět obsloužit až 80 000 uživatelů připojených v jednu chvíli.
Naším úkolem bylo vymyslet a vytvořit celý zážitek. Počínaje e-shopem, kde si návštěvníci kupovali vstupenky již rok před akcí, po mobilní aplikaci pro Android a iOS, s jejíž pomocí mohli mít účastníci hned po ruce všechny důležité informace týkající se akce, své vstupenky s QR kódem, a především také měli možnost mít přehled o tom, které z až 115 zakoupených věcí si už vyzvedli, které ještě na vyzvednutí čekají, a kde mohou být vyzvednuty.
Celý systém totiž umožňoval mnohem více, než-li pouhé zakoupení a následné vyzvednutí (či použití) vstupenky. Účastníci akce měli kromě vstupenky na samotnou akci i vstupy do mnoha památek, muzeí, apod. Rovněž si mohli vyzvednout tričko a další. Vyzvedávání nemělo probíhat na jednom místě, ale na geograficky oddělených lokalitách na území celé České republiky, respektive střední Evropy. Celý systém bylo možné používat jak bez nutnosti vstupenky s QR kódy tisknout, tak i ve zcela papírové podobě, kdy je účastník akce vybaven pouze vytištěnou vstupenkou s QR kódem.
Mobilní aplikace byly dále přebrandovány a použity pro akci Prague Harley Days v červenci 2019.
Jako součást řešení jsme také vyvinuli skenovací mobilní aplikaci pro Android pro organizátory. Tato mobilní aplikace umožňovala organizátorům ověřit, zda je účastník oprávněn vstoupit do místa konání akce a zda má obdržet žádanou věc.
Naším úkolem nebylo pouze navržení uživatelského zážitku, ale i návrh kompletní technické architektury a databázového schématu všech komponent systému.
- responsivní webové stránky
- vývoj mobilních aplikací
- ios
- API
- vývoj webové aplikace
- backend
- android
- technologická výzva
- e-shop
Naše řešení
Řešení sestávalo z robustní webové aplikace vytvořené v Ruby on Rails, která reprezentovala e-shop, administraci, API pro mobilní aplikace a rozhraní pro propojení s externími službami (např. celosvětově fungující platební brána).
Systém byl nasazen v cloudu a s mobilními aplikacemi byl přeložen do 6 jazyků. Pro zajištění požadovaného výkonu byly využity pokročilé technologie jako například zpracování úloh na pozadí, pokročilé techniky kešování, databázová denormalizace a redundance z výkonnostních důvodů.
Funkcionalita
Mezi klíčové vlastnosti mobilních a webových aplikací patřilo:
Kompletní řešení
V rámci řešení jsme vytvořili a dodali kompletní sadu vzájemně fungujících a propojených komponent: e-shop, pokročilou administraci, API, mobilní aplikaci pro Android a iOS pro účastníky, skenovací Android aplikaci pro organizátory,
business intelligence analytické řešení a další.
Offline mód
Zásadní komponenty systému byly stále schopny fungovat i v případě ztráty internetového připojení.
Velká zátěž
Systém musel být připraven na velkou zátěž po dobu kritického období 5-ti dnů, kdy se konala akce. Případné selhání v dostupnosti služby během této doby, by mělo za následek,
že se několik set tisíc účastníků akce nebude schopno dostat do jejích prostor a nebo získat předměty, které si zakoupili.
Plné zotavení
Systém byl vytvořen tak, aby byl schopen zaručit kritickou funkcionalitu i v případě úplného výpadku internetového připojení během akce. Poté byl následně schopen zcela automaticky plně obnovit svou činnost v plném rozsahu v okamžiku, kdy bylo internetové připojení znovu navázáno.
Big data
Data o transakcích, které v systému probíhají, byla pro našeho klienta velmi důležitá. Z toho důvodu byla kromě standardního zálohování, a uložení primárních dat v systému, uložena i redundantní data sekundární a terciální, ze kterých bylo primární data možné dopočítat a obnovit v případě jejich ztráty.
UX analýza aplikací
Prvním krokem analýzy uživatelského zážitku (User Experience, UX) a uživatelského rozhraní je definice cílové skupiny (user target group) a objevení primárních aktérů či jejich person - je třeba zjistit, kdo je uživatelem aplikace, jak se chová, jaké má potřeby, k čemu bude aplikaci používat, apod.
Dalším krokem je formulace User Stories, pomocí kterých popisujeme, co budou jednotliví uživatelé v aplikaci moci dělat - jakým způsobem (a za jakým účelem) s ní budou interagovat. Následně připravujeme diagram uživatelské interakce (UID - User Interaction Diagram), který přiřazuje jednotlivé User Stories konkrétním obrazovkám aplikace, či částem systému.
Nejdůležitějším výsledkem analýzy uživatelského zážitku je prototyp nízké věrnosti (LFP - Low Fidelity Prototype). Ten přesně popisuje, jak by mělo vypadat uživatelské rozhraní každé obrazovky aplikace, z jakých komponent se budou obrazovky skládat a jakým způsobem bude uživatel s obrazovkou interagovat. Výše uvedené kroky děláme pro každou součást systému - analýza uživatelského zážitku bude tedy probíhat jinak pro e-shop a jinak pro mobilní aplikaci.
UX pro e-shop
UX pro mobilní aplikace Motorkář
UX pro skenovací aplikaci
Design aplikací
Design je duší každé aplikace a je to nástroj, který bude tou viditelnou a vědomou součástí toho, jaký dojem si uživatelé z aplikace odnesou. A právě proto je potřeba věnovat designu péči, kterou si zaslouží. Zásadním předpokladem pro úspěšný design je fakt, že aplikace funguje a má správně navržené uživatelské rozhraní. Design by měl být přesto osobitý, přívětivý a srozumitelný. A musí být uzpůsoben pro cílovou skupinu uživatelů dané aplikace.
Systémová architektura
Srozumitelná a robustní definice systémové architektury je to, co odděluje zkušené vývojáře a softwarové architekty od těch, kteří svou kariéru teprve začínají. Právě architektura softwaru rozhoduje o tom, zda bude webová či mobilní aplikace schopna obsloužit jen několik set, nebo desetitisíce uživatelů. Efektivní databázová schémata a rychlá RESTful API jsou ty části aplikací, které nejsou vidět, ale právě ty rozhodují o tom, zda bude aplikace rychlá a výkonná, nebo tragicky pomalá.
Proto v Juicymu věnujeme architektuře softwaru a integraci jednotlivých komponent zásadní pozornost.
Vývoj aplikací
Teprve až když jsou všechny dílky skládačky na stole, můžeme začít závěrečný krok. Tím je samotný vývoj - proces, během kterého jsou nápad a výsledky analýz přetvořeny na samotný produkt za pomoci programování. Systém pro management akce 115. Výročí Harley-Davidson byl vytvořen týmem zkušených vývojářů.
Backend a e-shop byl naprogramován v Ruby on Rails pomocí architektonického vzoru MVC. Nativní mobilní aplikace pro Android a iOS byly naprogramovány pomocí MVVM v jazycích Swift a Java.
Během akce byla hlavní cloudová aplikace spuštěna na 20 výpočetních uzlech a používala tři řešení pro ukládání dat (Postgres, Redis a Memcached). Hlavní databáze byla v reálném čase zálohována úplnou replikou, která byla umístěna na jiném serveru, v jiném datovém centru a geografické lokaci.
Z výkonnostních důvodů byla také implementována denormalizace dat databáze pro účely kešování a rychlého přístupu ke kritickým datům, které mohly být během fungování systému často měněny.
Podpora na místě
Po celou dobu trvání akce byl náš tým přítomen na místě a prováděl dohled nad systémem a podporu. Zajistili jsme, že mobilní aplikace skeneru běžela na všech 100 Android zařízeních, které byly použity. Zároveň jsme také dohlíželi na výkon webové aplikace v cloudu.
Analýza v reálném čase
Abychom mohli poskytnout potřebnou kvalitu podpory na místě, využili jsme celou řadu analytických a Big Data řešení zahrnujících ELK Stack (Elastic Search, Logstash a Kibanu), Influx a Grafanu, Chronograf, Telegraf a Capacitor, Coralogix a New Relic statistiky, a samozřejmě také Fabric a Google Analytics.
Hlavní monitorovací řešení, které bylo klíčové k tomu, abychom dokázali poskytnout podporu v reálném čase na místě, bylo zcela duplikováno ve dvou technologických stackech (ELK stack a Influx + Grafana stack) pro účely zálohy při možném selhání.
Big Data
Kromě tohoto analytického řešení, díky kterému jsme byli schopni monitorovat zdraví celého systému, jsme našemu zákazníkovi Harley-Davidson, poskytli velmi důležité informace o účastnících a o jejich chování během akce.
Pro konkrétní KPI (klíčové ukazatele výkonnosti) jsme naimplementovali zvláštní ovládací panely a vlastní statistiky a grafy.