【スマレジアプリを作ってみた#2】引換券モニターアプリの仕様と構成

さて、スマレジのデータを利用したアプリの開発について、
第2回目は**引換券モニターアプリの仕様と構成**についてお届けしたいと思います！

※アプリの登録方法やスマレジAPIから特定のデータを取得するためのプロセス等については、
　第1回の[【スマレジアプリを作ってみた#1】アプリの登録とPostman設定](https://qiita.com/JoBins/items/d485e1afa5687eef18ca)をご覧ください。



## 引換券モニターアプリの仕様

引換券モニターは、スマレジPOSシステムと連携したWebアプリです。
オーダー品の準備が整ったら、レシートに記載された引換番号をモニターに表示して
カスタマーに知らせる、というのがメインの機能です。

####ユーザー
このシステムを使うユーザーは２タイプあります。

* 店舗スタッフ（ファストフード店やレストランのテイクアウトなど、注文時に会計を済ませる店舗を想定）
* カスタマー（注文したお客様）

というわけで、スタッフモニターとカスタマーモニターの2つの画面を用意しました。

- **スタッフモニター**
スタッフモニターには、スマレジアプリで販売処理した取引情報（注文内容）が全て自動で表示されます。
スタッフは、オーダー品の取引ステータス（準備中・呼出中・完了）を管理したり、
カスタマーモニターに引換券番号を表示するといった操作ができます。
Webアプリなので、これらの操作はブラウザ上で行われます。

- **カスタマーモニター**
カスタマーモニターは、レシートに記載された引換番号を表示するための画面です。
カスタマーは、自分のオーダー品がまだ準備中なのか、
準備が完了しもう呼び出されているのか、モニターで確認することができます。

####データフロー
では実際のデータフローがどうなっているのか、図で見てみましょう！

![引換券モニターサーバー .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/908996/8529e4f2-a8a5-5f7c-321d-f26af6f12325.png)


1）まずカスタマーが商品を注文します。
2）注文を受け、スタッフがスマレジアプリで販売処理を行います。
3）販売処理を行ったオーダーの取引情報がスマレジサーバーに登録されます。
4）取引情報が登録されると、スマレジサーバーから引換券モニターサーバーに
　Webhookを介して通知され、取引情報が引換券モニターサーバーに登録されます。
5）スタッフモニターに取引を、カスタマーモニターに引換番号をリアルタイムで表示します。
※もしWebhookが取引登録に失敗したとしても、
　スタッフは手動でスマレジDB内にある取引情報を追加することが可能です。

- **スタッフモニター（注文一覧）**
![fig5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/908996/8ef10eb5-429c-8a3e-0136-3959d13d2f7d.png)


- **カスタマーモニター（番号一覧）**
![QueueMonitor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/908996/d9a03463-7696-61bb-3bfb-8c2795eb4417.png)



6）調理やパッキングが完了したら、スタッフはスタッフモニターで呼出処理を行います。
※この呼出は完了処理を行うまで何度でも行えます。
7）取引ステータスを「受注済」から「呼出」に変更します。
8）呼出処理が完了すると、カスタマーモニターに引換番号が大きく表示され、
　チーーーーンと通知音がなります。
9）カスタマーは自分の引換番号が呼び出されたのをカスタマーモニターで確認します。
10）カスタマーがオーダー品を受け取ります。


- **カスタマーモニター（呼び出し時の画面）**
![QueueMonitor2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/908996/a05a6215-414c-b9b2-57e6-a25e9fb6563d.png)

11）カスタマーがオーダー品を受け取ったら、スタッフはスタッフモニターで完了処理を行います。
12）取引ステータスを「呼出」から「完了」に変更します。
13）引換券モニターは、完了した引換番号をスタッフモニターとカスタマーモニターから削除します。
　※スタッフは履歴画面で完了した取引情報を見ることができます。

- **スタッフモニター（注文履歴）**
![QueueMonitor3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/908996/06f26742-641b-8009-2d74-ee5dda54c9f4.png)


スマレジさんがユーザー向けによりわかりやすく使い方を説明してくれているので、
よかったら[こちら](https://help.smaregi.jp/hc/ja/articles/360052092414
)もご覧ください！


## 利用したツールやフレームワークなど

では次に、このアプリ開発のために利用したツールやフレームワークなど
テックスタックについてお話しします。

ローカル開発のために[phpstrom](https://www.jetbrains.com/phpstorm/)というIDEを利用し、
開発メンバーの誰もが同じ環境を手軽に再現できるよう
セットアップには[docker](https://www.docker.com/)を利用しました。

dockerのセットアップ方法については、よければ[こちらの記事](https://qiita.com/A-Kira/items/1c55ef689c0f91420e81)をご参考ください！


####言語
[PHP](https://www.php.net/)
今回のプロジェクトではPHP (7.4)を使用しました。

####データベース
[MySQL](https://www.mysql.com/)
MySQL (5.6)を使用しました。

####フレームワーク
[Laravel](https://laravel.com/)
バックエンド：Laravel (6.x)を使用しました。

[Vue.js](https://jp.vuejs.org/index.html)
フロントエンド：Vue.js (2.x)を使用しました。
今回は「シングルページアプリケーション」で作りました。

####その他のテクノロジー

**WebSocket**
WebSocketとは、Webにおいて双方向の通信を低コストで行うための仕組みで、
一度コネクションを確立したら、
サーバーとクライアントのどちらか一方のリクエストがなくても
いつでも通信を行うことができます。

今回リアルタイムで取引情報や取引ステータスをアップデートしたかったので
WebSocketを簡単に実装するためPusherというライブラリを使用しました。
例えば、スタッフがある引換番号の取引ステータスを「呼出」に変更したら、
ページをリロードしなくても自動でカスタマーモニターに反映されるようになっています。




####ライブラリ

|  ライブラリ 　　　　| 詳細
| ---------------- | -----------------------
| [Pusher](https://pusher.com/)     | リアルタイム通信を簡単に実装するためのライブラリです。
| [Inertiajs](https://inertiajs.com/)     | 従来のサーバー側ルーティングとコントローラーを使用して、最新のシングルページアプリケーション（React、Vue、Svelte）を簡単に構築できます。


---

第2回目は**アプリの仕様**と**利用したツールやフレームワーク**など
テックスタックについてお送りしました。
次回は認証機能の実装についてお届けします！