How to quickly build a chatbot service
LINE Bot Demo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5121029/pasted-from-clipboard.png)
Key
Features
Multi skill
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5121042/Screenshot_20180719-042906.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5121041/Screenshot_20180719-043042.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5121047/Screenshot_20180719-043435.png)
NLU
Template
Scenario
![](https://is1-ssl.mzstatic.com/image/thumb/Purple115/v4/e3/96/d7/e396d79d-c915-71fe-b264-8022a763c533/LINE.png/246x0w.png)
Line Cloud
Webhook
NLU
Intent, Slots
Third-party APIs
Intent A
Intent B
Intent C
Intent D
Intent E
By Intent fetch Data
Web Server
![](https://is1-ssl.mzstatic.com/image/thumb/Purple115/v4/e3/96/d7/e396d79d-c915-71fe-b264-8022a763c533/LINE.png/246x0w.png)
Line Cloud
Send Message to User
Third-party APIs
Intent A
Intent B
Intent C
Intent D
Intent E
Response Data
Web Server
Generate Message
![](https://is1-ssl.mzstatic.com/image/thumb/Purple115/v4/e3/96/d7/e396d79d-c915-71fe-b264-8022a763c533/LINE.png/246x0w.png)
Line Cloud
Webhook
Intent: weather
Slots: {locate: 台北, date: today}
Third-party APIs
Weather API
Intent B
Intent C
Intent D
Intent E
Fetch Weather Data
今天台北天氣如何?
NLU
Web Server
![](https://is1-ssl.mzstatic.com/image/thumb/Purple115/v4/e3/96/d7/e396d79d-c915-71fe-b264-8022a763c533/LINE.png/246x0w.png)
Line Cloud
Third-party APIs
Weather API
Intent B
Intent C
Intent D
Intent E
Response Data
台北今天天氣晴,室溫 28 度
Web Server
Generate Message
Send Message to User
![](https://is1-ssl.mzstatic.com/image/thumb/Purple115/v4/e3/96/d7/e396d79d-c915-71fe-b264-8022a763c533/LINE.png/246x0w.png)
Line Cloud
Webhook
Intent: music
Slots: {artist: 五月天,
track: 派對動物}
Third-party APIs
Weather API
KKBOX Open API
Intent C
Intent D
Intent E
Fetch Music Data
播放五月天的派對動物
NLU
Web Server
![](https://is1-ssl.mzstatic.com/image/thumb/Purple115/v4/e3/96/d7/e396d79d-c915-71fe-b264-8022a763c533/LINE.png/246x0w.png)
Line Cloud
Third-party APIs
Weather API
KKBOX Open API
Intent C
Intent D
Intent E
Response Data
Web Server
Generate Message
Send Message to User
Develop Chatbot
Step by Step
Step.1
Register a LINE channel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5122818/螢幕快照_2018-07-19_23.36.40.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5122823/螢幕快照_2018-07-19_23.38.38.png)
Step.2
Build a web server
Chatbot Framework
- Node.js
- Cross Platform
index.js
const express = require('express')
const bodyParser = require('body-parser')
const {LineBot} = require('bottender')
const {registerRoutes} = require('bottender/express')
const {lineHandler} = require('./handler')
const config = require('../config')
const server = new express()
server.use(
bodyParser.json({
verify: (req, res, buf) => {
req.rawBody = buf.toString()
}
})
)
const bots = {
line: new LineBot(config.line).onEvent(lineHandler)
}
registerRoutes(server, bots.line, {path: '/line'})
server.listen(process.env.PORT || 5000, () => {
console.log('server is listening on 5000 port...')
})
const {LineHandler} = require('bottender')
exports.lineHandler = new LineHandler()
.onText(async context => {
const text = context.event.text
const reply = text
await context.replyText(reply)
}
)
handler.js
Setting webhook
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5122867/螢幕快照_2018-07-19_23.58.08.png)
Result
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5121644/Screenshot_20180719-114050.png)
Step. 3
Add NLU feature
Nature Language Understanding
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5169549/olami.png)
- Rule-based
- Default IDS module skill
- Can add custom skill
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5122957/螢幕快照_2018-07-20_00.43.50.png)
const config = require('../../config')
const axios = require('axios')
const md5 = require('md5')
class Olami {
constructor(appKey = config.olami.appKey, appSecret = config.olami.appSectet, inputType = 1) {
this.URL = 'https://tw.olami.ai/cloudservice/api'
this.appKey = appKey
this.appSecret = appSecret
this.inputType = inputType
}
nli(text, cusid = null) {
const timestamp = Date.now()
return axios.post(this.URL, {}, {
params: {
appkey: this.appKey,
api: 'nli',
timestamp: timestamp,
sign: md5(`${this.appSecret}api=nliappkey=${this.appKey}timestamp=${timestamp}${this.appSecret}`),
cusid: cusid,
rq: JSON.stringify({'data_type': 'stt', 'data': {'input_type': this.inputType, 'text': text}})
}
}).then(response => {
return response.data.data.nli[0].desc_obj.result
})
}
}
module.exports = new Olami()
Update handler.js
const {LineHandler} = require('bottender')
const olami = require('./nlp/Olami')
exports.lineHandler = new LineHandler()
.onText(async context => {
const text = context.event.text
const reply = await olami.nli(text)
await context.replyText(reply)
}
)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5121814/Screenshot_20180719-135654.png)
Result
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5123015/Screenshot_20180720-011543.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5123014/Screenshot_20180720-010734.png)
Step. 4
Add custom skill
Add music skill
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5121906/Screenshot_20180719-150313.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5121903/Screenshot_20180719-150441.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5121904/Screenshot_20180719-150348.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5121905/Screenshot_20180719-150414.png)
- 播放<artist_name>的歌<{@=music_play_artist}>
- 播放<album_name>專輯的歌<{@=music_play_album}>
- 播放<track_name><{@=music_play_track}>
- 播放<keyword>類型的歌<{@=music_play_playlist}>
artist_name, album_name, track_name, keyword
Intent
- music_play_artist
- music_play_album
- music_play_track
- music_play_playlist
![](https://cdn-images-1.medium.com/max/1600/1*goKnvOurAd1EgOkoQsN7zg.png)
![](https://cdn-images-1.medium.com/max/2000/1*49IVn5IpAvQ2uLBZChfL9g.png)
![](https://cdn-images-1.medium.com/max/2000/1*VLWK1XVKv4pjJtvfCyCWBQ.png)
![](https://cdn-images-1.medium.com/max/2000/1*ky7AEf9n0bXtbRw_0a-u9A.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5122957/螢幕快照_2018-07-20_00.43.50.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5123047/螢幕快照_2018-07-20_01.27.52.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5122957/螢幕快照_2018-07-20_00.43.50.png)
Figure out NLI API response
{
"nli":[
{
"desc_obj":{
"status":0
},
"semantic":[
{
"app":"music_kkbox",
"input":"播放動漫歌曲類型的歌",
"slots":[
{
"name":"keyword",
"value":"動漫歌曲"
}
],
"modifier":[
"music_play_playlist"
],
"customer":"59e031f7e4b0a8057efdce99"
}
],
"type":"music_kkbox"
}
]
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5123052/螢幕快照_2018-07-20_01.32.48.png)
Then use KKBOX Open API
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5169739/螢幕快照_2018-08-11_02.34.41.png)
Search API response
{
"playlists": {
"data": [
{
"id": "OtY2I4ebPHGasNyABp",
"title": "動漫歌曲嚴選集",
"description": "嚴選「蠟筆小新」、「火影忍者」、「刀劍神域 」、「死神BLEACH」、「進擊的巨人」等多部著名動畫歌曲。★世界首次,歡樂滿載的蠟筆小新特展,累積台北、高雄兩站的超人氣,台灣巡迴將進入最終站台中跟大家過寒假囉!馬上購票 http://avextw.kktix.cc/events/shinchan-taichung",
"url": "https://event.kkbox.com/content/playlist/OtY2I4ebPHGasNyABp",
"images": [
{
"height": 300,
"width": 300,
"url": "https://i.kfs.io/playlist/global/34601v1/cropresize/300x300.jpg"
},
{
"height": 600,
"width": 600,
"url": "https://i.kfs.io/playlist/global/34601v1/cropresize/600x600.jpg"
},
{
"height": 1000,
"width": 1000,
"url": "https://i.kfs.io/playlist/global/34601v1/cropresize/1000x1000.jpg"
}
],
"updated_at": "2016-12-16T03:40:47+00:00",
"owner": {
"id": "Ooerjv5-p-TJsFGLg5",
"url": "https://www.kkbox.com/tw/profile/Ooerjv5-p-TJsFGLg5",
"name": "KKBOX 日語小編",
"description": "",
"images": [
{
"height": 75,
"width": 75,
"url": "https://i.kfs.io/muser/global/94563302v1/cropresize/75x75.jpg"
},
{
"height": 180,
"width": 180,
"url": "https://i.kfs.io/muser/global/94563302v1/cropresize/180x180.jpg"
},
{
"height": 300,
"width": 300,
"url": "https://i.kfs.io/muser/global/94563302v1/cropresize/300x300.jpg"
}
]
}
}...
],
"paging": {
"offset": 0,
"limit": 50,
"previous": null,
"next": "https://api.kkbox.com/v1.1/search?limit=50&q=%E5%8B%95%E6%BC%AB%E6%AD%8C%E6%9B%B2&territory=TW&type=playlist&offset=50"
},
"summary": {
"total": 75
}
},
"paging": {
"offset": 0,
"limit": 50,
"previous": null,
"next": "https://api.kkbox.com/v1.1/search?limit=50&q=%E5%8B%95%E6%BC%AB%E6%AD%8C%E6%9B%B2&territory=TW&type=playlist&offset=50"
},
"summary": {
"total": 75
}
}
Integrate them!
![](https://is1-ssl.mzstatic.com/image/thumb/Purple115/v4/e3/96/d7/e396d79d-c915-71fe-b264-8022a763c533/LINE.png/246x0w.png)
Line Cloud
Webhook
Intent: music
Slots:
{keyword: 動漫歌曲}
Third-party APIs
Weather API
KKBOX Open API
Intent C
Intent D
Intent E
Fetch Music Data
播放動漫歌曲類型的歌
NLU
Web Server
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5169549/olami.png)
![](https://is1-ssl.mzstatic.com/image/thumb/Purple115/v4/e3/96/d7/e396d79d-c915-71fe-b264-8022a763c533/LINE.png/246x0w.png)
Line Cloud
Third-party APIs
Weather API
KKBOX Open API
Intent C
Intent D
Intent E
Response Data
Web Server
Generate Message
Send Message to User
Result
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5122071/Screenshot_20180719-160421.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5122072/Screenshot_20180719-160359.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5122069/Screenshot_20180719-160412.png)
Step. 5
Deployment
Deploy to Heroku
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5169781/heroku.png)
Well done!
More details in following resources
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/4698449/kkbox_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/4698441/GitHub_Logo.png)
zaoldyeck @
Vincent Chiang @
江品陞 @
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5120993/fb.png)
Slide @
Source Code @
Blog @
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/4698449/kkbox_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/4698441/GitHub_Logo.png)
zaoldyeck @
Vincent Chiang @
江品陞 @
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5120993/fb.png)
Slide @
Source Code @
Blog @
And LINE Bot Workshop
![](https://scontent.ftpe8-1.fna.fbcdn.net/v/t31.0-8/12010712_1620734721515497_7992329764667642164_o.png?_nc_cat=0&oh=9bef3cf105b0f8ba0678423b77c2751e&oe=5C0FA54E)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845734/images/5169833/9MNGZ158F2.png)
How to quickly build a chatbot service
By zaoldyeck
How to quickly build a chatbot service
- 1,419