Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Postman Flowsで作るAPI連携LINE Bot
Search
KMiura
November 25, 2024
Technology
0
340
Postman Flowsで作るAPI連携LINE Bot
2024/11/25 Postman API Night Nagoya 2024 Fall
https://postman.connpass.com/event/332171/
KMiura
November 25, 2024
Tweet
Share
More Decks by KMiura
See All by KMiura
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
1k
Amazon Rekognitionを使ったインターホンハック
miura55
0
47
Pythonでルンバをハックしてみた
miura55
0
100
あなたの知らないクラフトビールの世界
miura55
0
290
Storage Browser for Amazon S3を触ってみた + α
miura55
0
170
Cloudflare R2をトリガーにCloudflare Workersを動かしてみた
miura55
0
170
あのボタンでつながるSORACOM
miura55
0
100
Lambdaと共に歩んだAWS
miura55
3
740
Bedrock Knowledge baseを使って今年の上半期のニュースを聞いてみた(リベンジ編)
miura55
0
230
Other Decks in Technology
See All in Technology
AWSの新機能検証をやる時こそ、Amazon Qでプロンプトエンジニアリングを駆使しよう
duelist2020jp
1
330
AIエージェント開発手法と業務導入のプラクティス
ykosaka
9
2.6k
もう難しくない!誰でもカンタンDocker入門 〜30分であなたのPCにアプリを立ち上げる〜
devops_vtj
0
180
Linuxのパッケージ管理とアップデート基礎知識
go_nishimoto
1
700
AIと共に乗り越える、 入社後2ヶ月の苦労と学習の軌跡
sai_kaneko
0
190
Compose におけるパスワード自動入力とパスワード保存
tonionagauzzi
0
190
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
220
持続可能なドキュメント運用のリアル: 1年間の成果とこれから
akitok_
1
270
Computer Use〜OpenAIとAnthropicの比較と将来の展望〜
pharma_x_tech
6
950
白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計
brainpadpr
1
270
Azure Maps Visual in PowerBIで分析しよう
nakasho
0
190
バクラクの認証基盤の成長と現在地 / bakuraku-authn-platform
convto
4
880
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
How to train your dragon (web standard)
notwaldorf
91
6k
We Have a Design System, Now What?
morganepeng
52
7.5k
Optimizing for Happiness
mojombo
378
70k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
590
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Docker and Python
trallard
44
3.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
690
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Transcript
Postman Flowsで作るAPI連携LINE Bot Koki Miura(@k_miura_io)
自己紹介 • 三浦 耕生(こうき) • Acallのバックエンドエンジニア • JAWS UG名古屋&神戸 運営
• Cloudflare Meetup 名古屋 運営 @k_miura_io koki.miura05
アジェンダ • 自己紹介 • イントロダクション • Postman Flowsについて • LINE
botの紹介 • デモ
API Night Nagoya初開催!
2024年9月 Serverless Days Tokyo
Postman API Night を名古屋に誘致
2日目のワークショップにて
ワークショップ のシナリオ
Postman Flowsを始めて触った
Postman Flowsとは? • Postmanで作成したAPIコレクションのリクエストを組み合わせて ノーコードでワークフローが作成できるツール • 作成したワークフローをWebhookで起動することができる
ん、Webhook?
LINE botって? • LINE上でメッセージのやり取りを行うbot • 自前でWebhookサーバーを立てることでLINE のプラットフォームからWebhookが飛んでくる • サーバーは受け取ったイベントに対してLINE のMessaging
APIを使って返信を行う • Webhookなのでサーバーのレスポンスに決ま りがない
これができる!
というわけで作ってみた • BotのHelloWorld的存在のオウム返しボット • ユーザーが送ったメッセージをそっくりそのまま返す • テキストメッセージ以外(画像、スタンプなど)はオウ ムがえしに対応しないので、そのメッセージも返すよ うにしている
DEMO
全体のフロー
条件分岐 • メッセージの条件分岐にはFQL(Flows Query Language)を使用 • 条件文を記述することで下部のデータの 方向を決める • FQLは独自の言語なので、迷ったら
Snippetsから選択して書き換えるのもあり (この条件もSnippetsを参照)
Webhookのボ ディをAPIのリク エストパラメー タにいれる • リクエストパラメータにWebhookから受け取る値を入 れたいときは、リクエストの中に変数を設定しておく • ここではreplyTokenとmessageを変数として設定して いる
フローから来たJSONから値を取り出す • APIのリクエストで設定した変数に入力され たWebhookから来たJSONを流し込むと変数 が格納される • 各変数に格納したい値をJSONのキーを直 接指定するとその値がリクエストに使われる • CHANNEL_ACCESS_TOKENはコレクション
の変数として設定しているのでここには線を つなげていない
更に改良する • Postmanを使っているので他のAPIと連携したLINE Botにアレンジをしていく(タイトル回収) • GoogleのVision APIと連携してユーザーが送信し た画像に映り込んだロゴの会社を検出するボット にアレンジしていく
全体のフロー
追加で使用しているAPI • 自作API • Vision API
自作API • LINEのAPIで画像取得をするとバ イナリで取得されるため、Flowsで 扱うにはbase64でエンコードしない といけない • Flows内でTypeScriptを使ってエン コードをやろうとしたが、ワークフ ローの規模がでかいのか落ちた
(アップデートに期待) • 仕方なくCloudflare Workersで画像 取得APIを叩いて取得したレスポン スをbase64で返す自前APIを用意
Vision API • よく知られるプロダクトのロゴを画像から検出 するGoogleのAPI • 入力画像をbase64形式で指定できるのが直 感的で、Flows内でリクエストもやりやすい • 右のように検出範囲を画像で出力できるが、
今回は検出したプロダクト名をテキストに返す ように修正
DEMO2
変数を格納 • タスクの出力を他のタスクで使いまわした いときは変数に格納すると確実 • 「Create Variable」ブロックをStartブロック につないでおくことで他のタスクで Webhookのボディを使い回せる
変数を使う • 「Get Variable」ブロックを配置し、使用したいタスクに 向けて線を引くと格納した変数を使い回すことができる • ただフローを流すだけじゃない方法で使いたい値を呼び 出せるので覚えておくと便利!
まとめ • Postman Flowsを使うことでWebhookを使ったイベントドリブンのワーク フローを組むことができる • LINE Messaging APIのようなWebhookのイベントから受け取る値を使う 前提のAPIの動作確認をする時に使える
• 慣れないと変数の扱いとかで詰まるが、そこさえわかってしまえばアイ デア次第でいろんなワークフローを組めるようになるはず
今回紹介したデモの記事 https://bit.ly/3YZCrLj
END