NakouPAY説明用

Transcript

1. NakouPAY 学校内文化祭用QRコード決済サービス produced by ロボット研究部
2. 作品概要 高校の文化祭用に開発した QRコード決済システム 一般ユーザー用のアプリと店舗用アプリが あり、金券での取引の代わりに、QRコー ドを用いた決済を行なって、取引を記録 し、各ユーザーの使用額を集計して後日お 金を回収する。
3. 導入のメリット 01 01 取引の円滑化 02 02 不正防止 ユーザーはスマホを見せるだけ、店舗側は数量を入力しQRコードを読み取るだけで済む。 金券に比べて、間違いを防止し、円滑に取引を行える。 全ての処理はサーバーで行われ、ログが残る上、電子化された取引情報などを元にに整合性を 確かめられるため、不正防止に役立つ。 03 03 会計処理等の負担軽減 金券では１枚１枚、間違いがないように数えていたが、電子化されているので、すぐに集計可 能。 04 04 金券販売の負担軽減 後払いにすることで、金券の購入・買い足し・返金が不要になることで、人員を削減できる。
4. 決済の流れ QRコード提示 客側がアプリを起動し、QRコードを提示する QRコード読み取り 店舗側が決済画面でQRコードを読み取る 決済内容の入力 店舗側が決済画面でメニューから個数を入力する 確認 確認画面が表示されるので客側にも見せて、ミスがないかを確認する 決済を実行 決済確定ボタンを押して決済を完了させる
5. 取引キャンセルの流れ 取引内容を取得 取引ID、店舗ID、QRコードのうちいずれかを取得 取引を選択 その取引、店舗の履歴、その人の履歴からキャンセルする取引を選択 最終確認 最終確認画面が表示されるので確認 キャンセルを実行 確認ボタンを押して、実行する。サーバーが処理を行う。 実行されたことを確認 キャンセル処理が行われるが、失敗することもあるので確認する
6. システム構成 フロントエンド： ReactとPWAを使用し、決済後の通知も可能にする S3（静的ホスティング）: ビルド済みPWA（HTML, JS, CSS, 画像, json）を格納。 CloudFront: S3をオリジンとしてPWAの静的ページをグローバル配信。 API Gateway: 公開RESTエンドポイント。CORS設定。 Lambda: API Gatewayから呼び出し。リクエストのJWTを検証後、各処理を実行。 DynamoDB: ユーザーデータ、取引データ、ログ、その他必要な情報を格納
7. 制作背景 従来の金券システムでは、下のような課題がありました： 生徒側の課題：事前購入があるが、購入すべき金券の量を判断するのが難しい（特に1年生） 。時間のない文化祭 において、チケット購入場所が混んでいると買いづらく、余った金券は保護者が返金可能だが、返金場所は毎年 混雑し、過剰に購入して返金する利用者も混雑の一因となっていた。 店舗側の課題：取引時に50円単位の金券それぞれに使用済みマーキングをする手間や、文化祭終了後の集計のた めに一枚一枚を台紙に糊付けする作業が大変だった。 運営側の課題：金券販売所や返金所に多くの人員を配置する必要があり、会計処理も煩雑でした。金券販売所や 返金所は外に設置されていたため、暑さも厳しく、また、一部作業は生徒（生徒会、学級代表等）も行わなけれ ばならなかった。お金やチケットの数え間違いも発生していた。 これらの課題を解決するため、電子化システムを導入することで関係者全体の負担を軽減し、 文化祭の質を向上させることを目指しました。
8. アピールポイント 操作方法が分からない利用者へのサポートや、店舗側の操作ミスへの対応など、トラブル発生時の柔軟な対応が可能 利用者を学校関係者（生徒・保護者・教員）に限定することで、後払いを実現し、現金の物理的な移動を最小限に抑える 作品の強み 最もこだわったポイント フロントエンド：React, PWA（Progressive Web Apps） 配信基盤：Amazon S3 + CloudFront バックエンド：AWS サーバーレスアーキテクチャ（Lambda, API Gateway, DynamoDB） セキュリティ：JWT (JSON Web Token) 実装するのに使用した技術 確実かつ正確に取引データの集計を実現することを一番にこだわって制作しました CDNの活用やサーバーレスアーキテクチャによる自動スケーリングで大量アクセスに耐えうる基盤を構築 Ddos対策など高負荷攻撃に対抗するためCORSで特定のオリジンのアクセス許可やWAFでIP、地域によるアクセス制限 データの整合性を確保するため必要箇所を強整合性データベース操作での実装
9. 下のURLにアクセスする 01 01 アプリをインストールする ※最新版のChromeかsafariで開くことを推奨 右のような画面が表示されたらOK
10. アプリをホーム画面に追加する アプリをインストールする ・Safariの場合 01 01 ①共有ボタンを押す ②ホーム画面に追加を選択 ③ホーム画面に追加されていることを確認
11. アプリをホーム画面に追加する アプリをインストールする ・Chromeの場合 01 01 ①共有ボタンor右上の3点リーダー（︙）を押す ②ホーム画面に追加orアプリをインストールを選択 ③ホーム画面に追加されていることを確認 ※端末等によってボタン、文字が異なる場合があります
12. アプリを起動してログイン ログインする ①アプリを起動 ②学年・組・番号を選択する ③パスワードを入力する ④生徒 or 保護者を選択する 　 （生徒の場合はそのまま） ⑤ログインボタンを押す 02 02
13. 主な機能（下メニュー） ・ホーム 　→お知らせ、現在の使用額、外部サイト ・QR表示 　→決済時に店舗に見せるQRコードです 　　 （有効期限５分・再利用不可） ・履歴 　→取引の詳細を確認できます 基本操作の確認 03 03
14. 主な機能（右上三本線） 基本操作の確認 ・設定 ・サポート / FAQ ・アプリ情報 ・利用規約 ・プライバシーポリシー ・ログアウト 03 03
15. 設定するとできること 通知設定（推奨） ・決済時に決済完了画面が表示される ・決済時に通知で店舗・金額を確認できる ・決済後、続けて支払う場合でもQRコードが 　新しいものに更新される 04 04 ※設定しない場合 ・決済が完了したかどうかは、詳細は履歴から確認 ・不正利用されても気づかない場合がある ・決済後、続けて支払う場合、QRコードを手動で 　再更新する必要がある 設定しない場合
16. 設定方法 通知設定（推奨） 画面は端末によって異なる場合があります 04 04
17. 決済の流れ（客側） ①QRコードを表示する ②注文内容を伝える ③QRコードを提示する 下のボタン（矢印の場所どちらでも）を 押すと、QRコード表示画面になります 店の人に、購入する品目、数量を 伝えてください 店の人がＱＲコードを読み取るので、 スマホの画面を提示してください 焼きそば２個 下さい
18. ①注文内容を聞く ①注文内容の入力 決済の流れ（店側） お客さんから、注文内容を 聞いてください QRコードはカメラアイコンを 押して、カメラを起動して読 み取ってください。 ※直接手入力も可能 注文内容を確認し、確定ボタ ンを押してください。決済が 正常に完了したかも必ず確認 してください。 焼きそば２個 下さい ④リクエスト送信 ③QRの読み取り 注文内容を正確に入力して 下さい ＋ーで数量を変更できます
19. 店舗端末の基本操作 ホーム 決済画面 履歴画面 （QRコード読み取り画面） ※各画面は下のボタンから移動することが可能です 売上やお知らせを確認 決済を行う 履歴の閲覧 カメラのアイコンを タップで起動します
20. 一般ユーザーの基本操作 ホーム QRコード表示画面 履歴画面 （サイドメニュー） ※各画面は下のボタンから移動することが可能です 売上やお知らせを確認 QRコードを表示する 履歴の閲覧