115. Výročí Harley-Davidson

Systém pro management akce a mobilní aplikace

Harley-Davidson 115th Event Logo

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.

115. Výročí Harley-Davidson cover obrázek

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.

Vývoj responsivní webové stránky a vývoj mobilní aplikace pro iOS a Android pro oslavy 115. Výročí Harley-Davidson v Praze

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.

Klient:

Harley-Davidson logo

Datum:Červenec 2018

responsivní webové stránkymobilní aplikaceandroidiosbackende-shopvývoj mobilních aplikacívývoj webové aplikacetechnologická výzva

Naše řešení

Řešení sestává z robustní webové aplikace vytvořené v Ruby on Rails, která reprezentuje e-shop, administraci, API pro mobilní aplikace a rozhraní pro propojení s externími službami (jako je celosvětově fungující platební brána). Systém je nasazen v cloudu a s mobilními aplikacemi je přeložen do 6-ti jazyků. Pro zajištění požadovaného výkonu jsou využity pokročilé technologie jako je 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 projektu patří

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.

Skenovací aplikace pro Android
UX mobilních a webových aplikací Harley-Davidson

Analýza uživatelského zážitku

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 analýza pro webovou aplikaci UX analýza pro mobilní web UX analýza pro mobilní webovou stránku

UX pro mobilní aplikace Motorkář

UX analýza pro mobilní aplikace UX analýza pro mobilní aplikace UX analýza pro aplikace pro mobil UX analýza pro aplikace pro mobilní telefony

UX pro skenovací aplikaci

UX analýza pro mobilní aplikaci skeneru UX analýza pro mobilní aplikaci UX pro mobilní aplikaci skeneru UX analýza pro mobilní aplikaci
Design mobilních a webových aplikací Harley-Davidson

Design

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.

Design e-shopu a aplikací byl vytvořen a poskytnut naším klientem.

Architektura mobilních a webových aplikací Harley-Davidson

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 mobilních aplikací a vývoj webové aplikace Harley-Davidson

Vývoj

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 je naprogramován v Ruby on Rails pomocí architektonického vzoru MVC. Nativní mobilní aplikace pro Android a iOS jsou 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.

Náš tým prováděl na místě dohled nad systémem

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.

Naše technická podpora
Analýza v reálném čase pro mobilní a webové aplikace

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 řešení

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.

Výsledek

Výsledkem projektu je kompletní platforma. Naprogramovali jsme na míru webovou aplikaci, která zajišťuje e-shop a administraci, API, nativní mobilní aplikace pro iOS a Android pro účastníky akce (motorkáře), a Android skenovací aplikaci pro odbavování účastníků.

E-shop

Vývoj webové aplikace pro 115. Výročí Harley-Davidson v Praze

Mobilní aplikace pro motorkáře

Vývoj Android aplikace 115. Výročí Harley-Davidson v Praze Vývoj iPhone aplikace 115. Výročí Harley-Davidson v Praze Vývoj mobilní aplikace pro Android 115. Výročí Harley-Davidson v Praze Vývoj mobilní aplikace pro iPhone 115. Výročí Harley-Davidson v Praze Vývoj Android aplikace 115. Výročí Harley-Davidson v Praze Vývoj iOS aplikace 115. Výročí Harley-Davidson v Praze

Mobilní aplikace Skener

Vývoj mobilní aplikace pro Android - Skener Vývoj aplikace pro Android - Skener Vývoj Android aplikace Skeneru Vývoj mobilní Android aplikace Skeneru

Hledáte spolehlivého technologického partnera pro Váš projekt? Rádi o Vašem projektu
uslyšíme více.

Chci také aplikaci! Anemone
Zpět na začátek