התכונה 'פעולות שיחה' הוצאה משימוש ב-13 ביוני 2023. כאן תוכלו לקרוא מידע נוסף על ההוצאה משימוש של 'פעולות שיחה'.

דף זה תורגם על ידי Cloud Translation API.

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

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

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

מפעילים את ספריית ה-JavaScript של לוח הציור האינטראקטיבי.
רושמים את callbacks של אירוע Interactive Canvas.
צריך לספק לוגיקה מותאמת אישית לעדכון אפליקציית האינטרנט על סמך המדינה (State).

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

ספריות מומלצות

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

Greensock: ליצירת אנימציות מורכבות.
Pixi.js: לציור גרפיקה דו-ממדית ב-WebGL.
Three.js: לשרטוט גרפיקה בתלת-ממד ב-WebGL.
שרטוט על קנבס ב-HTML5: לשרטוטים פשוטים.

ארכיטקטורה

Google ממליצה מאוד להשתמש בארכיטקטורת אפליקציה עם דף יחיד. הזה מאפשרת ביצועים אופטימליים ותומכת בשיחות רציפות חוויית המשתמש. אפשר להשתמש בלוח הציור האינטראקטיבי בשילוב עם ממשק הקצה frameworks כמו Vue, Angular ו-React, שעוזרים בניהול מדינות.

קובץ HTML

קובץ ה-HTML מגדיר את המראה של ממשק המשתמש. הקובץ הזה טוען גם את הכרטיסייה 'אינטראקטיבי' 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`

הקובץ הזה מכיל את הקוד להגדרה של קריאות חוזרות והפעלה methods עד 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 וגם יוצר מופעים של כל אחד מהם כאשר אפליקציית האינטרנט נטענת. המודול הזה גם רושם קריאה חוזרת (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;
});

אינטראקציות מגע עם התמיכה

הפעולה האינטראקטיבית של קנבס יכולה להגיב למגע של המשתמש וגם את קלט הקול שלהם. לפי ההנחיות לעיצוב לוח שיתופי אינטראקטיבי, עליכם לפתח את הפעולה כ-'voice-first'. אבל כבר עכשיו, מציגה תמיכה באינטראקציות מגע.

מגע תומך באופן דומה לתשובות בשיחות תמיכה; עם זאת, במקום תגובה קולית מהמשתמש, נראה קוד ה-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;
});

פתרון בעיות

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

כדי לראות את הודעות השגיאה האלה ב-Google Cloud יומני הפלטפורמה, מבצעים את השלבים הבאים:

פותחים את פרויקט הפעולות במסוף Actions.
בתפריט הניווט העליון לוחצים על בדיקה.
לוחצים על הקישור View logs ב-Google Cloud Platform.

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

סוגי שגיאות

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

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

הצגת פרטי שגיאה של JavaScript

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

מוודאים שהגדרתם את שיתוף המשאבים המתאים בין מקורות (CORS) בכותרות תגובת HTTP בקבצים של אפליקציית האינטרנט. לקבלת מידע נוסף, למידע נוסף, ראו שיתוף משאבים בין מקורות.
הוספת crossorigin="anonymous" לתגי <script> המיובאים ב- קובץ HTML, כפי שמוצג בקטע הקוד הבא:

<script crossorigin="anonymous" src="<SRC>"></script>

הנחיות והגבלות

חשוב להביא בחשבון את ההנחיות וההגבלות הבאות במהלך הפיתוח אפליקציית האינטרנט שלך:

אין קובצי cookie
אין אחסון מקומי
אין מיקום גיאוגרפי
לא נעשה שימוש במצלמה
ללא הקלטת אודיו או וידאו
ללא חלונות קופצים
לא לחרוג מהמגבלה של 200MB בזיכרון
צריך להביא בחשבון את כותרת שם הפעולה במהלך רינדור התוכן (מאוכלסת בו החלק העליון של המסך)
אי אפשר להחיל סגנונות על סרטונים
ניתן להשתמש רק ברכיב מדיה אחד בכל פעם
אין מסד נתונים של Web SQL
אין תמיכה בממשק SpeechRecognition של Web Speech API.
הגדרת מצב כהה לא רלוונטית
הפעלת סרטונים נתמכת במסכים חכמים. לקבלת מידע נוסף על מידע על פורמטים וקודקים נתמכים של מאגרי מדיה זמין במאמר קודקים של Google Nest Hub.

שיתוף משאבים בין מקורות

כי אפליקציות אינטרנט אינטראקטיביות של Canvas מתארחות ב-iframe, והמקור מוגדר לערך null, צריך להפעיל שיתוף משאבים בין מקורות (CORS) עבור שרתי האינטרנט ומשאבי האחסון שלך. התהליך הזה מאפשר לנכסים שלכם: לקבל בקשות ממקורות null.

אם המדיה והתמונות שלך מתארחות ב-Firebase: יצירת קישורים דינמיים של דומיין מותאם אישית כדי להגדיר CORS.
אם המדיה והתמונות שלכם נמצאים ב-Cloud Storage: הגדרת שיתוף משאבים בין מקורות (CORS) כדי להגדיר CORS.

השלבים הבאים

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