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 merancang dan mengembangkan aplikasi web Anda. Secara keseluruhan, Interactive Canvas mampu merender konten web seperti browser, tetapi ada beberapa batasan yang diterapkan untuk privasi dan keamanan pengguna. Sebelum mulai mendesain UI, pertimbangkan prinsip desain yang diuraikan dalam Design guidelines bagian.

HTML dan JavaScript untuk aplikasi web Anda melakukan hal berikut:

  • Mendaftarkan callback peristiwa Canvas Interaktif.
  • Lakukan inisialisasi library Interactive Canvas JavaScript.
  • Berikan logika kustom untuk mengupdate aplikasi web Anda berdasarkan status.

Halaman ini membahas cara yang direkomendasikan untuk membuat aplikasi web, serta cara mengaktifkan komunikasi antara aplikasi web dan pemenuhan pesanan, serta panduan umum dan pembatasan.

Meskipun Anda dapat menggunakan metode apa pun untuk membangun UI, Google merekomendasikan penggunaan berikut {i>library<i}:

Arsitektur

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

File HTML

File HTML menentukan tampilan UI Anda. File ini juga memuat kursus interaktif Library JavaScript Canvas, 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

Sekarang, setelah Anda membangun aplikasi web dan fulfillment Anda, serta muat di kursus Koleksi Canvas di file aplikasi web, Anda perlu menentukan cara aplikasi web dan fulfillment berinteraksi. Kepada lakukan ini, modifikasi file yang berisi logika aplikasi web Anda.

action.js

File ini berisi kode untuk menentukan callback 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 daftarkan callback:

//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 menyusun scene untuk aplikasi web Anda. Dalam contoh ini, ini juga menangani kasus keberhasilan dan kegagalan promise yang ditampilkan dengan sendTextQuery(). Tujuan berikut 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 dan input vokal mereka. Sesuai dengan Pedoman desain Canvas Interaktif, Anda harus mengembangkan Action menjadi "voice-first". Meskipun demikian, beberapa Smart Layar mendukung interaksi sentuh.

Sentuhan pendukung mirip dengan mendukung respons percakapan; namun, alih-alih respons vokal dari pengguna, JavaScript sisi klien Anda akan untuk interaksi sentuh dan menggunakannya untuk mengubah elemen di aplikasi web.

Anda dapat melihat contohnya di sampel, 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 di Action Canvas Interaktif Anda.

sendTextQuery()

Metode sendTextQuery() mengirimkan 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 mengeklik "Mulai ulang game" tombol, sendTextQuery() memanggil Restart game intent dan menampilkan promise. Promise ini menghasilkan SUCCESS jika intent-nya dan BLOCKED jika tidak. Cuplikan berikut memicu intent tersebut serta menangani kasus keberhasilan dan kegagalan 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 menjalankan kode dalam cuplikan kode RESTART_GAME di bawah ini:

//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 di respons SSML kepada pengguna. Dalam kutipan berikut dari sampel Snowman, OnTtsMark() menyinkronkan animasi aplikasi web dengan TTS yang sesuai {i>output<i} tersebut. Saat Action berkata kepada pengguna Maaf, Anda kehilangan, aplikasi web akan mengeja kata yang benar dan menampilkan huruf-hurufnya kepada pengguna.

Game Over Reveal Word intent menyertakan tanda kustom dalam respons terhadap 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 namanya yang signifikan, dan mengeksekusi fungsi revealCorrectWord() yang akan 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();
      }
    },
...

Pembatasan

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
  • 3P Header menempati bagian atas layar
  • Tidak ada gaya yang dapat diterapkan pada 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 Web Speech API.
  • Tidak ada perekaman audio atau video
  • Setelan mode gelap tidak berlaku

Cross-origin resource sharing

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