Web uygulamanızı derleme (Dialogflow)

Web uygulaması, Etkileşimli Tuval kullanan bir Action'ın kullanıcı arayüzüdür. Tekliflerinizi otomatikleştirmek ve optimize etmek için mevcut web teknolojilerini (HTML, CSS ve JavaScript) tasarlayıp geliştirmek için web uygulamanız. Etkileşimli Tuval, çoğunlukla şuna benzer web içerikleri oluşturabilir: kullanabilirsiniz, ancak Google Analytics 4'te kullanıcı gizliliği ve güvenliği. Kullanıcı arayüzünüzü tasarlamaya başlamadan önce, Design guidelines da ana hatlarıyla ortaya koyulan tasarım ilkeleri bölümüne ekleyin.

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

  • Etkileşimli Tuval etkinliği geri çağırmalarını kaydedin.
  • Etkileşimli Tuval JavaScript kitaplığını başlatın.
  • Web uygulamanızı duruma göre güncellemek için özel mantık sağlayın.

Bu sayfada, web uygulamanızı geliştirmeniz için önerilen yöntemler, arasındaki iletişimi gözlemlemek; genel kurallar ve kısıtlamalar.

Kullanıcı arayüzünüzü oluşturmak için dilediğiniz yöntemi kullanabilirsiniz ancak Google, aşağıdakileri kullanmanızı önerir. 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 dönüşümlerde yapay zekaya dayalı kullanıcı deneyimi sunar. Etkileşimli Tuval, tablodaki kullanıcı arabirimi çerçevelerini (ör. Vue) Angular ve React, 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, İletişime olanak tanıyan Canvas JavaScript kitaplığı web uygulamanızla sohbet İşleminiz arasında.

<!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>

Sipariş karşılama ve web uygulaması arasında iletişim kurma

Web uygulamanızı ve karşılamanızı derleyip Etkileşimli Canvas kitaplığı'ndaki web uygulaması dosyanızda, web uygulamanızın ve sipariş karşılamanın nasıl etkileşimde bulunduğunu tanımlamanız gerekir. Alıcı: bunu yapmak için web uygulaması mantığınızı içeren dosyaları değiştirin.

action.js

Bu dosya, geri aramalar ve yöntemleri çağırma interactiveCanvas tarihine kadar. Geri çağırma işlevleri, web uygulamanızın görüşmedeki işlemden gelen bilgi veya isteklere, Görüşme İşlemine bilgi veya talep göndermenin bir yolunu sağlamalısınız.

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

//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

Bu dosya, web uygulamanızın sahnesini oluşturur. Bu örnekte, sendTextQuery() ile döndürülen vaatlerin başarılı ve başarısız olduğu durumlar. İlgili içeriği oluşturmak için kullanılan main.js bir alıntıdır:

// 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;
});

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önergeleri, İşleminizi "ses öncelikli" olacak şekilde geliştirmelisiniz. Bununla birlikte, bazı akıllı Ekranlar dokunma etkileşimlerini destekler.

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ığı:

...
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;
});
...

Bu durumda, spin değişkeninin değeri update geri çağırması olarak interactiveCanvas API. İstek karşılamanın mantığı var spin değerine göre bir niyeti tetikleyenler.

...
app.intent('pause', (conv) => {
  conv.ask(`Ok, I paused spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: false,
    },
  }));
});
...

Daha fazla özellik ekleme

Temel bilgileri öğrendiğinize göre artık işleminizi geliştirebilir ve özelleştirebilirsiniz API'lerin yerini alır. Bu bölümde, söz konusu API'lerin nasıl uygulanacağı açıklanmaktadır. etkileşimli Tuval İşleminizde kullanabilirsiniz.

sendTextQuery()

sendTextQuery() yöntemi, metin sorgularını sohbet işlemine gönderir programlı olarak çağırmaktır. Bu örnekte şunlar için sendTextQuery() kullanılmaktadır: Kullanıcı bir düğmeyi tıkladığında üçgen dönen oyunu yeniden başlatma. Kullanıcı "Oyunu yeniden başlat"ı tıkladığında düğmesi, sendTextQuery(), Restart game yöntemini çağırır ve vaat döndürür. Amaç şuysa bu vaat SUCCESS ile sonuçlanır tetiklenmiyorsa BLOCKED. Aşağıdaki snippet, amacı tetikler ve verilen vaatlerin başarılı ve başarısız olduğu durumları ele alır:

//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}`);
      }
    });
...

Vaat SUCCESS ile sonuçlanırsa Restart game amacı bir HtmlResponse gönderir ekleyin:

//index.js
...
app.intent('restart game', (conv) => {
  conv.ask(new HtmlResponse({
    data: {
      command: 'RESTART_GAME',
    },
...

Bu HtmlResponse, kodu yürüten onUpdate() geri çağırmasını tetikler aşağıdaki RESTART_GAME kod snippet'inde:

//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()

OnTtsMark() geri çağırması,<mark> SSML yanıtınızı kullanıcıya gönderin. Aşağıdaki Kardan Adam örneğinden yapılan alıntılarda, OnTtsMark(), web uygulamasının animasyonunu ilgili TTS ile senkronize eder çıktı. İşlem, kullanıcıya Maalesef kaybettiniz dediğinde web uygulaması şunları söyler: doğru kelimeyi yazıp harfleri kullanıcıya gösterir.

Game Over Reveal Word adlı amaç, kaybeden bir kullanıcı olarak görünür:

//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());
});
...

Daha sonra aşağıdaki kod snippet'i OnTtsMark() geri çağırmasını kaydeder ve adı kontrol eder işaretini kaldırır ve web uygulamasını güncelleyen revealCorrectWord() işlevini yürütür:

//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();
      }
    },
...

Kısıtlamalar

Web uygulamanızı geliştirirken aşağıdaki kısıtlamaları dikkate alın:

  • Çerez yok
  • Yerel depolama alanı yok
  • Coğrafi konum yok
  • Kamera kullanımı yok
  • Pop-up yok
  • 200 MB bellek sınırının altında kalın
  • 3P Başlık, ekranın üst kısmını kaplar
  • Videolara stil uygulanamaz
  • Aynı anda yalnızca bir medya öğesi kullanılabilir
  • HLS videosu yok
  • Web SQL veritabanı yok
  • SpeechRecognition Web Speech API.
  • Ses veya video kaydı yok
  • Koyu mod ayarı geçerli değil
ziyaret edin.

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, öğelerinizin şunları kabul etmesini sağlar: boş kaynaklardan gelen isteklerdir.