top of page
  • Szerző képeZsolt Molnár

Én is QR kódos mobilpincér appot készítek - mindennel IS #2

Mit gondolsz, mennyi pénzedbe és idődbe kerülne lefejleszteni egy olyan appot, ami QR kódos étlapot kezel sok étteremben, lehet rendelni/fizetni applikációból, keresni kajákra, éttermekre, ezeket értékelni, kommentelni, és még van hozzá rendelés kezelő is az étterem számára? Több 10 millió forint, több hónap! Mondaná neked egy tetszőleges cég. Mit mond erre a Garlic? Esettanulmány és cikk sorozat.


Első rész: háttér, backend konfigurálás


A cikk gyakorlatilag ott folytatódik, ahol a fenti abbamaradt. Klikk oda!


T + 0:50: firebase konfig

A felhasználó kezelést Firebase-el oldjuk meg. Be fogunk tudni regisztrálni email/jelszó párossal, telefonnal, apple id-vel, google-el és facebookkal. De mindenek előtt, meg kell változtatni a bundle nevet, mert az még fluttermultirestaurant. Ehhez találtam egy hasznos toolt:


https://pub.dev/packages/change_app_package_name

De én szeretem ezt erőből 😎:

grep -Rl com.panaceasoft . | xargs sed -i '' "s,com.panaceasoft,com.garlictech,g"
grep -Rl fluttermultirestaurant . | xargs sed -i '' "s,fluttermultirestaurant,yara,g"

Az új bundle azonosító legyen com.garlictech.yara. Ha ez megvan, akkor indulhat a móka:

npm install -g firebase-tools
dart pub global activate flutterfire_cli
firebase login
flutterfire configure

Ezekkel telepítettem a flutterfire toolt, amivel létre lehet hozni egy új firebase projektet, egyúttal be is lehet konfigurálni az egész app kódot erre a projektre, tehát letölti a konfigurációs fájlokat, stb.


Ok, ez csont nélkül lezajlott, megvannak a google és firebase konfig fájlok, a firebase konzolon látszanak az appok. ☑️


T + 1:05: első app futtatás

Ezen a ponton nézzük meg, egyáltalán fordul-e az app. Fut a backend (de még ugye ez nincs az appba konfigurálva), bundle név rendben, firebase setup rendben, legújabb flutter alapból telepítve, hát akkor:

flutter pub get
open -a Simulator
flutter run --ignore-deprecation

iOS-en dolgozunk, szimulátorban ugye.


💣💣 Ezen a ponton az első futtás nem volt sikeres. Itt számos para lehet, főleg dependency fronton, hogy mi van éppen, az megjósolhatatlan, ez a szitu minden nap más lehet. Igen, hozzá kellett nyúlnom a firebase dependencykhez. De a lelkigyakorlat után az app elindult 🎉🎉 szimulátorban:

Menő! Na, akkor nézzük, megy-e a firebase konfigunk, és hozzuk össze a backenddel.


T + 2:05: firebase konfig, backenden

A config guide megmondja, melyik fájlban konfiguráljuk be a backend urlt. Beadom a http://localhost:8080 -t, ahol tehát fut a dockeres kód, a seedelt backend, és juhú, jönnek a teszt kajáldák, az app működik:


Megnézve a flutter logot, felfedezhetjük az FCM tokent:

Ami elég jó indikátora annak, hogy a push notik is mennek majd csont nélkül.


Próbáljunk regisztrálni akkor. Mondjuk Facebookal:

💣💣 Hát erről lepattantunk, de hiszen szimulátorban vagyunk, nincs az app konfigurálva a facebook oldalon, mindenesetre a procedúra bíztató volt, elindult az MFA, minden. Megpróbáltam Apple ID-vel is, ott is bíztató volt, elindult a folyamat, de hát itt is kell egy kicsit konfigurálni callback url-t, stb az apple developer console-n. Akkor dobjunk egy telefonosat. Ez ügyben a guide szintén ad támpontot, engedélyezzük a telefonos regisztrációt egy kamu teszt telefonszámmal a firebase konzolon. Itt is volt egy kis app oldali konfigurációs kényszer, de erre a flutter log adott támpontot. Ok, ez is bíztatóan indul, de leállt a szokásos ponton, itt is kell apple dev. console matatás. OK, ez eddig nagyon jó, de ezen a ponton maradjunk a sima email/password párosnál. Ezeket a konfigurációkat elvégzem később, ha a dolgok komolyra fordulnak, mindenesetre itt a konklúzió: nagy esélye van annak, hogy a fejlesztők rendesen megoldották az authentikációt, minden módon.

Engedélyezzük a firebase consolen az email/password auth providert, és próbáljuk ki. Email, password, siker:


Itt kicsit kattintgattam, kitöltöttem a profilomat, adtam hozzá kedvenc kaját, mindent, majd logout, login - visszajött minden. Akkor nézzük az asztalos részt!


Itt a zseniális ötlet a következő: mivel a cucc tud rendes asztal foglalást, időre, dátumra (kipróbáltam 😎), ezért a QR kódos működés nem lesz más, mint sima azonnali asztal foglalás, címre szállítás helyett asztalhoz szállítással! Tehát a flow:

  • Vendég bemegy az étterembe, keres szabad asztalt

  • Asztalon QR kód, az appal beolvassa

  • Itt azonnal jelzi a rendszer, ha az asztal már le van foglalva, vagy a közeljövőben le lesz foglalva ("foglalt" tábla)

  • Ha minden OK, akkor egy sima asztal foglalási API hívás megy be, az aktuális idővel, dátummal, extra információként asztal számmal (ahol a QR-t leolvasták), a foglalás a nap végéig tart, amit tehát azonnal lát az admin, mint lefoglalt asztal (hogy ne tudjon odafoglalni valaki más messziről). Természetesen, ha a vendég távozik, az asztal felszabadul.

  • A vendég ilyenkor "helyben fogyasztás" kontextusba kerül az aktuális helyen

  • Az app tud házhoz szállítási rendelést is. Innentől minden megrendelés, amit lead a user, NEM címre megy futárral, hanem az aktuális "helyben fogyasztás" kontextusa szerint, az asztalhoz.

Ezzel az elgondolással, a hipotézis alapján, minimális erőfeszítéssel be lehet integrálni a helyben a "helyben fogyasztás QR menüvel" use caset, ahol újra hasznosítjuk az "asztal foglalás" és a "kiszállítás" logikákat.


... Akkor innen folytatom nemsokára, eddig T + 2:25-nél vagyok, most jön akkor az érdekes rész: van rá max 5 óra 35 percem, hogy belefejleszem az asztalos/QR kódos featuret, bekonfiguráljam a fizetést, hostoljam a cuccot valahol, és kitegyem apple store-ba.


T + 2:25: Helyben fogyasztásos flow

Folytköv!


83 megtekintés0 hozzászólás
bottom of page