【LINE LIFF&MessagingAPI、AWS、PayPay】テーブルオーダーアプリ（ハンズオン参加）

こんばんは。

以下のハンズオンセミナーに参加しました。

https://linedevelopercommunity.connpass.com/event/207867/

コロナ禍の前、自己啓発の一環として毎月セミナーに行くようにしていたのですが、昨年からはペースダウンし、今回は久々の参加となりました。
都心の企業に行って新鮮な気分で手を動かすのは楽しかったのですが、一方で聞き逃したところを何回も聞ける点や、QAがスプレッドシートになっていて後で確認できる点など、オンラインセミナーにもメリットがあると感じました。
特に自分は、セミナー時間中に終えられない事も多かったので、自分のペースで最後まで取り組めるのは助かります。

###概要図（自作）

概要図はセミナー資料に正式版がありますが、自分なりにまとめてみました。
こんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/b5deb4a6-a4f9-b158-84bf-c35b38aa4a24.png)


AWSでは設定ファイルにLINEやLIFF、PayPayのAPIキーを設定してアクセスを可能にしています。また、処理のために3つのDBを作っています。メニューの単価や概要が設定してあるItemListDB等です。

###作ったもの

実際に作ったものの動作確認を紙芝居形式で掲載します。

　　<img width="300px" alt="_20210518_231609.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/a7ceea5f-b8cd-13dd-6eb8-05a00b9ea44e.jpeg">



作ったbotを友達登録すると、この画面になります。
下に表示されているのは、LIFFで作成したテーブルオーダーの画面です。


　　<img width="300px" alt="Screenshot_20210518-111307.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/348bebdb-e5b2-e072-0e8b-4546d53a9c77.png">

リンクが設定されており、こちらの画面に遷移します。


　　<img width="300px" alt="Screenshot_20210518-111326.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/e0bc7ed6-b2ec-7360-6c52-d8d7bd054f75.png">

メニュー画面に遷移。座席番号を入力。


　　<img width="300px" alt="Screenshot_20210518-222303.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/2a0f6206-fe92-448d-9ee3-978cf74943d2.png">


注文したい品をタップすると、個数を入力する画面に。
商品の詳細や単価などは、事前にAWSのDYNAMODBに登録したものを表示しています。
フライドポテトはシューストリングが一番うまい事を伝えたかったので、コメントを編集しました。

　　<img width="300px" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/7c5e7635-a61b-0700-b30d-4e35c48daae2.png">

DBの値編集画面。ここで変更できました。
AWSってこんな事できるのか！これ使いこなしたら楽しそうかも。
どうも今回のハンズオン、自分で手を動かしたところがどこの実装になっているのかイメージできない箇所がいくつかあり、ハンズオンの後何回もいじりなおしています。

　　<img width="300px" alt="Screenshot_20210518-111341.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/ad777c16-70f1-a24c-eeea-133cf2eb37b1.png">


注文決定画面。

　　<img width="300px" alt="Screenshot_20210518-111347.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/2c07796c-eb7b-5e30-2227-104459855747.png">

注文決定画面その２。

　　<img width="300px" alt="Screenshot_20210518-111353.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/72fd53e4-508f-23e8-0cc6-a68ea812c232.png">

これで注文が確定した事になります。

　　<img width="300px" alt="Screenshot_20210518-111404.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/1ec00a9f-347e-e4c3-72e2-c49b88ddc01a.png">

支払画面へ。


　　<img width="300px" alt="Screenshot_20210518-111411.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/9496cbeb-afc9-e828-8c3d-eca8e583be74.png">

支払方法はLINEPayかPayPayを選択できます。今回は初期設定したPayPayに。


　　<img width="300px" alt="Screenshot_20210518-111423.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/507f163c-9dc9-a6b6-0e17-425f8856aeac.png">

あらかじめ設定しておいたPayPayの画面に遷移します。


　　<img width="300px" alt="Screenshot_20210518-111432.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/365fede4-6609-1589-12e3-a4a657f6c081.png">

PayPayユーザーにはおなじみの支払画面ですね。

　　<img width="300px" alt="Screenshot_20210518-111443.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/f9d71e01-07c3-cc12-f5cb-8e9a881681b9.png">

「ペイペイ！」の音声が聞こえました！支払い完了。

　　<img width="300px" alt="Screenshot_20210518-120306.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/fb5d493f-12f4-02b6-0e3b-37ac5207306e.png">



割引チケットを受け取っています。

###LIFF

LINE Frontend Flameworkの略との事です。
webアプリをLINEと連携させるテクノロジーを提供している機能、という説明がありました。

###AWS Lambda

AWSのプログラム実行環境、と理解しました。
どんなプログラムもここに配置する事で実行可能との事です。
自分で作ったJavaのプログラムを、ここで動かしてみたら面白そうです（hello worldレベルでも、ちょっとやってみたいです）。

###PayPayの開発者用メニュー

PayPayの開発者用メニューを使いました。
これを使えば、実際の出金をともなわずにテストができます。
一応登録の仕方だけ記載しておきます。

＜URL＞
https://developer.paypay.ne.jp/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/cefa4722-3b7f-d3bd-ccd6-ae3dbe4c136e.png)

右上の、「新規登録」で登録します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/7ce6f390-3209-0abc-57c4-c95512a38094.png)

アドレスとパスワードを入れて登録します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/802fcfe5-addc-a884-c7c0-0ce459e38962.png)

APIキーとシークレットが表示されているので控えておきます。
「Setting up your account please wait...」というメッセージが出る事がありますが、待っても解決しないケースが多いようです。このメッセージが表示されたら、別のアドレスで再登録する事をお勧めします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/d710ae36-5696-6774-2271-979bfa6f46ee.png)

先の画面で「テストユーザー」をクリックすると上記の画面になります。
PayPayのアプリを起動し、（使用されている方はログアウトし）、PayPayのロゴを7回タップすると開発者用メニューに切り替わりますので、上記IDを使ってログオンする事ができます。
今回のハンズオンの稼働確認はこちらのIDでおこないました。


###最後に

業務でAWSを使う事になり参加しました。2時間でここまでのものが作れてしまうのは楽しいです。
この体験が業務にいつ結びつくのか分からないですが、まあ、こうして色々やっていれば、どこかに辿り着くだろう・・と思って頑張ります。

では。