สร้างการกระทำที่เป็นการสนทนา (Dialogflow)

คุณกำหนดการสนทนาสำหรับการดำเนินการที่มี Fulfillment ซึ่งก็คือโค้ดที่ติดตั้งใช้งานเป็นเว็บฮุคที่มีตรรกะการสนทนาของ Agent ของ Dialogflow การดำเนินการตามคำสั่งซื้อจะบอกให้การดำเนินการของคุณทราบว่าต้องทำอะไรเมื่อผู้ใช้ส่งคำขอ

สำหรับ Interactive Canvas Fulfillment ของคุณจะส่งข้อมูลเกี่ยวกับเว็บแอปไปยัง Assistant ด้วย คุณใช้ HtmlResponse เพื่อบอกให้ Assistant แสดงผลเว็บแอปได้ HtmlResponse ยังให้การอัปเดตแก่ data ได้ด้วย ซึ่งตรรกะที่กำหนดเองของเว็บแอปใช้เพื่อทำการเปลี่ยนแปลงเว็บแอป

หน้านี้กล่าวถึงวิธีใช้ HtmlResponse ใน Fulfillment และหลักเกณฑ์ทั่วไปในการใช้คำตอบประเภทนี้

การตอบกลับด้วย HTML

หากต้องการส่งต่อข้อมูลเกี่ยวกับเว็บแอปไปยัง Assistant คุณต้องใส่ HtmlResponse ใน Fulfillment สำหรับ Intent โดยเฉพาะ HtmlResponse อาจมี URL ของเว็บแอปและข้อมูลที่อัปเดตเว็บแอป เมื่อส่ง HtmlResponse จะมีขั้นตอนต่อไปนี้

Fulfillment ของ Intent ที่ตรงกันจะส่ง HtmlResponse ไปยังอุปกรณ์
อุปกรณ์ใช้ URL ใน HtmlResponse เพื่อโหลดเว็บแอป
เพย์โหลด JSON data จะส่งไปยังเว็บแอปในโค้ดเรียกกลับ
การดำเนินการด้านการสนทนาจะส่ง HtmlResponse ใหม่เพื่อส่งการอัปเดตหรือโหลดสถานะใหม่

หมายเหตุ: หากค่าในช่อง url เปลี่ยนไปในการตอบสนองของการดำเนินการตามคำสั่งซื้อที่ตามมา เว็บแอปจะโหลดซ้ำ หากระบุค่าเดียวกันสำหรับ url หรือหากยกเว้น url เป็นส่วนหนึ่งของการตอบกลับในภายหลัง ระบบจะเก็บเว็บแอปที่มีอยู่ไว้ในอุปกรณ์

ตัวอย่าง Fulfillment

ข้อความที่ตัดตอนมาจากตัวอย่างโค้ดการดำเนินการต่อไปนี้ แสดงวิธีติดตั้งใช้งาน 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`

ในข้อมูลโค้ดด้านบน Fulfillment สำหรับ Intent welcome จะส่ง HtmlResponse พร้อม URL ของเว็บแอป Assistant จะได้รับ URL นี้และโหลด 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',
  }));
});
...

Intent อื่นๆ

HtmlResponse ใน Fulfillment สำหรับ Intent อื่นๆ จะส่งค่าตัวแปร (tint หรือ spin ในตัวอย่าง) ไปยังเว็บแอป ตรรกะที่กำหนดเองสำหรับเว็บแอปจะใช้ค่าเหล่านี้ในการอัปเดตองค์ประกอบ (ภาพเคลื่อนไหว สี ฯลฯ)

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

หลักเกณฑ์และข้อจำกัด

โปรดคำนึงถึงหลักเกณฑ์และข้อจำกัดต่อไปนี้สำหรับ HtmlResponse เมื่อสร้างการดำเนินการตามคำสั่งซื้อ

Intent แต่ละรายการใน Fulfillment ของคุณต้องมี HtmlResponse หาก Intent ไม่มี HtmlResponse ระบบจะปิดเว็บแอป
คุณเพียงต้องใส่ URL ของเว็บแอปใน Intent แรกที่ส่งให้ผู้ใช้เท่านั้น (ซึ่งปกติแล้วคือ Intent Welcome)
HtmlResponse ต้องมีขนาดไม่เกิน 50 KB