ภาพรวม (Dialogflow)

Interactive Canvas เป็นเฟรมเวิร์กที่สร้างขึ้นบน Google Assistant ซึ่งช่วยให้ นักพัฒนาแอปเพิ่มประสบการณ์การใช้งานแบบภาพที่สมจริงลงใน Actions แบบสนทนาได้ ประสบการณ์การใช้งานแบบภาพนี้คือเว็บแอปแบบอินเทอร์แอกทีฟที่ Assistant ส่งเป็น การตอบกลับผู้ใช้ในการสนทนา คำตอบที่สมบูรณ์แบบเดิมจะปรากฏในบรรทัดในการสนทนากับ Assistant แต่เว็บแอป Interactive Canvas จะแสดงผลเป็นมุมมองเว็บแบบเต็มหน้าจอ

คุณควรใช้ Interactive Canvas หากต้องการทำสิ่งใดสิ่งหนึ่งต่อไปนี้ใน Action

  • สร้างภาพแบบเต็มหน้าจอ
  • สร้างภาพเคลื่อนไหวและการเปลี่ยนที่กำหนดเอง
  • สร้างภาพข้อมูล
  • สร้างเลย์เอาต์และ GUI ที่กำหนดเอง
รูปที่ 1 เกมแบบอินเทอร์แอกทีฟ สร้างขึ้นโดยใช้ Interactive Canvas

อุปกรณ์ที่รองรับ

ปัจจุบัน Interactive Canvas พร้อมให้บริการบนอุปกรณ์ต่อไปนี้

  • Smart Display
  • Google Nest Hub

  • โทรศัพท์มือถือ Android

วิธีการทำงาน

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

Action ที่ใช้ Interactive Canvas มีองค์ประกอบหลายอย่าง ดังนี้

  • การกระทําแบบสนทนา: การกระทําที่ใช้อินเทอร์เฟซแบบสนทนา เพื่อทําตามคําขอของผู้ใช้ Actions ใน Canvas แบบอินเทอร์แอกทีฟใช้ WebView ในการแสดงผลการตอบกลับแทนการ์ด Rich หรือข้อความและเสียงตอบกลับแบบง่าย Conversational Actions ใช้คอมโพเนนต์ต่อไปนี้
    • เอเจนต์ Dialogflow โปรเจ็กต์ใน Dialogflow ที่คุณปรับแต่งเพื่อสนทนากับผู้ใช้ Action
    • การดำเนินการตามคำสั่ง: โค้ดที่ติดตั้งใช้งานเป็น Webhook ซึ่งใช้ตรรกะการสนทนา สำหรับเอเจนต์ Dialogflow และสื่อสารกับเว็บแอป
  • เว็บแอป: เว็บแอปส่วนหน้าที่มีภาพที่ปรับแต่งแล้ว ซึ่ง Action จะส่งเป็นคำตอบให้แก่ผู้ใช้ระหว่างการสนทนา คุณสร้างเว็บแอปด้วยมาตรฐานเว็บ เช่น HTML, JavaScript และ CSS

Conversational Action และเว็บแอปจะสื่อสารกันโดยใช้ข้อมูลต่อไปนี้

  • Interactive Canvas API: JavaScript API ที่คุณรวมไว้ในเว็บแอปเพื่อ เปิดใช้การสื่อสารระหว่างเว็บแอปกับ Action แบบสนทนา
  • HtmlResponse: คำตอบที่มี URL ของเว็บแอปและข้อมูลที่จะส่ง คุณใช้ไลบรารีของไคลเอ็นต์ Node.js หรือ Java เพื่อแสดงผล HtmlResponse ได้

เพื่อแสดงให้เห็นว่า Interactive Canvas ทำงานอย่างไร ลองนึกถึง Action สมมติชื่อ Cool Colors ที่เปลี่ยนสีหน้าจออุปกรณ์เป็นสีที่ผู้ใช้ ระบุ หลังจากที่ผู้ใช้เรียกใช้ Action แล้ว ขั้นตอนการทำงานจะเป็นดังนี้

  1. ผู้ใช้พูดว่า Turn the screen blue กับอุปกรณ์ Assistant
  2. แพลตฟอร์ม Actions on Google จะกำหนดเส้นทางคำขอของผู้ใช้ไปยัง Dialogflow เพื่อ จับคู่เจตนา
  3. การดำเนินการตามคำสั่งสำหรับ Intent ที่ตรงกันจะทำงานและระบบจะส่ง HtmlResponse ไปยังอุปกรณ์ อุปกรณ์จะใช้ URL เพื่อโหลดเว็บแอปหากยังไม่ได้โหลด
  4. เมื่อโหลดเว็บแอป ระบบจะลงทะเบียนการเรียกกลับด้วย interactiveCanvas API จากนั้นระบบจะส่งค่าของออบเจ็กต์ data ไปยัง onUpdate callback ที่ลงทะเบียนของเว็บแอป ในตัวอย่างของเรา Fulfillment จะส่ง HtmlResponse ที่มี data ซึ่งมีตัวแปรที่มีค่าเป็น blue
  5. ตรรกะที่กำหนดเองสำหรับเว็บแอปจะอ่านค่า data ของ HtmlResponse และทำการเปลี่ยนแปลงที่กำหนด ในตัวอย่างของเรา การดำเนินการนี้จะเปลี่ยน หน้าจอเป็นสีน้ำเงิน
  6. interactiveCanvas ส่งการอัปเดตการเรียกกลับไปยังอุปกรณ์

ขั้นตอนถัดไป

ดูวิธีสร้าง Action Canvas แบบอินเทอร์แอกทีฟได้ที่หน้าภาพรวมการสร้าง

หากต้องการดูโค้ดของแอ็กชัน Canvas แบบอินเทอร์แอกทีฟที่สมบูรณ์ ให้ดูตัวอย่าง