Membuat Action percakapan (Dialogflow)

Anda menentukan percakapan untuk Action Anda dengan fulfillment, yang merupakan kode yang di-deploy sebagai webhook yang berisi logika percakapan agen Dialogflow Anda. Fulfillment memberi tahu Action Anda apa yang harus dilakukan saat pengguna membuat permintaan.

Untuk Canvas Interaktif, fulfillment Anda juga mengomunikasikan informasi tentang aplikasi web Anda ke Asisten. Anda dapat menggunakan HtmlResponse untuk memberi tahu Asisten untuk merender aplikasi web Anda. HtmlResponse juga dapat memberikan update untuk data, yang digunakan logika kustom aplikasi web untuk membuat perubahan pada aplikasi web Anda.

Halaman ini membahas cara menggunakan HtmlResponse dalam fulfillment dan panduan umum Anda untuk menggunakan jenis respons ini.

Respons HTML

Untuk menyampaikan informasi tentang aplikasi web ke Asisten, Anda harus menyertakan HtmlResponse dalam fulfillment khusus intent. HtmlResponse dapat berisi URL aplikasi web dan data yang memperbarui aplikasi web. Saat Anda mengirim HtmlResponse, langkah-langkah berikut akan terjadi:

  1. Fulfillment intent yang cocok akan mengirimkan HtmlResponse ke perangkat.
  2. Perangkat menggunakan URL di HtmlResponse untuk memuat aplikasi web.
  3. Payload JSON data diteruskan ke aplikasi web dalam callback.

  4. Action percakapan Anda mengirimkan HtmlResponse baru untuk mengirim pembaruan atau memuat status baru.

Contoh fulfillment

Kutipan berikut dari kode fulfillment contoh menunjukkan cara menerapkan 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 intent

Dalam cuplikan di atas, fulfillment untuk intent welcome mengirimkan HtmlResponse dengan URL untuk aplikasi web. Asisten menerima ini dan memuat HTML dan JavaScript di alamat tersebut.

...
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',
  }));
});
...

Intent lainnya

HtmlResponse dalam fulfillment untuk intent lain meneruskan nilai variabel (tint atau spin dalam contoh) ke aplikasi web. Logika kustom untuk aplikasi web menggunakan nilai ini untuk memperbarui elemen (animasi, warna, dll):

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

Panduan dan pembatasan

Perhatikan panduan dan batasan berikut untuk HtmlResponse saat membuat fulfillment Anda:

  • Setiap intent dalam fulfillment Anda harus menyertakan HtmlResponse. Jika intent tidak menyertakan HtmlResponse, aplikasi web Anda akan ditutup.
  • Anda hanya perlu menyertakan URL aplikasi web dalam intent pertama yang Anda kirim kepada pengguna (biasanya ini adalah intent Welcome).
  • HtmlResponse harus berukuran 50 kb atau lebih kecil.