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

Web uygulaması, Etkileşimli Tuval kullanan bir işlemin kullanıcı arayüzüdür. Mevcut web teknolojilerini (ör. HTML, CSS, JavaScript ve WebAssembly) web uygulamanızı tasarlamak ve geliştirmek için. Çoğunlukla, Etkileşimli Tuval, web içeriğini tarayıcı gibi oluşturabilir, ancak birkaç kısıtlama vardır Kullanıcı gizliliği ve güvenliği için zorunlu kılınır. Kullanıcı arayüzünüzü tasarlamaya başlamadan önce Tasarım yönergelerinde özetlenen tasarım ilkelerini göz önünde bulundurun. Firebase barındırma kullanmanızı öneririz web uygulamanızı dağıtın.

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

Bu sayfada, web uygulamanızı geliştirmeniz için önerilen yöntemler, Conversational Action ile web uygulamanız arasındaki iletişimi ve genel yönergeler emin olmanız gerekir.

Kullanıcı arayüzünü geliştirmek için istediğiniz yöntemi kullanabilirsiniz ancak Google, şu kitaplıklar:

Mimari

Google, tek sayfalık uygulama mimarisi kullanmanızı önemle tavsiye eder. Bu yaklaşım, optimum performansa olanak tanır ve sürekli konuşmayı destekler. en iyi uygulamaları paylaşacağız. Etkileşimli Tuval, kullanıcı arabirimi ile birlikte kullanılabilir Vue, Angular ve React gibi çerçeveler yardımcı olan araçlar sunar.

HTML dosyası

HTML dosyası, kullanıcı arayüzünüzün nasıl göründüğünü tanımlar. Bu dosya ayrıca, Web uygulamanız arasında iletişim kurulmasını sağlayan Canvas API'si ve Konuşma İşleminiz.

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 ve web uygulaması arasında iletişim kurma

Web uygulamanızı ve Conversational Action'ı derleyip Etkileşimli Tuval kitaplığını web uygulaması dosyanıza eklemek için, web uygulamanızın ve Conversational Action etkileşiminin. Bunu yapmak için web uygulamanızı içeren dosyaları değiştirin mantığıyla başlayalım.

action.js

Bu dosya, geri çağırmaları tanımlamak ve yöntemlerden interactiveCanvas tarihine kadar geçerli olur. Geri çağırma işlevleri, web Uygulamada Sohbet İşlemi'nden gelen bilgilere veya isteklere yanıt verirken, Conversational Action'a bilgi veya istek göndermenin bir yolunu sağlamalıdır.

Başlatmak ve başlatmak için interactiveCanvas.ready(callbacks); öğesini HTML dosyanıza ekleyin geri çağırma kaydedin:

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ı ve web uygulaması yüklendiğinde her birinin örneklerini oluşturur. Bu modülde ayrıca Etkileşimli Tuval için geri çağırmalar 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ın sahnesini oluşturur. Bu, scene.js kaynağından alıntı:

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ınızın dokunuşuna yanıt verebilir ve her zaman fayda sağlar. Etkileşimli Tuval tasarım yönergelerine göre, İşleminizi "ses öncelikli" olacak şekilde geliştirmelisiniz. Bununla birlikte, destek dokunma etkileşimlerini görüntüler.

Destekleyici dokunma, diyaloglara verilen yanıtları desteklemeye benzer; ancak, kullanıcının sesli yanıtı yerine istemci taraflı JavaScript'iniz kullanır ve bunları web uygulamasındaki öğeleri değiştirmek için kullanır.

Bu örnekte, Pixi.js kitaplığı:

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

Simülatör olarak Eylemler konsolundaki simülatörü kullanarak etkileşimli Canvas İşlemi sırasında gerçekleştirdiğiniz işlemler sırasında, Kullanıcıların üzerinde etkileşimli Tuval web uygulaması üretim aşamasındaki cihazlar. Bunları görüntüleyebilirsiniz hataları gösterir.

Bu hata mesajlarını Google Cloud hesabınızda görmek için: Platform günlükleri için şu adımları uygulayın:

  1. Actions Console'da Actions projenizi açın.
  2. Üst gezinme menüsünde Test et'i tıklayın.
  3. Google Cloud Platform'da günlükleri görüntüle bağlantısını tıklayın.
ziyaret edin.

Kullanıcılarınızın hataları cihazlar kronolojik sırada 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 meydana gelen zaman aşımları
  • onUpdate() tarafından döndürülen söz yerine getirilmediğinde oluşan zaman aşımları 10 saniye içinde
  • Web uygulamanızda yakalanmayan JavaScript çalışma zamanı hataları
ziyaret edin.

JavaScript hatası ayrıntılarını göster

Web uygulamanızdaki JavaScript çalışma zamanı hatalarının ayrıntıları varsayılan olarak kullanılabilir. JavaScript çalışma zamanı hatalarının ayrıntılarını görmek için aşağıdakini şu adımları uygulayın:

  1. Kaynaklar arası uygun kaynak paylaşımını yapılandırdığınızdan emin olun (CORS) Web uygulaması dosyalarınızdaki HTTP yanıtı üstbilgileri. Daha fazla bilgi için Kaynaklar arası kaynak paylaşımı adlı makaleyi inceleyin.
  2. crossorigin="anonymous" öğesini<script> HTML dosyası; aşağıdaki kod snippet'inde gösterildiği gibi:
<script crossorigin="anonymous" src="<SRC>"></script>

Kurallar ve kısıtlamalar

Uygulama geliştirirken aşağıdaki yönergeleri ve kısıtlamaları dikkate alın web uygulamanız:

  • Çerez yok
  • Yerel depolama alanı yok
  • Coğrafi konum yok
  • Kamera kullanımı yok
  • Ses veya video kaydı yok
  • Pop-up yok
  • 200 MB bellek sınırının altında kalın
  • İçerik oluştururken İşlem adı başlığını dikkate alın ( ekranın üst kısmında)
  • Videolara stil uygulanamaz
  • Aynı anda yalnızca bir medya öğesi kullanılabilir
  • Web SQL veritabanı yok
  • Web Speech API'nin SpeechRecognition arayüzü desteklenmez.
  • Koyu mod ayarı geçerli değil
  • Video oynatma özelliği akıllı ekranlarda desteklenir. Daha fazla bilgi için desteklenen medya kapsayıcı biçimleri ve codec'leri için Google Nest Hub codec'lerine bakın.

Kaynaklar arası kaynak paylaşımı

Etkileşimli Tuval web uygulamaları iFrame içinde barındırıldığı ve kaynak ayarlandığı için null değerine ayarlamak için kaynaklar arası kaynak paylaşımını (CORS) etkinleştirmeniz gerekir. depolama kaynaklarınız için de geçerlidir. Bu süreç, öğelerinizin boş kaynaklardan gelen istekleri kabul et.

Sonraki adımlar

Web uygulamanıza daha fazla özellik eklemek için bkz. İstemciyle veya sunucu tarafı yerine getirmesi.