Web uygulamanızı yapılandırın

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:

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.

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:

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:

  1. Actions Console'da Actions projenizi açın.
  2. Üst gezinme menüsündeki Test et'i tıklayın.
  3. 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:

  1. 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.
  2. Aşağıdaki kod snippet'inde gösterildiği gibi, HTML dosyanızdaki içe aktarılan <script> etiketlerinize crossorigin="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.

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.