Én is QR kódos mobilpincér appot készítek - mindennel IS #3
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
Második rész: app konfigurálás
A cikk gyakorlatilag ott folytatódik, ahol a fenti abbamaradt. Klikk oda!
T + 2:25: QR kód olvasás
Eddig tehát a meglévő kódhoz konfigurálgattam a környezetet, és most indul az izgis rész: új funkciókkal bővítem az appot. A legelső funkció a QR kód olvasó. Amit itt el akarunk érni:
Egy gomb a felületen, ami megnyitja a kamerát
Érvényes QR kód esetén ugorjon be a QR kódhoz tartozó étterem menüjébe
Eddig tehát semmi mást nem valósítunk meg, mint a QR étlap funkciót, amit sok helyen láthatunk már: az asztalra kitett QR kód betölti az étlapot. Utána majd a rendelés flow jön.
A QR kód kezelésre van egy külső megoldás, ezt integrálom be:
https://pub.dev/packages/qr_code_scanner
Kérdés, hova tegyük a gombot, ami aktiválja a QR kód olvasót. Hát mondjuk a Home képernyő tetejére, az értesítések gomb mellé. Be is pakoltam, ilyen lett:
Ha már itt vagyunk, hozzáteszem a Riverpod csomagot is, ami egy zseniális cucc, ez is gyorsítja a fejlesztést, de ez már nagyon technikai, szóval itt nem mesélek a miértekről 🙂 Tegyük akkor be az üzleti logikát:
A QR csomag alapján konfigurálom az iOS engedélyeket (az appnak megengedjük a kamera használatát, megmondjuk a felhasználónak, miért van erre szükség), és simán beteszem a QR olvasó csomag példa kódját. De nem agyatlanul, hanem gondolva a jövőre, már most átalakítom Riverpod ConsumerWidget -é, ami egyszerűen azért lesz, hogy ha a dolgok komolyra fordulnak, akkor simán lehessen a cuccot tovább fejleszteni.
Persze, a kamerás funkcionalitást nem lehet szimulátorban tesztelni, tehát ehhez telefon kell. Ok, akkor ezt is állítsuk be. Szerencsére van Apple Developer account, kifizetve, szóval innentől csak xcode-al megnyitom a iOS projekt fájlt, beadom a megfelelő adatokat, hogy alá tudja írni a cucc az app bundlet, stb, és váltsunk akkor valós eszközre.
💣💣💣💣 hát ez eltört, hiszen azért itt is gyarló programozóemberek dolgoznak, eszközön bele is futottam egy ordas hibába. Itt sajnos kellett kínlódni, elment 2 óra azzal, hogy:
szintre kellett hozni a külső függőségeket, megfelelően konfigurálni mindent Xcode-ban
meg kellett felelni pár új követelmenynek, mint pl a Facebook client tokent tegyük kódba csodának
"kis" fajvakarás, amíg rá nem jöttem, hogy nem, eszközön nem fog működni a http:://localhost:8080 backend url 🤦🤦
meg egyszer sikerült full szétcseszni az xcode projektet, egyre durvább dolgokba lovallta be magát a rendszer, szóval inkább újra húztam az iOS részt teljesen
Ha már itt voltam, akkor Xcode upgrade...
Na mindegy ezzel elment nettó 2 óra 😱🤬 bele kell húzni.
Viszont innentől 30 perc alatt összejött 😎 Lett egy QR kódos menü appunk. QR kódot pl itt tudunk generálni:
https://hu.qr-code-generator.com
A QR kód tartalma legyen pl ez az url: com.garlictech.yara/restaurantid/tableid
Az elejének majd akkor lesz jelentősége, ha deep linket konfigurálunk, azaz sima kamerával ránézünk a QR kódra, és ha az com.garlictech.yara -val kezdődik, akkor nyitja is az appot ezzel a kóddal (kb...). Ahol a restaurant id az egyik teszt étterem adatbázis azonosítója, a tableid meg valami, ami az asztalt az adott helyen azonosítja. Szóval az új appban rányomunk a gombra, kamera feljön, megmutatjuk neki a QR kódunkat:
És siker! Beugrik az étterem menüjébe!
T + 5:55: Rendelés
Folytköv innen. A következő részben:
A rendelés leadása előtt QR kód olvasást kérünk (miért? mert mi van, ha közben a vendég elmászkált valahova máshová, pl bárpult).
Ha itt minden OK (a kosárban tényleg az adott helyre vonatkozó rendelés van), akkor indul a fizetés.
Fizetés után pedig a backenden elindul a házhozszállítás logika: csak a címben nem egy utca cím lesz, hanem az asztal! A személyzet innen fogja tudni, hogy a rendelést nem futárnak kell adni, hanem odavinni az asztalhoz.