เว็บแอปคืออินเทอร์เฟซผู้ใช้ (UI) สำหรับการดำเนินการที่ใช้ Interactive Canvas คุณสามารถใช้เทคโนโลยีเว็บที่มีอยู่ (เช่น HTML, CSS, JavaScript และ WebAssembly) เพื่อออกแบบและพัฒนาเว็บแอปได้ โดยส่วนใหญ่แล้ว Interactive Canvas แสดงผลเนื้อหาเว็บได้เหมือนเบราว์เซอร์ แต่ก็มีข้อจำกัดบางประการที่บังคับใช้เพื่อความเป็นส่วนตัวและความปลอดภัยของผู้ใช้ ก่อนที่จะเริ่มออกแบบ UI ให้ลองพิจารณาหลักการออกแบบที่ระบุไว้ในหลักเกณฑ์การออกแบบ เราขอแนะนำให้ใช้โฮสติ้งของ Firebase เพื่อทำให้เว็บแอปใช้งานได้
HTML และ JavaScript สำหรับเว็บแอปมีหน้าที่ดังต่อไปนี้
- เริ่มต้นไลบรารี JavaScript แบบอินเทอร์แอกทีฟ
- ลงทะเบียนโค้ดเรียกกลับของเหตุการณ์ Canvas แบบอินเทอร์แอกทีฟ
- ระบุตรรกะที่กำหนดเองสำหรับการอัปเดตเว็บแอปตามสถานะ
หน้านี้จะกล่าวถึงวิธีที่แนะนำในการสร้างเว็บแอป วิธีเปิดใช้การสื่อสารระหว่างการดำเนินการแบบการสนทนากับเว็บแอป รวมถึงหลักเกณฑ์และข้อจำกัดทั่วไป
ไลบรารีที่แนะนำ
แม้ว่าคุณจะสามารถสร้าง UI โดยใช้วิธีใดก็ได้ แต่ Google ขอแนะนำให้ใช้ไลบรารีต่อไปนี้
- Greensock: สำหรับการสร้างภาพเคลื่อนไหวที่ซับซ้อน
- Pixi.js: สำหรับการวาดกราฟิก 2 มิติบน WebGL
- Three.js: สำหรับการวาดกราฟิก 3 มิติบน WebGL
- ภาพวาด Canvas แบบ HTML5: สำหรับภาพวาดง่ายๆ
สถาปัตยกรรม
Google ขอแนะนำให้ใช้สถาปัตยกรรมแอปพลิเคชันหน้าเว็บเดียว วิธีการนี้ช่วยให้ทำงานได้อย่างมีประสิทธิภาพสูงสุดและสนับสนุนประสบการณ์ของผู้ใช้ที่มีการสนทนาอย่างต่อเนื่อง Interactive Canvas สามารถใช้ร่วมกับเฟรมเวิร์กส่วนหน้า เช่น Vue, Angular และ React ซึ่งช่วยในการจัดการสถานะได้
ไฟล์ HTML
ไฟล์ HTML จะกำหนดหน้าตาของ UI ไฟล์นี้ยังโหลด Interactive Canvas API ที่เปิดใช้การสื่อสารระหว่างเว็บแอปกับการดำเนินการแบบการสนทนา
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Interactive Canvas Sample</title> <!-- Disable favicon requests --> <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> <!-- Load Interactive Canvas JavaScript --> <script src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script> <!-- Load PixiJS for graphics rendering --> <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script> <!-- Load Stats.js for fps monitoring --> <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script> <!-- Load custom CSS --> <link rel="stylesheet" href="css/main.css"> </head> <body> <div id="view" class="view"> <div class="debug"> <div class="stats"></div> <div class="logs"></div> </div> </div> <!-- Load custom JavaScript after elements are on page --> <script src="js/log.js"></script> <script type="module" src="js/main.js"></script> </body> </html>
สื่อสารระหว่างการดําเนินการแบบการสนทนากับเว็บแอป
เมื่อสร้างเว็บแอปและการทำงานแบบการสนทนา และโหลดในไลบรารีแบบอินเทอร์แอกทีฟในไฟล์เว็บแอปแล้ว คุณต้องกำหนดว่าจะให้เว็บแอปและการทำงานแบบการสนทนาโต้ตอบกันอย่างไร วิธีการคือให้แก้ไขไฟล์ที่มีตรรกะเว็บแอป
action.js
ไฟล์นี้มีโค้ดสำหรับกำหนด callbacks และเรียกใช้เมธอดผ่าน interactiveCanvas
โค้ดเรียกกลับช่วยให้เว็บแอปตอบกลับข้อมูลหรือคำขอจากการดำเนินการแบบการสนทนา ขณะที่เมธอดมอบวิธีส่งข้อมูลหรือคำขอไปยังการดำเนินการแบบการสนทนา
เพิ่ม interactiveCanvas.ready(callbacks);
ลงในไฟล์ HTML เพื่อเริ่มต้นและลงทะเบียน callbacks
JavaScript
/** * This class is used as a wrapper for Google Assistant Canvas Action class * along with its callbacks. */ export class Action { /** * @param {Phaser.Scene} scene which serves as a container of all visual * and audio elements. */ constructor(scene) { this.canvas = window.interactiveCanvas; this.gameScene = scene; const that = this; this.intents = { GUESS: function(params) { that.gameScene.guess(params); }, DEFAULT: function() { // do nothing, when no command is found }, }; } /** * Register all callbacks used by the Interactive Canvas Action * executed during game creation time. */ setCallbacks() { const that = this; // Declare the Interactive Canvas action callbacks. const callbacks = { onUpdate(data) { const intent = data[0].google.intent; that.intents[intent ? intent.name.toUpperCase() : 'DEFAULT'](intent.params); }, }; // Called by the Interactive Canvas web app once web app has loaded to // register callbacks. this.canvas.ready(callbacks); } }
main.js
โมดูล JavaScript main.js
จะนำเข้าไฟล์ action.js
และ scene.js
และสร้างอินสแตนซ์ของแต่ละไฟล์เมื่อโหลดเว็บแอป โมดูลนี้ยังลงทะเบียนโค้ดเรียกกลับสำหรับ Interactive Canvas ด้วย
JavaScript
import {Action} from './action.js'; import {Scene} from './scene.js'; window.addEventListener('load', () => { window.scene = new Scene(); // Set Google Assistant Canvas Action at scene level window.scene.action = new Action(scene); // Call setCallbacks to register Interactive Canvas window.scene.action.setCallbacks(); });
scene.js
ไฟล์ scene.js
จะสร้างฉากสำหรับเว็บแอปของคุณ ต่อไปนี้เป็นข้อความที่ตัดตอนมาจาก scene.js
JavaScript
const view = document.getElementById('view'); // initialize rendering and set correct sizing this.radio = window.devicePixelRatio; this.renderer = PIXI.autoDetectRenderer({ transparent: true, antialias: true, resolution: this.radio, width: view.clientWidth, height: view.clientHeight, }); this.element = this.renderer.view; this.element.style.width = `${this.renderer.width / this.radio}px`; this.element.style.height = `${(this.renderer.height / this.radio)}px`; view.appendChild(this.element); // center stage and normalize scaling for all resolutions this.stage = new PIXI.Container(); this.stage.position.set(view.clientWidth / 2, view.clientHeight / 2); this.stage.scale.set(Math.max(this.renderer.width, this.renderer.height) / 1024); // load a sprite from a svg file this.sprite = PIXI.Sprite.from('triangle.svg'); this.sprite.anchor.set(0.5); this.sprite.tint = 0x00FF00; // green this.sprite.spin = true; this.stage.addChild(this.sprite); // toggle spin on touch events of the triangle this.sprite.interactive = true; this.sprite.buttonMode = true; this.sprite.on('pointerdown', () => { this.sprite.spin = !this.sprite.spin; });
รองรับการโต้ตอบการสัมผัส
การดำเนินการ Canvas แบบอินเทอร์แอกทีฟสามารถตอบสนองต่อการสัมผัสของผู้ใช้และอินพุตเสียงของผู้ใช้ ตามหลักเกณฑ์การออกแบบสำหรับ Interactive Canvas คุณควรพัฒนาการดำเนินการของคุณให้ "ให้ความสำคัญกับเสียงเป็นหลัก" อย่างไรก็ตาม จออัจฉริยะบางรุ่น รองรับการโต้ตอบด้วยการสัมผัส
การรองรับการแตะนั้นคล้ายกับการตอบกลับด้วยการสนทนา อย่างไรก็ตาม JavaScript ฝั่งไคลเอ็นต์จะมองหาการโต้ตอบด้วยการสัมผัสและใช้การโต้ตอบเหล่านั้นเพื่อเปลี่ยนแปลงองค์ประกอบในเว็บแอปแทนการตอบสนองด้วยเสียงจากผู้ใช้
คุณดูตัวอย่างของเรื่องนี้ได้ในตัวอย่างซึ่งใช้ไลบรารี Pixi.js ดังนี้
JavaScript
… this.sprite = PIXI.Sprite.from('triangle.svg'); … this.sprite.interactive = true; // Enables interaction events this.sprite.buttonMode = true; // Changes `cursor` property to `pointer` for PointerEvent this.sprite.on('pointerdown', () => { this.sprite.spin = !this.sprite.spin; });
การแก้ปัญหา
แม้ว่าคุณจะใช้เครื่องจำลองในคอนโซลการดำเนินการเพื่อทดสอบการทำงานระหว่าง Canvas แบบอินเทอร์แอกทีฟระหว่างการพัฒนา แต่คุณจะดูข้อผิดพลาดที่เกิดขึ้นภายในเว็บแอป Canvas แบบอินเทอร์แอกทีฟในอุปกรณ์ของผู้ใช้ในเวอร์ชันที่ใช้งานจริงได้ด้วย คุณดูข้อผิดพลาดเหล่านี้ได้ในบันทึก Google Cloud Platform
หากต้องการดูข้อความแสดงข้อผิดพลาดเหล่านี้ในบันทึก Google Cloud Platform ให้ทำตามขั้นตอนต่อไปนี้
- เปิดโปรเจ็กต์ Actions ในคอนโซล Actions
- คลิกทดสอบในการนําทางด้านบน
- คลิกลิงก์ดูบันทึกใน Google Cloud Platform
ข้อผิดพลาดจากอุปกรณ์ของผู้ใช้จะปรากฏตามลำดับเวลาในผู้ดูบันทึก
ประเภทของข้อผิดพลาด
ข้อผิดพลาดของเว็บแอปที่คุณเห็นในบันทึกของ Google Cloud Platform มีอยู่ 3 ประเภทดังนี้
- ระยะหมดเวลาที่เกิดขึ้นเมื่อไม่มีการเรียกใช้
ready
ภายใน 10 วินาที - ระยะหมดเวลาที่เกิดขึ้นเมื่อ
onUpdate()
ส่งกลับมาไม่มีการตอบสนองภายใน 10 วินาที - ข้อผิดพลาดเกี่ยวกับรันไทม์ของ JavaScript ที่ตรวจไม่พบภายในเว็บแอป
ดูรายละเอียดข้อผิดพลาดของ JavaScript
รายละเอียดของข้อผิดพลาดรันไทม์ JavaScript ภายในเว็บแอปของคุณไม่พร้อมใช้งานโดยค่าเริ่มต้น หากต้องการดูรายละเอียดข้อผิดพลาดรันไทม์ของ JavaScript ให้ทำตามขั้นตอนต่อไปนี้
- ตรวจสอบว่าคุณได้กำหนดค่าส่วนหัวการตอบกลับ HTTP ของการแชร์ทรัพยากรข้ามโดเมน (CORS) ที่เหมาะสมในไฟล์เว็บแอป ดูข้อมูลเพิ่มเติมได้ที่การแชร์ทรัพยากรข้ามต้นทาง
- เพิ่ม
crossorigin="anonymous"
ในแท็ก<script>
ที่นำเข้าในไฟล์ HTML ดังที่แสดงในข้อมูลโค้ดต่อไปนี้
<script crossorigin="anonymous" src="<SRC>"></script>
หลักเกณฑ์และข้อจำกัด
โปรดคำนึงถึงหลักเกณฑ์และข้อจำกัดต่อไปนี้ขณะพัฒนาเว็บแอป
- ไม่มีคุกกี้
- ไม่มีพื้นที่เก็บข้อมูลในเครื่อง
- ไม่มีตำแหน่งทางภูมิศาสตร์
- ไม่มีการใช้งานกล้อง
- ไม่มีการบันทึกเสียงหรือวิดีโอ
- ไม่มีป๊อปอัป
- ใช้หน่วยความจำไม่เกิน 200 MB
- คำนึงถึงส่วนหัวของชื่อการดำเนินการเมื่อแสดงผลเนื้อหา (ใช้พื้นที่บนของหน้าจอ)
- ไม่มีสไตล์ที่นำมาใช้กับวิดีโอได้
- ใช้องค์ประกอบสื่อได้ครั้งละ 1 รายการเท่านั้น
- ไม่มีฐานข้อมูล Web SQL
- ไม่รองรับอินเทอร์เฟซ
SpeechRecognition
ของ Web Speech API - การตั้งค่าโหมดมืดไม่สามารถใช้ได้
- จออัจฉริยะรองรับการเล่นวิดีโอได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบคอนเทนเนอร์สื่อและตัวแปลงรหัสที่รองรับได้ที่ตัวแปลงรหัส Google Nest Hub
การแชร์ทรัพยากรข้ามโดเมน
เนื่องจากเว็บแอป Interactive Canvas โฮสต์อยู่ใน iframe และตั้งค่าต้นทางเป็น Null คุณจึงต้องเปิดใช้การแชร์ทรัพยากรแบบข้ามต้นทาง (CORS) สำหรับเว็บเซิร์ฟเวอร์และทรัพยากรพื้นที่เก็บข้อมูล ขั้นตอนนี้จะช่วยให้เนื้อหายอมรับคำขอจากต้นทางที่ไม่มีข้อมูล
- หากสื่อและรูปภาพโฮสต์อยู่กับ Firebase โปรดดูหัวข้อสร้างลิงก์แบบไดนามิกของโดเมนที่กำหนดเองเพื่อกำหนดค่า CORS
- หากสื่อและรูปภาพอยู่ใน Cloud Storage โปรดดูการกำหนดค่าการแชร์ทรัพยากรแบบข้ามต้นทาง (CORS) เพื่อกำหนดค่า CORS
ขั้นตอนถัดไป
หากต้องการเพิ่มฟีเจอร์ไปยังเว็บแอป โปรดดูหัวข้อสร้างด้วย Fulfillment ฝั่งไคลเอ็นต์หรือเซิร์ฟเวอร์ต่อไป