Postman Flowsで作るAPI連携LINE Bot

Slide 1

Slide 1 text

Postman Flowsで作るAPI連携LINE Bot Koki Miura(@k_miura_io)

Slide 2

Slide 2 text

自己紹介 • 三浦耕生(こうき) • Acallのバックエンドエンジニア • JAWS UG名古屋＆神戸運営 • Cloudflare Meetup 名古屋運営 @k_miura_io koki.miura05

Slide 3

Slide 3 text

アジェンダ • 自己紹介 • イントロダクション • Postman Flowsについて • LINE botの紹介 • デモ

Slide 4

Slide 4 text

API Night Nagoya初開催！

Slide 5

Slide 5 text

2024年9月 Serverless Days Tokyo

Slide 6

Slide 6 text

Postman API Night を名古屋に誘致

Slide 7

Slide 7 text

2日目のワークショップにて

Slide 8

Slide 8 text

ワークショップのシナリオ

Slide 9

Slide 9 text

Postman Flowsを始めて触った

Slide 10

Slide 10 text

Postman Flowsとは？ • Postmanで作成したAPIコレクションのリクエストを組み合わせてノーコードでワークフローが作成できるツール • 作成したワークフローをWebhookで起動することができる

Slide 11

Slide 11 text

ん、Webhook？

Slide 12

Slide 12 text

LINE botって？ • LINE上でメッセージのやり取りを行うbot • 自前でWebhookサーバーを立てることでLINE のプラットフォームからWebhookが飛んでくる • サーバーは受け取ったイベントに対してLINE のMessaging APIを使って返信を行う • Webhookなのでサーバーのレスポンスに決まりがない

Slide 13

Slide 13 text

これができる！

Slide 14

Slide 14 text

というわけで作ってみた • BotのHelloWorld的存在のオウム返しボット • ユーザーが送ったメッセージをそっくりそのまま返す • テキストメッセージ以外(画像、スタンプなど)はオウムがえしに対応しないので、そのメッセージも返すようにしている

Slide 15

Slide 15 text

DEMO

Slide 16

Slide 16 text

全体のフロー

Slide 17

Slide 17 text

条件分岐 • メッセージの条件分岐にはFQL（Flows Query Language）を使用 • 条件文を記述することで下部のデータの方向を決める • FQLは独自の言語なので、迷ったら Snippetsから選択して書き換えるのもあり (この条件もSnippetsを参照)

Slide 18

Slide 18 text

WebhookのボディをAPIのリクエストパラメータにいれる • リクエストパラメータにWebhookから受け取る値を入れたいときは、リクエストの中に変数を設定しておく • ここではreplyTokenとmessageを変数として設定している

Slide 19

Slide 19 text

フローから来たJSONから値を取り出す • APIのリクエストで設定した変数に入力されたWebhookから来たJSONを流し込むと変数が格納される • 各変数に格納したい値をJSONのキーを直接指定するとその値がリクエストに使われる • CHANNEL_ACCESS_TOKENはコレクションの変数として設定しているのでここには線をつなげていない

Slide 20

Slide 20 text

更に改良する • Postmanを使っているので他のAPIと連携したLINE Botにアレンジをしていく(タイトル回収) • GoogleのVision APIと連携してユーザーが送信した画像に映り込んだロゴの会社を検出するボットにアレンジしていく

Slide 21

Slide 21 text

全体のフロー

Slide 22

Slide 22 text

追加で使用しているAPI • 自作API • Vision API

Slide 23

Slide 23 text

自作API • LINEのAPIで画像取得をするとバイナリで取得されるため、Flowsで扱うにはbase64でエンコードしないといけない • Flows内でTypeScriptを使ってエンコードをやろうとしたが、ワークフローの規模がでかいのか落ちた (アップデートに期待) • 仕方なくCloudflare Workersで画像取得APIを叩いて取得したレスポンスをbase64で返す自前APIを用意

Slide 24

Slide 24 text

Vision API • よく知られるプロダクトのロゴを画像から検出するGoogleのAPI • 入力画像をbase64形式で指定できるのが直感的で、Flows内でリクエストもやりやすい • 右のように検出範囲を画像で出力できるが、今回は検出したプロダクト名をテキストに返すように修正

Slide 25

Slide 25 text

DEMO2

Slide 26

Slide 26 text

変数を格納 • タスクの出力を他のタスクで使いまわしたいときは変数に格納すると確実 • 「Create Variable」ブロックをStartブロックにつないでおくことで他のタスクで Webhookのボディを使い回せる

Slide 27

Slide 27 text

変数を使う • 「Get Variable」ブロックを配置し、使用したいタスクに向けて線を引くと格納した変数を使い回すことができる • ただフローを流すだけじゃない方法で使いたい値を呼び出せるので覚えておくと便利！

Slide 28

Slide 28 text

まとめ • Postman Flowｓを使うことでWebhookを使ったイベントドリブンのワークフローを組むことができる • LINE Messaging APIのようなWebhookのイベントから受け取る値を使う前提のAPIの動作確認をする時に使える • 慣れないと変数の扱いとかで詰まるが、そこさえわかってしまえばアイデア次第でいろんなワークフローを組めるようになるはず