ภาพรวม (Dialogflow)

หมายเหตุ: การดําเนินการที่ใช้ Interactive Canvas จะใช้เวลานานกว่าเล็กน้อยเพื่อให้ทีมตรวจสอบของ Google ทดสอบและอนุมัติ โปรดเผื่อเวลาสําหรับกระบวนการเผยแพร่ในกระบวนการนี้ด้วย

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

คุณควรใช้ Canvas แบบอินเทอร์แอคทีฟถ้าคุณต้องการทําสิ่งต่อไปนี้ในการกระทําของคุณ

• สร้างการแสดงผลแบบเต็มหน้าจอ
• สร้างภาพเคลื่อนไหวและการเปลี่ยนที่กําหนดเอง
• แสดงข้อมูลเป็นภาพ
• สร้างการออกแบบและ GUI ที่กําหนดเอง

ภาพที่ 1 เกมแบบอินเทอร์แอกทีฟที่สร้างขึ้นโดยใช้ Canvas แบบอินเทอร์แอกทีฟ

หมายเหตุ: ขณะนี้ Google จะอนุมัติเฉพาะการดําเนินการที่เป็นประสบการณ์การเล่นเกมเท่านั้น

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

ขณะนี้ Interactive Canvas สามารถใช้งานได้บนอุปกรณ์ต่อไปนี้:

• จออัจฉริยะ
• Google Nest Hub

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

  หมายเหตุ: เพื่อให้ Canvas ใช้งานได้ในอุปกรณ์เคลื่อนที่ Android AGSA ของคุณ (แอป Google Search สําหรับ Android) ต้องใช้เวอร์ชัน 9.86 ขึ้นไป

ลักษณะการทำงาน

การทํางานที่ใช้ Interactive Canvas ทํางานในลักษณะเดียวกับการสนทนาปกติ ผู้ใช้จะยังคงสนทนาโต้ตอบกันได้กับ Assistant เพื่อบรรลุเป้าหมาย แต่แทนที่จะตอบกลับในบรรทัดภายในการสนทนา การดําเนินการ Canvas แบบอินเทอร์แอกทีฟจะส่งการตอบกลับไปยังผู้ใช้ที่เปิดเว็บแอปแบบเต็มหน้าจอ แต่ผู้ใช้จะยังคงโต้ตอบกับเว็บแอปด้วยเสียงหรือการแตะจนกว่าการสนทนาจะสิ้นสุด

คอมโพเนนต์ที่ใช้ Interactive Canvas มีคอมโพเนนต์หลายอย่างดังนี้

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

การดําเนินการด้านการสนทนาและเว็บแอปจะสื่อสารกันโดยใช้สิ่งต่อไปนี้

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

ในการสาธิตการทํางานของ Canvas แบบอินเทอร์แอกทีฟ ให้ลองจินตนาการถึงการกระทําสมมติที่เรียกว่าสีเย็นที่เปลี่ยนสีของหน้าจออุปกรณ์เป็นสีหนึ่งที่ผู้ใช้ระบุ หลังจากที่ผู้ใช้เรียกใช้การดําเนินการแล้ว ขั้นตอนจะมีลักษณะดังนี้

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

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

หากต้องการเรียนรู้วิธีสร้างการทํางานของ Canvas แบบอินเทอร์แอกทีฟ โปรดดูหน้าภาพรวมของบิวด์

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