[Action on Google] 快速完成Interactive Canvas展示 - 複製貼上完成Demo

[Action on Google] Develop Interactive Canvas on Games & fun

先講結論，依照本文一步一步照做，應該會看到下圖與gif的模樣，但這邊先不說原理，原理部分有空再說。

Alice is friend of Bob

展示Interactive Canvas Demo

近期閱讀到 Juna Salviati一篇有關於Interactive Canvas的應用文章，裡面有講述詳細的原理內容。

Ok Google, let’s draw a graph!

1.在Dialogflow中建立新的Agent

名稱: InteractiveCanvasDemo

DEFAULT LANGUAGE: English

創建Agent

2. Restore agnet

先下載 https://github.com/antigones/GraphInteractiveCanvas/blob/master/GraphInteractiveCanvasAgent.zip

選擇Agent設定，選擇Export and import，接著選RESTORE FROM ZIP，挑選剛剛所下載的zip file。

Export and import

RESTORE

點選Intents後會看到，從zip檔案restore成作者zip檔案內容。

restore intents

3.設定Fulfillment

點選Fulfillment，並且複製以下gist code貼上，請注意其中的

https://<PROJECT_ID>.firebaseapp.com

要替換成下個步驟會提到的firebase的project id。

填寫Fulfillment

填入到Inline Editor中

4. Deploy firebase host

安裝firebase cli的套件

$ npm -g install firebase-tools

git clone 程式碼

$ git clone https://github.com/antigones/GraphInteractiveCanvas.git

$ cd GraphInteractiveCanvas

firebase取的帳號認證

$ firebase login

or

$ firebase login — reauth

選擇所創立的PROJECT_ID

$ firebase use <PROJECT_ID>

Deploy

$ firebase deploy

5.設定action on google

接著跳到https://console.actions.google.com/ 選擇InteractiveCanvasDemo專案，接著最重要的事情就是設定action on google要deploy的屬性設定。

Category選擇Games & fun

Interactive Canvas 請勾選

其他的隨便填

6.測試

結果就如最前面的Gif動畫一樣，為確保結果的一致，請依序輸入:

add node Alice

add node Bob

Alice is friend of Bob

結果圖

感謝 Juna Salviati 的文章:

Ok Google, let’s draw a graph!