אפליקציית אינטרנט היא ממשק המשתמש (UI) של פעולה שמשתמשת בלוח הציור האינטראקטיבי. אתם יכולים להשתמש בטכנולוגיות אינטרנט קיימות (כמו HTML, CSS, JavaScript ו-WebAssembly) כדי לעצב ולפתח את אפליקציית האינטרנט. ברוב המקרים, הכלי האינטראקטיבי של Canvas מאפשר לעבד תוכן מהאינטרנט כמו דפדפן, אבל יש כמה הגבלות שנאכפות כדי להגן על הפרטיות והאבטחה של המשתמשים. לפני שתתחילו לעצב את ממשק המשתמש, כדאי לחשוב על עקרונות העיצוב המפורטים בהנחיות בנושא עיצוב. מומלץ להשתמש באירוח ב-Firebase כדי לפרוס את אפליקציית האינטרנט.
קוד ה-HTML וה-JavaScript לאפליקציית האינטרנט שלך מבצעים את הפעולות הבאות:
- מפעילים את ספריית ה-JavaScript של לוח הציור האינטראקטיבי.
- רושמים את Interactive Canvas event callbacks (התקשרות חזרה לאירועי Interactive Canvas).
- לספק לוגיקה מותאמת אישית לעדכון אפליקציית האינטרנט על סמך המצב.
בדף הזה נפרט את הדרכים המומלצות לבניית אפליקציית האינטרנט, איך לאפשר תקשורת בין פעולת השיחה לבין אפליקציית האינטרנט, ונפרט הנחיות והגבלות כלליות.
ספריות מומלצות
אפשר להשתמש בכל שיטה לבניית ממשק המשתמש, אבל Google ממליצה להשתמש בספריות הבאות:
- Greensock: ליצירת אנימציות מורכבות.
- Pixi.js: לציור גרפיקה דו-ממדית ב-WebGL.
- Three.js: לציור גרפיקה בתלת-ממד ב-WebGL.
- ציור בלוח הציור של HTML5: לשרטוטים פשוטים.
אדריכלות
Google ממליצה מאוד להשתמש בארכיטקטורה של דף יחיד לאפליקציות. הגישה הזו מאפשרת ביצועים אופטימליים ותומכת בחוויית שיחה רציפה. אפשר להשתמש בלוח הציור האינטראקטיבי יחד עם מסגרות ממשק קצה כמו Vue, Angular ו-React, שעוזרות בניהול המצב.
קובץ HTML
קובץ ה-HTML מגדיר את המראה של ממשק המשתמש שלך. הקובץ הזה גם טוען את 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
. קריאה חוזרת (callback) מאפשרת לאפליקציית האינטרנט להגיב למידע או לבקשות מפעולת השיחה, ואילו שיטות מאפשרות לשלוח מידע או בקשות אל פעולת השיחה.
מוסיפים את 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
, ויוצר מופעים של כל אחד מהם כשאפליקציית האינטרנט נטענת. המודול הזה גם רושם קריאות חוזרות (callback) עבור לוח הציור האינטראקטיבי.
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; });
תמיכה באינטראקציות מגע
פעולת בד הציור האינטראקטיבית יכולה להגיב למגע של המשתמש וגם לקלט הקולי שלו. בהתאם להנחיות לגבי עיצוב בד ציור אינטראקטיבי, כדאי שהפעולה תהיה "קול-ראשונה". עם זאת, חלק מהמסכים החכמים תומכים באינטראקציות מגע.
התמיכה במגע דומה לתמיכה בתגובות שיחה. עם זאת, במקום תגובה קולית מהמשתמש, קוד ה-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; });
פתרון בעיות
אפשר להשתמש בסימולטור במסוף Actions כדי לבדוק את הפעולה האינטראקטיבית על קנבס במהלך הפיתוח, אבל אפשר גם לראות שגיאות שמתרחשות באפליקציית האינטרנט של לוח הציור האינטראקטיבי במכשירים של משתמשים בסביבת הייצור. תוכלו לראות את השגיאות האלה ביומנים של Google Cloud Platform.
כדי לראות את הודעות השגיאה ביומנים של Google Cloud Platform:
- פותחים את פרויקט הפעולות במסוף הפעולות.
- לוחצים על בדיקה בתפריט הניווט העליון.
- לוחצים על הקישור View log in Google Cloud Platform (הצגת יומנים ב-Google Cloud Platform).
שגיאות ממכשירי המשתמשים מופיעות בסדר כרונולוגי במציג היומנים.
סוגי שגיאות
יש שלושה סוגים של שגיאות באפליקציות אינטרנט שניתן לראות ביומנים של Google Cloud Platform:
- חסימות זמניות שמתרחשות כאשר לא מתבצעת קריאה ל-
ready
תוך 10 שניות - חסימות זמניות שמתרחשות כשההבטחה שהוחזרה על ידי
onUpdate()
לא ימולאה תוך 10 שניות - שגיאות זמן ריצה של JavaScript שלא תועדו באפליקציית האינטרנט
הצגת פרטי השגיאות ב-JavaScript
כברירת מחדל, הפרטים של שגיאות זמן ריצה של JavaScript באפליקציית האינטרנט לא זמינים. כדי להציג את הפרטים של שגיאות זמן ריצה של JavaScript, פועלים לפי השלבים הבאים:
- ודאו שהגדרתם את הכותרות המתאימות של תגובת HTTP עבור שיתוף משאבים בין מקורות (CORS) בקבצים של אפליקציית האינטרנט. מידע נוסף זמין במאמר שיתוף משאבים בין מקורות.
- מוסיפים את
crossorigin="anonymous"
לתגי<script>
המיובאים בקובץ ה-HTML, כפי שמוצג בקטע הקוד הבא:
<script crossorigin="anonymous" src="<SRC>"></script>
הנחיות והגבלות
חשוב להביא בחשבון את ההנחיות וההגבלות הבאות בזמן הפיתוח של אפליקציית האינטרנט:
- אין קובצי cookie
- אין אחסון מקומי
- אין מיקום גיאוגרפי
- אין שימוש במצלמה
- אין הקלטת אודיו או וידאו
- ללא חלונות קופצים
- לא לחרוג ממגבלת הזיכרון של 200MB
- חשוב לקחת בחשבון את הכותרת של שם הפעולה בעת עיבוד התוכן (תופסת את החלק העליון של המסך)
- אי אפשר להחיל סגנונות על סרטונים
- אפשר להשתמש רק ברכיב מדיה אחד בכל פעם
- אין מסד נתונים של Web SQL
- אין תמיכה בממשק
SpeechRecognition
של Web Speech API. - הגדרת המצב הכהה לא רלוונטית
- יש תמיכה בהפעלת סרטונים במסכים חכמים. למידע נוסף על הפורמטים הנתמכים של קונטיינרים ורכיבי קודק של מדיה, תוכלו לקרוא את המאמר Google Nest Hub Codec.
שיתוף משאבים בין מקורות
אפליקציות אינטרנט של לוח הציור האינטראקטיבי מתארחים ב-iframe והמקור שלו מוגדר כ-null, ולכן עליכם להפעיל שיתוף משאבים בין מקורות (CORS) לשרתי האינטרנט ולמשאבי האחסון שלכם. התהליך הזה מאפשר לנכסים שלכם לאשר בקשות ממקורות ריקים.
- אם המדיה והתמונות מתארחות ב-Firebase, קראו את המאמר יצירת קישורים דינמיים לדומיין מותאם אישית כדי להגדיר את CORS.
- אם המדיה והתמונות שלכם נמצאות ב-Cloud Storage, קראו את המאמר הגדרה של שיתוף משאבים בין מקורות (CORS) כדי להגדיר את CORS.
השלבים הבאים
במאמר המשך הפיתוח באמצעות מילוי הזמנות בצד הלקוח או השרת, מוסבר איך מוסיפים עוד תכונות לאפליקציית האינטרנט.