Membuat Action percakapan (Dialogflow)

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

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

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

Respons HTML

Untuk menyampaikan informasi tentang aplikasi web ke Asisten, Anda harus menyertakan HtmlResponse dalam fulfillment khusus intent Anda. 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 contoh kode fulfillment 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 akan menerima informasi 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 akan meneruskan nilai variabel (tint atau spin dalam contoh) ke aplikasi web. Logika kustom untuk 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 membangun 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 di intent pertama yang Anda kirim pengguna (biasanya ini adalah intent Welcome).
  • HtmlResponse harus berukuran 50 KB atau lebih kecil.