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
Line Chatbot Development
Search
Ryan Chung
February 26, 2019
Technology
0
130
Line Chatbot Development
Ryan Chung
February 26, 2019
Tweet
Share
More Decks by Ryan Chung
See All by Ryan Chung
MovieBot Development
ryan403
0
290
Design Voice-First Games for Alexa
ryan403
0
43
AI Teaching Talk
ryan403
0
100
Cognitive Service
ryan403
0
86
jQuery & API Practices
ryan403
0
110
CSS Practices
ryan403
1
140
JavaScript Practices
ryan403
0
89
Web Programming - Lesson 6
ryan403
1
590
Web Programming - Lesson 7
ryan403
1
600
Other Decks in Technology
See All in Technology
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
140
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
15
4.2k
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
230
Reading Code Is Harder Than Writing It
trishagee
2
110
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
310
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.9k
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
9
2.4k
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
280
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
5
1.1k
偏光画像処理ライブラリを作った話
elerac
1
150
php-conference-nagoya-2025
fuwasegu
0
120
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
170
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Code Review Best Practice
trishagee
67
18k
Unsuck your backbone
ammeep
669
57k
It's Worth the Effort
3n
184
28k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Transcript
Line Bot Dev -
[email protected]
Line Chatbot Messaging API Ryan
Chung III Digital Education Institute 1
Line Bot Dev -
[email protected]
Lab Hello Echo Bot 會照著說的Line
Bot 2
Line Bot Dev -
[email protected]
Create a channel • 登入至console
• 選擇Provider或建立Provider • 設定Icon、名稱、Plan、類別、子類別、聯絡 email • Plan –Developer Trial:不能升級、可推播、限50友 –Free:不能推播、人數不限、之後可付費升級 https://developers.line.biz/console/register/messaging-api/provider/ 3
Line Bot Dev -
[email protected]
設定 Bot • 產生Channel Access
Token –Console -> Channel -> Channel settings –Mesaging settings -> Issue Channel access token • 設定Webhook URL –目前還無法設定,要等後面Bot建立完成 4
Line Bot Dev -
[email protected]
安裝Node.js • 選擇穩定版 (Recommend For
Most Users) – Windows Installer:下載msi檔 – macOS Installer:下載pkg檔 • 如何確認安裝? – 打開終端機,輸入:node -v https://nodejs.org/en/ 5
Line Bot Dev -
[email protected]
安裝Ngrok • 建議放置位置 – Windows:主要使用者資料夾
– Mac:應用程式 • 設定為在哪裡都可以執行 – Windows:進階系統設定 -> 環境變數 -> 系統變數 -> Path -> 編輯 -> 新增 – Mac:ln -s /Applications/ngrok ngrok https://ngrok.com/download 6
Line Bot Dev -
[email protected]
建立專案資料夾 • 新增一個資料夾作為專案資料夾 HelloLineBot •
用VS Code 開啟此專案資料夾 • 新增一個檔案:index.js 7
Line Bot Dev -
[email protected]
建立index.js 輸入程式碼 8
Line Bot Dev -
[email protected]
繼續於 index.js 輸入程式碼 9
Line Bot Dev -
[email protected]
繼續於index.js 輸入程式碼 https://github.com/ryan403/LineEchoBot 10
Line Bot Dev -
[email protected]
設定該專案用到的Key • 新增config資料夾 • 在config資料夾中新增檔案:default.json
11
Line Bot Dev -
[email protected]
專案初始化 • 在VS Code中,按下 Ctrl
+ ~ 開啟終端機 • 輸入npm init • 按下多次enter,使用預設值建立package.json 安裝需要的套件 • 在VS Code中,按下 Ctrl + ~ 開啟終端機 • 安裝能夠一次安裝需求模組的套件 – 在終端機輸入sudo npm install npm-install-all -g • 針對特定檔案中的需求來安裝套件 – 在終端機輸入npm-install-all index.js 12
Line Bot Dev -
[email protected]
安裝Line SDK • npm-install-all 沒裝到
Line SDK npm install @line/bot-sdk 13
Line Bot Dev -
[email protected]
增加Debug與Start Scripts • 在 package.json
新增 • debug:在地測試、start:伺服器上線 14
Line Bot Dev -
[email protected]
執行並開啟除錯模式 • 點擊VS Code中左邊選單中的第四個(偵錯) •
上方Play按鈕右邊下拉新增組態... • 選擇「{ } Node.js 透過NPM 啟動」 • 按下Play按鈕 • 下方偵錯主控台確認伺服器是否已啟動 15
Line Bot Dev -
[email protected]
運用Ngrok讓開發機變成伺服器 • 在終端機執行 ngrok http
1234 • 複製產生的公開網址 (Forwarding https://.....) Copy this one 16
Line Bot Dev -
[email protected]
設定Line的Webhook • Line Channel Settings
• Use webhooks -> Enabled • Webhook URL -> Edit 網址後面加上/callback,記得刪掉https:// 17
Line Bot Dev -
[email protected]
關閉自動回覆與歡迎語 • 掃描QR code加入好友進行測試 18
Line Bot Dev -
[email protected]
測試看看是否有回應! 19
Line Bot Dev -
[email protected]
Lab Tell Image Bot 看得懂照片的Line
Bot 20
Line Bot Dev -
[email protected]
預期成果 21
Line Bot Dev -
[email protected]
Tell Image Bot • Line
Messaging API + Microsoft 認知服務 + 部署上線 認知服務 Computer Vision Service • 圖片識別 Line Messaging API Node.JS SDK Line API 22
Line Bot Dev -
[email protected]
整合前準備 • 前一個例子 Echo Bot
• 微軟認知服務 – 電腦視覺 API Key • Line註冊好一個頻道, 取得相關Key 23
Line Bot Dev -
[email protected]
index.js 24
Line Bot Dev -
[email protected]
index.js 25
Line Bot Dev -
[email protected]
index.js 26
Line Bot Dev -
[email protected]
index.js 27
Line Bot Dev -
[email protected]
index.js 28
Line Bot Dev -
[email protected]
index.js 29
Line Bot Dev -
[email protected]
index.js https://github.com/ryan403/TellImageBot 30
Line Bot Dev -
[email protected]
延伸Lab • 將Line Bot 與
各種AI Service結合 –判斷是不是肯德基(Custom Vision Service) –算算看有幾個人(Face API) • Line Notify 實作 –發生xx事,用Line通知 • IFTTT使用 –看看別人的結合案例 31
Line Bot Dev -
[email protected]
數人頭預期成果 32