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
560
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
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.7k
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
17
5.7k
rubygem開発で鍛える設計力
joker1007
2
220
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
130
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
260
解析の定理証明実践@Lean 4
dec9ue
0
180
AIのAIによるAIのための出力評価と改善
chocoyama
2
580
"サービスチーム" での技術選定 / Making Technology Decisions for the Service Team
kaminashi
1
170
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
190
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
360
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
230
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.5k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Language of Interfaces
destraynor
158
25k
Visualization
eitanlees
146
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
4 Signs Your Business is Dying
shpigford
184
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
GraphQLとの向き合い方2022年版
quramy
49
14k
A designer walks into a library…
pauljervisheath
207
24k
The Invisible Side of Design
smashingmag
300
51k
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