Web uygulaması, Etkileşimli Tuval kullanan bir İşlem'in kullanıcı arayüzüdür. Web uygulamanızı tasarlamak ve geliştirmek için mevcut web teknolojilerini (ör. HTML, CSS, JavaScript ve WebAssembly) kullanabilirsiniz. Etkileşimli WebCanı, çoğunlukla web içeriklerini tarayıcı gibi oluşturabilir ancak kullanıcı gizliliği ve güvenliği için uygulanan birkaç kısıtlama vardır. Kullanıcı arayüzünüzü tasarlamaya başlamadan önce Tasarım yönergelerinde açıklanan tasarım ilkelerini dikkate alın. Web uygulamanızı dağıtmak için Firebase barındırma kullanmanızı öneririz.
Web uygulamanızın HTML ve JavaScript'i aşağıdaki işlemleri gerçekleştirir:
- Etkileşimli Tuval JavaScript kitaplığını başlatın.
- Etkileşimli Canvas etkinliği geri çağırmalarını kaydedin.
- Duruma göre web uygulamanızı güncellemek için özel mantık sağlayın.
Bu sayfada, web uygulamanızı oluşturmak için önerilen yöntemler, Görüşme İşlemi ile web uygulamanız arasında iletişimin nasıl etkinleştirileceği ve genel kurallar ile kısıtlamalar açıklanmaktadır.
Önerilen kitaplıklar
Kullanıcı arayüzünüzü oluşturmak için herhangi bir yöntem kullanabilirsiniz ancak Google, aşağıdaki kitaplıkları kullanmanızı önerir:
- Greensock: Karmaşık animasyonlar oluşturmak için kullanılır.
- Pixi.js: WebGL'de 2D grafikler çizmek için.
- Three.js: WebGL'de 3D grafikler çizmek için.
- HTML5 Tuval çizimi: Basit çizimler için.
Mimari
Google, tek sayfalık uygulama mimarisi kullanmanızı önemle tavsiye eder. Bu yaklaşım, optimum performans sunmakta ve kesintisiz konuşma kullanıcı deneyimini desteklemektedir. Etkileşimli Tuval, Vue, Angular ve React gibi kullanıcı arabirimi çerçeveleriyle birlikte kullanılabilir.
HTML dosyası
HTML dosyası, kullanıcı arayüzünüzün nasıl göründüğünü tanımlar. Bu dosya, web uygulamanız ile Görüşme İşleminiz arasında iletişim sağlayan Etkileşimli Canvas API'yi de yükler.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Interactive 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/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/log.js"></script> <script type="module" src="js/main.js"></script> </body> </html>
Diyalog İşlemi ve web uygulaması arasında iletişim kurma
Web uygulamanızı ve Sohbet İşlemi'ni oluşturduktan ve web uygulama dosyanızdaki Etkileşimli Canvas kitaplığına yükledikten sonra, web uygulamanızın ve Konuşma İşleminin nasıl etkileşimde bulunduğunu tanımlamanız gerekir. Bunu yapmak için web uygulaması mantığınızı içeren dosyaları değiştirin.
action.js
Bu dosya, geri çağırmaları tanımlamak ve interactiveCanvas
aracılığıyla yöntemleri çağırma kodunu içerir. Geri çağırmalar, web uygulamanızın Görüşme İşlemi'nden gelen bilgilere veya isteklere yanıt vermesine olanak tanırken yöntemler, Görüşme İşlemine istek göndermek için bir yol sağlar.
Geri çağırmaları başlatmak ve kaydetmek için HTML dosyanıza interactiveCanvas.ready(callbacks);
ekleyin:
JavaScript
/** * This class is used as a wrapper for Google Assistant Canvas Action class * along with its callbacks. */ export class Action { /** * @param {Phaser.Scene} scene which serves as a container of all visual * and audio elements. */ constructor(scene) { this.canvas = window.interactiveCanvas; this.gameScene = scene; const that = this; this.intents = { GUESS: function(params) { that.gameScene.guess(params); }, DEFAULT: function() { // do nothing, when no command is found }, }; } /** * Register all callbacks used by the Interactive Canvas Action * executed during game creation time. */ setCallbacks() { const that = this; // Declare the Interactive Canvas action callbacks. const callbacks = { onUpdate(data) { const intent = data[0].google.intent; that.intents[intent ? intent.name.toUpperCase() : 'DEFAULT'](intent.params); }, }; // Called by the Interactive Canvas web app once web app has loaded to // register callbacks. this.canvas.ready(callbacks); } }
main.js
main.js
JavaScript modülü, action.js
ve scene.js
dosyalarını içe aktarır ve web uygulaması yüklendiğinde her birinin örneklerini oluşturur. Bu modül, Etkileşimli Tuval için geri çağırmaları da kaydeder.
JavaScript
import {Action} from './action.js'; import {Scene} from './scene.js'; window.addEventListener('load', () => { window.scene = new Scene(); // Set Google Assistant Canvas Action at scene level window.scene.action = new Action(scene); // Call setCallbacks to register Interactive Canvas window.scene.action.setCallbacks(); });
scene.js
scene.js
dosyası, web uygulamanız için sahneyi oluşturur. Aşağıda scene.js
tarafından yapılan bir alıntı verilmiştir:
JavaScript
const view = document.getElementById('view'); // initialize rendering and set correct sizing this.radio = window.devicePixelRatio; this.renderer = PIXI.autoDetectRenderer({ transparent: true, antialias: true, resolution: this.radio, width: view.clientWidth, height: view.clientHeight, }); this.element = this.renderer.view; this.element.style.width = `${this.renderer.width / this.radio}px`; this.element.style.height = `${(this.renderer.height / this.radio)}px`; 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; });
Dokunma etkileşimlerini destekleyin
Etkileşimli Tuval İşleminiz kullanıcılarınızın dokunma seslerinin yanı sıra ses girişlerini de yanıtlayabilir. Etkileşimli Kanvas tasarım yönergeleri uyarınca, İşleminizi "önce ses" öncelikli olacak şekilde geliştirmeniz gerekir. Bununla birlikte, bazı akıllı ekranlar dokunmatik etkileşimleri destekler.
Dokunmayı desteklemek, sohbet üzerinden yanıt vermeye benzer. Ancak kullanıcının vokal yanıtı yerine istemci taraflı JavaScript'iniz dokunma etkileşimlerini arar ve bunları web uygulamasındaki öğeleri değiştirmek için kullanır.
Pixi.js kitaplığını kullanan örnekte bunun bir örneğini görebilirsiniz:
JavaScript
… 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; });
Sorun giderme
Geliştirme sırasında Etkileşimli Tuval İşleminizi test etmek için İşlemler konsolundaki simülatörü kullanabilirsiniz. Bununla birlikte, üretimdeki kullanıcıların cihazlarında Etkileşimli Tuval web uygulamanızda bulunan hataları da görebilirsiniz. Bu hataları Google Cloud Platform günlüklerinizde görüntüleyebilirsiniz.
Bu hata mesajlarını Google Cloud Platform günlüklerinizde görmek için aşağıdaki adımları izleyin:
- Actions Console'da Actions projenizi açın.
- Üst gezinme menüsündeki Test et'i tıklayın.
- Günlükleri Google Cloud Platform'da görüntüle bağlantısını tıklayın.
Kullanıcılarınızın cihazlarındaki hatalar, günlük görüntüleyicisinde kronolojik sırayla görünür.
Hata türleri
Google Cloud Platform günlüklerinde görebileceğiniz üç tür web uygulaması hatası vardır:
ready
10 saniye içinde çağrılmadığında oluşan zaman aşımıonUpdate()
tarafından döndürülen söz 10 saniye içinde yerine getirilmediğinde gerçekleşen zaman aşımı- Web uygulamanızda yakalanmayan JavaScript çalışma zamanı hataları
JavaScript hatası ayrıntılarını görüntüleme
Web uygulamanızdaki JavaScript çalışma zamanı hatalarının ayrıntıları varsayılan olarak sunulmaz. JavaScript çalışma zamanı hatalarının ayrıntılarını görmek için şu adımları uygulayın:
- Web uygulaması dosyalarınızda uygun kaynaklar arası kaynak paylaşımı (CORS) HTTP yanıtı üstbilgilerini yapılandırdığınızdan emin olun. Daha fazla bilgi için Kaynaklar arası kaynak paylaşımı'na bakın.
- Aşağıdaki kod snippet'inde gösterildiği gibi, HTML dosyanızdaki içe aktarılan
<script>
etiketlerinizecrossorigin="anonymous"
ekleyin:
<script crossorigin="anonymous" src="<SRC>"></script>
Kurallar ve kısıtlamalar
Web uygulamanızı geliştirirken aşağıdaki yönergeleri ve kısıtlamaları dikkate alın:
- Çerez yok
- Yerel depolama alanı yok
- Coğrafi konum yok
- Kamera kullanımı yok
- Ses veya video kaydı yok
- Pop-up yok
- 200 MB'lık bellek sınırının altında kalma
- İçerik oluştururken İşlem adı başlığını dikkate alın (ekranın üst kısmında yer alır)
- Videolara stil uygulanamaz
- Tek seferde yalnızca bir medya öğesi kullanılabilir
- Web SQL veritabanı yok
- Web Speech API'nin
SpeechRecognition
arayüzü desteklenmiyor. - Koyu mod ayarı geçerli değil
- Video oynatma, akıllı ekranlarda desteklenir. Desteklenen medya kapsayıcı biçimleri ve codec'ler hakkında daha fazla bilgi için Google Nest Hub codec'leri bölümüne bakın.
Merkezler arası kaynak paylaşımı
Etkileşimli Tuval web uygulamaları bir iframe'de barındırıldığı ve kaynak boş olarak ayarlandığı için web sunucularınız ve depolama kaynaklarınız için kaynaklar arası kaynak paylaşımını (CORS) etkinleştirmeniz gerekir. Bu işlem, öğelerinizin null kaynaklarından gelen istekleri kabul etmesine olanak tanır.
- Medya dosyalarınız ve resimleriniz Firebase'de barındırılıyorsa CORS'yi yapılandırmak için Özel alan dinamik bağlantıları oluşturma bölümüne bakın.
- Medya ve görüntüleriniz Cloud Storage'da yer alıyorsa CORS'yi yapılandırmak için Kaynaklar arası kaynak paylaşımını (CORS) yapılandırma bölümünü inceleyin.
Sonraki adımlar
Web uygulamanıza daha fazla özellik eklemek için İstemci veya sunucu tarafında istek karşılama ile derleme yapmaya devam edin bölümüne bakın.