Membangun aplikasi web (Dialogflow)

Aplikasi web adalah UI untuk Action yang menggunakan Canvas Interaktif. Anda dapat menggunakan teknologi web yang ada (HTML, CSS, dan JavaScript) untuk mendesain dan mengembangkan aplikasi web. Untuk sebagian besar, Interactive Canvas dapat merender konten web seperti browser, tetapi ada beberapa batasan yang diberlakukan untuk privasi dan keamanan pengguna. Sebelum mulai mendesain UI, pertimbangkan prinsip desain yang diuraikan di bagian Design guidelines.

HTML dan JavaScript untuk aplikasi web Anda akan melakukan hal berikut:

  • Mendaftarkan callbacks peristiwa Canvas Interaktif.
  • Melakukan inisialisasi library Interactive Canvas JavaScript.
  • Menyediakan logika kustom untuk mengupdate aplikasi web Anda berdasarkan status.

Halaman ini membahas cara yang direkomendasikan untuk membuat aplikasi web, cara mengaktifkan komunikasi antara aplikasi web dan fulfillment Anda, serta pedoman umum dan batasan.

Meskipun Anda dapat menggunakan metode apa pun untuk mem-build UI, Google merekomendasikan penggunaan library berikut:

Arsitektur

Google sangat merekomendasikan penggunaan arsitektur aplikasi web satu halaman. Pendekatan ini memungkinkan performa yang optimal dan mendukung pengalaman pengguna percakapan yang berkelanjutan. Canvas Interaktif dapat digunakan bersama framework front-end seperti Vue, Angular, dan React, yang membantu pengelolaan status.

File HTML

File HTML menentukan tampilan UI Anda. File ini juga memuat library JavaScript Canvas Interactive, yang memungkinkan komunikasi antara aplikasi web dan Action percakapan Anda.

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

Berkomunikasi antara fulfillment dan aplikasi web

Setelah membuat aplikasi web dan fulfillment Anda serta memuat di library Interactive Canvas di file aplikasi web, Anda perlu menentukan cara aplikasi web dan fulfillment Anda berinteraksi. Untuk melakukannya, ubah file yang berisi logika aplikasi web.

action.js

File ini berisi kode untuk menentukan callbacks dan memanggil metode melalui interactiveCanvas. Callback memungkinkan aplikasi web Anda merespons informasi atau permintaan dari Action percakapan, sedangkan metode menyediakan cara untuk mengirim informasi atau permintaan ke Action percakapan.

Tambahkan interactiveCanvas.ready(callbacks); ke file HTML Anda untuk melakukan inisialisasi dan mendaftarkan callbacks:

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

File ini membuat scene untuk aplikasi web Anda. Dalam contoh ini, file ini juga menangani kasus berhasil dan gagal dari promise yang ditampilkan dengan sendTextQuery(). Berikut adalah kutipan dari 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;
});

Mendukung interaksi sentuh

Action Canvas Interaktif Anda dapat merespons sentuhan pengguna serta input vokalnya. Berdasarkan pedoman desain Canvas Interaktif, Anda harus mengembangkan Action menjadi "yang mengutamakan suara". Jadi, beberapa {i>Smart Display <i} mendukung interaksi sentuh.

Mendukung sentuhan mirip dengan mendukung respons percakapan; namun, bukan respons vokal dari pengguna, JavaScript sisi klien Anda mencari interaksi sentuh dan menggunakannya untuk mengubah elemen dalam aplikasi web.

Anda dapat melihat contohnya dalam contoh, yang menggunakan library 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;
});
...

Dalam hal ini, nilai variabel spin dikirim melalui interactiveCanvas API sebagai callback update. Fulfillment memiliki logika yang memicu intent berdasarkan nilai spin.

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

Menambahkan fitur lainnya

Setelah mempelajari dasar-dasarnya, Anda dapat meningkatkan kualitas dan menyesuaikan Action dengan API khusus Canvas. Bagian ini menjelaskan cara menerapkan API ini dalam Action Canvas Interaktif Anda.

sendTextQuery()

Metode sendTextQuery() mengirim kueri teks ke Action percakapan untuk memanggil intent secara terprogram. Contoh ini menggunakan sendTextQuery() untuk memulai ulang game berputar segitiga saat pengguna mengklik tombol. Saat pengguna mengklik tombol "Mulai ulang game", sendTextQuery() akan memanggil intent Restart game dan menampilkan promise. Promise ini menghasilkan SUCCESS jika intent dipicu dan BLOCKED jika tidak. Cuplikan berikut memicu intent dan menangani kasus berhasil dan gagal dari promise:

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

Jika promise menghasilkan SUCCESS, intent Restart game akan mengirim HtmlResponse ke aplikasi web Anda:

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

HtmlResponse ini memicu callback onUpdate(), yang mengeksekusi kode dalam cuplikan kode RESTART_GAME di bawah:

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

Callback OnTtsMark() dipanggil saat Anda menyertakan tag <mark> dengan nama unik dalam respons SSML Anda kepada pengguna. Dalam cuplikan berikut dari contoh Snowman, OnTtsMark() menyinkronkan animasi aplikasi web dengan output TTS yang sesuai. Saat Action mengucapkan Maaf, Anda kalah, aplikasi web akan mengeja kata yang benar dan menampilkan huruf tersebut kepada pengguna.

Game Over Reveal Word intent menyertakan tanda kustom sebagai respons kepada pengguna saat mereka kalah dalam game:

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

Cuplikan kode berikut kemudian mendaftarkan callback OnTtsMark(), memeriksa nama tanda, dan mengeksekusi fungsi revealCorrectWord(), yang mengupdate aplikasi web:

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

Batasan

Pertimbangkan batasan berikut saat Anda mengembangkan aplikasi web:

  • Tidak ada cookie
  • Tidak ada penyimpanan lokal
  • Tidak ada geolokasi
  • Tidak ada penggunaan kamera
  • Tidak ada pop-up
  • Tidak melebihi batas memori 200 MB
  • Header 3P berada di bagian atas layar
  • Tidak ada gaya yang dapat diterapkan ke video
  • Hanya satu elemen media yang dapat digunakan pada satu waktu
  • Tidak ada video HLS
  • Tidak ada database Web SQL
  • Tidak ada dukungan untuk antarmuka SpeechRecognition pada Web Speech API.
  • Tanpa perekaman audio atau video
  • Setelan mode gelap tidak berlaku

Cross-origin resource sharing

Karena aplikasi web Canvas Interaktif dihosting dalam iframe dan originnya ditetapkan ke null, Anda harus mengaktifkan cross-origin resource sharing (CORS) untuk server web dan resource penyimpanan Anda. Hal ini memungkinkan aset Anda menerima permintaan dari origin null.