互動式畫布

圖 1. 使用互動式畫佈建構的互動式遊戲。

互動式畫布 Canvas 是 Google 助理建構的架構,可讓開發人員為視覺動作新增身歷其境的沉浸式體驗。這項視覺體驗是 Google 助理為了回應對話中的使用者而傳送的互動式網頁應用程式。有別於 Google 助理對話中內嵌的複合式回應,互動式 Canvas 網頁應用程式會以全螢幕網頁檢視畫面的形式呈現。

如果想在動作中執行下列任一操作,請使用互動式畫布:

  • 製作全螢幕視覺效果
  • 建立自訂動畫和轉場效果
  • 視覺化呈現資料
  • 建立自訂版面配置和 GUI

支援的裝置

互動式裝置目前支援下列裝置:

  • 智慧螢幕
  • Android 行動裝置 (不含平板電腦)

運作方式

使用互動式畫布的動作包含兩個主要元件:

  • 對話動作:使用對話介面執行使用者要求的動作。您可以使用 Actions BuilderActions 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 的假設動作,將裝置螢幕的顏色變更為使用者指定的顏色。使用者叫用動作後,系統會執行以下流程:

  1. 使用者說出 Google 助理裝置「將螢幕變成藍色」。
  2. Actions on Google 平台會將使用者的要求轉送至對話邏輯,以便比對意圖。
  3. 平台會比對意圖和動作的情境,進而觸發事件並將 Canvas 回應傳送至裝置。裝置會使用回應中提供的網址載入網頁應用程式 (如果尚未載入)。
  4. 網頁應用程式載入時,即會透過 Interactive Canvas API 註冊回呼。 如果 Canvas 回應包含 data 欄位,data 欄位的參數值會傳送至網頁應用程式的註冊 onUpdate 回呼。在這個範例中,對話邏輯會傳送 Canvas 回應,當中包含資料欄位,且變數值為 blue
  5. 收到 Canvas 回應的 data 值時,onUpdate 回呼能夠為網頁應用程式執行自訂邏輯,並做出已定義的變更。在這個範例中,onUpdate 回呼會讀取 data 的顏色,並將畫面變為藍色。

用戶端和伺服器端執行要求

建構互動式 Canvas 動作時,您可以選擇兩種執行要求路徑:伺服器執行要求或用戶端執行要求。如果是伺服器執行要求,主要使用需要 Webhook 的 API。您可以透過用戶端執行要求使用用戶端 API,並視需要在非 Canvas 功能 (例如帳戶連結) 中使用 Webhook,

如果選擇在專案建立階段透過伺服器 Webhook 執行要求進行建構,您必須部署 Webhook 來處理對話邏輯和用戶端 JavaScript 以更新網頁應用程式,以及管理兩個應用程式之間的通訊。

如果您選擇使用用戶端執行要求 (目前適用於開發人員預覽版),可以使用新的用戶端 API 在網頁應用程式中建構動作的邏輯,藉此簡化開發體驗、減少對話切換之間的延遲時間,並讓您使用裝置端功能。您也可以視需要從用戶端切換至伺服器端邏輯。

如要進一步瞭解用戶端功能,請參閱「使用用戶端執行要求建構」。

後續步驟

如要瞭解如何為互動式畫佈建構網頁應用程式,請參閱網頁應用程式

如要查看完整的互動式 Canvas Action 的程式碼,請參閱 GitHub 範例