ضبط تطبيق الويب

تطبيق الويب هو واجهة المستخدم (UI) لإجراء يستخدم لوحة الرسم التفاعلية. يمكنك استخدام تقنيات الويب الحالية (مثل HTML وCSS وJavaScript WebAssembly) لتصميم تطبيق الويب وتطويره. للجزء الأكبر، تفاعلية يمكن للوحة الرسم عرض محتوى الويب مثل المتصفح، ولكن هناك بعض القيود. لخصوصية المستخدم وأمانه. قبل أن تبدأ في تصميم واجهة المستخدم لديك، مراعاة مبادئ التصميم الموضحة في إرشادات التصميم. ننصح باستخدام استضافة Firebase لنشر تطبيق الويب.

يتم تنفيذ ما يلي في رمزَي HTML وJavaScript لتطبيق الويب:

تستعرض هذه الصفحة الطرق الموصى بها لإنشاء تطبيق الويب، وكيفية تفعيل التواصل بين "الإجراء الحواري" وتطبيق الويب، والإرشادات العامة والقيود المفروضة

على الرغم من أنه يمكنك استخدام أي طريقة لإنشاء واجهة المستخدم، تنصح Google باستخدام المكتبات التالية:

البنية

تنصح Google بشدة باستخدام بنية تطبيق من صفحة واحدة. هذا النمط الأداء الأمثل ويدعم الحوارات المباشرة تجربة المستخدم. يمكن استخدام لوحة الرسم التفاعلية بالتزامن مع الواجهة الأمامية. أطر العمل مثل 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

يحتوي هذا الملف على رمز لتحديد عمليات معاودة الاتصال واستدعاء. الطرق إلى interactiveCanvas. تتيح عمليات معاودة الاتصال لموقعك الإلكتروني. والتطبيق للرد على المعلومات أو الطلبات من الإجراء الحواري، في حين أن الطرق وتوفّر طريقة لإرسال المعلومات أو الطلبات إلى "الإجراء الحواري".

أضف interactiveCanvas.ready(callbacks); إلى ملف HTML لإعداده تسجيل عمليات معاودة الاتصال:

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 ينشئ مثيلات لكل منهما عند تحميل تطبيق الويب. تحتوي هذه الوحدة أيضًا على لتسجيل طلبات معاودة الاتصال للوحة الرسم التفاعلية.

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;
});

تحديد المشاكل وحلّها

وعلى الرغم من إمكانية استخدام المحاكي في وحدة تحكم المهام لاختبار أثناء التطوير، يمكنك أيضًا الاطّلاع على الأخطاء التي تحدث في تطبيق الويب التفاعلي "لوحة الرسم" على أجهزة المستخدمين أجهزة في الإنتاج. يمكنك الاطّلاع على هذه الأخطاء في سجلات Google Cloud Platform.

لعرض رسائل الخطأ هذه في Google Cloud سجلات النظام الأساسي، اتبع الخطوات التالية:

  1. افتح مشروع المهام في وحدة تحكّم المهام.
  2. انقر على اختبار في شريط التنقّل العلوي.
  3. انقر على رابط عرض السجلّات في 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>

الإرشادات والقيود

ضع الإرشادات والقيود التالية في الاعتبار أثناء تطوير لتطبيق الويب:

  • ما مِن ملفات تعريف ارتباط
  • لا توجد مساحة تخزين محلية
  • ما مِن رصد جغرافي
  • عدم استخدام الكاميرا
  • لا يتوفّر تسجيل صوتي أو فيديو.
  • بلا نوافذ منبثقة
  • عدم تجاوز الحد الأقصى المسموح به للذاكرة، وهو 200 ميغابايت
  • وضع عنوان اسم الإجراء في الاعتبار عند عرض المحتوى (يشغل هذا العنصر) في الجزء العلوي من الشاشة)
  • لا يمكن تطبيق أي أنماط على الفيديوهات
  • لا يمكن استخدام أكثر من عنصر وسائط واحد في كل مرة
  • ما مِن قاعدة بيانات لغة الاستعلامات البنيوية (SQL) على الويب
  • لا يتوفر دعم للواجهة SpeechRecognition في Web Speech API.
  • خيار "الوضع الداكن" غير سارٍ
  • تتوفّر إمكانية تشغيل الفيديو على الشاشات الذكية. لمزيد من المعلومات حول تنسيقات حاويات الوسائط وبرامج ترميزها المتوافقة، راجِع برامج ترميز Google Nest Hub

مشاركة المراجع مع نطاقات خارجية

لأنّه تتم استضافة تطبيقات الويب من "لوحة الرسم التفاعلية" في إطار iframe وضبط المصدر إلى قيمة فارغة، عليك تفعيل مشاركة الموارد مع عدّة مصادر (CORS). لخوادم الويب وموارد التخزين. تسمح هذه العملية لمواد العرض قبول الطلبات من مصادر فارغة.

الخطوات التالية

ولإضافة المزيد من الميزات إلى تطبيق الويب، يمكنك الاطّلاع على متابعة الإنشاء مع العميل أو التنفيذ من جهة الخادم.