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

さて、スマレジのデータを利用したアプリの開発について、
第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回目はアプリの仕様と利用したツールやフレームワークなど
テックスタックについてお送りしました。
次回は認証機能の実装についてお届けします！