Vlastní appka pro platby občerstvení v kanceláři

Nemám drobný! Překročený limit na kartě! Než to ten číšník rozpočítá… Zaplatit za někoho oběd nebo colu z firemní ledničky je fajn, kdo si má ale pořád pamatovat, kdo komu co dluží? Ještě donedávna jsme to řešili obyčejným „dlužníčkem“ – aplikací Settle Up. Jenže ruční zadávání bylo zdlouhavé a nejhorší bylo, pokud jste najednou zjistili, že kolegu nemáte v aplikaci. A to nás štvalo. Na Cookielab hackathonu 2022 jsme se proto rozhodli tohle změnit a vymyslet efektivní a rychlé řešení.

Nákup na dva kliky

Nejdřív jsme se podívali, jestli už někdo zrychlení zadávání nákladů do dlužníčku neřešil. Proč taky objevovat Ameriku, že? Když jsme se přesvědčili, že všechny aplikace fungují podobným způsobem jako Settle Up, rozhodli jsme se rozšířit Settle Up o zařízení s mobilní aplikací, které bude stát na ledničce – na něm jednoduše odkliknete, kdo jste a co si berete z ledničky, a tadá, dluh je zapsán. 

Ještě než začneme vyvíjet

Členové týmu ve složení Martin Sadový (Idea a Android development), Honza Čepelák (FE development), Tomáš Markacz (FE development), Zuzka Šámalová (Product management) a Vito Misurenko (Android development) obvykle pracují na různých projektech. Na hackathonu ale spojili síly při vývoji naší vlastní Android appky.

Definované problémy byly jasné: 

  1. Někteří neradi používají dlužníček, protože nechtějí mít dluh.
  2. Každý si z ledničky bere dle nálady věci, za které je třeba zaplatit.

Vymysleli jsme proto Android appku, která umožní rychle platit za nápoje – jednoduše vyberete, kdo jste a za co chcete zaplatit, a tadá – vše se propíše do dlužníčku.

Než jsme se ale pustili do wireframů a vývoje, museli jsme vyřešit ještě jednu věc. Za lockdownu jsme si zvykli na rozvoz, takže ledničku vždycky obstaral jeden člověk. V tu chvíli mu ale ostatní dluží docela dost peněz. Potřebovali jsme proto vymyslet, jak vyplatit naše „zásobovače“ a zároveň vyhovět i lidem, kteří prostě nechtějí využívat dlužníček. Jak jsme si poradili?

„Pro Settle Up a lednici jsme založili bankovní účet. Díky němu se platby z backendové aplikace propisují přímo do Settle Up. Když jdeme na společný oběd a někdo nechce dlužit, může peníze poslat na bankovní účet a platba se automaticky propíše do dlužníčku. Jen to vyrovnání s ostatními musí být pořád jednou za čas manuální,“ shrnuje Zuzka.

Od wireframů po Android aplikaci

Jakmile měl tým ujasněno, co chce řešit, a pročtenou API dokumentaci Settle Upu, aby mohl rozšíření vyvinout, pustili jsme se do práce. Honza Čepelák a Tomáš Markacz pracovali na proxy pro mobilní appku, kterou vytvoří Martin Sadový a Vito Misurenko. Zuzka Šámalová jako produkťačka vše koordinovala a měla nejhorší úkol – založit bankovní účet. :-)

Proč backend proxy?

BE proxy jsme zvolili ze dvou důvodů:

  1. Čas. Protože appka vznikala v rámci hackathonu, měli jsme časový limit na celý projekt a to má i svá stinná místa. Chtěli jsme dát co nejvíc času mobilním vývojářům na ladění UI a UX, takže produkt musel být ready co nejdřív.
  2. Bankovní účet. Backend řeší také skenovaní bankovního účtu pro nové platby přímo na účet, které pak propisuje do dlužníčku.

Jak probíhal vývoj appky

  1. Proxy
  2. Deployment
  3. Integrace s bankovním účtem
  4. UX a UI
  5. Komunikace s proxy

Proxy pro mobilní aplikaci se nám podařilo zprovoznit během prvních pár hodin. Tomáš s Honzou následně začali řešit deployment (CI) a integraci s bankovním účtem. Martin s Vitem mezitím dokázali naprogramovat celou aplikaci, včetně komunikace s proxy, odkud si appka načítá informace o uživatelích a položkách v lednici. To všechno za necelých 24 hodin!

Jedna funkce navíc

U propojení kontaktů, bankovního účtu a položek v ledničce jsme neskončili. Přidali jsme do appky jednu funkci navíc – skenování čárových kódů. Takže jsme nákup z ledničky zjednodušili na jeden klik. Stačí odklepnout svoje jméno, naskenovat EAN a běžet na stand-up.

Tech Stack

Pro fajnšmekry máme seznam technologií, které jsme pro vývoj naší appky využili:

Integrace bankovního účtu s proxy

  • Integromat

Backend Serverless Proxy API vystavuje pro mobilní aplikaci endpointy pro list uživatelů, platby, produkty a vyrovnání dluhu na účtu.

  • Node.js + TypeScript
  • Serverless framework
  • CloudFront + Lamba funkce v Cookielab AWS
  • OpenAPI definice a schéma API
Výsledný look Android appky
„Pro mobilní vývoj byla největší výzva vyzkoušet si Jetpack Compose, se kterým jsme dosud nepracovali. Nakonec jsme dokázali aplikaci vytvořit ve velmi krátkém čase a Vito se mohl vrhnout na implementaci Firebase ML knihovny pro rozpoznávání čárových kódů. Pro komunikaci s backendem jsme použili Retrofit, což asi žádného ostříleného Android vývojáře nepřekvapí,“ shrnuje Martin.

A tady odkaz na krátké video, jak naše appka běhá.

Chtěli byste podobnou appku u vás ve firmě? Dejte nám vědět, rádi vám poradíme.

Vlastní appka pro platby občerstvení v kanceláři
Martin Sadový
El Chapo
By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.