![](https://developers.google.cn/static/assistant/interactivecanvas/images/interactivecanvasgame.gif?authuser=3&hl=zh-tw)
互動式畫布 Canvas 是 Google 助理建構的架構,可讓開發人員為視覺動作新增身歷其境的沉浸式體驗。這項視覺體驗是 Google 助理為了回應對話中的使用者而傳送的互動式網頁應用程式。有別於 Google 助理對話中內嵌的複合式回應,互動式 Canvas 網頁應用程式會以全螢幕網頁檢視畫面的形式呈現。
如果想在動作中執行下列任一操作,請使用互動式畫布:
- 製作全螢幕視覺效果
- 建立自訂動畫和轉場效果
- 視覺化呈現資料
- 建立自訂版面配置和 GUI
支援的裝置
互動式裝置目前支援下列裝置:
- 智慧螢幕
- Android 行動裝置 (不含平板電腦)
運作方式
使用互動式畫布的動作包含兩個主要元件:
- 對話動作:使用對話介面執行使用者要求的動作。您可以使用 Actions Builder 或 Actions SDK 建構對話。
- 網頁應用程式:具有自訂視覺功能的前端網頁應用程式,你的動作會在對話期間回應使用者。您可使用 HTML、JavaScript 和 CSS 等網頁技術建構網頁應用程式。
與互動式 Canvas Action 互動的使用者可透過 Google 助理進行來回對話,以達成目標。不過,如果是互動式畫布,這個對話的回覆是在網頁應用程式的情境中運作。將對話動作連結至網頁應用程式時,您必須在網頁應用程式程式碼中加入 Interactive Canvas API。
- 互動式畫布程式庫:加入網頁應用程式的 JavaScript 程式庫,可使用 API 啟用網頁應用程式和對話動作之間的通訊。詳情請參閱 Interactive Canvas API 說明文件。
除了包含互動式畫布程式庫外,您也必須在對話中傳回 Canvas
回應類型,才能在使用者的裝置上開啟網頁應用程式。您也可以使用 Canvas
回應,根據使用者輸入內容更新網頁應用程式。
Canvas
:回應內含網頁應用程式和資料的網址。Actions Builder 可以自動填入相符的意圖和目前場景資料,以更新Canvas
回應。或者,您也可以使用 Node.js 執行要求程式庫,從 Webhook 傳送Canvas
回應。詳情請參閱「Canvas 提示」。
為了說明互動式畫布的運作方式,請參考名為 Cool Colors 的假設動作,將裝置螢幕的顏色變更為使用者指定的顏色。使用者叫用動作後,系統會執行以下流程:
- 使用者說出 Google 助理裝置「將螢幕變成藍色」。
- Actions on Google 平台會將使用者的要求轉送至對話邏輯,以便比對意圖。
- 平台會比對意圖和動作的情境,進而觸發事件並將
Canvas
回應傳送至裝置。裝置會使用回應中提供的網址載入網頁應用程式 (如果尚未載入)。 - 網頁應用程式載入時,即會透過 Interactive Canvas API 註冊回呼。
如果 Canvas 回應包含
data
欄位,data
欄位的參數值會傳送至網頁應用程式的註冊onUpdate
回呼。在這個範例中,對話邏輯會傳送Canvas
回應,當中包含資料欄位,且變數值為blue
。 - 收到
Canvas
回應的data
值時,onUpdate
回呼能夠為網頁應用程式執行自訂邏輯,並做出已定義的變更。在這個範例中,onUpdate
回呼會讀取data
的顏色,並將畫面變為藍色。
![](https://developers.google.cn/static/assistant/interactivecanvas/images/canvas-overview-diagram.png?authuser=3&hl=zh-tw)
用戶端和伺服器端執行要求
建構互動式 Canvas 動作時,您可以選擇兩種執行要求路徑:伺服器執行要求或用戶端執行要求。如果是伺服器執行要求,主要使用需要 Webhook 的 API。您可以透過用戶端執行要求使用用戶端 API,並視需要在非 Canvas 功能 (例如帳戶連結) 中使用 Webhook,
如果選擇在專案建立階段透過伺服器 Webhook 執行要求進行建構,您必須部署 Webhook 來處理對話邏輯和用戶端 JavaScript 以更新網頁應用程式,以及管理兩個應用程式之間的通訊。
如果您選擇使用用戶端執行要求 (目前適用於開發人員預覽版),可以使用新的用戶端 API 在網頁應用程式中建構動作的邏輯,藉此簡化開發體驗、減少對話切換之間的延遲時間,並讓您使用裝置端功能。您也可以視需要從用戶端切換至伺服器端邏輯。
如要進一步瞭解用戶端功能,請參閱「使用用戶端執行要求建構」。
後續步驟
如要瞭解如何為互動式畫佈建構網頁應用程式,請參閱網頁應用程式。
如要查看完整的互動式 Canvas Action 的程式碼,請參閱 GitHub 範例。