สร้างการดำเนินการ Canvas แบบอินเทอร์แอกทีฟสำหรับ Google Assistant ด้วย Actions Builder

1. ภาพรวม

Actions on Google คือแพลตฟอร์มสำหรับนักพัฒนาแอปที่ช่วยให้คุณสร้างซอฟต์แวร์เพื่อขยายฟังก์ชันการทำงานของ Google Assistant ซึ่งเป็นผู้ช่วยส่วนตัวเสมือนของ Google ในอุปกรณ์กว่า 1,000 ล้านเครื่อง ซึ่งรวมถึงลำโพงอัจฉริยะ โทรศัพท์ รถยนต์ ทีวี หูฟัง และอื่นๆ ผู้ใช้จะสนทนากับ Google Assistant เพื่อทำสิ่งต่างๆ เช่น ซื้อของชำหรือจองรถ หากต้องการดูรายการทั้งหมดที่ทำได้ในตอนนี้ โปรดดูไดเรกทอรี Actions ในฐานะนักพัฒนาแอป คุณสามารถใช้ Actions on Google เพื่อสร้างและจัดการประสบการณ์การสนทนาที่น่าพึงพอใจและมีประโยชน์ระหว่างผู้ใช้กับบริการของบุคคลที่สามของคุณเองได้อย่างง่ายดาย

โค้ดแล็บนี้เป็นโมดูลขั้นสูงที่ออกแบบมาสำหรับผู้อ่านที่มีประสบการณ์ในการสร้าง Actions สำหรับ Google Assistant มาบ้างแล้ว หากคุณไม่เคยมีประสบการณ์ในการพัฒนา Actions on Google มาก่อน โปรดทำความคุ้นเคยกับแพลตฟอร์มโดยทำตาม Codelab เบื้องต้น ( ระดับ 1 และ ระดับ 2) โมดูลเหล่านี้จะแนะนำฟีเจอร์ต่างๆ ที่จะช่วยขยายฟังก์ชันการทำงานของ Action และเพิ่มจำนวนผู้ชม

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

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

รูปที่ 1 เกม Snow Pal ที่เล่นยังไม่จบ

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะได้สร้าง Action ที่ใช้ Interactive Canvas Action ของคุณจะมีฟีเจอร์ต่อไปนี้

เกมคำศัพท์แบบเต็มหน้าจอที่ผู้ใช้เล่นได้ด้วยเสียง
ปุ่มที่ผู้ใช้กดเพื่อเริ่มเกม
ปุ่มที่ผู้ใช้กดเพื่อเล่นเกมอีกครั้งได้

เมื่อทำ Codelab นี้เสร็จแล้ว แอ็กชันที่เสร็จสมบูรณ์จะมีลำดับการสนทนาต่อไปนี้

Assistant: Welcome to Snow Pal! Would you like to start playing the game?

ผู้ใช้: Yes.

Assistant: Try guessing a letter in the word or guessing the word.

ผู้ใช้: I guess the letter E.

Assistant: Let's see if your guess is there...E is right. Right on! Good guess.

ผู้ใช้จะทายตัวอักษรต่อไปหรือทายคำที่ไม่รู้จักจนกว่าเกมจะจบ

สิ่งที่คุณจะได้เรียนรู้

วิธีสร้างและติดตั้งใช้งาน Action ของ Interactive Canvas
วิธีอัปเดตเกมคำศัพท์ตามเสียงและการป้อนข้อมูลด้วยการสัมผัสของผู้ใช้
วิธีส่งข้อมูลไปยังเว็บแอปโดยใช้วิธีต่างๆ
วิธีแก้ไขข้อบกพร่องของ Action ใน Interactive Canvas

สิ่งที่คุณต้องมี

ข้อกำหนดเบื้องต้นสำหรับ Codelab นี้มีดังนี้

เว็บเบราว์เซอร์ เช่น Google Chrome
IDE หรือโปรแกรมแก้ไขข้อความที่คุณเลือก
Node.js, npm และ git ติดตั้งอยู่ในเครื่อง

เราขอแนะนำอย่างยิ่งให้คุณมีความคุ้นเคยกับ JavaScript (ES6) เพื่อช่วยให้คุณเข้าใจโค้ดที่ใช้ใน Codelab นี้

ไม่บังคับ: รับโค้ดตัวอย่างแบบเต็ม

ใน Codelab นี้ คุณจะสร้างตัวอย่างทีละขั้นตอนจากเวอร์ชันที่ไม่สมบูรณ์ หากต้องการ คุณสามารถรับตัวอย่างที่เสร็จสมบูรณ์ได้จากที่เก็บ GitHub

2. ข้อมูลเบื้องต้นเกี่ยวกับ Interactive Canvas

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

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

ผู้ใช้จะป้อนข้อมูลไปยังเว็บแอปผ่านเสียงหรือการสัมผัสจนกว่าการสนทนาจะสิ้นสุดลง

รูปที่ 2 Action ที่สร้างด้วย Interactive Canvas

ใน Codelab นี้ โปรเจ็กต์ของคุณจะจัดระเบียบเป็น 3 ส่วนหลักๆ ดังนี้

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

ในแต่ละส่วนของ Codelab นี้ คุณจะแก้ไขเว็บแอป การกระทําแบบสนทนา และ Webhook เพื่อเพิ่มฟังก์ชันการทํางานให้กับการกระทําของ Canvas แบบอินเทอร์แอกทีฟ

ในระดับสูง การกระทําแบบสนทนา, เว็บฮุก และเว็บแอปในแอ็กชัน Snow Pal จะทํางานดังนี้

การดำเนินการแบบสนทนาจะแจ้งให้ผู้ใช้ทายตัวอักษรในคำหรือทายทั้งคำ
ผู้ใช้พูดว่า "ฉันคิดว่าตัวอักษรคือ i" กับเว็บแอป Snow Pal บนจออัจฉริยะ
ระบบจะกำหนดเส้นทางการป้อนข้อมูลของผู้ใช้ไปยัง Conversational Action ของคุณ ซึ่งกำหนดไว้ในโปรเจ็กต์ Actions Builder และ/หรือ Actions SDK
การกระทำแบบสนทนาจะประมวลผลข้อมูลที่ผู้ใช้ป้อน และจะทริกเกอร์ตรรกะใน Webhook ที่อัปเดตเว็บแอป หรือส่งข้อมูลเมตาเพื่ออัปเดตเว็บแอปโดยตรง ทั้งนี้ขึ้นอยู่กับข้อมูลที่ป้อน
เว็บแอปจะอัปเดตเพื่อแสดงตำแหน่งของตัวอักษรในคำ และระบบจะขอให้ผู้ใช้ทายอีกครั้ง

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของ Canvas แบบอินเทอร์แอกทีฟได้ในส่วนทำความเข้าใจโครงสร้างพื้นฐานของ Canvas แบบอินเทอร์แอกทีฟ เมื่อทราบข้อมูลเบื้องต้นแล้ว คุณก็เริ่มตั้งค่าสภาพแวดล้อมสำหรับ Codelab นี้ได้

3. ตั้งค่า

ตรวจสอบการตั้งค่าสิทธิ์ของ Google

หากต้องการทดสอบ Action ที่คุณสร้างขึ้นสำหรับ Codelab นี้ คุณต้องเปิดใช้สิทธิ์ที่จำเป็นเพื่อให้โปรแกรมจำลองคอนโซล Actions เข้าถึง Action ของคุณได้ หากต้องการเปิดใช้สิทธิ์ ให้ทำตามขั้นตอนต่อไปนี้

ไปที่ส่วนควบคุมกิจกรรม
ลงชื่อเข้าใช้ด้วยบัญชี Google หากจำเป็น
เปิดใช้สิทธิ์ต่อไปนี้

กิจกรรมบนเว็บและแอป
ในส่วนกิจกรรมบนเว็บและแอป ให้เลือกช่องทําเครื่องหมายรวมประวัติการเข้าชมใน Chrome และกิจกรรมจากเว็บไซต์ แอป และอุปกรณ์ที่ใช้บริการต่างๆ ของ Google

ติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง gactions

ในโค้ดแล็บนี้ คุณจะใช้เครื่องมืออินเทอร์เฟซบรรทัดคำสั่ง (CLI) ของ gactions เพื่อซิงค์โปรเจ็กต์ Actions ระหว่างคอนโซล Actions กับระบบไฟล์ในเครื่อง

หากต้องการติดตั้ง gactions CLI ให้ทําตามวิธีการในส่วนติดตั้งเครื่องมือบรรทัดคําสั่ง gactions

ติดตั้งอินเทอร์เฟซบรรทัดคำสั่งของ Firebase

อินเทอร์เฟซบรรทัดคำสั่ง (CLI) ของ Firebase ช่วยให้คุณสามารถทำให้โปรเจ็กต์ Actions ใช้งานได้ใน Cloud Functions และโฮสต์เว็บแอปได้

Codelab นี้ใช้ npm เพื่อติดตั้ง Firebase CLI อย่าลืมติดตั้ง npm ซึ่งมักจะมาพร้อมกับ Node.js

หากต้องการติดตั้งหรืออัปเกรด CLI ให้เปิดเทอร์มินัลแล้วเรียกใช้npmคำสั่งต่อไปนี้

npm install -g firebase-tools

หากต้องการยืนยันว่าติดตั้ง CLI อย่างถูกต้องแล้ว ให้เรียกใช้คำสั่งต่อไปนี้

firebase --version

ตรวจสอบว่า Firebase CLI เป็นเวอร์ชัน 8 ขึ้นไปเพื่อให้มีฟีเจอร์ล่าสุดทั้งหมดที่จำเป็นสำหรับ Cloud Functions หากไม่ได้ ให้เรียกใช้ npm install -g firebase-tools เพื่ออัปเกรด

หากต้องการเข้าสู่ระบบ Firebase ให้เรียกใช้คำสั่งต่อไปนี้

firebase login

เมื่อเข้าสู่ระบบ Firebase ให้ตรวจสอบว่าคุณใช้บัญชี Google เดียวกันกับที่ใช้สร้างโปรเจ็กต์ Actions

โคลนที่เก็บ

ในส่วนนี้ คุณจะโคลนไฟล์ที่จำเป็นสำหรับโค้ดแล็บนี้ หากต้องการรับไฟล์เหล่านี้ ให้ทำตามขั้นตอนต่อไปนี้

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

git clone https://github.com/actions-on-google/actions-builder-canvas-codelab-nodejs

เปิดไดเรกทอรี start/ ที่เก็บนี้มีไดเรกทอรีสำคัญต่อไปนี้ที่คุณจะใช้ทำงานด้วย

public/: ไดเรกทอรีนี้มีโค้ด HTML, CSS และ JavaScript สำหรับเว็บแอป
sdk/custom/: ไดเรกทอรีนี้มีตรรกะสำหรับ Conversational Action (ฉาก ความตั้งใจ และประเภท)
sdk/webhooks/: ไดเรกทอรีนี้คือ Webhook ของคุณและมีตรรกะของเกม

รูปที่ 3 โครงสร้างของรหัสไดเรกทอรี start

4. สร้างโปรเจ็กต์ Actions

ในส่วนนี้ คุณจะสร้างและกำหนดค่าโปรเจ็กต์ Actions, พุชโค้ดจากที่เก็บที่โคลนไปยังคอนโซล Actions ด้วย gactions CLI รวมถึงติดตั้งใช้งานเว็บแอปและเว็บฮุก

สร้างโปรเจ็กต์ Actions

โปรเจ็กต์ Actions คือคอนเทนเนอร์สำหรับ Action ของคุณ หากต้องการสร้างโปรเจ็กต์ Actions สำหรับโค้ดแล็บนี้ ให้ทำตามขั้นตอนต่อไปนี้

เปิดคอนโซล Actions
คลิกโครงการใหม่
พิมพ์ชื่อโปรเจ็กต์ เช่น canvas-codelab ชื่อนี้มีไว้เพื่อใช้อ้างอิงภายใน คุณตั้งชื่อภายนอกสำหรับโปรเจ็กต์ได้ในภายหลัง

คลิกสร้างโปรเจ็กต์
ในหน้าจอคุณต้องการสร้าง Action ประเภทใด ให้เลือกการ์ดเกม
คลิกถัดไป
เลือกการ์ดโปรเจ็กต์เปล่า
คลิกเริ่มสร้าง

บันทึกรหัสโปรเจ็กต์สำหรับ Action

รหัสโปรเจ็กต์คือตัวระบุที่ไม่ซ้ำกันสำหรับ Action ของคุณ คุณจะต้องใช้รหัสโปรเจ็กต์ในหลายขั้นตอนของ Codelab นี้

หากต้องการเรียกข้อมูลรหัสโปรเจ็กต์ ให้ทำตามขั้นตอนต่อไปนี้

ในคอนโซล Actions ให้คลิกจุดแนวตั้ง 3 จุด > การตั้งค่าโปรเจ็กต์

คัดลอกรหัสโปรเจ็กต์

เชื่อมโยงบัญชีสำหรับการเรียกเก็บเงิน

หากต้องการทําให้ Fulfillment ใช้งานได้ในภายหลังใน Codelab นี้โดยใช้ Cloud Functions คุณต้องเชื่อมโยงบัญชีสำหรับการเรียกเก็บเงินกับโปรเจ็กต์ใน Google Cloud หากมีบัญชีสำหรับการเรียกเก็บเงินอยู่แล้ว คุณไม่ต้องสนใจขั้นตอนต่อไปนี้

หากต้องการเชื่อมโยงบัญชีสำหรับการเรียกเก็บเงินกับโปรเจ็กต์ ให้ทำตามขั้นตอนต่อไปนี้

ไปที่หน้าการเรียกเก็บเงินของ Google Cloud Platform
คลิกเพิ่มบัญชีสำหรับการเรียกเก็บเงินหรือสร้างบัญชี
กรอกข้อมูลการชำระเงิน
คลิกเริ่มช่วงทดลองใช้ฟรีหรือส่งและเปิดใช้การเรียกเก็บเงิน
ไปที่หน้าการเรียกเก็บเงินของ Google Cloud
คลิกแท็บโปรเจ็กต์ของฉัน
คลิกจุด 3 จุด > เปลี่ยนการเรียกเก็บเงิน
เลือกบัญชีสำหรับการเรียกเก็บเงินที่คุณกำหนดค่าไว้ในเมนูแบบเลื่อนลง
คลิกตั้งค่าบัญชี

หากต้องการหลีกเลี่ยงค่าใช้จ่าย ให้ทำตามขั้นตอนในส่วนล้างข้อมูลโปรเจ็กต์

ติดตั้งใช้งานเว็บแอป

ในส่วนนี้ คุณจะทําให้เว็บแอป (เกม Snow Pal) ใช้งานได้โดยใช้ Firebase CLI เมื่อติดตั้งใช้งานแล้ว คุณจะดึง URL สำหรับเว็บแอปและดูว่าเกมมีลักษณะอย่างไรในเบราว์เซอร์ได้

หากต้องการทําให้เว็บแอปใช้งานได้ ให้ทําตามขั้นตอนต่อไปนี้

ในเทอร์มินัล ให้ไปที่ไดเรกทอรี start/
เรียกใช้คำสั่งต่อไปนี้ โดยแทนที่ {PROJECT_ID} ด้วยรหัสโปรเจ็กต์

firebase deploy --project {PROJECT_ID} --only hosting

หลังจากนั้นไม่กี่นาที คุณจะเห็น "Deploy complete!" ซึ่งแสดงว่าคุณได้ติดตั้งใช้งานเว็บแอป Snow Pal ไปยัง Firebase เรียบร้อยแล้ว

หากต้องการดูเกม Snow Pal ในเบราว์เซอร์ ให้ทำตามขั้นตอนต่อไปนี้

ดึงข้อมูล URL การโฮสต์ที่ระบุในเอาต์พุตของเทอร์มินัล URL ควรอยู่ในรูปแบบ https://<PROJECT_ID>.web.app

วาง URL ในเบราว์เซอร์ คุณควรเห็นหน้าจอเริ่มต้นของเกม Snow Pal พร้อมปุ่มเริ่มเกม ดังนี้

เพิ่ม URL ของเว็บแอปและรหัสโปรเจ็กต์ลงในโปรเจ็กต์ Actions

จากนั้นเพิ่ม URL ของเว็บแอปและรหัสโปรเจ็กต์ลงในไฟล์ actions.intent.MAIN.yaml การเพิ่ม URL ของเว็บแอปจะช่วยให้ Conversational Action ทราบ URL ที่จะส่งข้อมูลไปให้ ขณะที่การเพิ่มรหัสโปรเจ็กต์ใน settings.yaml จะช่วยให้คุณพุชไฟล์ที่ดาวน์โหลดไปยังโปรเจ็กต์ที่ถูกต้องใน Actions Console ได้

หากต้องการเพิ่ม URL ของเว็บแอปและรหัสโปรเจ็กต์ ให้ทำตามขั้นตอนต่อไปนี้

เปิดไฟล์ start/sdk/custom/global/actions.intent.MAIN.yaml ในโปรแกรมแก้ไขข้อความ
ในช่อง URL ให้แทนที่สตริงตัวยึดตำแหน่งด้วย URL ของเว็บแอป
เปิดไฟล์ start/sdk/settings/settings.yaml ในโปรแกรมแก้ไขข้อความ
ในช่อง projectId ให้แทนที่สตริงตัวยึดตำแหน่งด้วยรหัสโปรเจ็กต์

พุชโปรเจ็กต์ไปยังคอนโซล Actions

หากต้องการอัปเดตคอนโซล Actions ด้วยโปรเจ็กต์ในพื้นที่ คุณต้องพุชโปรเจ็กต์ Actions ไปยังคอนโซล Actions โดยทำตามขั้นตอนต่อไปนี้

เปลี่ยนไปที่ไดเรกทอรี sdk

cd sdk/

หากต้องการคัดลอกการกำหนดค่าของระบบไฟล์ในเครื่องไปยังคอนโซล Actions ให้เรียกใช้คำสั่งต่อไปนี้

gactions push

ติดตั้งใช้งานเว็บฮุค

เมื่อคุณเรียกใช้ gactions push คุณได้นําเข้ารหัส Webhook เริ่มต้นไปยังคอนโซล Actions สำหรับส่วนที่เหลือของโค้ดแล็บนี้ คุณสามารถแก้ไขโค้ด Webhook ได้ภายในคอนโซล Actions ตอนนี้คุณสามารถติดตั้งใช้งาน Webhook จากคอนโซล Actions ได้แล้ว

หากต้องการติดตั้งใช้งานเว็บบุ๊ก ให้ทำตามขั้นตอนต่อไปนี้

ในคอนโซล Actions ให้คลิกพัฒนาในแถบนำทาง
คลิกแท็บ Webhook ในแถบนำทาง
คลิกติดตั้งใช้งานการปฏิบัติตามคำสั่งซื้อ

ข้อควรระวัง: ข้อความต้องมีบัญชีสำหรับการเรียกเก็บเงินจะปรากฏขึ้นหลังจากที่คุณคลิกติดตั้งใช้งานการปฏิบัติตามคำสั่ง หากต้องการติดตั้งใช้งาน Webhook คุณต้องเชื่อมโยงบัญชีสำหรับการเรียกเก็บเงินกับโปรเจ็กต์ใน Google Cloud หากต้องการตั้งค่าบัญชีสำหรับการเรียกเก็บเงิน ให้คลิกเปิด Cloud Console แล้วทำตามขั้นตอนเพื่อลิงก์บัญชีสำหรับการเรียกเก็บเงิน คุณลบโปรเจ็กต์นี้ได้เมื่อสิ้นสุด Codelab นี้เพื่อหลีกเลี่ยงการเรียกเก็บเงิน ดูข้อมูลเพิ่มเติมได้ที่ส่วนล้างข้อมูล

Cloud Functions อาจใช้เวลา 2-3 นาทีในการจัดสรรและทำให้ Fulfillment ใช้งานได้ คุณควรเห็นข้อความการติดตั้งใช้งาน Cloud Function กำลังดำเนินการ... เมื่อโค้ดได้รับการติดตั้งใช้งานสำเร็จ ข้อความจะอัปเดตเป็นการติดตั้งใช้งาน Cloud Functions เป็นเวอร์ชันล่าสุดแล้ว

ทดสอบในเครื่องจำลอง

ตอนนี้ Action ของคุณลิงก์กับเว็บแอปแล้ว คุณสามารถใช้โปรแกรมจำลองของ Actions Console เพื่อให้แน่ใจว่าเว็บแอปจะปรากฏเมื่อคุณเรียกใช้ Action

หากต้องการทดสอบแอ็กชัน ให้ทำตามขั้นตอนต่อไปนี้

คลิกทดสอบในแถบนำทางของคอนโซล Actions
พิมพ์ Talk to Snow Pal sample ในช่องอินพุต แล้วกด Enter
พิมพ์ Yes ในช่องอินพุต แล้วกด Enter หรือคลิกเริ่มเกม

คุณยังไม่ได้กำหนดค่าตรรกะสำหรับการเดาตัวอักษรหรือเดาคำ ดังนั้นหากคุณเดาคำหรือตัวอักษร คุณจะได้รับการตอบกลับว่า "...ไม่ถูกต้อง พยายามต่อไป ดูเหมือนว่าเราต้องเพิ่มฟังก์ชันการทำงานเพื่อให้ฟีเจอร์นี้ทำงานได้อย่างถูกต้อง"

5. ทำความเข้าใจโครงสร้างพื้นฐานของ Interactive Canvas

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

ส่วนต่อไปนี้จะอธิบายรายละเอียดเพิ่มเติมเกี่ยวกับวิธีที่การสนทนา เว็บฮุก และเว็บแอปทำงานร่วมกัน รวมถึงองค์ประกอบอื่นๆ ที่สำคัญของ Interactive Canvas

Conversational Action

คอมโพเนนต์การสนทนาของ Action จะจัดการการจดจำอินพุตของผู้ใช้ ประมวลผล และส่งไปยังฉากที่เหมาะสม ซึ่งจะมีการสร้างการตอบกลับผู้ใช้ เช่น หากผู้ใช้พูดว่า "ฉันขอทายตัวอักษร e" ในเกม Snow Pal Conversational Action จะดึงตัวอักษรดังกล่าวเป็นพารามิเตอร์ความตั้งใจและส่งไปยังตรรกะของเกมที่เหมาะสม ซึ่งจะพิจารณาว่าคำทายถูกต้องหรือไม่และอัปเดตเว็บแอปตามนั้น คุณสามารถดูและแก้ไขตรรกะการสนทนานี้ได้ภายใน Actions Builder ซึ่งเป็น IDE บนเว็บในคอนโซล Actions ภาพหน้าจอด้านล่างแสดงส่วนหนึ่งของการกระทำแบบสนทนาใน Actions Builder

รูปที่ 4 ภาพของ Main invocation ใน Actions Builder

ภาพหน้าจอนี้แสดงMain invocationสำหรับ Action ซึ่งผู้ใช้จะจับคู่เมื่อพูดวลี เช่น "Ok Google คุยกับตัวอย่าง Snow Pal" เมื่อผู้ใช้เรียกใช้การดำเนินการของคุณ Main invocation จะส่งข้อความแจ้งพร้อมคำตอบ canvas ซึ่งมี URL ของเว็บแอป

คำตอบแรก canvas ในการดำเนินการต้องมี URL ของเว็บแอป การตอบกลับนี้จะบอกให้ Assistant แสดงผลเว็บแอปที่ที่อยู่นั้นในอุปกรณ์ของผู้ใช้ canvasคำตอบเพิ่มเติมใน Actions Builder อาจมีฟิลด์ send_state_data_to_canvas_app ที่ตั้งค่าเป็น true ฟิลด์นี้จะส่งชื่อความตั้งใจและค่าพารามิเตอร์ไปยังเว็บแอปเมื่อระบบจับคู่ความตั้งใจ และเว็บแอปจะอัปเดตตามข้อมูลนี้จากอินพุตของผู้ใช้

เว็บฮุค

สำหรับโค้ดแล็บนี้ เว็บฮุกจะมีตรรกะของเกม (คุณอาจคิดว่าเว็บฮุกเป็นเหมือนเซิร์ฟเวอร์เกม) ตรรกะของเกมประกอบด้วยองค์ประกอบต่างๆ เช่น การพิจารณาว่าคำตอบของผู้ใช้ถูกต้องหรือไม่ หรือผู้ใช้ชนะหรือแพ้ และการสร้างคำตอบตามผลลัพธ์ คุณแก้ไข Webhook ได้ภายใน Actions Builder

เมื่อ Action ต้องเรียกใช้ตรรกะของเกม Actions Builder จะโทรไปยัง Webhook เช่น guessเจตนาในฉาก Game จะเรียก Webhook ไปยังguessแฮนเดิลเลอร์ ซึ่งจะเรียกใช้ตรรกะเพื่อพิจารณาว่าคำตอบของผู้ใช้ถูกต้องหรือไม่ Webhook สามารถรวมการตอบกลับ Canvas ไว้ภายในแฮนเดิลอร์ที่แมปกับไฟล์เว็บแอปและอัปเดตเว็บอย่างเหมาะสม

เว็บแอป

รูปที่ 5 ภาพแสดงการโต้ตอบระหว่างการกระทําแบบสนทนา เว็บฮุก และเว็บแอปในการกระทําของ Interactive Canvas

ไฟล์เว็บแอปมีโค้ดสำหรับภาพและภาพเคลื่อนไหวของเว็บแอป รวมถึงตรรกะในการอัปเดตเว็บแอปตามข้อมูลที่ผู้ใช้ป้อน คุณแก้ไขไฟล์เว็บแอปในเครื่องมือแก้ไขข้อความและนําการเปลี่ยนแปลงเหล่านี้ไปใช้โดยใช้ Firebase CLI

การสื่อสารระหว่าง Conversational Action กับเว็บแอป

คุณต้องเปิดใช้การสื่อสารระหว่างการกระทําแบบสนทนาและเว็บแอปเพื่อให้เว็บแอปอัปเดตตามข้อมูลที่ผู้ใช้ป้อนได้ เช่น หากผู้ใช้พูดว่า "ฉันคิดว่าตัวอักษร f"

Conversational Action ต้องระบุตัวอักษร f ให้กับเว็บแอปเพื่อให้เว็บแอปอัปเดตได้ตามนั้น หากต้องการส่งอินพุตของผู้ใช้จาก Conversational Action ไปยังเว็บแอป คุณต้องโหลดใน Interactive Canvas API

สคริปต์สำหรับ API นี้รวมอยู่ใน /public/index.html ซึ่งเป็นไฟล์ HTML หลักสำหรับเกม Snow Pal ไฟล์นี้จะกำหนดลักษณะของ UI และวิธีโหลดในสคริปต์ต่างๆ ดังนี้

index.html

<!-- Load Assistant Interactive Canvas API -->
 <script type="text/javascript" src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script>

หากต้องการอัปเดตเว็บแอปตามข้อมูลที่ผู้ใช้ป้อน คุณต้องลงทะเบียนและกำหนดค่าการเรียกกลับในไฟล์เว็บแอปด้วย Callback ช่วยให้เว็บแอปตอบสนองต่อข้อมูลหรือคำขอจาก Conversational Action ได้

ใน /public/js/action.js มีคลาสที่กำหนดค่าไว้ล่วงหน้าชื่อ Action สำหรับประกาศและลงทะเบียนการเรียกกลับ Action คลาสเป็น Wrapper รอบ Interactive Canvas API เมื่อสร้างเว็บแอปด้วยฟังก์ชัน create() ใน scene.js ระบบจะสร้างอินสแตนซ์ Action ใหม่และเรียกใช้ setCallbacks() ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

scene.js

// Set Assistant at game level.
this.assistant = new Action(this);
// Call setCallbacks to register Assistant Action callbacks.
this.assistant.setCallbacks();

ฟังก์ชัน setCallbacks() กำหนดไว้ในคลาส Action ของ /public/js/action.js ฟังก์ชันนี้ประกาศการเรียกกลับและลงทะเบียนกับ Interactive Canvas API เมื่อสร้างเกม

  setCallbacks() {
    // Declare the Interactive Canvas Action callbacks.
    const callbacks = {
      onUpdate: (data) => {
     ...
    // Called by the Interactive Canvas web app once web app has loaded to
    // register callbacks.
    this.canvas.ready(callbacks);
  }

ฟังก์ชัน setCallbacks() จะประกาศการเรียกกลับ onUpdate() ซึ่งจะเรียกใช้ทุกครั้งที่คุณส่งการตอบกลับ Canvas

ส่วนถัดไปจะอธิบายวิธีกําหนดค่าโค้ดเฉพาะสําหรับโปรเจ็กต์นี้เพื่อส่งข้อมูลจากการกระทําแบบสนทนาไปยังเว็บแอป

การอัปเดตเว็บแอปตามข้อมูลที่ผู้ใช้ป้อน

ในโค้ดแล็บนี้ คุณจะได้ใช้แผนที่คำสั่งเพื่ออัปเดตเว็บแอปตามข้อมูลที่ผู้ใช้ป้อน ตัวอย่างเช่น เมื่อระบบจับคู่start_gameเจตนาในWelcomeฉาก ระบบจะส่งcanvasการตอบกลับที่รวมอยู่ในพรอมต์ไปยังเว็บแอป onUpdate() จะแยกวิเคราะห์ข้อมูลเมตาจากการตอบกลับของ canvas และเรียกใช้คำสั่ง START_GAME ซึ่งจะเรียกใช้ฟังก์ชัน start() ใน scene.js และอัปเดตเว็บแอปเพื่อเริ่มเซสชันเกมใหม่

ฟังก์ชัน start() ใน scene.js จะเรียกใช้ฟังก์ชัน updateCanvasState() ซึ่งใช้วิธีการที่เรียกว่า setCanvasState() เพื่อเพิ่มข้อมูลสถานะที่เว็บฮุกของคุณเข้าถึงได้

เมธอด updateCanvasState() จะเรียกใช้ที่ส่วนท้ายของทุกคำสั่ง (คุณจะเพิ่มคำสั่งเหล่านี้ตลอดทั้ง Codelab) และอัปเดตสถานะของเว็บแอป ทุกครั้งที่เรียกใช้ updateCanvasState() ระบบจะอัปเดตค่าสำหรับ displayedWord และ incorrectGuesses ตามสถานะปัจจุบัน

scene.js

...
  updateCanvasState() {
    window.interactiveCanvas.setCanvasState({
      correctWord: this.word.text,
      displayedWord: this.word.displayText.text,
      incorrectGuesses: this.incorrectGuesses,
    });

จากนั้นสถานะที่อัปเดตจะพร้อมใช้งานสำหรับการสนทนาครั้งถัดไป คุณเข้าถึงสถานะนี้ใน Webhook ผ่าน conv.context.canvas.state ได้ ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

index.js

...
  let displayedWord = conv.context.canvas.state.displayedWord;
...

6. เพิ่มฟังก์ชันการเดา

ในส่วนนี้ คุณจะเพิ่มguessฟังก์ชันการทำงานลงในแอ็กชัน ซึ่งจะช่วยให้ผู้ใช้ทายตัวอักษรในคำหรือทายคำนั้นได้

Conversational Action

ในส่วนทดสอบในเครื่องจำลอง คุณได้รับคำตอบที่ระบุว่า "ดูเหมือนว่าเราต้องเพิ่มฟังก์ชันการทำงานเพื่อให้สิ่งนี้ทำงานได้อย่างถูกต้อง" ตอนนี้คุณสามารถลบพรอมต์นั้นในคอนโซล Actions เพื่อให้เรียกใช้เฉพาะ Webhook (ในGameฉาก guessเจตนาได้รับการกำหนดค่าให้เรียกใช้ Webhook เมื่อตรงกันแล้ว)

หากต้องการนำพรอมต์แบบคงที่ออกเมื่อระบบจับคู่เจตนา guess ให้ทำตามขั้นตอนต่อไปนี้

ในคอนโซล Actions ให้คลิกฉากในแถบนำทาง
คลิกเกมเพื่อไปที่ฉาก Game
คลิกเมื่อระบบจับคู่คำทายได้ในส่วนการจัดการความตั้งใจของผู้ใช้ ล้างส่งพรอมต์เพื่อนำพรอมต์ออก
คลิกบันทึก

เว็บฮุค

ในส่วนนี้ คุณจะอัปเดต Webhook ด้วยตรรกะที่เชื่อมโยงคำตอบที่ผู้ใช้ทายถูกหรือทายผิดกับตรรกะในไฟล์เว็บแอป ซึ่งจะอัปเดตเว็บแอปตามนั้น guess ตัวแฮนเดิลเจตนาได้รับการกำหนดค่าไว้แล้วในเว็บบุ๊ก คุณจึงต้องเพิ่มCanvasการตอบกลับไปยังเจตนานี้เพื่อทริกเกอร์ตรรกะที่จะอัปเดตเว็บแอป

หากต้องการอัปเดต Webhook ให้ทำตามขั้นตอนต่อไปนี้

ในคอนโซล Actions ให้คลิก Webhook ในแถบนำทาง
เพิ่มโค้ดต่อไปนี้ลงใน index.js ภายในแฮนเดิล guess

index.js (ส่วน A):

// Add Section A `conv.add(new Canvas({` content here.
conv.add(new Canvas({
  data: {
    command: 'CORRECT_ANSWER',
    displayedWord: displayedWord
  },
}));

index.js (ส่วน B):

// Add Section B `conv.add(new Canvas({` content here.
conv.add(new Canvas({
  data: {
    command: 'INCORRECT_ANSWER',
  },
}));

คลิกบันทึกการปฏิบัติตามคำสั่งซื้อ
คลิกติดตั้งใช้งานการปฏิบัติตามคำสั่งซื้อ เมื่อการติดตั้งใช้งานเสร็จสมบูรณ์ ข้อความจะระบุว่าการติดตั้งใช้งาน Cloud Functions เป็นเวอร์ชันล่าสุดแล้ว

เว็บแอป

ตอนนี้คุณกำหนดค่าเว็บแอปให้จัดการคำสั่ง CORRECT_ANSWER และ INCORRECT_ANSWER ได้แล้ว

เปิด public/js/action.js ในโปรแกรมแก้ไขข้อความ
อัปเดตเว็บแอปเพื่อจัดการคำสั่ง CORRECT_ANSWER และ INCORRECT_ANSWER ดังนี้

action.js (ส่วน C):

// Add Section C `CORRECT_ANSWER: (params) => {` content here.
      CORRECT_ANSWER: (params) => {
        this.gameScene.correctAnswer(params);
      },
      INCORRECT_ANSWER: (params) => {
        this.gameScene.incorrectAnswer();
      },

เรียกใช้คำสั่งต่อไปนี้เพื่ออัปเดตเว็บแอป

firebase deploy --project {PROJECT_ID} --only hosting

ทดสอบ Action ในเครื่องมือจำลอง

ในขั้นตอนนี้ แอ็กชันจะสามารถรับรู้ได้ว่าคำตอบที่เดาถูกต้องหรือไม่ และอัปเดตเว็บแอปตามนั้น

หากต้องการทดสอบแอ็กชัน ให้ทำตามขั้นตอนต่อไปนี้

คลิกทดสอบในแถบนำทาง
พิมพ์ Talk to Snow Pal sample ในช่องอินพุต แล้วกด Enter
พิมพ์ Yes ในช่องอินพุต แล้วกด Enter หรือคลิกปุ่มใช่
พิมพ์ตัวอักษรที่ต้องการทายในช่องป้อนข้อมูล แล้วกด Enter

ทำความเข้าใจโค้ด

ในส่วนก่อนหน้านี้ คุณได้เพิ่มโค้ดที่ช่วยให้ผู้ใช้ทายตัวอักษรในเกมและดูตัวอักษรที่ทายนั้นในคำหรือสโนว์พาได้ ในระดับสูง คุณจะทําการเรียกใช้ Webhook ใน Actions Builder เมื่อระบบจับคู่guessเจตนา ซึ่งจะส่งข้อมูลไปยังเว็บแอปเพื่ออัปเดตตามนั้น เช่น หากผู้ใช้ทายตัวอักษรในเกม Snow Pal ที่มีอยู่ในคำ เว็บแอปจะอัปเดตเพื่อแสดงตัวอักษรในตำแหน่งที่ถูกต้องในคำ

สําหรับการกระทําที่ใช้ Canvas แบบอินเทอร์แอกทีฟ โฟลว์ทั่วไปสําหรับวิธีส่งข้อมูลจาก Webhook ไปยังเว็บแอปมีดังนี้

ข้อมูลจากผู้ใช้ตรงกับเจตนาที่มีคำตอบ Canvas
Conversational Action หรือเว็บฮุกจะส่งCanvasการตอบกลับ ซึ่งจะทริกเกอร์การเรียกกลับ onUpdate()
onUpdate()การเรียกกลับจะแมปกับตรรกะที่กำหนดเองซึ่งอัปเดตเว็บแอปตามนั้น

สำหรับโปรเจ็กต์นี้ โค้ดจะทำงานดังนี้

เมื่อผู้ใช้ตรงกับguessความตั้งใจ Actions Builder จะดึงตัวอักษรจากอินพุตของผู้ใช้เป็นพารามิเตอร์
Actions Builder จะเรียกใช้แฮนเดิล guess ใน Webhook ซึ่งมีตรรกะในการพิจารณาว่าตัวอักษรที่ผู้ใช้ทายปรากฏในคำหรือไม่
ตัวแฮนเดิล guess มีการตอบสนอง Canvas 2 รายการ รายการหนึ่งจะทำงานเมื่อตัวอักษรถูกต้อง และอีกรายการหนึ่งจะทำงานเมื่อตัวอักษรไม่ถูกต้อง Canvas คำตอบแต่ละรายการจะส่งข้อมูลที่เหมาะสม (คำสั่ง CORRECT_ANSWER หรือ INCORRECT_ANSWER) ไปยังเว็บแอป
ระบบจะส่งข้อมูลที่อยู่ในฟิลด์ data ของการตอบกลับ Canvas ไปยังเมธอด onUpdate() ใน action.js onUpdate() จะเรียกใช้คำสั่งที่เหมาะสมในการจับคู่คำสั่งใน scene.js
แผนที่คำสั่งจะแมปกับฟังก์ชัน correctAnswer() และ incorrectAnswer() ใน scene.js ฟังก์ชันเหล่านี้จะอัปเดตเว็บแอปอย่างเหมาะสมเพื่อแสดงการคาดเดาของผู้ใช้ และเรียกใช้ setCanvasState() เพื่อส่งข้อมูลสถานะจากเว็บแอปไปยัง Webhook

7. เพิ่มฟังก์ชันการชนะ/แพ้

ในส่วนนี้ คุณจะเพิ่มฟังก์ชันการชนะและแพ้ลงใน Action ซึ่งรวมถึงตรรกะที่กำหนดว่าผู้ใช้ชนะหรือแพ้ และตรรกะในการอัปเดตรูปภาพเว็บแอปตามผลลัพธ์ของผู้ใช้

Conversational Action

ฟังก์ชันการทำงานที่จัดการเมื่อผู้ใช้ชนะหรือแพ้เกมจะได้รับการกำหนดค่าภายในguess Intent ดังนั้นคุณจึงไม่ต้องกำหนดค่าเพิ่มเติมใน Actions Builder

เว็บฮุค

ในส่วนนี้ คุณจะอัปเดต Webhook ด้วยตรรกะที่จัดการเมื่อผู้ใช้ชนะหรือแพ้เกม และแมปกับตรรกะของเว็บแอปที่อัปเดตเกมด้วยหน้าจอที่เหมาะสมเมื่อชนะหรือแพ้

หากต้องการอัปเดต Webhook ให้ทำตามขั้นตอนต่อไปนี้

ในคอนโซล Actions ให้คลิก Webhook ในแถบนำทาง
เพิ่มโค้ดต่อไปนี้ลงใน index.js ภายในแฮนเดิล guess

index.js (ส่วน ง):

// Add Section D `if (userHasWon)` content here.
    if (userHasWon) {
      conv.add(`<speak>Let's see if your guess is there...<break
        time='2500ms'/> ${guess} is right. That spells ${correctWord}!  
        ${randomArrayItem(WIN_RESPONSES)}</speak>`);
      conv.add(new Canvas({
        data: {
          command: 'WIN_GAME',
          displayedWord: displayedWord
        },
      }));
      conv.add(`<speak>${PLAY_AGAIN_INSTRUCTIONS}</speak>`);
    } else {

index.js (ส่วน E):

// Add Section E `}` here.
}

index.js (ส่วน F):

// Add Section F `Check if the user has exceeded the maximum` content here.
// Check if the user has exceeded the maximum amount of max guesses allowed.
    const userHasLost = conv.context.canvas.state.incorrectGuesses + 1 >= MAX_INCORRECT_GUESSES;
    if (userHasLost) {
      conv.add(`<speak>Let's see if your guess is there...<break
      time='2500ms'/> ${guess} is wrong. Sorry you lost. The word is ${correctWord}!</speak>`);
      conv.add(new Canvas({
        data: {
          command: 'LOSE_GAME',
        },
      }));
      conv.add(`<speak>${PLAY_AGAIN_INSTRUCTIONS}</speak>`);
    } else {

index.js (ส่วน G):

// Add Section G `}` here.
}

คลิกบันทึกการปฏิบัติตามคำสั่งซื้อ
คลิกติดตั้งใช้งานการปฏิบัติตามคำสั่งซื้อ เมื่อการติดตั้งใช้งานเสร็จสมบูรณ์ ข้อความจะระบุว่าการติดตั้งใช้งาน Cloud Functions เป็นเวอร์ชันล่าสุดแล้ว

ในที่นี้ คุณได้เพิ่มCanvasคำตอบ 2 รายการด้วยคำสั่ง WIN_GAME และ LOSE_GAME เพื่อจัดการเมื่อผู้ใช้ชนะหรือแพ้เกม ในส่วนถัดไป คุณจะเพิ่มฟังก์ชันการทำงานที่อัปเดตเว็บแอปตามผลลัพธ์ที่ผู้ใช้ชนะหรือแพ้

เว็บแอป

ตอนนี้คุณกำหนดค่าเว็บแอปให้อัปเดตตามผลการแข่งขันของผู้ใช้ได้แล้ว หากต้องการอัปเดตเว็บแอป ให้ทำตามขั้นตอนต่อไปนี้

เปิด public/js/action.js ในโปรแกรมแก้ไขข้อความ
อัปเดตเว็บแอปเพื่อจัดการคำสั่ง WIN_GAME และ LOSE_GAME ดังนี้

action.js (ส่วน H):

// Add Section H `WIN_GAME: (params) => {` content here.
      WIN_GAME: (params) => {
        this.gameScene.winGame(params);
      },
      LOSE_GAME: (params) => {
        this.gameScene.loseGame();
      },

เรียกใช้คำสั่งต่อไปนี้เพื่ออัปเดตเว็บแอป

firebase deploy --project {PROJECT_ID} --only hosting

ทดสอบ Action ในเครื่องมือจำลอง

ตอนนี้ Action ของคุณสามารถจัดการเมื่อผู้ใช้ชนะหรือแพ้เกม และแสดงหน้าจอที่เหมาะสมสำหรับผลลัพธ์แต่ละอย่างได้แล้ว

หากต้องการทดสอบแอ็กชัน ให้ทำตามขั้นตอนต่อไปนี้

คลิกทดสอบในแถบนำทางของคอนโซล Actions
พิมพ์ Talk to Snow Pal sample ในช่องอินพุต แล้วกด Enter
พิมพ์ Yes ในช่องอินพุต แล้วกด Enter หรือคลิกปุ่มเริ่มเกม
ทายตัวอักษรและคำจนกว่าคุณจะชนะหรือแพ้

หากขอให้เล่นอีกครั้ง คุณจะได้รับข้อความที่ระบุว่ายังไม่ได้เพิ่มฟังก์ชันที่จำเป็นสำหรับการเล่นอีกครั้ง คุณเพิ่มฟังก์ชันนี้ได้ในส่วนถัดไป

ทำความเข้าใจโค้ด

ฟังก์ชันการชนะและแพ้จะทำงานในลักษณะเดียวกับฟังก์ชันการเดา นั่นคือผู้ใช้จะจับคู่guessเจตนา และ Webhook จะประเมินการเดาของผู้ใช้ หากผู้ใช้ทายถูก โค้ดจะตรวจสอบว่าผู้ใช้ชนะหรือไม่ หากชนะ ระบบจะส่งคำสั่ง WIN_GAME ไปยังเว็บแอป หากผู้ใช้ทายผิด โค้ดจะตรวจสอบว่าผู้ใช้แพ้หรือไม่ หากแพ้ ระบบจะส่งคำสั่ง LOSE_GAME ไปยังเว็บแอป คำสั่งเหล่านี้จะทริกเกอร์ฟังก์ชัน winGame() และ loseGame() ใน scene.js ซึ่งจะอัปเดตเว็บแอปเพื่อแสดงหน้าจอที่ชนะหรือแพ้ และอัปเดตสถานะของเกม

8. เพิ่มฟังก์ชันเล่นอีกครั้ง

ในส่วนนี้ คุณจะเพิ่มฟังก์ชันการทำงานที่ช่วยให้ผู้ใช้พูดว่า "เล่นอีกครั้ง" หรือคลิกปุ่มเล่นอีกครั้งในเว็บแอปเพื่อเริ่มเกมใหม่ คุณแก้ไขplay_againความตั้งใจใน Actions Builder เพื่อส่งcanvasการตอบกลับที่อัปเดตเว็บแอปอย่างเหมาะสม และเพิ่มตรรกะที่ทริกเกอร์play_againความตั้งใจเมื่อผู้ใช้คลิกปุ่มเล่นอีกครั้ง

Conversational Action

เมื่อทดสอบ Action ในส่วนก่อนหน้า คุณจะได้รับข้อความต่อไปนี้หากพยายามเล่นเกมอีกครั้ง "ดีเลย แต่เราจะสร้างฟังก์ชันนี้ในส่วนถัดไป ตอนนี้ให้รีเซ็ตการทำงานก่อน" ตอนนี้คุณสามารถลบพรอมต์นี้และแทนที่ด้วยพรอมต์ที่ตอบกลับผู้ใช้เมื่อขอเกมอื่น ("โอเค นี่คือเกมอื่น") และมีcanvasการตอบกลับเพื่อทริกเกอร์เว็บแอปให้เริ่มเกมใหม่

หากต้องการอัปเดตพรอมต์เมื่อผู้ใช้ต้องการเล่นอีกครั้ง ให้ทำตามขั้นตอนต่อไปนี้

ในคอนโซล Actions ให้คลิกเมนูแบบเลื่อนลงฉาก
คลิกฉากเกม
คลิกเมื่อมีคำว่า play_again ในส่วนการจัดการความตั้งใจของผู้ใช้
แทนที่พรอมต์ด้วยข้อความต่อไปนี้

candidates:
  - first_simple:
      variants:
        - speech: 'Okay, here''s another game!' 
    canvas:
      sendStateDataToCanvasApp: true

คลิกบันทึก

เว็บฮุค

ใน Codelab นี้ เว็บฮุกจะจัดการตรรกะของเกม เนื่องจากฟังก์ชันการเล่นซ้ำไม่จำเป็นต้องมีการตรวจสอบตรรกะใดๆ คุณจึงไม่จำเป็นต้องเรียกใช้เว็บฮุค แต่สามารถส่งการตอบกลับ canvas จาก Actions Builder โดยตรงเพื่อส่งข้อมูลที่จำเป็นไปยังเว็บแอปได้ (คุณกำหนดค่านี้ไว้ในส่วนก่อนหน้า)

เว็บแอป

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

เปิด public/js/action.js ในโปรแกรมแก้ไขข้อความ
อัปเดตเว็บแอปเพื่อจัดการคำสั่ง PLAY_AGAIN ดังนี้

action.js (ส่วนที่ 1):

// Add Section I `PLAY_AGAIN: (params) => {` content here.
      PLAY_AGAIN: (params) => {
        this.gameScene.start();
      },

เปิด public/js/scene.js ในโปรแกรมแก้ไขข้อความ
อัปเดตเว็บแอปเพื่อเริ่มเซสชันเกมใหม่เมื่อผู้ใช้คลิกปุ่ม "เล่นอีกครั้ง"

scene.js (ส่วน J):

// Add Section J `sendTextQuery` content here.
     window.interactiveCanvas.sendTextQuery('Play again');

เรียกใช้คำสั่งต่อไปนี้เพื่ออัปเดตเว็บแอป

firebase deploy --project {PROJECT_ID} --only hosting

ทดสอบ Action ในเครื่องมือจำลอง

ตอนนี้ Action ของคุณสามารถเริ่มเซสชันเกมใหม่ได้แล้วเมื่อผู้ใช้พูดว่า "เล่นอีกครั้ง" หรือคลิกปุ่มเล่นอีกครั้ง

หากต้องการทดสอบแอ็กชัน ให้ทำตามขั้นตอนต่อไปนี้

คลิกทดสอบในแถบนำทาง
พิมพ์ Talk to Snow Pal sample ในช่องอินพุต แล้วกด Enter
พิมพ์ Yes ในช่องอินพุต แล้วกด Enter หรือคลิกปุ่มเริ่มเกม
ทายตัวอักษรและคำจนกว่าคุณจะชนะหรือแพ้
พิมพ์ Play again ในช่องอินพุต แล้วกด Enter หรือคลิกปุ่มเล่นอีกครั้ง

ทำความเข้าใจโค้ด

เมื่อทดสอบ Action คุณจะเริ่มเกมใหม่ได้ผ่านการป้อนข้อมูลด้วยเสียง ("เล่นอีกครั้ง") หรือการป้อนข้อมูลด้วยการสัมผัส (คลิกปุ่มเล่นอีกครั้ง)

สำหรับตัวเลือกการป้อนด้วยเสียง เมื่อผู้ใช้พูดว่า "เล่นอีกครั้ง" หรือคำที่คล้ายกัน ระบบจะจับคู่เจตนา play_again และเพิ่มพรอมต์ ("โอเค นี่เกมอีกเกม") ลงในคิวพรอมต์ การตอบกลับ canvas ที่รวมอยู่ในพรอมต์จะส่งชื่อ Intent และข้อมูลเมตาอื่นๆ ไปยังเว็บแอป จากนั้นระบบจะส่งชื่อ Intent ไปยังการเรียกกลับ onUpdate() ซึ่งจะแมปคำสั่งที่เกี่ยวข้อง PLAY_AGAIN กับแผนที่คำสั่งใน action.js คำสั่ง PLAY_AGAIN จะทริกเกอร์ฟังก์ชัน start() ใน scene.js และอัปเดตเว็บแอปด้วยเซสชันเกมใหม่

สำหรับตัวเลือกการป้อนข้อมูลด้วยการสัมผัส คุณใช้ sendTextQuery() ซึ่งเป็น Interactive Canvas API ที่ช่วยให้คุณเรียกใช้ Intent ผ่านการป้อนข้อมูลด้วยการสัมผัสเพื่อให้ปุ่มทำงานได้

ในโค้ดแล็บนี้ คุณจะใช้ sendTextQuery() เพื่อเรียกใช้ Intent play_again เมื่อผู้ใช้คลิกปุ่มเล่นอีกครั้ง อาร์กิวเมนต์ Play again จะตรงกับวลีการฝึกในความตั้งใจ play_again และทริกเกอร์ความตั้งใจนี้ในลักษณะเดียวกับที่ผู้ใช้พูดว่า "เล่นอีกครั้ง" จากนั้นplay_again ความตั้งใจจะทริกเกอร์ตรรกะที่อัปเดตเว็บแอปและเริ่มเซสชันเกมใหม่

9. อัปเดตเจตนาในตัว PLAY_GAME

ในส่วนนี้ คุณจะอัปเดตPLAY_GAME เจตนาในตัว

PLAY_GAMEเจตนาในตัวช่วยให้ผู้ใช้เรียกใช้การดำเนินการของคุณได้เมื่อส่งคำขอทั่วไป เช่น "ฉันอยากเล่นเกม"

ซอร์สโค้ดมีPLAY_GAMEเจตนาในตัว ซึ่งอยู่ที่ /sdk/custom/global/actions.intent.PLAY_GAME.yaml ซึ่งจะแสดงในคอนโซลในส่วนการเรียกใช้เป็น PLAY_GAME ดังที่แสดงในภาพหน้าจอต่อไปนี้

หากต้องการให้ผู้ใช้เรียกใช้ Action ผ่าน Intent ในตัวนี้ คุณต้องเพิ่มcanvasการตอบกลับพร้อม URL ของเว็บแอปไปยัง Intent ในตัวPLAY_GAME โดยทำตามขั้นตอนต่อไปนี้

ในคอนโซล Actions ให้คลิก PLAY_GAME ในแถบนำทาง
อัปเดตพรอมต์ให้มี URL ของเว็บแอป ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

candidates:
  - canvas:
      url: 'https://<PROJECT_ID>.web.app'

คลิกบันทึก

ทดสอบ Action ในเครื่องมือจำลอง

ตอนนี้ Action ของคุณรองรับPLAY_GAME Intent ในตัวแล้ว

หากต้องการทดสอบแอ็กชัน ให้ทำตามขั้นตอนต่อไปนี้

คลิกทดสอบในแถบนำทาง
คลิกทดสอบการจัดการ Intent ในตัว
คลิกเรียกใช้การดำเนินการ

ควรเรียกใช้ Action ในเครื่องจำลอง

10. ภาคผนวก: การแก้ปัญหาเกี่ยวกับ Action ของ Interactive Canvas

ในส่วนนี้ คุณจะได้เรียนรู้วิธีแก้ไขข้อบกพร่องของ Action Canvas แบบอินเทอร์แอกทีฟเมื่อทำงานไม่ถูกต้อง โปรเจ็กต์ Snow Pal มาพร้อมกับการวางซ้อนการแก้ไขข้อบกพร่องที่คุณเปิดใช้ได้ โดยการซ้อนทับจะแสดงเอาต์พุตทั้งหมดของ console.log() และ console.error() ที่ด้านขวาล่างของจอแสดงผล ดังที่แสดงในภาพหน้าจอต่อไปนี้

หากต้องการเปิดใช้การวางซ้อนนี้ ให้เปิดไฟล์ /public/css/main.css แล้วแสดงความคิดเห็นในบรรทัด display: none !important; ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

main.css

.debug {
 display: flex;
 flex-direction: column;

/* Comment below to view debug overlay */
/* display: none !important; */

 width: 500px;
 height: 150px;
 right: 0;
 bottom: 0;
 position: absolute;
}

ล้างข้อมูลโปรเจ็กต์ [แนะนำ]

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

หากต้องการลบโปรเจ็กต์และทรัพยากร Google Cloud ให้ทําตามขั้นตอนที่ระบุไว้ในส่วนการปิด (ลบ) โปรเจ็กต์

ไม่บังคับ: หากต้องการนำโปรเจ็กต์ออกจาก Actions Console ทันที ให้ทำตามขั้นตอนที่ระบุไว้ในส่วนลบโปรเจ็กต์ หากไม่ทำขั้นตอนนี้ให้เสร็จสมบูรณ์ ระบบจะนำโปรเจ็กต์ของคุณออกโดยอัตโนมัติหลังจากผ่านไปประมาณ 30 วัน

11. ยินดีด้วย

คุณได้ทำ Codelab เบื้องต้นของ Interactive Canvas เสร็จแล้ว และตอนนี้ก็มีทักษะที่จำเป็นในการสร้างแอ็กชัน Interactive Canvas ของคุณเองแล้ว

สิ่งที่คุณได้เรียนรู้

วิธีสร้าง ทดสอบ และติดตั้งใช้งาน Action ของ Interactive Canvas
วิธีใช้คำตอบของ Canvas เพื่ออัปเดตเว็บแอป
วิธีใช้วิธีการต่างๆ เพื่อปรับปรุงการดำเนินการ เช่น sendTextQuery() และ setCanvasState()
วิธีแก้ไขข้อบกพร่องของ Action

ดูข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Interactive Canvas ได้ที่แหล่งข้อมูลต่อไปนี้

เอกสารประกอบเกี่ยวกับ Interactive Canvas: เอกสารประกอบอย่างเป็นทางการของ Actions on Google สำหรับ Interactive Canvas
ตัวอย่าง Canvas แบบอินเทอร์แอกทีฟ: โค้ดสำหรับเกม Canvas แบบอินเทอร์แอกทีฟอย่างง่ายที่ให้คุณหมุนสามเหลี่ยมและแก้ไขสีของสามเหลี่ยม
พอร์ทัลเกม: หลักเกณฑ์สำหรับการสร้างเกมใน Google Assistant

แบบสำรวจความคิดเห็น

ก่อนจากกัน โปรดกรอกแบบสำรวจสั้นๆ เกี่ยวกับประสบการณ์ของคุณ