Tindakan Percakapan tidak digunakan lagi pada 13 Juni 2023. Untuk mengetahui informasi selengkapnya, lihat Penghentian Action Percakapan.

Halaman ini diterjemahkan oleh Cloud Translation API.

Lanjutkan mem-build dengan fulfillment sisi klien atau server

Setelah mempelajari dasar-dasarnya, Anda dapat meningkatkan kualitas dan menyesuaikan Action dengan metode khusus Canvas. Anda dapat memilih untuk mengembangkan Action dengan model fulfillment klien atau model fulfillment sisi server saat membuat project Action Anda. Untuk mengetahui informasi selengkapnya tentang opsi ini, lihat Mengaktifkan Canvas Interaktif.

Jika memilih opsi model fulfillment klien, Anda dapat menggunakan hal berikut dalam Action:

Semua API yang tercantum di bagian Mem-build dengan fulfillment sisi klien
Semua API yang tercantum di bagian Mem-build dengan fulfillment sisi server

Catatan: Untuk fulfillment sisi klien, sebaiknya hanya panggil webhook untuk fitur non-Canvas yang memerlukannya, seperti penautan akun.
Callback onTtsMark()

Jika memilih opsi model fulfillment server, Anda dapat menggunakan yang berikut dalam Action Anda:

Semua API yang tercantum di bagian Mem-build dengan fulfillment sisi server
Callback

Beberapa Interactive Canvas API tidak direkomendasikan untuk digunakan dengan model fulfillment tertentu. Tabel berikut menunjukkan API yang diaktifkan saat Anda memilih opsi fulfillment klien, dan apakah API ini direkomendasikan atau tidak direkomendasikan untuk setiap model:

Nama API	Didukung dalam model fulfillment server?	Didukung dalam model fulfillment klien?
`sendTextQuery()`	Ya	Didukung tetapi tidak direkomendasikan (lihat sendtextQuery() untuk informasi selengkapnya)
`outputTts()`	Ya	Ya
`triggerScene()`	Tidak	Ya
`createIntentHandler(), expect(), clearExpectations(), prompt()`	Tidak	Ya
`createNumberSlot(),createTextSlot, createConfirmationSlot, createOptionsSlot()`	Tidak	Ya
`setHomeParam(), getHomeParam(), setUserParam(), getUserParam()`	Tidak	Ya

Bagian berikut menjelaskan cara menerapkan API untuk model fulfillment sisi server dan klien dalam Action Canvas Interaktif Anda.

Mem-build dengan fulfillment sisi klien

Anda dapat menerapkan Interactive Canvas API berikut dalam logika aplikasi web Anda:

`outputTts()`

API ini memungkinkan Anda menghasilkan output text-to-speech (TTS) dari perangkat tanpa mengirim perintah statis dari Actions Builder atau memanggil webhook. Jika tidak ada logika sisi server yang terkait dengan TTS, Anda dapat menggunakan outputTts() dari sisi klien untuk melewati perjalanan ke server dan memberikan respons yang lebih cepat kepada pengguna.

outputTts() sisi klien dapat mengganggu atau membatalkan TTS sisi server. Anda dapat menghindari gangguan TTS sisi server dengan melakukan tindakan pencegahan berikut:

Hindari memanggil outputTts() di awal sesi; sebagai gantinya, gunakan TTS sisi server pada giliran percakapan pertama Action Anda.
Hindari memanggil outputTts() secara berurutan tanpa memerlukan tindakan pengguna di antaranya.

Cuplikan berikut menunjukkan cara menggunakan outputTts() untuk menghasilkan TTS dari sisi klien:

interactiveCanvas.outputTts(
      '<speak>This is an example response.</speak>', true);

Anda juga dapat menggunakan outputTts() dengan onTtsMark() untuk menempatkan penanda SSML ke dalam urutan teks. Penggunaan onTtsMark() akan menyinkronkan animasi aplikasi web atau status game Anda pada titik tertentu dari string SSML TTS, seperti yang ditunjukkan dalam cuplikan berikut:

interactiveCanvas.outputTts(
      '<speak>Speak as <mark name="number" /> number <break time="700ms"/>' +
      '<say-as interpret-as="cardinal">12345</say-as> <break time="300ms"/> ' +
      'Speak as <mark name="digits" /> digits <break time="700ms"/>' +
      '<say-as interpret-as="characters">12345</say-as></speak>', true);

Pada contoh sebelumnya, dua tanda yang menyesuaikan respons Anda dikirim ke aplikasi web dengan TTS.

Menangani fulfillment intent pada klien

Dalam model fulfillment server untuk Canvas Interaktif, semua intent harus ditangani oleh webhook, yang meningkatkan latensi dalam Action Anda. Daripada memanggil webhook, Anda dapat menangani fulfillment intent dalam aplikasi web Anda.

Untuk menangani intent sisi klien, Anda dapat menggunakan API berikut:

createIntentHandler(): Metode yang memungkinkan Anda menentukan pengendali intent dalam kode aplikasi web untuk intent kustom yang ditentukan di Action Builder.
expect(): Metode yang mengaktifkan/mendaftarkan pengendali intent agar pengguna dapat cocok dengan intent.
clearExpectations(): Metode yang menghapus ekspektasi untuk semua intent yang saat ini diaktifkan sehingga intent tidak dapat dicocokkan, meskipun pengguna mengucapkan ucapan yang cocok dengan intent.
deleteHandler(): Metode yang menonaktifkan pengendali intent individual sehingga intent tersebut tidak dapat dicocokkan.

Dengan API ini, Anda dapat mengaktifkan atau menonaktifkan intent secara selektif untuk berbagai status Action Canvas Interaktif. Anda harus menggunakan expect() pada pengendali intent untuk mengaktifkan intent tersebut.

Mengaktifkan pengendali intent

Mengaktifkan pengendali intent adalah proses dua langkah. Pertama, Anda harus menentukan intent di Action Builder. Selanjutnya, agar intent dapat dicocokkan, Anda harus memanggil expect() pada pengendali intent.

Untuk mengonfigurasi dan mengaktifkan pengendali intent di sisi klien, ikuti langkah-langkah berikut:

Buka project Anda di konsol Actions dan tambahkan Intent kustom.
Pilih Yes untuk Is this a global intent?

Catatan: Intent yang Anda buat di Action Builder yang dipicu dari sisi klien harus dikonfigurasi sebagai intent global.
Konfigurasi intent Anda, lalu klik Save.

Tentukan pengendali untuk intent dalam logika aplikasi web Anda, seperti ditunjukkan dalam cuplikan berikut:

/**
* Define handler for intent.
*/
const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
  matchedIntent => {
    console.log("Intent match handler to reserve a table was triggered!");
  });

/**
* Define handler for intent with an argument.
*/
const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
  matchedIntent => {
    const numberOfPeople = matchedIntent.getIntentArg('numberOfPeople');
    console.log(`Intent match handler to reserve a table for ${number of people} was triggered!`);
  });

Panggil metode expect() untuk mendaftarkan pengendali intent, seperti yang ditunjukkan dalam cuplikan berikut:

/**
* Define handler for intent and expect() it.
*/
const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
  matchedIntent => {
    console.log("Intent match handler to reserve a table was triggered!");
  });
var handler = interactiveCanvas.expect(bookTableIntent);

Menonaktifkan pengendali intent

Setelah menentukan pengendali intent, Anda dapat mengaktifkan atau menonaktifkan intent tersebut sesuai kebutuhan untuk Action Anda. Saat Anda memanggil expect() untuk mengaktifkan intent, fungsi tersebut akan menampilkan objek dengan metode deleteHandler(), yang dapat Anda gunakan untuk menonaktifkan pengendali yang baru dibuat. Definisi pengendali intent akan tetap ada meskipun intent saat ini tidak aktif, sehingga Anda dapat mengaktifkan kembali intent saat diperlukan.

Untuk menonaktifkan pengendali intent, panggil deleteHandler() pada pengendali intent, seperti yang ditunjukkan dalam cuplikan berikut:

    /**
    * Define handler for intent and expect() it.
    */
    const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
      matchedIntent => {
        console.log("Intent match handler to reserve a table was triggered!");
      });
    var handler = interactiveCanvas.expect(bookTableIntent);
    
    // Delete the handler for `bookTableIntent`.
    handler.deleteHandler();

Anda dapat memanggil expect() untuk menambahkan kembali pengendali intent yang telah dinonaktifkan, seperti yang ditunjukkan dalam cuplikan berikut:

    // Re-add the `bookTableIntent` handler.
    handler = interactiveCanvas.expect(bookTableIntent);

Untuk menonaktifkan intent secara massal, Anda dapat menggunakan metode clearExpectations(), yang menonaktifkan semua intent yang saat ini diaktifkan. Cuplikan berikut menunjukkan cara menghapus ekspektasi untuk semua pengendali intent:

interactiveCanvas.clearExpectations();

Menangani pengisian slot pada klien

Daripada menambahkan pengisian slot ke scene dalam Action Builder, Anda dapat menangani pengisian slot langsung di aplikasi web Anda.

Untuk menangani pengisian slot di sisi klien, Anda harus terlebih dahulu membuat slot menggunakan salah satu API berikut:

createNumberSlot(callback, hints): Metode yang memungkinkan Anda menentukan slot angka di kode aplikasi web Anda. Digunakan untuk meminta pengguna memasukkan nomor.
createTextSlot(callback, hints): Metode yang memungkinkan Anda menentukan slot teks di kode aplikasi web Anda. Digunakan untuk meminta pengguna memasukkan kata.
createConfirmationSlot(callback, hints): Metode yang memungkinkan Anda menentukan slot konfirmasi di kode aplikasi web Anda. Digunakan untuk meminta konfirmasi pengguna (ya/tidak).
createOptionsSlot(options, callback, hints): Metode yang memungkinkan Anda menentukan slot opsi di kode aplikasi web. Digunakan untuk meminta pengguna memilih dari daftar opsi yang telah ditentukan.

Saat membuat slot, Anda dapat secara opsional menentukan triggerHints, yang merupakan kata kunci yang meningkatkan sistem natural language understanding (NLU) untuk Action Anda. Kata kunci ini harus berupa kata singkat yang mungkin diucapkan pengguna saat mengisi slot. Misalnya, kata kunci triggerHints untuk slot angka bisa jadi years. Saat pengguna membalas pertanyaan tentang usianya dalam percakapan dengan respons "Saya tiga puluh tahun", Action Anda lebih cenderung mengenali bahwa pengguna mengisi slot dengan tepat.

Setelah membuat slot, Anda dapat meminta pengguna memasukkan slot menggunakan prompt API:

prompt(tts, slot): Metode yang akan menghasilkan TTS kepada pengguna, yang meminta mereka mengisi slot yang diharapkan.

Memanggil prompt() akan menampilkan promise dengan status dan nilai slot yang terisi.

Buat slot angka

Slot nomor memungkinkan Anda meminta nomor telepon kepada pengguna selama percakapan. Untuk informasi selengkapnya tentang pengisian slot, lihat bagian Pengisian slot dalam dokumentasi Action Builder.

Untuk meminta pengguna mengisi slot angka di sisi klien, ikuti langkah-langkah berikut:

Panggil metode createNumberSlot() untuk membuat slot nomor dalam logika aplikasi web Anda:

/**
 * Create number slot.
 */
const triggerHints = { associatedWords: ['guess number', 'number'] };
const slot = interactiveCanvas.createNumberSlot(
  number => {
    console.log(`Number guessed: ${number}.`);
  }, triggerHints);

Panggil metode prompt() untuk meminta pengguna memasukkan slot, dan menangani nilai slot dari promise yang ditampilkan, seperti ditunjukkan dalam cuplikan berikut:

const promptPromise = interactiveCanvas.prompt(
  { text: 'What number am I thinking of between 1 and 10?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: 5, status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

Buat slot teks

Slot teks memungkinkan Anda meminta kata kepada pengguna selama percakapan. Untuk informasi selengkapnya tentang pengisian slot, lihat bagian Pengisian slot dalam dokumentasi Action Builder.

Untuk meminta pengguna mengisi slot teks di sisi klien, ikuti langkah-langkah berikut:

Panggil metode createTextSlot() untuk membuat slot teks dalam logika aplikasi web Anda:

/**
 * Create text slot.
 */
const triggerHints = { associatedWords: ['favorite color', 'color'] };
const slot = interactiveCanvas.createTextSlot(
  text => {
    console.log(`Favorite color: ${text}.`);
  }, triggerHints);

Panggil metode prompt() untuk meminta pengguna memasukkan slot, dan menangani nilai slot dari promise yang ditampilkan, seperti ditunjukkan dalam cuplikan berikut:

const promptPromise = interactiveCanvas.prompt(
  { text: 'What is your favorite color?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: "red", status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

Buat slot konfirmasi

Slot konfirmasi memungkinkan Anda meminta konfirmasi pengguna (pengguna dapat merespons "Ya" atau "Tidak" untuk mengisi slot). Untuk informasi selengkapnya tentang pengisian slot, lihat bagian Pengisian slot dalam dokumentasi Action Builder.

Untuk meminta pengguna mengisi slot konfirmasi di sisi klien, ikuti langkah-langkah berikut:

Panggil metode createConfirmationSlot() untuk membuat slot konfirmasi di logika aplikasi web Anda:

/**
 * Create confirmation slot (boolean).
 */
const triggerHints = { associatedWords: ['user confirmation', 'confirmation'] };
const slot = interactiveCanvas.createConfirmationSlot(
  yesOrNo => {
    console.log(`Confirmation: ${yesOrNo}`);
  }, triggerHints);

Panggil metode prompt() untuk meminta pengguna memasukkan slot, dan menangani nilai slot dari promise yang ditampilkan, seperti ditunjukkan dalam cuplikan berikut:

const promptPromise = interactiveCanvas.prompt(
  { text: 'Do you agree to the Terms of Service?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: true, status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

Buat slot opsi

Slot opsi memungkinkan Anda meminta pengguna untuk memilih dari daftar opsi yang telah ditentukan. Untuk informasi selengkapnya tentang pengisian slot, lihat bagian Pengisian slot dalam dokumentasi Action Builder.

Untuk meminta pengguna mengisi slot opsi di sisi klien, ikuti langkah-langkah berikut:

Panggil metode createOptionsSlot() untuk membuat slot opsi dalam logika aplikasi web Anda:

/**
 * Create options slot (list selection).
 */
const triggerHints = { associatedWords: ['select fruit', 'choose fruit'] };
// Define selectable options
const options = [{
  key: 'apple',
  synonyms: ['apple', 'large apple', 'gala apple'],
}, {
  key: 'banana',
  synonyms: ['banana', 'green banana', 'plantain'],
}];
const slot = interactiveCanvas.createOptionsSlot(
  options,
  selectedOption => {
    console.log(`You have selected ${selectedOption} as your fruit.`);
  }, triggerHints);

Panggil metode prompt() untuk meminta pengguna memasukkan slot, dan menangani nilai slot dari promise yang ditampilkan, seperti ditunjukkan dalam cuplikan berikut:

const promptPromise = interactiveCanvas.prompt(
  { text: 'Would you like a banana or an apple?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: 'apple', status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

`triggerScene()`

API triggerScene() memungkinkan Anda bertransisi ke scene lain dalam Action Canvas Interaktif dari fulfillment sisi klien. Dengan triggerScene(), Anda juga dapat beralih dari fulfillment sisi klien ke fulfillment sisi server saat pengguna perlu mengakses adegan sistem di Action Builder yang memerlukan webhook. Misalnya, Anda dapat memanggil triggerScene() saat pengguna perlu menautkan akun mereka atau menerima notifikasi; kemudian, Anda dapat kembali dari adegan tersebut ke fulfillment sisi klien dengan perintah Canvas.

Cuplikan berikut menunjukkan cara mengimplementasikan triggerScene() dalam Action Anda:

interactiveCanvas.triggerScene('SceneName').then((status) => {
  console.log("sent the request to trigger scene.");
}).catch(e => {
  console.log("Failed to trigger a scene.");
})

Penyimpanan rumah dan pengguna di klien

Daripada menggunakan webhook untuk mendapatkan dan menetapkan nilai penyimpanan rumah dan pengguna, Anda dapat memanggil API sisi klien untuk menangani penyimpanan rumah dan pengguna di aplikasi web Anda. Aplikasi web Anda kemudian dapat menggunakan nilai yang disimpan ini di beberapa sesi (misalnya, dalam prompt dan kondisi), dan dapat mengakses nilai untuk anggota keluarga atau pengguna tertentu saat diperlukan. Menggunakan API ini dapat mengurangi latensi dalam Action Canvas Interaktif karena Anda tidak perlu lagi memanggil webhook untuk mendapatkan dan menetapkan nilai penyimpanan.

Penyimpanan rumah dan pengguna di aplikasi web mengikuti prinsip umum yang sama seperti penyimpanan di webhook. Untuk informasi selengkapnya tentang penyimpanan rumah dan pengguna, lihat dokumentasi untuk Penyimpanan rumah dan Penyimpanan pengguna.

Penyimpanan rumah sisi klien

Penyimpanan rumah memungkinkan Anda menyimpan nilai untuk pengguna anggota keluarga berdasarkan grafik rumah, dan dibagikan ke semua sesi anggota keluarga. Misalnya, jika seorang pengguna memainkan game Canvas Interaktif dalam satu keluarga, skor game dapat disimpan di penyimpanan rumah, dan anggota keluarga lainnya dapat terus memainkan game dengan skor yang tersimpan tersebut.

Untuk mengaktifkan Action Anda agar mendukung penyimpanan rumah, ikuti langkah-langkah berikut:

Di konsol Actions, buka Deploy > Directory information > Additional Information.
Centang kotak Ya untuk Apakah Action Anda menggunakan penyimpanan rumah?

Untuk menulis nilai ke penyimpanan home di aplikasi web Anda, panggil metode setHomeParam(), seperti ditunjukkan dalam cuplikan berikut:

interactiveCanvas.setHomeParam('familySize',  10).then(
      result => {
        console.log('Set home param success');
      },
      fail => {
        console.error(err);
      });

Untuk membaca nilai dari penyimpanan rumah di aplikasi web Anda, panggil metode getHomeParam(), seperti ditunjukkan dalam cuplikan berikut:

interactiveCanvas.getHomeParam('familySize').then(
      value => {
        console.log(JSON.stringify(result));
      },
      err => {
        console.error(err);
      }
  );

Untuk menghapus semua penyimpanan rumah yang ada, panggil metode resetHomeParam(), seperti ditunjukkan dalam cuplikan berikut:

interactiveCanvas.resetHomeParam();

Penyimpanan pengguna sisi klien

Penyimpanan pengguna memungkinkan Anda menyimpan parameter value untuk pengguna tertentu yang terverifikasi di beberapa sesi. Misalnya, jika pengguna bermain game, skor game dapat disimpan untuk pengguna tersebut. Pada sesi gameplay berikutnya, pengguna dapat terus memainkan game dengan skor yang sama.

Untuk menulis nilai ke penyimpanan pengguna di aplikasi web Anda, panggil metode setUserParam(), seperti ditunjukkan dalam cuplikan berikut:

interactiveCanvas.setUserParam('color',  'blue').then(
      result => {
        console.log('Set user param success');
      },
      err => {
        console.error(err);
      });

Untuk membaca nilai dari penyimpanan pengguna di aplikasi web Anda, panggil metode getUserParam(), seperti ditunjukkan dalam cuplikan berikut:

interactiveCanvas.getUserParam('color').then(
      value => {
        console.log(JSON.stringify(result));
      },
      err => {
        console.error(err);
      }
  );

Untuk menghapus semua penyimpanan pengguna yang ada, panggil metode resetUserParam(), seperti ditunjukkan dalam cuplikan berikut:

interactiveCanvas.resetUserParam();

`setCanvasState()`

Metode setCanvasState() memungkinkan Anda mengirim data status dari aplikasi web Canvas Interaktif ke fulfillment Anda, dan memberi tahu Asisten bahwa aplikasi web telah memperbarui statusnya. Aplikasi web mengirim statusnya yang diperbarui sebagai objek JSON.

Memanggil setCanvasState() tidak memanggil intent. Setelah memanggil setCanvasState(), jika sendTextQuery() dipanggil atau kueri pengguna cocok dengan intent dalam percakapan, data yang ditetapkan dengan setCanvasState() pada giliran percakapan sebelumnya akan tersedia di giliran percakapan berikutnya.

Dalam cuplikan berikut, aplikasi web menggunakan setCanvasState() untuk menetapkan data status Canvas:

JavaScript

this.action.canvas.setCanvasState({ score: 150 })

Mereferensikan status Canvas dari webhook

Anda dapat mereferensikan nilai status Canvas yang tersimpan dalam kode fulfillment Anda. Untuk mereferensikan nilai ini, gunakan sintaksis conv.context.canvas.state.KEY, dengan KEY adalah kunci yang diberikan saat nilai status Canvas ditetapkan.

Misalnya, jika sebelumnya Anda menyimpan nilai skor tinggi untuk game dalam status Canvas sebagai parameter score, referensikan nilai tersebut menggunakan conv.context.canvas.state.score untuk mengakses nilai tersebut dalam fulfillment:

Node.js

app.handle('webhook-name', conv => {
    console.log(conv.context.canvas.state.score);
})

Mereferensikan status Canvas dalam perintah

Anda dapat mereferensikan nilai status Canvas yang tersimpan dalam perintah. Untuk mereferensikan nilai ini, gunakan sintaksis $canvas.state.KEY, dengan KEY adalah kunci yang diberikan saat nilai status Canvas ditetapkan.

Misalnya, jika sebelumnya Anda menyimpan nilai skor tinggi untuk game dalam status Canvas sebagai parameter score, rujuk nilai tersebut menggunakan $canvas.state.score untuk mengakses nilai tersebut dalam perintah:

JSON

{
  "candidates": [{
    "first_simple": {
      "variants": [{
        "speech": "Your high score is $canvas.state.score."
      }]
    }
  }]
}

Mereferensikan status Canvas dalam kondisi

Anda juga dapat mereferensikan nilai status Canvas yang tersimpan dalam kondisi. Untuk mereferensikan nilai, gunakan sintaksis canvas.state.KEY, dengan KEY adalah kunci yang diberikan saat nilai status Canvas ditetapkan.

Misalnya, jika sebelumnya Anda menyimpan nilai skor tinggi untuk game dalam status Canvas sebagai parameter score dan ingin membandingkannya dengan nilai 999 dalam kondisi, Anda dapat mereferensikan nilai yang disimpan dalam kondisi Anda menggunakan canvas.state.score. Ekspresi kondisi Anda terlihat seperti berikut:

Sintaksis kondisi

canvas.state.score >= 999

`sendTextQuery()`

Metode sendTextQuery() mengirim kueri teks ke Action Percakapan untuk mencocokkan 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 mengirimkan kueri teks yang cocok dengan intent Restart game dan menampilkan promise. Promise ini menghasilkan SUCCESS jika intent dipicu dan BLOCKED jika tidak. Cuplikan berikut cocok dengan intent dan menangani kasus keberhasilan dan kegagalan dari promise:

JavaScript

…
/**
* Handle game restarts
*/
async handleRestartGame() {
    console.log(`Request in flight`);
    this.button.texture = this.button.textureButtonDisabled;
    this.sprite.spin = false;
    const res = await this.action.canvas.sendTextQuery('Restart game');
    if (res.toUpperCase() !== 'SUCCESS') {
        console.log(`Request in flight: ${res}`);
        return;
    }
    console.log(`Request in flight: ${res}`);
    this.button.texture = this.button.textureButtonDisabled;
    this.sprite.spin = false;
}
…

Jika promise menghasilkan SUCCESS, pengendali webhook Restart game akan mengirim respons Canvas ke aplikasi web Anda:

JavaScript

…
app.handle('restart', conv => {
  conv.add(new Canvas({
    data: {
      command: 'RESTART_GAME'
    }
  }));
});
…

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

JavaScript

…
RESTART_GAME: (data) => {
    this.scene.button.texture = this.scene.button.textureButton;
    this.scene.sprite.spin = true;
    this.scene.sprite.tint = 0x00FF00; // green
    this.scene.sprite.rotation = 0;
},
…

Mem-build dengan fulfillment sisi server

Anda dapat menerapkan Interactive Canvas API berikut di webhook:

Mengaktifkan mode layar penuh

Secara default, aplikasi web Canvas Interaktif menyertakan header di bagian atas layar dengan nama Action Anda. Anda dapat menggunakan enableFullScreen untuk menghapus header dan menggantinya dengan toast sementara yang muncul di layar pemuatan, yang memungkinkan pengguna memiliki pengalaman layar penuh saat berinteraksi dengan Action Anda. Pesan toast menampilkan nama tampilan Action, nama developer, serta petunjuk untuk keluar dari Action, dan warna toast akan berubah bergantung pada apa yang dipilih pengguna sebagai tema di perangkatnya.

**Gambar 1.** Pesan toast di layar pemuatan untuk Action.

Jika pengguna sering berinteraksi dengan Action Anda, pesan toast untuk sementara berhenti muncul di layar pemuatan. Jika pengguna tidak berinteraksi dengan Action Anda untuk beberapa waktu, pesan toast akan muncul kembali saat mereka meluncurkan Action.

Anda dapat mengaktifkan mode layar penuh di webhook atau di perintah statis di Actions Builder.

Untuk mengaktifkan mode layar penuh di webhook, ikuti langkah ini:

Tetapkan kolom enableFullScreen ke true dalam respons canvas pertama yang ditampilkan oleh webhook dalam sesi. Cuplikan berikut adalah contoh implementasi menggunakan library klien Node.js:

 const { conversation, Canvas } = require('@assistant/conversation');
 const functions = require('firebase-functions');

 const app = conversation();

 app.handle('invocation_fullscreen', conv => {
   conv.add(new Canvas(
     {
       url: 'https://example-url.com',
       enableFullScreen: true
     }));
 });

 exports.ActionsOnGoogleFulfillment = functions.https.onRequest(app);

Untuk mengaktifkan mode layar penuh pada perintah statis di Action Builder, ikuti langkah-langkah berikut:

Buka project Anda di Konsol Actions.
Klik Develop di menu navigasi dan buka perintah yang berisi respons canvas pertama.

Tetapkan enable_full_screen ke true, seperti yang ditunjukkan dalam cuplikan berikut:

 {
  "candidates": [
    {
      "canvas": {
        "url": "https://example-url.com",
        "enable_full_screen": true
      }
    }
  ]
}

`continueTtsDuringTouch`

Secara default, saat pengguna mengetuk layar saat menggunakan Action Canvas Interaktif, TTS akan berhenti diputar. Anda dapat mengaktifkan TTS untuk terus bermain saat pengguna menyentuh layar dengan continueTtsDuringTouch. Perilaku ini tidak dapat diaktifkan dan dinonaktifkan dalam sesi yang sama.

Anda dapat menerapkan perilaku ini di webhook atau di perintah statis di Action Builder.

Untuk mengaktifkan TTS agar dapat dilanjutkan setelah pengguna mengetuk layar di webhook, ikuti langkah ini:

Tetapkan kolom continueTtsDuringTouch ke true dalam respons canvas pertama yang ditampilkan oleh webhook dalam sesi. Cuplikan berikut adalah contoh implementasi menggunakan library klien Node.js:

const { conversation, Canvas } = require('@assisant/conversation');
const functions = require('firebase-functions');

const app = conversation();

app.handle('intent-name', conv => {
  conv.add(new Canvas(
    {
      url: 'https://example-url.com',
      continueTtsDuringTouch: true
    }));
});

exports.ActionsOnGoogleFulfillment = functions.https.onRequest(app);

Agar TTS dapat dilanjutkan setelah pengguna mengetuk layar pada perintah statis di Action Builder, ikuti langkah-langkah berikut:

Buka project Anda di Konsol Actions.
Klik Develop di menu navigasi dan buka perintah yang menyertakan respons canvas pertama.

Tetapkan continue_tts_during_touch ke true, seperti yang ditunjukkan dalam cuplikan berikut:

  {
   "candidates": [
     {
       "canvas": {
         "url": "https://example-url.com",
         "continue_tts_during_touch": true
       }
     }
   ]
 }