この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
こんにちは、中村です。
突然ですが私は映画館によく行きます(週1とか)。そして休日に行くとコンセッション(飲食物やグッズを買うところ)が混んでいますね？お休みなのでしょうがないのですがドリンクを1つ注文するのに相当待たされると、、。という思いがあります。この体験を改善するのが、モバイルオーダー＆ペイです。映画館に到着する少し前にドリンクを注文・決済し、着いたタイミングでカウンターで受け取る。こういった体験だと非常にスムーズですし、長い時間並ばなくて済みそうです。
自身の願望も含め今回は、LINEをインターフェースとした飲み物を注文するモバイルオーダー＆ペイチャットボットを作成していきます(笑) 今回は前回作成したAPIを一部改修し、LINEのバックエンドにAmazon Lex(以下、Lex)を配置したチャットボットを作成します。 まずはこちらをご覧ください。
各種ソースコードはこちらより確認できます。 cm-nakamura-yuki/sample-line-chatbot-lex
また前回作成したAPIはこちらより確認できます。一部APIでの機能を修正しています。 cm-nakamura-yuki/sample-linepay-checkout
まだドキュメントが追いついてない点はご容赦ください...。
作ってみる
LINEの疎通前にAWSリソースを作成していきます。ほとんどのリソースは、AWS Cloudformation(以下, cfn)で作成していきます。
Lex
LexとLexのバックエンドのLambdaはバージニア北部(us-east-1)にて作成します。Lexにアクセスして、Botを作成します。
Botの作成が完了したら、次はBotの中身を作っていきます。
| Intent | Slots | 説明 |
|---|---|---|
| Menu | - | メニューの一覧を表示する |
| Order | drink | 選択されたドリンク情報と決済URLを表示する |
ユーザーが送信しそうな言葉をSample utterancesに入力します。Lambdaを作成後、Fulfillmentで対象のファンクションを選択し権限を与えます。Orderについては、飲み物の種類を取得する必要があります。Slotとして定義することで値を取得できます。またお客様が送信したテキストに飲み物の種類がない場合は、Promptに定義しているテキストを聞き返してくれます。
今回はタップ操作で決済までを実現するためそこまで記載しなくても動作しますが、実際にお客様が入力するようなUXだとLexでの設定が重要になってきます。 スクリーンショットで各Intentの中身を確認しながら設定してみてください。
DrinkTypeというSlotを作成します。今回はサンプルとしてtea, coffee, japaneseteaを追加します。
各Intentを修正したら、Save Intentをクリックし保存してください。Botに更新内容を反映させるにはBuildをクリックしてビルドします。 ビルドが完了したらPublishをクリックしBotへ反映します。反映後右のタブにてLexの挙動を確認できます。疎通の確認や簡単なデバッグで利用しましょう。
cfn
cfnでは、決済・決済完了後に利用するDynamoDB・LINEのWebhook, LINEPayのWebhookで利用するAPI Gatewayを構築します。詳しくはcfnテンプレートをご覧いただければと思いますがこのような設定になっています。
DynamoDB
| 項目 | 値 |
|---|---|
| テーブル名 | パラメータ(PaymentTable)で指定したもの |
| 課金方式 | リクエスト課金 |
| HASH KEY | orderId(String) |
API Gateway
共通
| 項目 | 値 |
|---|---|
| API名 | パラメータ(APIName)で指定したもの |
| ステージ | prd |
LINE用Webhook
| 項目 | 値 |
|---|---|
| リソース | パラメータ(WebhookPath)で指定したもの |
| メソッド | POST |
| 統合 | AWS_PROXY |
| Lambda | パラメータ(WebhookFunctionArn)で指定したもの |
LINEPay用ConfirmPath
| 項目 | 値 |
|---|---|
| リソース | パラメータ(ConfirmPath)で指定したもの |
| メソッド | GET |
| 統合 | AWS_PROXY |
| Lambda | パラメータ(ConfirmFunctionArn)で指定したもの |
AWS Lambda(以下、Lambda)
Lambdaは3つ作成します。
- LINE Webhook用(関数名: Lexbot_LINE)
- LINE Pay Confirm用(関数名: Lexbot_Confirm)
- Lex Backend用(関数名: Lexbot_Backend)
ブログにて何度か紹介していますがApexとTypescriptを利用しています。環境については各自でご用意ください。 また先ほどcfnで作成したリソースを環境変数として定義する必要がある箇所があるので、作成したリソースを確認しておいてください。またLambdaのロールですが、Apexにて自動生成されるためDynamoDB/Lexへのアクセス権限を追加してください。
それでは各Lambdaの簡単な解説をしていきます。
LINE Webhook用
API Gatewayを経由したユーザーのメッセージをLexへリクエストします。LexのレスポンスとLINEのレスポンスでバリエーションが違うため文字列化したデータを分割してリッチなメッセージにしています。
LINE Pay Confirm用
ユーザーがLINE Payで決済承認をした場合にリクエストがAPI Gatewayを経由して送信されます。決済を確定するリクエスト実行します。また店舗での認証をするためのQRコードを発行します。(今回はサンプルで当てています。)
Lex Backend 用
Lexが認識した内容を元に他システムと連携や処理を行いレスポンスを整形します。今回はどのプラットフォームからのメッセージだったのかを判定するフラグ、返すレスポンスを配列に入れ文字列として返します。こうすることで他I/Fで展開する場合にも利用が可能になるかと思います。またOrder Intentの時にConfirmで利用するために、注文データをDynamoDBに保存します。
S3
画像ファイルを展開しておきます。本来であれば、Cloudfront + S3などでホスティングしますが今回は、S3でオブジェクトのみ公開しておきます。
まとめ
映画館に限らずですがモバイルオーダー＆ペイが普及することでお客様・店舗のスタッフ両方のペインポイントを解消できる可能性を感じます。そしてぜひ映画館で導入を検討していただきたいです(笑)
チャットボット開発は弊社にご相談ください。
またAmazon Connectのキャンペーンを行なっております。こちらもご相談お待ちしております。