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
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
1.2k
Active Directory攻防
cryptopeg
PRO
8
4.8k
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
290
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
3
1.2k
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
5
1.1k
OpenID BizDay#17 みんなの銀行による身元確認結果の活用 / 20250219-BizDay17-KYC-minna-no-ginko
oidfj
0
180
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
2
610
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
640
デスクトップだけじゃないUbuntu
mtyshibata
0
590
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
350
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
230
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.9k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Writing Fast Ruby
sferik
628
61k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing Experiences People Love
moore
140
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Docker and Python
trallard
44
3.3k
Why Our Code Smells
bkeepers
PRO
336
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
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