建構對話動作 (Dialogflow)

您可以使用「執行要求」定義動作的對話，執行要求是部署為 Webhook，且包含 Dialogflow 代理程式的對話邏輯的程式碼。執行要求會指示您的動作在使用者提出要求時該採取什麼行動。

針對互動式畫布，執行要求也會將網頁應用程式的相關資訊傳送給 Google 助理。您可以使用 HtmlResponse 要求 Google 助理轉譯網頁應用程式，HtmlResponse 也可以提供 data 更新，讓網頁應用程式自訂邏輯用來變更網頁應用程式。

本頁面將說明如何在執行要求中使用 HtmlResponse，以及使用這個回應類型的一般指南。

HTML 回應

如要將網頁應用程式的資訊轉發給 Google 助理，您必須在意圖專屬的執行要求中加入 HtmlResponse。HtmlResponse 可包含網頁應用程式的網址，以及用於更新網頁應用程式的資料。您傳送 HtmlResponse 時，會發生下列步驟：

  1. 相符意圖的執行要求會將 HtmlResponse 傳送至裝置。
  2. 裝置會使用 HtmlResponse 中的網址載入網頁應用程式。
  3. data JSON 酬載會透過回呼傳遞至網頁應用程式。

  4. 對話動作會傳送新的 HtmlResponse 以傳送更新內容或載入新狀態。

執行要求範例

以下範例執行要求程式碼摘錄了 HtmlResponse 的實作方式：

const functions = require('firebase-functions');
const {dialogflow, HtmlResponse} = require('actions-on-google');

const app = dialogflow({debug: true});
app.intent('welcome', (conv) => {
  conv.ask('Welcome! Do you want me to change color or pause spinning?');
  conv.ask(new HtmlResponse({
    url: 'https://your-web-app.com',
  }));
});

// map of human speakable colors to color values
const tints = {
  red: 0xFF0000,
  green: 0x00FF00,
  blue: 0x0000FF,
};
app.intent('color', (conv, {color}) => {
  if (color in tints) {
    conv.ask(`Ok, I changed my color to ${color}. What else?`);
    conv.ask(new HtmlResponse({
      data: {
        tint: tints[color],
      },
    }));
    return;
  }
  conv.ask(`Sorry, I don't know that color. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      query: conv.query,
    },
  }));
});
app.intent('start', (conv) => {
  conv.ask(`Ok, I'm spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: true,
    },
  }));
});

app.intent('pause', (conv) => {
  conv.ask(`Ok, I paused spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: false,
    },
  }));
});

app.intent('restart game', (conv) => {
  conv.ask(new HtmlResponse({
    data: {
      command: 'RESTART_GAME',
    },
  }));
});

exports.conversation = functions.https.onRequest(app);

welcome 個意圖

在上方的程式碼片段中，welcome 意圖的執行要求會傳送含有網頁應用程式網址的 HtmlResponse。Google 助理會收到這項資訊，並在該位址載入 HTML 和 JavaScript。

...
app.intent('welcome', (conv) => {
  conv.ask('Welcome! Do you want me to change color or pause spinning?');
  conv.ask(new HtmlResponse({
    url: 'https://your-web-app.com',
  }));
});
...

其他意圖

其他意圖的執行要求中的 HtmlResponse 會將變數值 (範例中的 tint 或 spin) 傳遞至網頁應用程式。網頁應用程式的自訂邏輯會使用這些值來更新元素 (動畫、顏色等)：

...
app.intent('start', (conv) => {
  conv.ask(`Ok, I'm spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: true,
    },
  }));
});
...

規範與限制

建構執行要求時，請留意下列 HtmlResponse 的規範和限制：

  • 執行要求中的每個意圖都必須包含 HtmlResponse。如果意圖不含 HtmlResponse，網頁應用程式就會關閉。
  • 您只需在傳送給使用者的第一個意圖中加入網頁應用程式網址 (通常是 Welcome 意圖)。
  • 「HtmlResponse」的大小不得超過 50kb。