הגדרה של אפליקציית האינטרנט

אפליקציית אינטרנט היא ממשק המשתמש (UI) של פעולה שמשתמשת בלוח הציור האינטראקטיבי. אתם יכולים להשתמש בטכנולוגיות אינטרנט קיימות (כמו HTML, CSS, JavaScript ו-WebAssembly) כדי לעצב ולפתח את אפליקציית האינטרנט. ברוב המקרים, הכלי האינטראקטיבי של Canvas מאפשר לעבד תוכן מהאינטרנט כמו דפדפן, אבל יש כמה הגבלות שנאכפות כדי להגן על הפרטיות והאבטחה של המשתמשים. לפני שתתחילו לעצב את ממשק המשתמש, כדאי לחשוב על עקרונות העיצוב המפורטים בהנחיות בנושא עיצוב. מומלץ להשתמש באירוח ב-Firebase כדי לפרוס את אפליקציית האינטרנט.

קוד ה-HTML וה-JavaScript לאפליקציית האינטרנט שלך מבצעים את הפעולות הבאות:

בדף הזה נפרט את הדרכים המומלצות לבניית אפליקציית האינטרנט, איך לאפשר תקשורת בין פעולת השיחה לבין אפליקציית האינטרנט, ונפרט הנחיות והגבלות כלליות.

אפשר להשתמש בכל שיטה לבניית ממשק המשתמש, אבל Google ממליצה להשתמש בספריות הבאות:

אדריכלות

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:

  1. פותחים את פרויקט הפעולות במסוף הפעולות.
  2. לוחצים על בדיקה בתפריט הניווט העליון.
  3. לוחצים על הקישור View log in Google Cloud Platform (הצגת יומנים ב-Google Cloud Platform).

שגיאות ממכשירי המשתמשים מופיעות בסדר כרונולוגי במציג היומנים.

סוגי שגיאות

יש שלושה סוגים של שגיאות באפליקציות אינטרנט שניתן לראות ביומנים של Google Cloud Platform:

  • חסימות זמניות שמתרחשות כאשר לא מתבצעת קריאה ל-ready תוך 10 שניות
  • חסימות זמניות שמתרחשות כשההבטחה שהוחזרה על ידי onUpdate() לא ימולאה תוך 10 שניות
  • שגיאות זמן ריצה של JavaScript שלא תועדו באפליקציית האינטרנט
.

הצגת פרטי השגיאות ב-JavaScript

כברירת מחדל, הפרטים של שגיאות זמן ריצה של JavaScript באפליקציית האינטרנט לא זמינים. כדי להציג את הפרטים של שגיאות זמן ריצה של JavaScript, פועלים לפי השלבים הבאים:

  1. ודאו שהגדרתם את הכותרות המתאימות של תגובת HTTP עבור שיתוף משאבים בין מקורות (CORS) בקבצים של אפליקציית האינטרנט. מידע נוסף זמין במאמר שיתוף משאבים בין מקורות.
  2. מוסיפים את 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) לשרתי האינטרנט ולמשאבי האחסון שלכם. התהליך הזה מאפשר לנכסים שלכם לאשר בקשות ממקורות ריקים.

השלבים הבאים

במאמר המשך הפיתוח באמצעות מילוי הזמנות בצד הלקוח או השרת, מוסבר איך מוסיפים עוד תכונות לאפליקציית האינטרנט.