Genel Bakış (Dialogflow)

Etkileşimli Tuval, geliştiricilerin etkileşimli Action'lara görsel, sürükleyici deneyimler eklemesine olanak tanıyan, Google Asistan üzerine inşa edilmiş bir çerçevedir. Bu görsel deneyim, Asistan'ın görüşmede kullanıcıya yanıt olarak gönderdiği etkileşimli bir web uygulamasıdır. Asistan görüşmelerinde satır içi olarak kullanılan geleneksel zengin yanıtların aksine Etkileşimli Tuval web uygulaması, tam ekran web görünümü olarak oluşturulur.

İşleminizde aşağıdakilerden birini yapmak istiyorsanız Etkileşimli Tuval'i kullanmanız gerekir:

  • Tam ekran görseller oluşturma
  • Özel animasyonlar ve geçişler oluşturma
  • Veri görselleştirme işlemi yapın
  • Özel düzenler ve GUI'ler oluşturun
Şekil 1. Etkileşimli Tuval kullanılarak oluşturulmuş etkileşimli bir oyun.

Desteklenen cihaz sayısı

Etkileşimli Tuval şu anda aşağıdaki cihazlarda kullanılabilir:

  • Akıllı Ekranlar
  • Google Nest Hub'lar

  • Android mobil cihazlar

İşleyiş şekli

Etkileşimli Tuval kullanan bir Action, normal bir sohbete benzer bir Action'a benzer. Kullanıcı, hedefini gerçekleştirmek için Asistan'la karşılıklı iletişim kurar, ancak görüşmede yanıtları satır içinde döndürmek yerine, kullanıcıya bir tam ekran web uygulaması açan bir yanıt gönderilir. Kullanıcı, sohbet sona erene kadar sesli veya dokunarak web uygulamasıyla etkileşimde bulunmaya devam eder.

Bir işlemin Etkileşimli Tuval kullanan birkaç bileşeni vardır:

  • Konuşma İşlemi: Kullanıcı isteklerini gerçekleştirmek için bir konuşma arayüzü kullanan işlem. Etkileşimli Canvas Actions, yanıtları zengin kartlar veya basit metin ve sesli yanıtlar yerine oluşturmak için kullanır. Konuşma İşlemleri aşağıdaki bileşenleri kullanır:
    • Dialogflow aracısı: Dialogflow'da bulunan ve Action kullanıcılarınızla sohbet etmek için özelleştirdiğiniz bir proje.
    • Gerçekleştirme: Dialogflow aracınız için konuşma mantığını uygulayan ve web uygulamanızla iletişim kuran bir webhook olarak dağıtılan kod.
  • Web uygulaması: İşleminizin kullanıcılara görüşme sırasında yanıt olarak gönderdiği, özelleştirilmiş görsellere sahip bir kullanıcı arabirimi web uygulaması. Web uygulamasını HTML, JavaScript ve CSS gibi web standartlarıyla oluşturursunuz.

Harekete geçirici mesaj ve web uygulaması aşağıdakileri kullanarak birbirleriyle iletişim kurar:

  • Interactive Canvas API: Web uygulaması ile konuşma Action'ınız arasında iletişim sağlamak için web uygulamasına dahil ettiğiniz bir JavaScript API'si.
  • HtmlResponse: Web uygulamasının URL'sini ve iletilecek verileri içeren bir yanıt. HtmlResponse döndürmek için Node.js veya Java istemci kitaplıklarını kullanabilirsiniz.

Etkileşimli Tuval'in işleyiş şeklini göstermek için Havalı Renkler adlı ve cihazın ekran rengini, kullanıcının belirttiği bir renge dönüştüren varsayımsal bir İşlem düşünün. Kullanıcı İşlemi çağırdıktan sonra, akış aşağıdaki gibi görünür:

  1. Kullanıcı, Asistan cihazına Turn the screen blue diyor.
  2. Actions on Google platformu, kullanıcının isteğini bir niyetle eşleşecek şekilde Dialogflow'a yönlendirir.
  3. Eşleşen intent'in karşılanması çalışır ve cihaza bir HtmlResponse gönderilir. Cihaz, henüz yüklenmemişse web uygulamasını yüklemek için URL'yi kullanır.
  4. Web uygulaması yüklendiğinde geri çağırmaları interactiveCanvas API ile kaydeder. Daha sonra data nesnesinin değeri, web uygulamasının kayıtlı onUpdate geri çağırmasına iletilir. Örneğimiz, istek karşılamaya HtmlResponse değerini blue değerine sahip bir değişken içeren HtmlResponse ile gönderir.data
  5. Web uygulamanızın özel mantığı, HtmlResponse değerinin data değerini okur ve tanımlanan değişiklikleri yapar. Örneğimizde bu, ekranı maviye çevirir.
  6. interactiveCanvas, geri arama güncellemesini cihaza gönderir.

Sonraki adımlar

Etkileşimli Tuval İşleminin nasıl oluşturulacağını öğrenmek için Derlemeye Genel Bakış sayfasını inceleyin.

Etkileşimli Tuval İşleminin kodunu görmek için örneği inceleyin.