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.
Library yang direkomendasikan
Meskipun Anda dapat menggunakan metode apa pun untuk mem-build UI, Google merekomendasikan penggunaan library berikut:
- Greensock: Untuk membuat animasi yang rumit.
- Pixi.js: Untuk menggambar grafis 2D di WebGL.
- Three.js: Untuk menggambar grafik 3D di WebGL.
- Gambar Canvas HTML5: Untuk gambar sederhana.
- Elemen DOM: Untuk konten statis.
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.
- Jika media dan gambar Anda dihosting dengan Firebase, lihat Membuat link dinamis domain kustom untuk mengonfigurasi CORS.
- Jika media dan gambar Anda berada di Cloud Storage, lihat Mengonfigurasi cross-origin resource sharing (CORS) untuk mengonfigurasi CORS.