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
120
Line Chatbot Development
Ryan Chung
February 26, 2019
Tweet
Share
More Decks by Ryan Chung
See All by Ryan Chung
MovieBot Development
ryan403
0
220
Design Voice-First Games for Alexa
ryan403
0
33
AI Teaching Talk
ryan403
0
82
Cognitive Service
ryan403
0
68
jQuery & API Practices
ryan403
0
97
CSS Practices
ryan403
1
120
JavaScript Practices
ryan403
0
82
Web Programming - Lesson 6
ryan403
1
550
Web Programming - Lesson 7
ryan403
1
590
Other Decks in Technology
See All in Technology
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
390
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
2
180
シンプルなHITL機械学習と様々なタスクにおけるHITL機械学習
naohachi89
0
310
Google Cloud Next '24 Recap in ZOZO AIにより変わる開発 運用/Development and operation changed by AI
gachimuchiengineer
0
190
汎用ポリシー言語Rego + OPAと認可・検証事例の紹介 / Introduction Rego & OPA for authorization and validation
mizutani
1
140
本番環境で Cloudflareを 使ってみた話
miu_crescent
2
120
エムスリーマルチデバイスチーム紹介資料 / Introduction of M3 Multi Device Team
m3_engineering
1
150
#phpconkagawa レガシーコードにもオブザーバビリティを 〜少しずつ始めるサービス監視〜
yamato_sorariku
0
540
回り回って効いてくる副次的効果としての技術広報/techpr
nishiuma
1
180
kcp: Kubernetes APIs Are All You Need #techfeed_live / TechFeed Experts Night 28th
ytaka23
1
190
Google Cloudを組織(企業)で運用する時のベストプラクティス × 健康の環境分離戦略 #まるクラ勉強会
yasumuusan
0
170
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
0
2k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Into the Great Unknown - MozCon
thekraken
15
1.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
23
1.7k
A designer walks into a library…
pauljervisheath
201
23k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Visualization
eitanlees
137
14k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Docker and Python
trallard
35
2.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Bash Introduction
62gerente
605
210k
Designing the Hi-DPI Web
ddemaree
276
33k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
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