برنامه وب خود را بسازید (Dialogflow)

یک برنامه وب، رابط کاربری یک Action است که از Canvas تعاملی استفاده می کند. می توانید از فناوری های وب موجود (HTML، CSS و جاوا اسکریپت) برای طراحی و توسعه برنامه وب خود استفاده کنید. در بیشتر موارد، Interactive Canvas می‌تواند محتوای وب را مانند یک مرورگر ارائه کند، اما محدودیت‌هایی برای حفظ حریم خصوصی و امنیت کاربر وجود دارد. قبل از شروع طراحی UI خود، اصول طراحی ذکر شده در بخش Design guidelines را در نظر بگیرید.

HTML و جاوا اسکریپت برای برنامه وب شما موارد زیر را انجام می دهد:

  • ثبت تماس های رویداد Canvas تعاملی.
  • کتابخانه Interactive Canvas JavaScript را راه اندازی کنید.
  • منطق سفارشی را برای به روز رسانی برنامه وب خود بر اساس وضعیت ارائه دهید.

این صفحه به روش‌های توصیه‌شده برای ساخت برنامه وب، نحوه فعال کردن ارتباط بین برنامه وب و اجرای برنامه، و دستورالعمل‌ها و محدودیت‌های کلی می‌پردازد.

در حالی که می توانید از هر روشی برای ایجاد رابط کاربری خود استفاده کنید، Google توصیه می کند از کتابخانه های زیر استفاده کنید:

  • Greensock : برای ساخت انیمیشن های پیچیده.
  • Pixi.js : برای ترسیم گرافیک های دو بعدی در WebGL.
  • Three.js : برای ترسیم گرافیک های سه بعدی در WebGL.
  • طراحی بوم HTML5 : برای طراحی های ساده.
  • عنصر DOM : برای محتوای ثابت.

معماری

گوگل اکیدا استفاده از معماری اپلیکیشن تک صفحه ای را توصیه می کند. این رویکرد به عملکرد مطلوب اجازه می دهد و از تجربه کاربر مکالمه مداوم پشتیبانی می کند. Canvas تعاملی را می توان در ارتباط با فریم ورک های فرانت اند مانند Vue ، Angular و React استفاده کرد که به مدیریت حالت کمک می کنند.

فایل HTML

فایل HTML نحوه ظاهر رابط کاربری شما را مشخص می کند. این فایل همچنین کتابخانه جاوا اسکریپت Interactive Canvas را بارگیری می کند که ارتباط بین برنامه وب و Action مکالمه شما را امکان پذیر می کند. 

<!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>

بین اجرای برنامه و وب ارتباط برقرار کنید

اکنون که برنامه وب و اجرای خود را ساخته اید و در کتابخانه Interactive Canvas در فایل برنامه وب خود بارگیری کرده اید، باید نحوه تعامل برنامه وب و اجرای خود را مشخص کنید. برای انجام این کار، فایل های حاوی منطق برنامه وب خود را تغییر دهید.

action.js

این فایل حاوی کدی برای تعریف فراخوان و فراخوانی متدها از طریق interactiveCanvas است. Callbacks به برنامه وب شما اجازه می‌دهد به اطلاعات یا درخواست‌های Action مکالمه پاسخ دهد، در حالی که روش‌ها راهی برای ارسال اطلاعات یا درخواست‌ها به Action مکالمه ارائه می‌دهند.

افزودن 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;
});

از تعاملات لمسی پشتیبانی کنید

کنش بوم تعاملی شما می تواند به لمس کاربر و همچنین ورودی های صوتی آنها پاسخ دهد. طبق دستورالعمل‌های طراحی بوم تعاملی ، باید Action خود را به گونه‌ای توسعه دهید که «اولین صدا» باشد. همانطور که گفته شد، برخی از نمایشگرهای هوشمند از تعاملات لمسی پشتیبانی می کنند.

پشتیبانی از لمس مشابه پشتیبانی از پاسخ های مکالمه است. با این حال، به جای پاسخ صوتی از سوی کاربر، جاوا اسکریپت سمت سرویس گیرنده شما به دنبال تعاملات لمسی است و از آنها برای تغییر عناصر در برنامه وب استفاده می کند.

می توانید نمونه ای از این را در نمونه مشاهده کنید که از کتابخانه 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 API به عنوان یک تماس update ارسال می شود. تحقق منطقی دارد که بر اساس مقدار spin ، قصدی را ایجاد می کند. 

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

اضافه کردن ویژگی های بیشتر

اکنون که اصول اولیه را آموخته اید، می توانید Action خود را با API های مخصوص Canvas بهبود بخشیده و سفارشی کنید. این بخش نحوه پیاده سازی این API ها را در کنش بوم تعاملی توضیح می دهد.

sendTextQuery()

متد sendTextQuery() پرس‌و‌جوهای متنی را به Action محاوره‌ای ارسال می‌کند تا به صورت برنامه‌ریزی یک intent را فراخوانی کند. این نمونه از sendTextQuery() برای راه اندازی مجدد بازی مثلثی استفاده می کند که کاربر روی دکمه ای کلیک می کند. هنگامی که کاربر روی دکمه "Restart game" کلیک می کند، sendTextQuery() Restart game intent را فراخوانی می کند و یک وعده را برمی گرداند. اگر قصد راه اندازی شود، این وعده منجر به SUCCESS و در غیر این صورت BLOCKED می شود. قطعه زیر قصد را تحریک می کند و موارد موفقیت و شکست وعده را مدیریت می کند:

//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()

هنگامی که شما یک تگ <mark> با یک نام منحصر به فرد را در پاسخ SSML خود به کاربر وارد کنید، فراخوانی OnTtsMark() فراخوانی می شود. در گزیده‌های زیر از نمونه آدم برفی ، OnTtsMark() انیمیشن برنامه وب را با خروجی TTS مربوطه همگام‌سازی می‌کند. هنگامی که Action به کاربر گفت متأسفم، شما از دست دادید ، برنامه وب کلمه صحیح را املا می کند و حروف را به کاربر نمایش می دهد.

Intent 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 مگابایت حافظه باقی بمانید
  • 3P Header قسمت بالایی صفحه را اشغال می کند
  • هیچ سبکی را نمی توان برای ویدیوها اعمال کرد
  • فقط یک عنصر رسانه ممکن است در یک زمان استفاده شود
  • ویدیوی HLS وجود ندارد
  • پایگاه داده Web SQL وجود ندارد
  • از رابط SpeechRecognition در Web Speech API پشتیبانی نمی شود.
  • بدون ضبط صدا و تصویر
  • تنظیم حالت تاریک قابل اجرا نیست

به اشتراک گذاری منابع متقاطع

از آنجایی که برنامه‌های وب Interactive Canvas در iframe میزبانی می‌شوند و مبدا بر روی null تنظیم شده است، باید اشتراک‌گذاری منابع متقاطع (CORS) را برای سرورهای وب و منابع ذخیره‌سازی خود فعال کنید. این به دارایی‌های شما اجازه می‌دهد تا درخواست‌هایی را از مبداهای پوچ بپذیرند.