Bottender 為優拓資訊打造並開源的多平台 Chatbot Framework，可支援包含 LINE、Facebook、Slack、Telegram 在內的多種平台，充分模組化且靈活的優勢，使得 Bottender 自推出後即獲得許多好評與使用。目前已在 GitHub 上累積逾 2000 Stars，更曾登上 GitHub Trending 的 JavaScript 類第二名、不分類第三名。 本課程由 Bottender 團隊成員親自講授，除了介紹 Bot 在 Messenger 上的作用、分析現有工具與 Bottender 的特色外，也將會手把手帶領學員用 Bottender 完成一隻簡單的 Chatbot。 Bottender | https://bottender.js.org/ 優拓資訊 | http://yoctol.com/

3. •參參與開源社群與專案約 4 年年
•GraphQL Taiwan 共同發起⼈人
•開發維護 electron-react-boilerplate、awesome-graphql、
koa-graphql、bottender、messaging-apis 等活躍的專案
•貢獻過許多開源專案，例例如：react、redux、webpack、
koa 等

4. YOCTOL INFO INC.
@ 2018 Copyright. All rights reserved
4
WE AI YOUR
BUSINESS
BY BOT.
YOCTOL.AI
Your Conversational A.I. Solution

5. YOCTOL INFO INC.
@ 2018 Copyright. All rights reserved
5
非常的⽀支持 Open Source 的精神

7. 不要重複開發輪輪⼦子
如果有很好很適合的輪輪⼦子的話

8. 為什什麼我們選擇⾃自幹 Bot 框架？

9. •既有的框架有些不夠彈性
•既有的框架有些測試涵蓋率不夠⾼高
•既有的框架有些原始碼可讀性不夠
•既有的框架⼤大多沒妥善運⽤用 Promise 跟 Async/ Await 的寫法
tl;dr

10. 曾登上 GitHub Trending
Top 3

11. •能發揮各平台所有的功能，並部份兼容
•內建針對使⽤用者的狀狀態管理理
•測試涵蓋率⾼高 - > 90%
•運⽤用 Promise 跟 Async/ Await 的寫法，避免 Event ⾶飛來來⾶飛去
特⾊色

12. ⽀支援平台
Messenger LINE
Slack Telegram
Console
Viber

13. Messenger 有航空相關的 Template

14. LINE 可以⾃自⼰己產⽣生圖片式的 Imagemap

15. Learn Once, Write Anywhere
- 從 React、React Native 得到的啟發

16. 撰寫⼀一個介⾯面
⽀支援所有平台的所有功能是
不可能的
X

17. 提供最簡介⾯面
但⽀支援所有的可能性
O

18. 如同
在 iOS 跟 Android 上開發 UI

19. 內建使⽤用者狀狀態管理理

20. 內建使⽤用者狀狀態管理理

21. •Memory：⽅方便便易易使⽤用，但重啟會消失
•File
•Redis
•Mongo
可以存在不同的 Store

22. 開發

23. 安裝

24. 互動式初始化

25. 先選擇
console + memory
安裝要稍待片刻

26. 產⽣生的 index.js
都回覆 Hello World

27. 執⾏行行

28. 試著隨機講笑話

29. 更更進⼀一步，只回應講笑話

30. 來來加上查詢比特幣的功能

31. CoinMarketCap API

32. 先準備好 API Client

33. 輸入 btc, bitcoin 都會觸發

34. 接著看 Messenger

35. •粉絲⾴頁 Page
•Facebook Application 應⽤用程式
•以及剛剛的程式
前置準備

36. 現在新申請的 App 不能拿 Token..QQ

37. 最近的劍橋事件

39. 讓平台兼容

40. 兼容 Messenger
？？？
Messenger
要開 Server

41. 開發可以使⽤用 ngrok

42. 使⽤用 Now 來來部署

43. 部署
這麼簡單就做完了了嗎？
如果有⽤用環境變數記得要給

44. •chentsulin/bottender-ntu-demo (可以⽤用 tag ⼀一步⼀一步看)
•以 JavaScript 撰寫簡單的卡米狗
•輕鬆揪團不求⼈人！在 LINE 上打造屬於你的 Chatbot 揪團⼩小幫⼿手
•Bottender GitHub Repository
•Bottender Website
參參考資料

45. Thanks for Your Listening