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

Web uygulaması, Etkileşimli Tuval kullanan bir işlemin kullanıcı arayüzüdür. Web uygulamanızı tasarlamak ve geliştirmek için mevcut web teknolojilerini (HTML, CSS, JavaScript ve WebAssembly gibi) kullanabilirsiniz. Çoğunlukla, Interactive Canvas, web içeriğini 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 özetlenen tasarım ilkelerini göz önünde bulundurun. Web uygulamanızı dağıtmak için Firebase barındırma'yı kullanmanızı öneririz.

Web uygulamanızın HTML ve JavaScript kodu şunları yapar:

Bu sayfada, web uygulamanızı geliştirmek için önerilen yöntemler, Conversational Action'ınız ile web uygulamanız arasında iletişimi etkinleştirme, genel kurallar ve kısıtlamalar ele alınmaktadır.

Kullanıcı arayüzünüzü oluşturmak için herhangi bir yöntemden yararlanabilirsiniz 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 sağlar ve sürekli diyaloğa dayalı kullanıcı deneyimini destekler. Etkileşimli Tuval, durum yönetimine yardımcı olan 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üneceğini tanımlar. Bu dosya aynı zamanda web uygulamanız ile Conversational Action'ınız arasında iletişim sağlayan Interactive 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>

Conversational Action ile web uygulaması arasında iletişim kurun

Web uygulamanızı ve Conversational Action'ı derleyip web uygulama dosyanızdaki Interactive Canvas kitaplığına yükledikten sonra web uygulamanız ile Conversational Action'ın 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, interactiveCanvas aracılığıyla callbacks tanımlamak ve yöntemleri çağırmak için gereken kodu içerir. Geri çağırma işlevleri web uygulamanızın Conversational Action'dan gelen bilgi veya isteklere yanıt vermesine olanak tanırken yöntemler, bilgileri veya istekleri Conversational Action'a göndermek için bir yol sağlar.

callbacks 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 bunların 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 sahne oluşturur. Aşağıda scene.js kaynağından 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 destekleme

Etkileşimli Tuval İşleminiz kullanıcılarınızın dokunmalarına ve ses girişlerine yanıt verebilir. Etkileşimli Tuval tasarım yönergeleri uyarınca, İşleminizi "ses odaklı" olacak şekilde geliştirmeniz gerekir. Bununla birlikte, bazı akıllı ekranlar dokunma etkileşimlerini desteklemektedir.

Dokunmayı desteklemek, konuşma yanıtlarını desteklemeye benzer; ancak istemci taraflı JavaScript'iniz kullanıcıdan sesli yanıt almak yerine dokunma etkileşimlerini arar ve web uygulamasındaki öğeleri değiştirmek için bunları kullanır.

Bunun Pixi.js kitaplığını kullanan örnekte 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 Actions konsolundaki simülasyon aracını kullanabilirsiniz. Bununla birlikte, üretim aşamasındaki kullanıcıların cihazlarındaki Etkileşimli Tuval web uygulamanızda oluşan hataları da görebilirsiniz. Bu hataları Google Cloud Platform günlüklerinizde görüntüleyebilirsiniz.

Google Cloud Platform günlüklerinizde bu hata mesajlarını görmek için şu adımları uygulayın:

  1. Actions Console'da Actions projenizi açın.
  2. En üstteki gezinme menüsünde Test et'i tıklayın.
  3. Google Cloud Platform'daki günlükleri 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üleyicide kronolojik sırada görünür.

Hata türleri

Google Cloud Platform günlüklerinde üç tür web uygulaması hatası görebilirsiniz:

  • ready 10 saniye içinde çağrılmadığında oluşan zaman aşımları
  • onUpdate() tarafından döndürülen söz 10 saniye içinde yerine getirilmediğinde oluşan zaman aşımları
  • 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 mevcut değildir. 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 başlıklarını yapılandırdığınızdan emin olun. Daha fazla bilgi için Kaynaklar arası kaynak paylaşımı bölümünü inceleyin.
  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ılmıyor
  • Ses veya video kaydı yok
  • Pop-up yok
  • 200 MB'lık bellek sınırının altında kal
  • İçerik oluştururken İşlem adı başlığını dikkate alın (ekranın üst kısmını kaplar)
  • Videolara hiçbir stil uygulanamaz
  • Aynı anda yalnızca bir medya öğesi kullanılabilir
  • Web SQL veritabanı yok
  • Web Speech API'sinin SpeechRecognition arayüzü için destek sunulmaz.
  • Koyu mod ayarı geçerli değil
  • Video oynatma, akıllı ekranlarda desteklenir. Desteklenen medya kapsayıcısı 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ığından ve kaynak null olarak ayarlandığından, 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 boş kaynaklardan gelen istekleri kabul etmesini sağlar.

Sonraki adımlar

Web uygulamanıza daha fazla özellik eklemek için İstemci veya sunucu tarafı istek karşılama ile derlemeye devam edin bölümüne bakın.