# 口罩地圖的語音應用工作坊筆記
> 因自己記錄如貼到大筆記有點亂，故獨立在這兒。
> 原文筆記連結為 https://hackmd.io/@chatbot-tw/chatbots-meetup-in-central-taiwan-009/edit

## 實作流程
- 進入 https://developers.google.com/assistant
- Go to Actions Console
- New Project
- 有台灣選台灣

- 創專案選Custom
- 接著下拉到最下方Build using DialogFlow
- 選擇對應語系(繁中)
- 示範新增歡迎詞，加了個"阿囉哈"，當按下`SAVE`即開始訓練，速度頗快，右側可以測試結果。
- 先告一段落

- 在codesandbox創一個https服務，類似於端版VS CODE，準備設定一個node server，使用範例需Fork。
- https://codesandbox.io/
- 該服務皆為公開，勿上傳token/secret

- 開一個NODE後台，sign in / fork
- 在Dependencies搜尋並安裝 `express` 、`actions-on-google`

- 先測試能否啟動server取得https URL。替換index.js程式碼，輸入完存檔

    const express = require("express");
    const bodyParser = require("body-parser");
    const { dialogflow } = require("actions-on-google");
    const app = dialogflow();

    app.intent("Default Welcome Intent" , (conv) => {
      conv.ask("How are you?");
    });

    const expressApp = express().use(bodyParser.json());
    expressApp.get("/", (req, rep) => rep.end("hello")).post("/fulfillment",app);
    expressApp.listen(8080);

- 輸入完要儲存，並且重新整理，右下方如仍未啟動服務請再儲存一次，應該就可以把環境啟動，右上方將顯示`hello`。

- 以上為工作坊練習，以下為口罩王DEMO

- 至 https://github.com/Wolke/mask-demo 將2個js檔加入並取代原本的`index.js`、`units.js`
- 在DialogFlow將intents原本測試"阿囉哈"的Default Welcome intent，下拉至底下的fulfillment選項開啟webhook。
- 另外配合口罩DEMO需要，也先增一個intents，用Event新增一個`Google Assistent Permission`，命名為`Handle_permission`，也記得下拉在Fulfillment，選擇開啟webhook
- webhook 為 `codesandbox產生的網址/fulfillment`

- 最後點選DialogFlow的integrations側邊欄選項，按下上方斗大的"Google Assistant"
- 選擇下方`test`
- 開啟語音跟定位權限後，隨著左上方出現的選項點選，就會輸出結果了
- codesandbox也收到口罩API的資訊了

## 障礙排除
- 此DEMO的webhook 為 `codesandbox產生的網址/fulfillment`，可能忘記加上`/fulfillment`。
- codesandbox服務稍慢，可能會被DilogFlow判別無回應，測試時Wolke大還現場改寫。