إنشاء تطبيق الويب (Dialogflow)

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

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

  • سجِّل عمليات معاودة الاتصال بحدث لوحة الرسم التفاعلية.
  • إعداد مكتبة JavaScript للوحة الرسم التفاعلية.
  • توفير منطق مخصّص لتحديث تطبيق الويب استنادًا إلى الحالة

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

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

البنية

تنصح Google بشدة باستخدام بنية تطبيق من صفحة واحدة. يتيح هذا الأسلوب تحقيق الأداء الأمثل ويدعم عرض الإعلانات تجربة المستخدم الحوارية. يمكن استخدام لوحة الرسم التفاعلية بالتزامن مع إطارات الواجهة الأمامية مثل Vue Angular وReact، التي تساعد في إدارة الدولة.

ملف HTML

ويحدد ملف HTML شكل واجهة المستخدم. يقوم هذا الملف أيضًا بتحميل علامة مكتبة JavaScript للوحة الرسم التي تتيح التواصل بين تطبيق الويب والإجراء الحواري.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Immersive 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/df-asdk/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/main.js"></script>
    <script src="js/log.js"></script>
  </body>
</html>

التواصل بين توصيل الطلبات وتطبيق الويب

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

action.js

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

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

//action.js
class Action {
  constructor(scene) {
    this.canvas = window.interactiveCanvas;
    this.scene = scene;
    const that = this;
    this.commands = {
      TINT: function(data) {
        that.scene.sprite.tint = data.tint;
      },
      SPIN: function(data) {
        that.scene.sprite.spin = data.spin;
      },
      RESTART_GAME: function(data) {
        that.scene.button.texture = that.scene.button.textureButton;
        that.scene.sprite.spin = true;
        that.scene.sprite.tint = 0x0000FF; // blue
        that.scene.sprite.rotation = 0;
      },
    };
  }

  /**
   * Register all callbacks used by Interactive Canvas
   * executed during scene creation time.
   *
   */
  setCallbacks() {
    const that = this;
    // declare interactive canvas callbacks
    const callbacks = {
      onUpdate(data) {
        try {
          that.commands[data.command.toUpperCase()](data);
        } catch (e) {
          // do nothing, when no command is sent or found
        }
      },
    };
    // called by the Interactive Canvas web app once web app has loaded to
    // register callbacks
    this.canvas.ready(callbacks);
  }
}

main.js

ينشئ هذا الملف المشهد لتطبيق الويب الخاص بك. في هذا المثال، تتعامل أيضًا حالات نجاح وإخفاق الوعد الذي تم إرجاعه مع sendTextQuery(). تشير رسالة الأشكال البيانية في ما يلي مقتطف من main.js:

// main.js
const view = document.getElementById('view');
// initialize rendering and set correct sizing
this.renderer = PIXI.autoDetectRenderer({
  transparent: true,
  antialias: true,
  resolution: this.radio,
  width: view.clientWidth,
  height: view.clientHeight,
});
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:

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

في هذه الحالة، يتم إرسال قيمة المتغير spin من خلال واجهة برمجة التطبيقات interactiveCanvas كاستدعاء update. التنفيذ له منطق تؤدّي إلى تحقيق نية العميل استنادًا إلى قيمة السمة spin.

...
app.intent('pause', (conv) => {
  conv.ask(`Ok, I paused spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: false,
    },
  }));
});
...

إضافة المزيد من العناصر

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

sendTextQuery()

ترسل الطريقة sendTextQuery() طلبات البحث النصية إلى الإجراء الخاص بالمحادثات لاستدعاء هدف آليًا. يستخدم هذا النموذج sendTextQuery() للأغراض التالية: إعادة تشغيل لعبة دوران المثلث عندما ينقر المستخدم على الزر. عندما يجرّب النقر على "إعادة تشغيل اللعبة" زر: استدعاء sendTextQuery() لـ Restart game ويتعهد به ويقدم الوعد به. ينتج عن هذا الوعد SUCCESS إذا كان القصد هو وBLOCKED إذا لم يتم تشغيلها. يشغّل المقتطف التالي intent وتعالج حالات النجاح والفشل التي ينطوي عليها الوعد:

//main.js
...
that.action.canvas.sendTextQuery('Restart game')
    .then((res) => {
      if (res.toUpperCase() === 'SUCCESS') {
        console.log(`Request in flight: ${res}`);
        that.button.texture = that.button.textureButtonDisabled;
        that.sprite.spin = false;
      } else {
        console.log(`Request in flight: ${res}`);
      }
    });
...

إذا نتج عن الوعد SUCCESS، سترسل نية Restart game رسالة الخطأ HtmlResponse. إلى تطبيق الويب:

//index.js
...
app.intent('restart game', (conv) => {
  conv.ask(new HtmlResponse({
    data: {
      command: 'RESTART_GAME',
    },
...

تؤدي HtmlResponse هذه إلى تشغيل معاودة الاتصال onUpdate() التي تنفّذ الرمز البرمجي. في مقتطف رمز RESTART_GAME أدناه:

//action.js
...
RESTART_GAME: function(data) {
  that.scene.button.texture = that.scene.button.textureButton;
  that.scene.sprite.spin = true;
  that.scene.sprite.tint = 0x0000FF; // blue
  that.scene.sprite.rotation = 0;
},
...

OnTtsMark()

يتم استدعاء استدعاء OnTtsMark() عند تضمين علامة <mark> مع اسم فريد في استجابة SSML للمستخدم. في المقتطفات التالية من عيّنة رجل الثلج، يزامن OnTtsMark() الصورة المتحركة في تطبيق الويب مع تقنية "تحويل النص إلى كلام" المقابلة. الإخراج. عندما يقول "الإجراء" للمستخدم عذرًا، لقد خسرت، سيهجئ تطبيق الويب الكلمة الصحيحة ويعرض الأحرف للمستخدم.

يتضمّن الغرض Game Over Reveal Word علامة مخصّصة في الردّ على المستخدم عند خسارته للّعبة:

//index.js
...
app.intent('Game Over Reveal Word', (conv, {word}) => {
  conv.ask(`<speak>Sorry, you lost.<mark name="REVEAL_WORD"/> The word is ${word}.` +
    `${PLAY_AGAIN_INSTRUCTIONS}</speak>`);
  conv.ask(new HtmlResponse());
});
...

يسجّل مقتطف الرمز التالي معاودة الاتصال باللغة OnTtsMark()، ويتحقق من الاسم للعلامة، وتنفّذ الدالة revealCorrectWord() التي تحدّث تطبيق الويب:

//action.js
...
setCallbacks() {
  const that = this;
  // declare assistant canvas action callbacks
  const callbacks = {
    onTtsMark(markName) {
      if (markName === 'REVEAL_WORD') {
        // display the correct word to the user
        that.revealCorrectWord();
      }
    },
...

القيود

يُرجى مراعاة القيود التالية عند تطوير تطبيق الويب:

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

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

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