学園祭で某チェーン店の呼び出しシステムと電子決済を導入してみた
この記事では学園祭で某チェーン店のような呼び出しシステムと電子決済を導入した際の振り返りをしていこうと思います。
自己紹介
はじめまして専門学校2年生のkurappyです。
今回は突発的な思い付きで学園祭のクラス出店にチェーン店のような呼び出しシステムと電子決済を導入したくなりチームで構成を考え実装から運用までしてみました。初めての投稿となるのですが最後まで読んでいただけると嬉しいです。よろしくお願いします。
お願い
本記事は私の導入してみた経験と感想を共有するものなので学園や学園関係者には直接お問い合わせしないようお願い申し上げます。
チームメンバー(順不同)
- kurappy
- simakixi
- YukihaYukishiro
利用したサービス
- docker
- apache
- mariaDB
- square
iwasakiPosSystem
目指したもの
某チェーン店であるような注文を受け付けると呼び出し番号が発行され呼び出し用モニターには調理中/調理完了の呼び出し番号を表示し、厨房側で呼び出し番号のステータスを変更するというシステムを想像しながら全体のシステム構成を考えました。
構成と流れ
全体の構成図
操作の流れ
レジで商品の個数を選択しお会計。
お支払方法の選択
(電子決済)お支払方法を選択するとお支払いの確認画面が出てきます。squareでの電子決済が完了するまで完了を押しても画面が遷移することはありません。
完了が確認されるとロードを挟み
こちらのサーマルプリンタから案内番号が発券されます。
左側が案内番号、右側がsquareTerminalからの決済証明書になります。
(現金決済)こちらではお支払い確認画面が表示され確認を押すと案内番号が発券されます。
キッチン側端末(調理指示用モニタ)ではこちらの画面が表示され状況に応じてボタンを押していくことでステータスを変更し最後には案内モニタ側webページで調理完了の表記になります。
案内モニタではキッチン側端末にて受け取り待ち注文にステータスを変更した案内番号が表示され待機中/調理中の案内番号は調理中として表示するようになっています。
解説
レジ
要求した仕様
- 誰が使っても分かりやすく
- 二重決済がないように
- 電子決済周り以外ローカルで完結するように
- いざとなれば現金決済でシステムが回るように
要求した理由と解決方法
誰が使っても分かりやすく
＞製作開始時点ではチーム以外の人が扱う可能性があったから。デザインを頑張ることで解決
二重決済がないように
＞お金を扱うから。squareからの決済完了通知であるWebhookがローカルで動かす関係上受け取れないので決済の完了を確認するAPIをたたくことで解決
電子決済周り以外ローカルで完結するように
＞本番でネットがつながらなくて使えないってことがないようにしたい。メインとなるパソコンからLANケーブルを生やしL2スイッチにつないでIPアドレスを個別に割り振ることで解決
いざとなれば現金決済でシステムが回るように
＞本番時に全く使えないという状況がないようにしたい。電子決済と現金決済を分離しシステム自体はローカルで動かせるようにして解決
squareを使った理由
squareAPIとsquareTerminalを使うことで金額を手動入力せずに電子決済のお支払いをすることができるから。
そっちのほうがなんかカッコイイと思ったから。
サーマルプリンタでの印刷方法
サーマルプリンタに設定したIPアドレスへxmlをPOSTする事で印刷ができる印刷できたかどうかはレジ画面からはわからなかったので、別に用意した管理画面から番号を入れることで再発行できるようにして対応できるようにしました。
キッチン側端末(調理指示用モニタ)
DB上のカラムにあるprovide_statusを1~5までに変更することでこの機能を実現しています。
下記に書くのはステータスの内訳です。
- 支払い待機中
- 支払い完了兼調理待機中
- 調理開始兼調理中
- 調理完了受け取り待ち
- 受け取り完了
案内モニタ
キッチン側端末の解説でも書いたprovide_statusを参照してそれに合わせて表示しています。
jsで自動更新を定期的にかけています。
学園祭前日準備
案内モニタ用のモニタが借りられない⁉問題
案内モニタを表示するのに借りようと思っていた大型モニタが前日準備の夕方に貸し出せないと学園祭本部から言われてしまった。
＞急遽友人の部長にサークル所有の大型モニタを頭を下げて借りることで解決
ローカルでの接続方法
当初の予定通りローカルで完結するため当日はノートパソコン(A)にl2スイッチをつなぎ、そこからタッチパネルのついたノートパソコン(B)とサーマルプリンタを接続し固定IPアドレスを割り当てることで環境を構築しました。
画面の表示
キッチン側端末や案内モニタはwebページで作成されているのでデフォルトブラウザからIP+portでアクセスし、案内モニタへはキッチン側端末(ノートパソコンB)からHDMIケーブルを伸ばし拡張モニタとして表示することにしました。
学園祭当日の感想
1日目の感想
1日目は学園祭で電子決済を導入していることに驚いているお客様がとても多い印象でした。店頭に加盟店登録の際にもらえる加盟店シールを貼っていたのですが通りすがるお客様の多くが足を止めて驚いてくれるのでとても楽しかったです。
噂を聞きつけて来て頂いたお客様には「電子決済が使えるいかれたお店」(褒め言葉)と言っていただけましたw
2日目の感想
2日目では噂を聞き付けた多くの教員の方がわざわざこのシステムを見るために来店してくださりお声をかけていただいたので嬉しかったです。
あとこれはこのシステムにあまり関係することではないのですが1日目よりも多くのお客様にご来店いただけたのでとても満足感がありました。
1日目2日目通して
1日目2日目どちらも概ね順調に稼働してくれました。必要だった変更点は案内モニタの案内番号表示が思ったよりも小さかったため急遽cssを編集しフォントサイズを変更したぐらいでした。
後から知ったこと
ほかのフロアでも噂になっていたらしく学園祭の中でのhotな話題の１つになれたようなので作りがいがあったなと思いました。
最終的な売り上げ
最終的には現金決済と電子決済半々くらいでの売り上げでした。利益を考えると私が機材に投資した金額からはマイナスですがたくさんのお褒めの言葉をいただいたので投資したかいがありました。
見つかった改善すべき点
うれしくもあり修正しなければならない点ではあるのですが元々そこまで番号が並ぶ想定ではなかったので案内モニタ上で案内番号の改行がうまくされず一部の番号が埋もれてしまうことがありました。
最後に
私の役割はなんちゃってマネージャーのような立ち位置で専ら必要な機材を用意したり大まかな構成を考えてメンバーに実装の指示を出したりで、私のふわふわしたUIと仕組みを動く現物として答えてくれたメンバーたちにはとても助かりました。
今後の予定
11/14現在は学内のイベントであるプログラミングコンテストに提出できるようにブラッシュアップをかけています。例えば管理画面から商品の追加であったりDBのリセット、電子決済/サーマルプリンタがなくても運用できたり等様々な機能を追加することです。
最終的には来年度の学園祭で全クラスがこのシステムを利用できるようにしたいと思っています。
最後までお付き合いいただきありがとうございました。