Reference / Vývoj

Jak se vaří Jíme Brno? Tvorba rozvážkové aplikace z pohledu vývojáře

Skupina Con Gusto vlastnící několik brněnských restaurací se rozhodla spustit vlastní rozvážkovou službu Jíme Brno. A kompletní realizaci webové aplikace pro svůj exkluzivní rozvoz svěřila právě Cognitu, a to od návrhu implementace až po uvedení služby na trh. Společně s vývojem rozvozového systému jsme dostali za úkol vytvořit také informační systém pro management zadavatele napojený na nejrozšířenější pokladní restaurační systém Septim.

Con Gusto2022Webová aplikace

[screenshot: Jíme Brno, úvodní stránka e-shopu s nabídkou jídel z restaurací Con Gusto]

propojených aplikací

14 dní

vývojový sprint

E2E

od návrhu po provoz

Technická analýza
a návrh architektury

Na základě uživatelského zadání a technické analýzy jsme navrhli architekturu systému složenou z několika samostatných aplikací:

E-shopové rozhraní pro zákazníky (www.jimebrno.cz), kde mohou zákazníci objednávat jídlo z restaurací sítě Con Gusto. Řešení zahrnuje i administraci obsahu a jídelníčku restaurací.
Dashboard optimalizovaný pro tablety v jednotlivých restauracích pro správu příchozích objednávek.
Dashboard pro operátora rozvozu – přehled nad objednávkami a polohou kurýrů v reálném čase.
Mobilní aplikace pro kurýry.
Manažerský informační systém.

[screenshot: architektura systému Jíme Brno, schéma propojení 5 aplikací]

[screenshot: Jíme Brno, Symfony backend s přehledem objednávek]

Technologický
stack

V Cognitu se specializujeme na vývoj webových aplikací v PHP. Jsme odborníky na Symfony Framework postaveném na nejnovější verzi PHP. S vývojem na této platformě máme bohaté zkušenosti, máme na ní nasazeny velké e-shopy, např. chytralekarna.cz i SaaS aplikace jako PinCity.cz, tím pádem byla primární technologie no-brainer. Na systému jsme pracovali v malém týmu a z důvodu rychlosti vývoje jsme šli cestou monolitu s logicky odděleným kódem pro jednotlivé aplikace.

Jako primární datové úložiště pro strukturované data jsme využili PostgreSQL, ke kterému přistupujeme pomocí ORM a DBAL Doctrine. Navíc pro potřeby cache využíváme key-value úložiště Redis.

Frontend
a mobilní aplikace

Pro uživatele generujeme na serveru šablony v jazyce Twig a pro dynamiku v prohlížeči pak Vanilla JavaScript s pomocí knihovny Stimulus.

Mobilní aplikace pro kurýry je potom postavená na multiplatformní React Native komunikující se serverem pomocí REST s využitím ApiPlatform.

Tohle všechno doplňuje pro správu obsahu ještě náš interní CMS Winston a e-commerce platforma Marco.

[screenshot: mobilní aplikace Jíme Brno pro kurýry, React Native rozhraní]

[screenshot: dashboard operátora rozvozu s mapou a polohou kurýrů]

Iterativní
postup vývoje

Standardní postup naší práce zahrnuje sběr požadavků account managerem a UX designérem, tvorbu interaktivního prototypu, UI design po schválení prototypu a předání frontend vývojáři.

Mezitím backend tým připravuje datovou architekturu. Vývoj probíhá ve 14denních sprintech s testovacími cykly. Po každém sprintu následuje schválení nebo úprava pro další iteraci.

Ladění výkonu pokračovalo ještě týden po spuštění aplikace, protože testovat reálný provoz s pohybujícími se kurýry a nepřetržitými objednávkami je v simulovaném prostředí prakticky nemožné.

Zajímavost
na závěr

Co zprvu vypadá jako řešení na pár řádků kódu, ale nakonec zabere dny usilovné práce celého týmu, aneb co nás zaskočilo:

Zvukové notifikace v tabletech restaurací oznamující novou příchozí objednávku

Platforma iOS nezklamala a nadělila nám další z řady hlavolamů. Zvukové projevy byly na iPadu plně ignorovány (na ní byl i Stack Overflow krátký). A řešení? Push notifikace s využitím externí služby.

Adresy pro doručení objednávky

Každá z restaurací má definovanou vlastní rozvozovou oblast s různými zonámi, od které se odvíjí cena dopravy a hodnota minimální objednávky. Při implementaci jsme aplikovali API Google Maps s jejich autocomplete, které se záhy ukázalo v České republice nepoužitelné vlivem neaktuálních čísel popisných, chybějících adres apod.

Toto úskalí se nám podařilo vyřešit integrací služby www.smartform.cz (používá ji například Alza nebo CZC.cz), která obsahuje relevantní databázi poštovních adres, našeptávač a převod adres na GPS koordináty. Velkou přidanou hodnotou je možnost jej flexibilně parametrizovat.

Samotný výpočet vzdálenosti mezi restaurací a doručovací adresou je pak počítán pomocí Distance Matrix API od Google. Na základě vzdálenosti pak dochází k zařazení do jedné ze zon dopravy.

[screenshot: tabletový dashboard restaurace s příchozí objednávkou a notifikací]

Jak jsme
postupovali

Od zadání přes návrh architektury až po spuštění rozvážkové služby. Kompletní vývoj 5 propojených aplikací v jednom monolitu.

Chci konzultaci

Analýza a návrh architektury

Na základě uživatelského zadání a technické analýzy jsme navrhli architekturu systému složenou z 5 samostatných aplikací s napojením na pokladní systém Septim.

UX prototyp a UI design

Account manager a UX designér sbírali požadavky, vytvořili interaktivní prototyp. Po schválení prototypu vznikl finální UI design předaný frontend vývojáři.

Vývoj ve 14denních sprintech

Backend připravil datovou architekturu, vývoj probíhal iterativně ve 14denních sprintech s testovacími cykly a průběžným schvalováním.

Integrace a řešení problémů

Řešili jsme zvukové notifikace na iPadech (push notifikace přes externí službu) i nepřesné adresy (integrace SmartForm místo Google Maps autocomplete).

Spuštění a ladění výkonu

Po uvedení na trh pokračovalo ladění výkonu ještě týden, protože reálný provoz s pohybujícími se kurýry nelze plně simulovat.

PHP

Symfony

PostgreSQL

Redis

React Native

Marco

Použité
technologie

Systém Jíme Brno je postaven na PHP a frameworku Symfony s databází PostgreSQL a cache v Redisu. Mobilní aplikace pro kurýry běží na React Native. Správu obsahu zajišťuje CMS Winston a e-commerce platforma Marco.