หน้านี้ได้รับการแปลโดย Cloud Translation API

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

1. ภาพรวม

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

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

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

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

รูปที่ 1 เกม Snow Pal ที่เสร็จสมบูรณ์แล้วบางส่วน

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

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

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

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

ผู้ช่วย: Welcome to Snow Pal! Would you like to start playing the game?

ผู้ใช้: Yes.

ผู้ช่วย: Try guessing a letter in the word or guessing the word.

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

ผู้ช่วย: Let's see if your guess is there...E is right. Right on! Good guess.

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

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

วิธีสร้างและทำให้ 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" ได้

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

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

รูปที่ 2 การดำเนินการที่สร้างด้วย Interactive Canvas

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

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

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

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

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

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

3. ตั้งค่า

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

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

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

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

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

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

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

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

อินเทอร์เฟซบรรทัดคำสั่ง (CLI) ของ Firebase ช่วยให้คุณทำให้โปรเจ็กต์การดำเนินการใช้งานได้กับ 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

โคลนที่เก็บ

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

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

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

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

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

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

4. ตั้งค่าโปรเจ็กต์ Actions

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

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

โปรเจ็กต์ Actions เป็นคอนเทนเนอร์สำหรับการดำเนินการ หากต้องการสร้างโปรเจ็กต์การดำเนินการสำหรับ Codelab นี้ ให้ทำตามขั้นตอนต่อไปนี้

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

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

บันทึกรหัสโปรเจ็กต์สำหรับการดำเนินการของคุณ

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

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

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

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

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

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

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

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

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

ทำให้เว็บแอปใช้งานได้

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

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

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

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

หลังจากผ่านไป 2-3 นาที คุณจะเห็น "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 ของเว็บแอปทำให้การดำเนินการด้านการสนทนารู้ว่าควรส่งข้อมูล URL ใดไป ขณะที่การเพิ่มรหัสโปรเจ็กต์ใน settings.yaml จะช่วยให้คุณพุชไฟล์ที่ดาวน์โหลดไปยังโปรเจ็กต์ที่ถูกต้องในคอนโซล Actions ได้

หากต้องการเพิ่ม 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 คุณได้นําเข้าโค้ดเว็บฮุคเริ่มต้นไปยังคอนโซล Actions สำหรับส่วนที่เหลือของ Codelab นี้ คุณจะแก้ไขโค้ดเว็บฮุคได้ภายในคอนโซล Actions ในตอนนี้ คุณสามารถติดตั้งใช้งานเว็บฮุคได้จากคอนโซล Actions

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

ในคอนโซล Actions ให้คลิก Develop ในแถบนำทาง
คลิกแท็บเว็บฮุคในแถบนำทาง
คลิกทำให้การดำเนินการตามคำสั่งซื้อใช้งานได้

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

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

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

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

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

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

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

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

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

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

การดำเนินการแบบการสนทนา

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

รูปที่ 4 การแสดงภาพ Main invocation ใน Actions Builder

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

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

เว็บฮุค

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

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

เว็บแอป

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

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

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

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

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

สคริปต์สำหรับ 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>

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

ใน /public/js/action.js มีคลาสที่กำหนดค่าไว้ล่วงหน้าชื่อ Action สำหรับการประกาศและลงทะเบียน Callback คลาส 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 ฟังก์ชันนี้จะประกาศ Callback และลงทะเบียนข้อผิดพลาดกับ 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() จะประกาศ Callback onUpdate() ซึ่งจะถูกเรียกใช้ทุกครั้งที่คุณส่งการตอบกลับ Canvas

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

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

ใน Codelab นี้ คุณจะใช้แมปคำสั่งเพื่ออัปเดตเว็บแอปตามข้อมูลที่ผู้ใช้ป้อน ตัวอย่างเช่น เมื่อจับคู่ Intent ของ 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,
    });

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

ดัชนี.js

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

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

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

การดำเนินการแบบการสนทนา

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

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

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

เว็บฮุค

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

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

ในคอนโซล Actions ให้คลิกเว็บฮุคในแถบนำทาง
เพิ่มโค้ดต่อไปนี้ลงใน 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 Function ใช้งานได้เป็นปัจจุบันแล้ว

เว็บแอป

ตอนนี้คุณกำหนดค่าเว็บแอปให้จัดการคำสั่ง 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

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

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

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

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

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

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

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

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

สำหรับโครงการนี้ โค้ดจะทำงานในลักษณะต่อไปนี้:

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

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

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

การดำเนินการแบบการสนทนา

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

เว็บฮุค

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

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

ในคอนโซล Actions ให้คลิกเว็บฮุคในแถบนำทาง
เพิ่มโค้ดต่อไปนี้ลงใน index.js ภายใต้เครื่องจัดการ guess:

index.js (ส่วน D):

// 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 Function ใช้งานได้เป็นปัจจุบันแล้ว

ในส่วนนี้ คุณได้เพิ่มคำตอบ 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

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

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

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

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

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

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

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

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

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

การดำเนินการแบบการสนทนา

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

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

ในคอนโซลการทำงาน ให้คลิกเมนูแบบเลื่อนลงบรรยากาศ
คลิกฉากเกม
คลิกเมื่อจับคู่ 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

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

ตอนนี้การดำเนินการจะเริ่มเซสชันเกมใหม่เมื่อผู้ใช้พูดว่า "เล่นอีกครั้ง" หรือคลิกปุ่มเล่นอีกครั้ง

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

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

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

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

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

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

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

9. อัปเดต Intent ในตัวของ PLAY_GAME

ในส่วนนี้ คุณจะได้อัปเดตIntent ในตัวของ PLAY_GAME

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

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

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

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

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

คลิกบันทึก

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

การดำเนินการของคุณรองรับ Intent ในตัว PLAY_GAME แล้ว

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

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

การดำเนินการของคุณควรมีการเรียกใช้ในเครื่องมือจำลอง

10. ภาคผนวก: การแก้ปัญหาการดำเนินการสำหรับ Interactive Canvas

ในส่วนนี้ คุณจะได้ดูวิธีแก้ไขข้อบกพร่องของการดำเนินการใน Interactive 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;
}

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

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

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

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

11. ยินดีด้วย

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

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

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

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

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

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

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

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