تطبيق الويب هو واجهة المستخدم الخاصة بإجراء يستخدم "لوحة الرسم التفاعلية". يمكنك استخدام تقنيات الويب الحالية (مثل HTML وCSS وJavaScript و WebAssembly) لتصميم تطبيق الويب وتطويره. وفي معظم الأحيان، يمكن للوحة الرسم التفاعلية عرض محتوى الويب مثل المتصفح، ولكن هناك بعض القيود التي يتم فرضها على خصوصية المستخدم وأمانه. قبل البدء في تصميم واجهة المستخدم، ضع في اعتبارك مبادئ التصميم الموضحة في إرشادات التصميم. نقترح استخدام استضافة Firebase لنشر تطبيق الويب
ينفذ كل من HTML وJavaScript لتطبيق الويب ما يلي:
- عليك إعداد مكتبة JavaScript للوحة الرسم التفاعلية.
- سجِّل عمليات معاودة الاتصال لأحداث "لوحة الرسم التفاعلية".
- قدِّم منطقًا مخصَّصًا لتحديث تطبيق الويب استنادًا إلى الحالة.
تتناول هذه الصفحة الطرق الموصى بها لإنشاء تطبيق الويب، وكيفية تمكين التواصل بين "الإجراء المستند إلى المحادثة" وتطبيق الويب، والإرشادات والقيود العامة.
المكتبات المقترَحة
مع أنّه يمكنك استخدام أي طريقة لإنشاء واجهة المستخدم، تنصح Google باستخدام المكتبات التالية:
- Greensock: لإنشاء صور متحركة معقدة.
- Pixi.js: لرسم رسومات ثنائية الأبعاد على WebGL
- Three.js: لرسم رسومات ثلاثية الأبعاد على WebGL.
- رسم لوحة HTML5: للحصول على رسومات بسيطة.
هندسة معمارية
تنصح Google بشدة باستخدام بنية تطبيق من صفحة واحدة. ويسمح هذا النهج بالأداء الأمثل ويدعم تجربة المستخدم الحوارية المستمرة. يمكن استخدام لوحة الرسم التفاعلية إلى جانب إطارات الواجهة الأمامية، مثل Vue وAngular وReact التي تساعد في إدارة الحالة.
ملف HTML
يحدّد ملف HTML مظهر واجهة المستخدم. يُحمِّل هذا الملف أيضًا واجهة برمجة تطبيقات لوحة الرسم التفاعلية، والتي تتيح التواصل بين تطبيق الويب و"الإجراء الحواري".
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
وتنشئ نُسخًا لكل منهما عند تحميل تطبيق الويب. تقوم هذه الوحدة أيضًا بتسجيل
استدعاءات لوحة الرسم التفاعلية.
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 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>
الإرشادات والقيود
ضع الإرشادات والقيود التالية في الاعتبار عند تطوير تطبيق الويب:
- ما مِن ملفات تعريف ارتباط
- لا تتوفّر مساحة تخزين محلية
- لا يوجد رصد الموقع الجغرافي
- ما مِن استخدام للكاميرا
- لا يتوفّر تسجيل صوت أو فيديو.
- ما مِن نوافذ منبثقة
- يجب ألا يتجاوز حجم الذاكرة 200 ميغابايت.
- يجب مراعاة عنوان اسم الإجراء عند عرض المحتوى (يحتل الجزء العلوي من الشاشة)
- لا يمكن تطبيق أي أنماط على الفيديوهات.
- يمكن استخدام عنصر وسائط واحد فقط في كل مرة
- لا تتوفّر قاعدة بيانات لغة الاستعلامات البنيوية (SQL) على الويب
- ليس هناك دعم لواجهة
SpeechRecognition
لواجهة برمجة تطبيقات Web Speech. - إعداد الوضع الداكن غير سارٍ
- يمكن تشغيل الفيديو على الشاشات الذكية. لمزيد من المعلومات حول تنسيقات وبرامج ترميز حاويات الوسائط المتوافقة، يُرجى الاطّلاع على برامج ترميز Google Nest Hub.
مشاركة الموارد المشتركة المصدر
نظرًا لأنّ تطبيقات الويب للوحة الرسم التفاعلية مستضافة في إطار iframe وتم ضبط المصدر على قيمة فارغة، عليك تفعيل مشاركة الموارد المتعدّدة المصادر (CORS) لخوادم الويب وموارد مساحة التخزين. تسمح هذه العملية لمواد العرض بقبول الطلبات من مصادر فارغة.
- إذا كانت الوسائط والصور مستضافة في Firebase، يمكنك الاطّلاع على إنشاء روابط ديناميكية في نطاق خاص لضبط سياسة مشاركة الموارد المتعددة المصادر (CORS).
- إذا كانت الوسائط والصور على Cloud Storage، يمكنك الاطّلاع على ضبط مشاركة الموارد من مصادر متعددة (CORS) لضبط مشاركة الموارد المتعدّدة المصادر (CORS).
الخطوات التالية
لإضافة المزيد من الميزات إلى تطبيق الويب، اطّلِع على مواصلة الإنشاء باستخدام طريقة التنفيذ من جهة العميل أو الخادم.