# 使用 Azure 服務在網頁中加入聊天機器人
[toc]
# 步驟
## 1. https://www.qnamaker.ai/
帳號：學號@O365st.cycu.edu.tw
密碼：i-touch 的密碼
## 2. Create a knowledge base
## 3. Create a QnA Service
### 3.1 設定名稱、方案、地區......等

### 3.2 不用設定，直接下一步

### 3.3 確認資訊正確→建立

### 3.4 等它跑


### 3.5 QnA Service 完成

## 4. 回到 https://www.qnamaker.ai/Create 頁面
## 5. 建立 Knowledge Base
### 5.1 Connect your QnA service to your KB.
### 5.1.1 Refresh

### 5.1.2 選擇剛剛建立的 QnA Service

### 5.2 自訂KB的名稱

### 5.3 Create your KB

### 5.4 等它跑

### 5.5 KB建立成功

## 6. 輸入 QnA

## 7. Save and train
每次更新KB後，都要記得 Save and train

## 8. 測試 Test

## 9. 發布 Publish
### 9.1 進 PUBLISH 分頁
### 9.2 點選 Publish
### 9.3 等它跑
### 9.4 發布成功

## 10 建立機器人
### 10.1 Creat Bot
### 10.2 使用預設值，直接「建立」
### 10.3 等它跑...
### 10.4 Bot 建立完成

## 11. 找 chatbot 的 iframe
### 11.1 前往DashBoard

### 11.2 找到 Web app bot 的那一個資源

### 11.3 選 「頻道(channel)」

### 11.4 選 Web Chat

### 11.5 選 Defautl site

### 11.6 取得內嵌程式碼及密鑰

## 12. 在Jsbin中使用機器人
https://jsbin.com/

# 進階練習1：改成popup
用w3school的範例去改
https://www.w3schools.com/howto/howto_js_popup_chat.asp

# 進階練習2: 修改default 回答
1. 進到 Dashboard
2. 找類型是 App Service 的，選名稱後面沒有 Bot 的那一個

3. 組態 configuration → Default Answer

4. 改成你像要的Default Answer

# 進階練習3: 把你的聊天機器人放到github page上
https://jcliang7.github.io/test0811/chatbot01.html

# 寫下你的心得吧
* 你學了哪些 Azure 的應用？
* 聊天機器人可以用來與身心障礙的小朋友互動嗎？

# 參考資料
* https://susanibach.wordpress.com/2018/08/23/how-to-add-an-faq-bot-to-your-website/
* https://github.com/microsoft/BotFramework-WebChat
* https://github.com/microsoft/BotFramework-WebChat/tree/main/samples
* 範本:
https://microsoft.github.io/BotFramework-WebChat/01.getting-started/a.full-bundle/