飛沫感染防止・インバウンド対応の飲食店向けQRオーダーアプリを作ってみた

年初に、1か月１ソフト作ると言いながら、2か月もかかってしまいました（巻き返す予定です！KPIは死守）。

今回は、自分の勉強とコンテストの応募がてら、飛沫感染防止・インバウンド対応の飲食店向けQRオーダーアプリを作ってみました。

その名も「ワールドQRオーダー」です(笑)

概要

メニューの表示と注文をウェブサイトからできるアプリです。

なお、注文はQRコードを店員さんが読み取ることで行います。

多言語にも対応しており、お客様は外国語のメニュー表示でも、店員さんがQRコードを読み取ると、店員さん側は日本語で確認ができます。

確実に素早く、会話をせずにオーダー業務ができます。

こちらが実物PoCです（誰かが大量リクエストしない限り有効にしておきます）

スマホのUIで説明します。破線が各画面となっています。

①言語はここで切り替えること（日英中）ができます（DynamoDBから読み込みなおす）

②メニューのジャンルはこのタブから選ぶことができます。

③プルダウンメニューから数値を選ぶと④のように、カートに入ります。

④カートに入った商品は、「＋」ボタン、「ー」ボタンから変更することができます。

⑤「注文する」ボタンを押すと⑥のように注文画面へ遷移します。

⑥このQRコードを店員さんに読み取ってもらいます。なお、「＋」ボタン、「ー」ボタンから注文数を変更することができます。

スタッフは、お客様が掲示する上記⑥のQRコードをQR読み取りソフトで読み取ります（何のアプリでも可）

読み取ると、下記の画面のように、注文が表示されます。

お客様が外国語のメニューから注文していても、日本語で表示されます。

①注文は「＋」ボタン、「ー」ボタンから変更できます。

②例えば、スマレジのようなPOSサービスと連携して、注文を飛ばすことができます。

簡潔に、素早く、コストを抑えて実現するためにサーバーレスの構成としました。

基本的には、JavaScriptでAPIを呼んでDynamoDBのデータをReadするという形式にしました。

メニュータブを切り替わるたびに画面の更新は不要と考え、Ajaxで非同期通信をしています。

フレームワークの恩恵を知りたいなと思い、あえてフレームワークは使用せず、スクラッチで作成しました。

結果として500行くらい書いてしまいました(笑)

なお、QRコードでは、メニューの情報をURLクエリパラメータの形で渡すようにしています。

（例：https://test.com/order.html?id=0123&0182）

これを、JavaScriptで解読して、何のメニューを表しているかを表示します（10^3通りのメニュー数に対応しています。）

最初の3桁がメニューで、その後の数字が注文個数、＆で区切る、というだけですが。

HTML, CSS, Bootstrap, JavaScript

AWS CloudFront, Route53, S3, DynamoDB, Lambda, APIgateway

スマレジと連携して下記の動画のようなアプリとしようと思っていました。

スプレッドシートで編集できるので、簡単にメニューサイトを構築できることを目指していました。

需要あれば、作りこんでいこうと思います。