さて、スマレジのデータを利用したアプリの開発について、
第2回目は引換券モニターアプリの仕様と構成についてお届けしたいと思います！
※アプリの登録方法やスマレジAPIから特定のデータを取得するためのプロセス等については、
第1回の【スマレジアプリを作ってみた#1】アプリの登録とPostman設定をご覧ください。
引換券モニターアプリの仕様
引換券モニターは、スマレジPOSシステムと連携したWebアプリです。
オーダー品の準備が整ったら、レシートに記載された引換番号をモニターに表示して
カスタマーに知らせる、というのがメインの機能です。
####ユーザー
このシステムを使うユーザーは２タイプあります。
- 店舗スタッフ（ファストフード店やレストランのテイクアウトなど、注文時に会計を済ませる店舗を想定）
- カスタマー（注文したお客様）
というわけで、スタッフモニターとカスタマーモニターの2つの画面を用意しました。
-
スタッフモニター
スタッフモニターには、スマレジアプリで販売処理した取引情報（注文内容）が全て自動で表示されます。
スタッフは、オーダー品の取引ステータス（準備中・呼出中・完了）を管理したり、
カスタマーモニターに引換券番号を表示するといった操作ができます。
Webアプリなので、これらの操作はブラウザ上で行われます。 -
カスタマーモニター
カスタマーモニターは、レシートに記載された引換番号を表示するための画面です。
カスタマーは、自分のオーダー品がまだ準備中なのか、
準備が完了しもう呼び出されているのか、モニターで確認することができます。
####データフロー
では実際のデータフローがどうなっているのか、図で見てみましょう！
1）まずカスタマーが商品を注文します。
2）注文を受け、スタッフがスマレジアプリで販売処理を行います。
3）販売処理を行ったオーダーの取引情報がスマレジサーバーに登録されます。
4）取引情報が登録されると、スマレジサーバーから引換券モニターサーバーに
Webhookを介して通知され、取引情報が引換券モニターサーバーに登録されます。
5）スタッフモニターに取引を、カスタマーモニターに引換番号をリアルタイムで表示します。
※もしWebhookが取引登録に失敗したとしても、
スタッフは手動でスマレジDB内にある取引情報を追加することが可能です。
-
スタッフモニター（注文一覧）
-
カスタマーモニター（番号一覧）
6）調理やパッキングが完了したら、スタッフはスタッフモニターで呼出処理を行います。
※この呼出は完了処理を行うまで何度でも行えます。
7）取引ステータスを「受注済」から「呼出」に変更します。
8）呼出処理が完了すると、カスタマーモニターに引換番号が大きく表示され、
チーーーーンと通知音がなります。
9）カスタマーは自分の引換番号が呼び出されたのをカスタマーモニターで確認します。
10）カスタマーがオーダー品を受け取ります。
-
カスタマーモニター（呼び出し時の画面）
11）カスタマーがオーダー品を受け取ったら、スタッフはスタッフモニターで完了処理を行います。
12）取引ステータスを「呼出」から「完了」に変更します。
13）引換券モニターは、完了した引換番号をスタッフモニターとカスタマーモニターから削除します。
※スタッフは履歴画面で完了した取引情報を見ることができます。
-
スタッフモニター（注文履歴）
スマレジさんがユーザー向けによりわかりやすく使い方を説明してくれているので、
よかったらこちらもご覧ください！
利用したツールやフレームワークなど
では次に、このアプリ開発のために利用したツールやフレームワークなど
テックスタックについてお話しします。
ローカル開発のためにphpstromというIDEを利用し、
開発メンバーの誰もが同じ環境を手軽に再現できるよう
セットアップにはdockerを利用しました。
dockerのセットアップ方法については、よければこちらの記事をご参考ください！
####言語
PHP
今回のプロジェクトではPHP (7.4)を使用しました。
####データベース
MySQL
MySQL (5.6)を使用しました。
####フレームワーク
Laravel
バックエンド：Laravel (6.x)を使用しました。
Vue.js
フロントエンド：Vue.js (2.x)を使用しました。
今回は「シングルページアプリケーション」で作りました。
####その他のテクノロジー
WebSocket
WebSocketとは、Webにおいて双方向の通信を低コストで行うための仕組みで、
一度コネクションを確立したら、
サーバーとクライアントのどちらか一方のリクエストがなくても
いつでも通信を行うことができます。
今回リアルタイムで取引情報や取引ステータスをアップデートしたかったので
WebSocketを簡単に実装するためPusherというライブラリを使用しました。
例えば、スタッフがある引換番号の取引ステータスを「呼出」に変更したら、
ページをリロードしなくても自動でカスタマーモニターに反映されるようになっています。
####ライブラリ
| ライブラリ | 詳細 |
|---|---|
| Pusher | リアルタイム通信を簡単に実装するためのライブラリです。 |
| Inertiajs | 従来のサーバー側ルーティングとコントローラーを使用して、最新のシングルページアプリケーション（React、Vue、Svelte）を簡単に構築できます。 |
第2回目はアプリの仕様と利用したツールやフレームワークなど
テックスタックについてお送りしました。
次回は認証機能の実装についてお届けします！