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
Chatbot Development - EC Bot Practice
Search
Ryan Chung
August 26, 2018
Technology
1
550
Chatbot Development - EC Bot Practice
#SheMeansBusiness
Ryan Chung
August 26, 2018
Tweet
Share
More Decks by Ryan Chung
See All by Ryan Chung
MovieBot Development
ryan403
0
300
Design Voice-First Games for Alexa
ryan403
0
53
AI Teaching Talk
ryan403
0
110
Cognitive Service
ryan403
0
95
jQuery & API Practices
ryan403
0
130
CSS Practices
ryan403
1
150
JavaScript Practices
ryan403
0
97
Web Programming - Lesson 6
ryan403
1
610
Web Programming - Lesson 7
ryan403
1
620
Other Decks in Technology
See All in Technology
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
2
110
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
310
Prox Industries株式会社 会社紹介資料
proxindustries
0
280
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
630
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
340
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
700
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5.5k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
14k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Gamification - CAS2011
davidbonilla
81
5.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Balancing Empowerment & Direction
lara
1
370
Being A Developer After 40
akosma
90
590k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Unsuck your backbone
ammeep
671
58k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Designing Experiences People Love
moore
142
24k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Transcript
整合練習實作 商品瀏覽 Source: https://alivetek.com 透過對話介面,經營電商小舖的老闆 可以讓消費者依據分類查詢商品,並 瀏覽熱門商品! 1
課前可準備事項 • 申請Google帳號(有Gmail亦可) • 申請Heroku帳號 https://signup.heroku.com/login • 安裝Heroku CLI指令列工具 –
Windows 64-bit • https://cli-assets.heroku.com/heroku-x64.exe – Mac • https://cli-assets.heroku.com/heroku.pkg 2
將商品資訊放在Google 試算表 • 進入Google 雲端硬碟,建一個Google Sheets • 第一列七個欄位寫:Number、Category、Name、 Price、Description、Photo、IsHot 3
商品瀏覽服務架構 • 語意分析 + 聊天機器人+ 資料庫 + 部署上線 FulFillment •
設定回應 Google Drive • 資料儲存 DialogFlow 意圖:商品瀏覽 資料:商品類別 SheetDB Facebook 4
開發流程 • 安裝所需工具以及準備好商品資料 – Google Account, Heroku Account, Heroku CLI
• 分析使用者輸入,確定目的 – Google Dialogflow Natural Language Processing • 依據目的,取得使用者所需資料 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Facebook Messenger中實際測試 – Integrate to Facebook Messenger 5
開發流程 • 安裝所需工具以及準備好商品資料 – Google Account, Heroku Account, Heroku CLI
• 分析使用者輸入,確定目的 – Google Dialogflow Natural Language Processing • 依據目的,取得使用者所需資料 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Facebook Messenger中實際測試 – Integrate to Facebook Messenger 6
DialogFlow • Agent:ECbotXXYY • Language:zh-TW • Intent :CheckProductsByCategory • Entities:CategoryType
訓練例句 7
Dialogflow – 建立新的Agent • 輸入Agent名稱 – ECbotXXYY • 設定預設語言 –
Chinese(Traditional) – zh-tw • 設定時區 – (GMT+8:00) Asia/Hong_Kong • 按下右上方CREATE按鈕 8 https://console.dialogflow.com/api-client/#/newAgent
Dialogflow – 建立新的Intent • Intents -> CREATE INTENT –輸入Intent名稱為:CheckProductsByCategory •
Training phrases 輸入常見例句 –ADD TRAINING PHRASES 9
Dialogflow – 建立新的Entity • ENtities -> CREATE ENTITY –輸入Entity名稱為:CategoryType •
輸入分類名稱以及同義字 10
Intents -> Action and parameters • ADD PARAMETERS AND ACTION
• 設定Category變數 11
Responses & Fulfillment • 設定階段性完成回應 • 啟動Fulfillment -> ENABLE FULFILLMENT
12
標記例句中的關鍵資訊 • 選取例句中的分類關鍵字 • 選擇 @CategoryType:Category • 做完記得按下右上角的SAVE 13
Intents -> Default Fallback & Welcome • 兩個都設定相同的回應,引導使用者說出符合瀏覽 商品意圖的例句 –
刪除其他預設回應句 – 改成如下的特定回應句 14
在右方測試區進行測試 15
Integrations -> Web Demo • 打開Web Demo的開關 • 點擊跳出視窗中的網址 16
開發流程 • 安裝所需工具以及準備好商品資料 – Google Account, Heroku Account, Heroku CLI
• 分析使用者輸入,確定目的 – Google Dialogflow Natural Language Processing • 依據目的,取得使用者所需資料 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Facebook Messenger中實際測試 – Integrate to Facebook Messenger 17
開發前準備事項 • 安裝 VS Code –https://code.visualstudio.com/ • 安裝Node –https://nodejs.org/en/download/ •
安裝NPM –https://github.com/nodejs-tw/nodejs-wiki- book/blob/master/zh-tw/node_npm.rst 18
SheetDB.io • 用同一個Google帳號登入SheetDB.io • 將剛才試算表的網址貼到SheetDB.io網站 • 產生API URL 19
建立開發專案 • 專案資料夾:ECBot • 主要程式:index.js • 終端機指令 npm init •
package.json 在scripts中增加 "start":"node index.js", "debug":"node --inspect index.js" 20
index.js • 記得新增config資料夾、裡面放default.json { "productinfo_id":"xxxx" } 注意大小寫 21
index.js 22
index.js • 依據查詢分類,取得Google試算表中的資料 23
index.js • 設定確認連結的訊息 24
index.js • 用卡片方式呈現商品資訊 card.title card.subtitle card.imageUri card.buttons 25
套件安裝 • 終端機: npm-install-all index.js (如果沒有npm-install-all的話請先照下面步驟安裝) npm install npm-install-all -g
• 增加 .gitignore 檔案 –裡面寫:node_modules/ 26
開發流程 • 安裝所需工具以及準備好商品資料 – Google Account, Heroku Account, Heroku CLI
• 分析使用者輸入,確定目的 – Google Dialogflow Natural Language Processing • 依據目的,取得使用者所需資料 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Facebook Messenger中實際測試 – Integrate to Facebook Messenger 27
部署至Heroku • 註冊帳號 • 右上角 New -> Create new app
• 設定App name:ec-bot-XXYYZZ • 區域:美國 • Create App https://www.heroku.com/ 28
Deploy using Heroku Git • 使用Heroku Git (Use Heroku CLI)
• 下載與安裝 Heroku CLI • 終端機 heroku login cd my-project-dic git init heroku git:remote –a YourProjectNameHere https://devcenter.heroku.com/articles/heroku-command-line 是你在Heroku中的專案名稱哦! 通常長得像 ec-bot-xxyyzz 29
開始部署上傳(每次更新步驟亦同) • git add . • git commit –am "make
it better" • git push heroku master • heroku restart 雙引號這邊像是你的上傳筆記 在這裡寫上這次更新的內容 之後code更新時再加這一步 第一次不用 30
啟動網站 • heroku ps:scale web=1 非常非常關鍵的一步,一定要記得做 31
找到Heroku的網址 • Domains and certificates https://dashboard.heroku.com/apps/YourAppName/settings • 其實網址就是 https://YourAppName.herokuapp.com 32
回到DialogFlow設定Fulfillment • Webhook Enabled https://YourAppName.herokuapp.com/webhook • 打完記得畫面拉至最下方,按下Save 33
開發流程 • 安裝所需工具以及準備好商品資料 – Google Account, Heroku Account, Heroku CLI
• 分析使用者輸入,確定目的 – Google Dialogflow Natural Language Processing • 依據目的,取得使用者所需資料 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Facebook Messenger中實際測試 – Integrate to Facebook Messenger 34
整合至Facebook • Integrations -> Facebook Messenger 開關 35
整合至Facebook 36
建立粉絲專頁 – 依需求選擇 https://www.facebook.com/pages/creation/ 37
建立應用程式 • 取完名字後,設定Messenger • 選擇粉絲專頁產生存取權杖 • 貼回DialogFlow • 設定Verify Token:任意字串均可
• 複製Callback URL,回到FB應用程式 • 設定Webhooks回呼網址、驗證權杖(Verify Token) • 勾選messages, messagin_postbacks • 設定應用程式訂閱對應的粉絲專頁 https://developers.facebook.com/ 38
粉絲專頁 • 回到粉絲專頁。。。以粉絲專頁訪客角度檢視 • 按下傳送訊息開始測試 39
FB應用程式 • 新增測試人員 –左邊面板 -> 角色 -> 角色 -> 測試人員
–回到粉絲專頁傳送訊息進行測試 • 正式上線 –應用程式 -> 應用程式審查 -> 開始提交 40