Dialogflow'da keşfet
Yanıt örneğimizi Dialogflow'a aktarmak için Devam'ı tıklayın. Ardından örneği dağıtmak ve test etmek için aşağıdaki adımları uygulayın:
- Bir temsilci adı girin ve örnek için yeni bir Dialogflow aracısı oluşturun.
- Temsilci içe aktarma işlemini tamamladıktan sonra Temsilciye git'i tıklayın.
- Ana gezinme menüsünden Karşılama'ya gidin.
- Satır İçi Düzenleyici'yi etkinleştirin ve ardından Dağıt'ı tıklayın. Düzenleyici, örnek kodu içerir.
- Ana gezinme menüsünden Entegrasyonlar'a gidin ve Google Asistan'ı tıklayın.
- Görüntülenen kalıcı pencerede, Değişiklikleri otomatik önizleme'yi etkinleştirin ve İşlem simülatörünü açmak için Test et'i tıklayın.
- Örneği test etmek için simülasyon aracında
Talk to my test app
ifadesini girin.
İşleminizle kullanıcı etkileşimlerini iyileştirmek için görsel öğeler görüntülemek istiyorsanız zengin yanıt kullanın. Bu görsel öğeler bir iletişimin nasıl devam edileceğine dair ipuçları sağlayabilir.
Zengin yanıtlar, yalnızca ekran veya sesli ve ekran deneyimlerinde görünebilir. Aşağıdaki bileşenleri içerebilirler:
- Bir veya iki basit yanıt (sohbet balonları).
- İsteğe bağlı bir temel kart.
- İsteğe bağlı öneri çipleri.
- İsteğe bağlı bir bağlantı çıkışı çipi.
Bu görsel öğeleri İşleminize nasıl ekleyeceğinizi öğrenmek için görüşme tasarımı yönergelerimizi de inceleyebilirsiniz.
Özellikler
Zengin yanıtlar, aşağıdaki gereksinimlere ve yapılandırabileceğiniz isteğe bağlı özelliklere sahiptir:
actions.capability.SCREEN_OUTPUT
özelliğine sahip yüzeylerde desteklenir.- Zengin yanıttaki ilk öğe basit bir yanıt olmalıdır.
- En fazla iki basit yanıt.
- En fazla bir temel kart veya
StructuredResponse
. - En fazla 8 öneri çipi.
- Öneri çiplerine
FinalResponse
içinde izin verilmez - Akıllı ekranlardan web'e bağlantı oluşturma şu anda desteklenmiyor.
Aşağıdaki bölümlerde, çeşitli zengin yanıt türlerinin nasıl oluşturulacağı gösterilmektedir.
Temel kart
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/basic-card.png?authuser=7&hl=tr)
Temel kart, aşağıdakileri içerebilecek bilgileri gösterir:
- Resim
- Başlık
- Alt başlık
- Metin gövdesi
- Bağlan Düğmesi
- Sınır
Temel kartları genellikle görüntüleme amacıyla kullanmak. Kısa ve öz olacak şekilde, kullanıcılara önemli (veya özet) bilgiler sunmak ve seçerseniz (bir web bağlantısı kullanarak) kullanıcıların daha fazla bilgi edinmesini sağlamak için tasarlanmıştır.
Çoğu durumda, sohbeti devam ettirmek veya özetlemek için kartların altına öneri çipleri eklemeniz gerekir.
Kartta gösterilen bilgileri ne pahasına olursa olsun, sohbet balonunda tekrar etmekten kaçının.
Özellikler
Temel kart yanıt türü, aşağıdaki gereksinimlere ve yapılandırabileceğiniz isteğe bağlı özelliklere sahiptir:
actions.capability.SCREEN_OUTPUT
özelliğine sahip yüzeylerde desteklenir.- Biçimlendirilmiş metin (resim yoksa gereklidir)
- Varsayılan olarak düz metin.
- Bağlantı içermemelidir.
- Resimle 10 satır, resim olmadan en fazla 15 satır. Bu, yaklaşık 500 (resimli) veya 750 (resimsiz) karakterdir. Daha küçük ekranlı telefonlar da metinleri büyük ekranlı telefonlardan önce kısaltır. Metin çok fazla satır içeriyorsa son kelime sonunda üç noktayla kesilir.
- Sınırlı bir Markdown alt kümesi desteklenir:
- Çift boşluk içeren yeni satır ve ardından \n
**bold**
*italics*
- Resim (biçimlendirilmiş metin yoksa gereklidir)
- Tüm resimler 192 dp yüksekliğinde olmaya zorlandı.
- Resmin en boy oranı ekrandan farklıysa yatay veya dikey kenarlarında gri çubuklarla ortalanır.
- Resim kaynağı bir URL.
- Hareketli GIF'lere izin verilir.
İsteğe bağlı
- Başlık
- Düz metin.
- Yazı tipi ve boyutu sabitlendi.
- En fazla bir satır; fazladan karakterler kısaltılır.
- Başlık belirtilmezse kart yüksekliği daraltılır.
- Alt başlık
- Düz metin.
- Yazı tipi ve yazı tipi boyutu düzeltildi.
- En fazla bir satır; fazladan karakterler kısaltılır.
- Alt başlık belirtilmezse kart yüksekliği daraltılır.
- Bağlantı düğmesi
- Bağlantı başlığı zorunludur
- En fazla bir bağlantı
- Geliştiricinin alanı dışındaki sitelere yönlendiren bağlantılara izin verilir.
- Bağlantı metni yanıltıcı olamaz. Bu bilgi, onay sürecinde kontrol edilir.
- Temel kart, bağlantı olmadan etkileşim özelliklerine sahip değildir. Bağlantıya dokunulduğunda kullanıcı bağlantıya yönlendirilir ancak kartın ana gövdesi devre dışı kalır.
- Kenarlık
- Kart ile resim kapsayıcısı arasındaki kenarlık, temel kartınızın sunumunu özelleştirmek için ayarlanabilir.
- JSON dizesi özelliği ayarlanarak yapılandırılır
imageDisplayOptions
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/basic-card.png?authuser=7&hl=tr)
Örnek kod
Node.js
app.intent('Basic Card', (conv) => { if (!conv.screen) { conv.ask('Sorry, try this on a screen device or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask(`Here's an example of a basic card.`); conv.ask(new BasicCard({ text: `This is a basic card. Text in a basic card can include "quotes" and most other unicode characters including emojis. Basic cards also support some markdown formatting like *emphasis* or _italics_, **strong** or __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other things like line \nbreaks`, // Note the two spaces before '\n' required for // a line break to be rendered in the card. subtitle: 'This is a subtitle', title: 'Title: this is a title', buttons: new Button({ title: 'This is a button', url: 'https://assistant.google.com/', }), image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Image alternate text', }), display: 'CROPPED', })); conv.ask('Which response would you like to see next?'); });
Java
@ForIntent("Basic Card") public ActionResponse basicCard(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } // Prepare formatted text for card String text = "This is a basic card. Text in a basic card can include \"quotes\" and\n" + " most other unicode characters including emoji \uD83D\uDCF1. Basic cards also support\n" + " some markdown formatting like *emphasis* or _italics_, **strong** or\n" + " __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n" + " things like line \\nbreaks"; // Note the two spaces before '\n' required for // a line break to be rendered in the card. responseBuilder .add("Here's an example of a basic card.") .add( new BasicCard() .setTitle("Title: this is a title") .setSubtitle("This is a subtitle") .setFormattedText(text) .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Image alternate text")) .setImageDisplayOptions("CROPPED") .setButtons( new ArrayList<Button>( Arrays.asList( new Button() .setTitle("This is a Button") .setOpenUrlAction( new OpenUrlAction().setUrl("https://assistant.google.com")))))) .add("Which response would you like to see next?"); return responseBuilder.build(); }
Node.js
if (!conv.screen) { conv.ask('Sorry, try this on a screen device or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask(`Here's an example of a basic card.`); conv.ask(new BasicCard({ text: `This is a basic card. Text in a basic card can include "quotes" and most other unicode characters including emojis. Basic cards also support some markdown formatting like *emphasis* or _italics_, **strong** or __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other things like line \nbreaks`, // Note the two spaces before '\n' required for // a line break to be rendered in the card. subtitle: 'This is a subtitle', title: 'Title: this is a title', buttons: new Button({ title: 'This is a button', url: 'https://assistant.google.com/', }), image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Image alternate text', }), display: 'CROPPED', })); conv.ask('Which response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } // Prepare formatted text for card String text = "This is a basic card. Text in a basic card can include \"quotes\" and\n" + " most other unicode characters including emoji \uD83D\uDCF1. Basic cards also support\n" + " some markdown formatting like *emphasis* or _italics_, **strong** or\n" + " __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n" + " things like line \\nbreaks"; // Note the two spaces before '\n' required for // a line break to be rendered in the card. responseBuilder .add("Here's an example of a basic card.") .add( new BasicCard() .setTitle("Title: this is a title") .setSubtitle("This is a subtitle") .setFormattedText(text) .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Image alternate text")) .setImageDisplayOptions("CROPPED") .setButtons( new ArrayList<Button>( Arrays.asList( new Button() .setTitle("This is a Button") .setOpenUrlAction( new OpenUrlAction().setUrl("https://assistant.google.com")))))) .add("Which response would you like to see next?"); return responseBuilder.build();
JSON
Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.
{ "payload": { "google": { "expectUserResponse": true, "richResponse": { "items": [ { "simpleResponse": { "textToSpeech": "Here's an example of a basic card." } }, { "basicCard": { "title": "Title: this is a title", "subtitle": "This is a subtitle", "formattedText": "This is a basic card. Text in a basic card can include \"quotes\" and\n most other unicode characters including emojis. Basic cards also support\n some markdown formatting like *emphasis* or _italics_, **strong** or\n __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n things like line \nbreaks", "image": { "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png", "accessibilityText": "Image alternate text" }, "buttons": [ { "title": "This is a button", "openUrlAction": { "url": "https://assistant.google.com/" } } ], "imageDisplayOptions": "CROPPED" } }, { "simpleResponse": { "textToSpeech": "Which response would you like to see next?" } } ] } } } }
JSON
Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.
{ "expectUserResponse": true, "expectedInputs": [ { "possibleIntents": [ { "intent": "actions.intent.TEXT" } ], "inputPrompt": { "richInitialPrompt": { "items": [ { "simpleResponse": { "textToSpeech": "Here's an example of a basic card." } }, { "basicCard": { "title": "Title: this is a title", "subtitle": "This is a subtitle", "formattedText": "This is a basic card. Text in a basic card can include \"quotes\" and\n most other unicode characters including emojis. Basic cards also support\n some markdown formatting like *emphasis* or _italics_, **strong** or\n __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n things like line \nbreaks", "image": { "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png", "accessibilityText": "Image alternate text" }, "buttons": [ { "title": "This is a button", "openUrlAction": { "url": "https://assistant.google.com/" } } ], "imageDisplayOptions": "CROPPED" } }, { "simpleResponse": { "textToSpeech": "Which response would you like to see next?" } } ] } } } ] }
Banda göz atma
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/browse-carousel.png?authuser=7&hl=tr)
Göz atma bandı, kullanıcıların dikey olarak kaydırmalarına ve koleksiyondaki bir parçayı seçmelerine olanak tanıyan zengin bir yanıttır. Tarama bantları, seçilen parçanın bir web tarayıcısında (veya tüm bölümler AMP özellikliyse bir AMP tarayıcısında) açılarak web içeriği için özel olarak tasarlanmıştır. Göz atma bandı, daha sonra göz atmak için kullanıcının Asistan yüzeyinde de kalır.
Özellikler
Göz atma bandı yanıt türü, yapılandırabileceğiniz aşağıdaki gereksinimlere ve isteğe bağlı özelliklere sahiptir:
- Hem
actions.capability.SCREEN_OUTPUT
hem deactions.capability.WEB_BROWSER
özelliklerine sahip yüzeylerde desteklenir. Bu yanıt türü, şu anda akıllı ekranlarda kullanılamamaktadır. - Banda göz atma
- En fazla on karo.
- En az iki karo.
- Banttaki karoların tümü web içeriğine bağlantı vermelidir (AMP içeriği önerilir).
- Kullanıcının bir AMP görüntüleyiciye yönlendirilmesi için AMP içerik karolarındaki
urlHintType
, "AMP_CONTENT" olarak ayarlanmalıdır.
- Kullanıcının bir AMP görüntüleyiciye yönlendirilmesi için AMP içerik karolarındaki
- Bant karolara göz atma
- Karo tutarlılığı (gerekli):
- Göz atma bandındaki tüm karolar aynı bileşenlere sahip olmalıdır. Örneğin, bir karoda resim alanı varsa banttaki geri kalan karoların da resim alanları olmalıdır.
- Tarama bandındaki tüm karolar AMP özellikli içeriğe bağlantı veriyorsa kullanıcı, ek işlevleri olan bir AMP tarayıcısına yönlendirilir. Herhangi bir karo AMP olmayan içeriğe bağlantı veriyorsa tüm kutular kullanıcıları bir web tarayıcısına yönlendirir.
- Resim (isteğe bağlı)
- Resmin 128 dp yüksekliği x 232 dp genişliğinde olması zorunlu kılındı.
- Resmin en boy oranı resim sınırlayıcı kutuyla eşleşmiyorsa resim her iki tarafta çubuklarla ortalanır. Akıllı telefonlarda, resim köşeleri yuvarlatılmış bir karenin merkezindedir.
- Resim bağlantısı bozuksa bunun yerine yer tutucu resim kullanılır.
- Bir resimde alternatif metin kullanılması gerekiyor.
- Başlık (zorunlu)
- Temel metin kartıyla aynı biçimlendirme seçenekleri.
- Başlıklar benzersiz olmalıdır (ses seçimini desteklemek için).
- Maksimum iki satırlık metin.
- Yazı tipi boyutu 16 sp.
- Açıklama (isteğe bağlı)
- Temel metin kartıyla aynı biçimlendirme seçenekleri.
- En fazla dört satır metin.
- Üç nokta (...) ile kısaltılır
- Yazı tipi boyutu 14 sp, gri renk.
- Altbilgi (isteğe bağlı)
- Yazı tipi ve yazı tipi boyutu düzeltildi.
- En fazla bir satır metin.
- Üç nokta (...) ile kısaltılır
- En alta sabitlendiğinden, daha az gövde metni satırı içeren karolarda alt metnin üzerinde beyaz alan olabilir.
- Yazı tipi boyutu 14 sp, gri renk.
- Karo tutarlılığı (gerekli):
- Etkileşim
- Kullanıcı, ekranı dikey olarak kaydırarak öğeleri görüntüleyebilir.
- Karta dokunma: Bir öğeye dokunulduğunda, kullanıcı bir tarayıcıya yönlendirilir ve bağlı sayfa görüntülenir.
- Ses girişi
- Mikrofon davranışı
- Kullanıcıya göz atma bandı gönderildiğinde mikrofon yeniden açılmıyor.
- Kullanıcı yine de mikrofona dokunarak veya Asistan'ı ("Ok Google") çağırarak mikrofonu yeniden açabilir.
- Mikrofon davranışı
Yönerge
Varsayılan olarak, bir göz atma bandı gönderildikten sonra mikrofon kapalı kalır. Görüşmeye daha sonra devam etmek istiyorsanız bandın altına öneri çipleri eklemenizi önemle tavsiye ederiz.
Listede sunulan seçenekleri hiçbir zaman öneri çipi olarak tekrarlamayın. Bu bağlamdaki çipler, konuşmanın yönünü değiştirmek için kullanılır (seçim seçimi için değil).
Listelerde olduğu gibi, bant kartına eşlik eden sohbet balonu, sesin bir alt kümesidir (TTS/SSML). Buradaki ses (TTS/SSML), banttaki ilk karoyu entegre eder. Ayrıca banttaki tüm öğelerin okunmasını kesinlikle önermeyiz. İlk öğeyi ve orada bulunma nedenini (örneğin, en popüler, en son satın alınan, en çok konuşulan) bahsetmek en iyisidir.
Örnek kod
Node.js
app.intent('Browsing Carousel', (conv) => { if (!conv.screen || !conv.surface.capabilities.has('actions.capability.WEB_BROWSER')) { conv.ask('Sorry, try this on a phone or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask(`Here's an example of a browsing carousel.`); conv.ask(new BrowseCarousel({ items: [ new BrowseCarouselItem({ title: 'Title of item 1', url: 'https://example.com', description: 'Description of item 1', image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Image alternate text', }), footer: 'Item 1 footer', }), new BrowseCarouselItem({ title: 'Title of item 2', url: 'https://example.com', description: 'Description of item 2', image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Image alternate text', }), footer: 'Item 2 footer', }), ], })); });
Java
@ForIntent("Browsing Carousel") public ActionResponse browseCarousel(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue()) || !request.hasCapability(Capability.WEB_BROWSER.getValue())) { return responseBuilder .add("Sorry, try this on a phone or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("Here's an example of a browsing carousel.") .add( new CarouselBrowse() .setItems( new ArrayList<CarouselBrowseItem>( Arrays.asList( new CarouselBrowseItem() .setTitle("Title of item 1") .setDescription("Description of item 1") .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com")) .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Image alternate text")) .setFooter("Item 1 footer"), new CarouselBrowseItem() .setTitle("Title of item 2") .setDescription("Description of item 2") .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com")) .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Image alternate text")) .setFooter("Item 2 footer"))))); return responseBuilder.build(); }
Node.js
if (!conv.screen || !conv.surface.capabilities.has('actions.capability.WEB_BROWSER')) { conv.ask('Sorry, try this on a phone or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask(`Here's an example of a browsing carousel.`); conv.ask(new BrowseCarousel({ items: [ new BrowseCarouselItem({ title: 'Title of item 1', url: 'https://example.com', description: 'Description of item 1', image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Image alternate text', }), footer: 'Item 1 footer', }), new BrowseCarouselItem({ title: 'Title of item 2', url: 'https://example.com', description: 'Description of item 2', image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Image alternate text', }), footer: 'Item 2 footer', }), ], }));
Java
ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue()) || !request.hasCapability(Capability.WEB_BROWSER.getValue())) { return responseBuilder .add("Sorry, try this on a phone or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("Here's an example of a browsing carousel.") .add( new CarouselBrowse() .setItems( new ArrayList<CarouselBrowseItem>( Arrays.asList( new CarouselBrowseItem() .setTitle("Title of item 1") .setDescription("Description of item 1") .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com")) .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Image alternate text")) .setFooter("Item 1 footer"), new CarouselBrowseItem() .setTitle("Title of item 2") .setDescription("Description of item 2") .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com")) .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Image alternate text")) .setFooter("Item 2 footer"))))); return responseBuilder.build();
JSON
Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.
{ "payload": { "google": { "expectUserResponse": true, "richResponse": { "items": [ { "simpleResponse": { "textToSpeech": "Here's an example of a browsing carousel." } }, { "carouselBrowse": { "items": [ { "title": "Title of item 1", "openUrlAction": { "url": "https://example.com" }, "description": "Description of item 1", "footer": "Item 1 footer", "image": { "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png", "accessibilityText": "Image alternate text" } }, { "title": "Title of item 2", "openUrlAction": { "url": "https://example.com" }, "description": "Description of item 2", "footer": "Item 2 footer", "image": { "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png", "accessibilityText": "Image alternate text" } } ] } } ] } } } }
JSON
Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.
{ "expectUserResponse": true, "expectedInputs": [ { "inputPrompt": { "richInitialPrompt": { "items": [ { "simpleResponse": { "textToSpeech": "Here's an example of a browsing carousel." } }, { "carouselBrowse": { "items": [ { "description": "Description of item 1", "footer": "Item 1 footer", "image": { "accessibilityText": "Image alternate text", "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png" }, "openUrlAction": { "url": "https://example.com" }, "title": "Title of item 1" }, { "description": "Description of item 2", "footer": "Item 2 footer", "image": { "accessibilityText": "Image alternate text", "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png" }, "openUrlAction": { "url": "https://example.com" }, "title": "Title of item 2" } ] } } ] } }, "possibleIntents": [ { "intent": "actions.intent.TEXT" } ] } ] }
Seçili öğe işleniyor
Bant tarayıcı aktarımını gerçekleştirdiğinden, göz atma bandı öğeleriyle kullanıcı etkileşimleri için takip karşılama gerekli değildir. Kullanıcı, göz atma bandı öğesiyle etkileşimde bulunduktan sonra mikrofonun yeniden açılmayacağını unutmayın. Bu nedenle, görüşmeyi sonlandırmanız veya yukarıdaki talimatlara göre yanıtınıza öneri çipleri eklemeniz gerekir.
Öneri çipleri
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/suggestions.png?authuser=7&hl=tr)
Yanıtlarla ilgili ipucu vermek için öneri çiplerini kullanarak konuşmayı sürdürün veya değiştirin. Görüşme sırasında birincil bir harekete geçirici mesaj varsa bunu ilk öneri çipi olarak listelemeyi düşünün.
Mümkünse sohbet balonunun bir parçası olarak tek bir temel öneriyi dahil etmelisiniz. Ancak bunu yalnızca yanıtın ya da sohbet görüşmesinin doğal karşılandığı durumlarda yapın.
Özellikler
Öneri çipleri aşağıdaki gereksinimlere ve yapılandırabileceğiniz isteğe bağlı özelliklere sahiptir:
actions.capability.SCREEN_OUTPUT
özelliğine sahip yüzeylerde desteklenir.- Öneri çiplerini web'e bağlamak için yüzeylerde
actions.capability.WEB_BROWSER
özelliği de bulunmalıdır. Bu özellik şu anda akıllı ekranlarda kullanılamıyor. - En fazla sekiz çip.
- Maksimum metin uzunluğu 25 karakterdir.
Yalnızca düz metni destekler.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/chips.png?authuser=7&hl=tr)
Örnek kod
Node.js
app.intent('Suggestion Chips', (conv) => { if (!conv.screen) { conv.ask('Chips can be demonstrated on screen devices.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('These are suggestion chips.'); conv.ask(new Suggestions('Suggestion 1')); conv.ask(new Suggestions(['Suggestion 2', 'Suggestion 3'])); conv.ask(new LinkOutSuggestion({ name: 'Suggestion Link', url: 'https://assistant.google.com/', })); conv.ask('Which type of response would you like to see next?'); ; });
Java
@ForIntent("Suggestion Chips") public ActionResponse suggestionChips(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("These are suggestion chips.") .addSuggestions(new String[] {"Suggestion 1", "Suggestion 2", "Suggestion 3"}) .add( new LinkOutSuggestion() .setDestinationName("Suggestion Link") .setUrl("https://assistant.google.com/")) .add("Which type of response would you like to see next?"); return responseBuilder.build(); }
Node.js
if (!conv.screen) { conv.ask('Chips can be demonstrated on screen devices.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('These are suggestion chips.'); conv.ask(new Suggestions('Suggestion 1')); conv.ask(new Suggestions(['Suggestion 2', 'Suggestion 3'])); conv.ask(new LinkOutSuggestion({ name: 'Suggestion Link', url: 'https://assistant.google.com/', })); conv.ask('Which type of response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("These are suggestion chips.") .addSuggestions(new String[] {"Suggestion 1", "Suggestion 2", "Suggestion 3"}) .add( new LinkOutSuggestion() .setDestinationName("Suggestion Link") .setUrl("https://assistant.google.com/")) .add("Which type of response would you like to see next?"); return responseBuilder.build();
JSON
Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.
{ "payload": { "google": { "expectUserResponse": true, "richResponse": { "items": [ { "simpleResponse": { "textToSpeech": "These are suggestion chips." } }, { "simpleResponse": { "textToSpeech": "Which type of response would you like to see next?" } } ], "suggestions": [ { "title": "Suggestion 1" }, { "title": "Suggestion 2" }, { "title": "Suggestion 3" } ], "linkOutSuggestion": { "destinationName": "Suggestion Link", "url": "https://assistant.google.com/" } } } } }
JSON
Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.
{ "expectUserResponse": true, "expectedInputs": [ { "possibleIntents": [ { "intent": "actions.intent.TEXT" } ], "inputPrompt": { "richInitialPrompt": { "items": [ { "simpleResponse": { "textToSpeech": "These are suggestion chips." } }, { "simpleResponse": { "textToSpeech": "Which type of response would you like to see next?" } } ], "suggestions": [ { "title": "Suggestion 1" }, { "title": "Suggestion 2" }, { "title": "Suggestion 3" } ], "linkOutSuggestion": { "destinationName": "Suggestion Link", "url": "https://assistant.google.com/" } } } } ] }
Medya yanıtları
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/media.png?authuser=7&hl=tr)
Medya yanıtları, İşlemlerinizin SSML'nin 240 saniyelik sınırından uzun oynatma süresi olan ses içeriklerini oynatmasına olanak tanır. Medya yanıtının birincil bileşeni tek müzikli karttır. Kart, kullanıcının şu işlemleri yapmasına olanak tanır:
- Son 10 saniyeyi tekrar oynatın.
- 30 saniye ileri atla.
- Medya içeriğinin toplam uzunluğunu görüntüleyin.
- Ses çalma için ilerleme durumu göstergesini görüntüleyin.
- Geçen oynatma süresini görüntüleyin.
Medya yanıtları, sesli etkileşim için aşağıdaki ses kontrollerini destekler:
- "Ok Google, oynat."
- "Ok Google, duraklat."
- "Ok Google, durdur."
- "Ok Google, baştan başla."
Kullanıcılar "Ok Google, sesi aç." veya "Ok Google, sesi yüzde 50'ye ayarla" gibi ifadeler kullanarak da ses seviyesini kontrol edebilirler. İşleminizdeki amaçlar benzer eğitim ifadeleri kullanıyorsa önceliklidir. İşleminizin özel bir nedeni yoksa Asistan'ın bu kullanıcı isteklerini yerine getirmesine izin verin.
Özellikler
Medya yanıtları, aşağıdaki gereksinimlere ve yapılandırabileceğiniz isteğe bağlı özelliklere sahiptir:
actions.capability.MEDIA_RESPONSE_AUDIO
özelliğine sahip yüzeylerde desteklenir.- Çalınacak ses, doğru biçimlendirilmiş bir
.mp3
dosyasında olmalıdır. Canlı yayın desteklenmez. - Oynatmaya ilişkin medya dosyası HTTPS URL'si olarak belirtilmelidir.
- Resim (isteğe bağlı)
- İsterseniz bir simge veya resim de ekleyebilirsiniz.
- Simge
- Simgeniz, medya oynatıcı kartının sağında kenarlıksız küçük resim olarak görünür.
- Boyut 36 x 36 dp olmalıdır. Daha büyük boyutlu resimler sığacak şekilde yeniden boyutlandırılır.
- Resim
- Görüntü kapsayıcının yüksekliği 192 dp olur.
- Resminiz, medya oynatıcı kartının üstünde görünür ve kartın tüm genişliğini kaplar. Çoğu resmin üstünde veya yanlarında çubuklar görünür.
- Hareketli GIF'lere izin verilir.
- Resim kaynağını URL olarak belirtmelisiniz.
- Tüm resimlerde alternatif metin kullanılması gerekir.
Yüzeylerdeki davranış
Medya yanıtları Android telefonlarda ve Google Home'da desteklenir. Medya yanıtlarının davranışı, kullanıcıların İşlemlerinizle etkileşimde bulunduğu yüzeye bağlıdır.
Android telefonlarda, aşağıdaki koşullardan herhangi biri karşılandığında kullanıcılar medya yanıtlarını görebilir:
- Google Asistan ön planda ve telefon ekranı açık.
- Kullanıcı, ses çalarken Google Asistan'dan ayrılır ve çalma işlemi tamamlandıktan sonra 10 dakika içinde Google Asistan'a geri döner. Kullanıcı, Google Asistan'a döndüğünde medya kartını ve öneri çiplerini görür.
- Asistan, kullanıcıların "sesi aç" veya "sesi yüzde 50'ye ayarla" gibi komutlar vererek görüşme İşleminiz sırasında cihaz ses düzeyini kontrol etmelerine olanak tanır. Benzer eğitim ifadelerini işleyen amaçlarınız varsa amaçlarınız önceliklidir. İşleminiz özel bir nedeni yoksa Asistan'ın bu kullanıcı istekleriyle ilgilenmesine izin vermenizi öneririz.
Medya denetimleri, telefon kilitliyken kullanılabilir. Kontroller, Android'de bildirim alanında da görünür.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/media.png?authuser=7&hl=tr)
Örnek kod
Aşağıdaki kod örneğinde, zengin yanıtlarınızı medyayı içerecek şekilde nasıl güncelleyebileceğiniz gösterilmektedir.
Node.js
app.intent('Media Response', (conv) => { if (!conv.surface.capabilities .has('actions.capability.MEDIA_RESPONSE_AUDIO')) { conv.ask('Sorry, this device does not support audio playback.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('This is a media response example.'); conv.ask(new MediaObject({ name: 'Jazz in Paris', url: 'https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3', description: 'A funky Jazz tune', icon: new Image({ url: 'https://storage.googleapis.com/automotive-media/album_art.jpg', alt: 'Album cover of an ocean view', }), })); conv.ask(new Suggestions(['Basic Card', 'List', 'Carousel', 'Browsing Carousel'])); });
Java
@ForIntent("Media Response") public ActionResponse mediaResponse(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.MEDIA_RESPONSE_AUDIO.getValue())) { return responseBuilder .add("Sorry, this device does not support audio playback.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("This is a media response example.") .add( new MediaResponse() .setMediaObjects( new ArrayList<MediaObject>( Arrays.asList( new MediaObject() .setName("Jazz in Paris") .setDescription("A funky Jazz tune") .setContentUrl( "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3") .setIcon( new Image() .setUrl( "https://storage.googleapis.com/automotive-media/album_art.jpg") .setAccessibilityText("Album cover of an ocean view"))))) .setMediaType("AUDIO")) .addSuggestions(new String[] {"Basic Card", "List", "Carousel", "Browsing Carousel"}); return responseBuilder.build(); }
Node.js
if (!conv.surface.capabilities .has('actions.capability.MEDIA_RESPONSE_AUDIO')) { conv.ask('Sorry, this device does not support audio playback.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('This is a media response example.'); conv.ask(new MediaObject({ name: 'Jazz in Paris', url: 'https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3', description: 'A funky Jazz tune', icon: new Image({ url: 'https://storage.googleapis.com/automotive-media/album_art.jpg', alt: 'Album cover of an ocean view', }), })); conv.ask(new Suggestions(['Basic Card', 'List', 'Carousel', 'Browsing Carousel']));
Java
ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.MEDIA_RESPONSE_AUDIO.getValue())) { return responseBuilder .add("Sorry, this device does not support audio playback.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("This is a media response example.") .add( new MediaResponse() .setMediaObjects( new ArrayList<MediaObject>( Arrays.asList( new MediaObject() .setName("Jazz in Paris") .setDescription("A funky Jazz tune") .setContentUrl( "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3") .setIcon( new Image() .setUrl( "https://storage.googleapis.com/automotive-media/album_art.jpg") .setAccessibilityText("Album cover of an ocean view"))))) .setMediaType("AUDIO")) .addSuggestions(new String[] {"Basic Card", "List", "Carousel", "Browsing Carousel"}); return responseBuilder.build();
JSON
Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.
{ "payload": { "google": { "expectUserResponse": true, "richResponse": { "items": [ { "simpleResponse": { "textToSpeech": "This is a media response example." } }, { "mediaResponse": { "mediaType": "AUDIO", "mediaObjects": [ { "contentUrl": "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3", "description": "A funky Jazz tune", "icon": { "url": "https://storage.googleapis.com/automotive-media/album_art.jpg", "accessibilityText": "Album cover of an ocean view" }, "name": "Jazz in Paris" } ] } } ], "suggestions": [ { "title": "Basic Card" }, { "title": "List" }, { "title": "Carousel" }, { "title": "Browsing Carousel" } ] } } } }
JSON
Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.
{ "expectUserResponse": true, "expectedInputs": [ { "possibleIntents": [ { "intent": "actions.intent.TEXT" } ], "inputPrompt": { "richInitialPrompt": { "items": [ { "simpleResponse": { "textToSpeech": "This is a media response example." } }, { "mediaResponse": { "mediaType": "AUDIO", "mediaObjects": [ { "contentUrl": "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3", "description": "A funky Jazz tune", "icon": { "url": "https://storage.googleapis.com/automotive-media/album_art.jpg", "accessibilityText": "Album cover of an ocean view" }, "name": "Jazz in Paris" } ] } } ], "suggestions": [ { "title": "Basic Card" }, { "title": "List" }, { "title": "Carousel" }, { "title": "Browsing Carousel" } ] } } } ] }
Yönerge
Yanıtınız, mediaType
değeri AUDIO
olan bir mediaResponse
ve zengin yanıtın öğe dizisinde bir mediaObject
içermelidir. Bir medya yanıtı tek bir medya nesnesini destekler. Bir medya nesnesi, ses dosyasının içerik URL'sini içermelidir. Bir medya nesnesi, isteğe bağlı olarak bir ad, alt metin (açıklama) ve bir simge ya da resim URL'si içerebilir.
Telefonlarda ve Google Home'da İşleminiz ses çalmayı tamamladığında Google Asistan, medya yanıtının FinalResponse
olup olmadığını kontrol eder.
Aksi takdirde, karşılamanıza bir geri arama göndererek kullanıcıya yanıt verebilirsiniz.
Yanıt bir FinalResponse
değilse İşleminiz öneri çipleri içermelidir.
Oynatma tamamlandıktan sonra geri çağırmayı işleme
İşleminiz kullanıcıdan takip istemek (örneğin, başka bir şarkı çalmak) için actions.intent.MEDIA_STATUS
amacını işlemelidir. İşleminiz medya oynatma tamamlandığında
bu geri çağırmayı alır. Geri çağırmada, MEDIA_STATUS
bağımsız değişkeni mevcut medya hakkındaki durum bilgilerini içerir. Durum değeri FINISHED
veya STATUS_UNSPECIFIED
olur.
Dialogflow'u Kullanma
Dialogflow'da konuşma kollarına ayırma işlemi gerçekleştirmek istiyorsanız yalnızca bir medya yanıtını destekleyen yüzeylerde tetiklendiğinden emin olmak için amaca göre actions_capability_media_response_audio
giriş bağlamı oluşturmanız gerekir.
İsteklerinizi karşılamanız
Aşağıdaki kod snippet'i, İşleminiz için istek karşılama kodunu nasıl yazabileceğinizi gösterir. Dialogflow kullanıyorsanız actions.intent.MEDIA_STATUS
yerine actions_intent_MEDIA_STATUS
etkinliğini alan amaçta belirtilen işlem adını girin (örneğin, "media.status.update").
Node.js
app.intent('Media Status', (conv) => { const mediaStatus = conv.arguments.get('MEDIA_STATUS'); let response = 'Unknown media status received.'; if (mediaStatus && mediaStatus.status === 'FINISHED') { response = 'Hope you enjoyed the tune!'; } conv.ask(response); conv.ask('Which response would you like to see next?'); });
Java
@ForIntent("Media Status") public ActionResponse mediaStatus(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); String mediaStatus = request.getMediaStatus(); String response = "Unknown media status received."; if (mediaStatus != null && mediaStatus.equals("FINISHED")) { response = "Hope you enjoyed the tune!"; } responseBuilder.add(response); responseBuilder.add("Which response would you like to see next?"); return responseBuilder.build(); }
Node.js
app.intent('actions.intent.MEDIA_STATUS', (conv) => { const mediaStatus = conv.arguments.get('MEDIA_STATUS'); let response = 'Unknown media status received.'; if (mediaStatus && mediaStatus.status === 'FINISHED') { response = 'Hope you enjoyed the tune!'; } conv.ask(response); conv.ask('Which response would you like to see next?'); });
Java
@ForIntent("actions.intent.MEDIA_STATUS") public ActionResponse mediaStatus(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); String mediaStatus = request.getMediaStatus(); String response = "Unknown media status received."; if (mediaStatus != null && mediaStatus.equals("FINISHED")) { response = "Hope you enjoyed the tune!"; } responseBuilder.add(response); responseBuilder.add("Which response would you like to see next?"); return responseBuilder.build(); }
JSON
Aşağıdaki JSON'un bir webhook isteğini açıkladığını unutmayın.
{ "responseId": "151b68df-98de-41fb-94b5-caeace90a7e9-21947381", "queryResult": { "queryText": "actions_intent_MEDIA_STATUS", "parameters": {}, "allRequiredParamsPresent": true, "fulfillmentText": "Webhook failed for intent: Media Status", "fulfillmentMessages": [ { "text": { "text": [ "Webhook failed for intent: Media Status" ] } } ], "outputContexts": [ { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_media_response_audio" }, { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_account_linking" }, { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_web_browser" }, { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_screen_output" }, { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_audio_output" }, { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/google_assistant_input_type_voice" }, { "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_intent_media_status", "parameters": { "MEDIA_STATUS": { "@type": "type.googleapis.com/google.actions.v2.MediaStatus", "status": "FINISHED" } } } ], "intent": { "name": "projects/df-responses-kohler/agent/intents/068b27d3-c148-4044-bfab-dfa37eebd90d", "displayName": "Media Status" }, "intentDetectionConfidence": 1, "languageCode": "en" }, "originalDetectIntentRequest": { "source": "google", "version": "2", "payload": { "user": { "locale": "en-US", "lastSeen": "2019-08-04T23:57:15Z", "userVerificationStatus": "VERIFIED" }, "conversation": { "conversationId": "ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA", "type": "ACTIVE", "conversationToken": "[]" }, "inputs": [ { "intent": "actions.intent.MEDIA_STATUS", "rawInputs": [ { "inputType": "VOICE" } ], "arguments": [ { "name": "MEDIA_STATUS", "extension": { "@type": "type.googleapis.com/google.actions.v2.MediaStatus", "status": "FINISHED" } } ] } ], "surface": { "capabilities": [ { "name": "actions.capability.MEDIA_RESPONSE_AUDIO" }, { "name": "actions.capability.ACCOUNT_LINKING" }, { "name": "actions.capability.WEB_BROWSER" }, { "name": "actions.capability.SCREEN_OUTPUT" }, { "name": "actions.capability.AUDIO_OUTPUT" } ] }, "isInSandbox": true, "availableSurfaces": [ { "capabilities": [ { "name": "actions.capability.WEB_BROWSER" }, { "name": "actions.capability.AUDIO_OUTPUT" }, { "name": "actions.capability.SCREEN_OUTPUT" } ] } ], "requestType": "SIMULATOR" } }, "session": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA" }
JSON
Aşağıdaki JSON'un bir webhook isteğini açıkladığını unutmayın.
{ "user": { "locale": "en-US", "lastSeen": "2019-08-06T07:38:40Z", "userVerificationStatus": "VERIFIED" }, "conversation": { "conversationId": "ABwppHGcqunXh1M6IE0lu2sVqXdpJfdpC5FWMkMSXQskK1nzb4IkSUSRqQzoEr0Ly0z_G3mwyZlk5rFtd1w", "type": "NEW" }, "inputs": [ { "intent": "actions.intent.MEDIA_STATUS", "rawInputs": [ { "inputType": "VOICE" } ], "arguments": [ { "name": "MEDIA_STATUS", "extension": { "@type": "type.googleapis.com/google.actions.v2.MediaStatus", "status": "FINISHED" } } ] } ], "surface": { "capabilities": [ { "name": "actions.capability.SCREEN_OUTPUT" }, { "name": "actions.capability.WEB_BROWSER" }, { "name": "actions.capability.AUDIO_OUTPUT" }, { "name": "actions.capability.MEDIA_RESPONSE_AUDIO" }, { "name": "actions.capability.ACCOUNT_LINKING" } ] }, "isInSandbox": true, "availableSurfaces": [ { "capabilities": [ { "name": "actions.capability.WEB_BROWSER" }, { "name": "actions.capability.AUDIO_OUTPUT" }, { "name": "actions.capability.SCREEN_OUTPUT" } ] } ], "requestType": "SIMULATOR" }
Tablo kartları
Masa kartları, yanıtınızda tablo verileri (örneğin, spor puan durumu, seçim sonuçları ve uçuşlar) göstermenize olanak tanır. Asistan'ın tablo kartınızda göstermesi gereken sütunları ve satırları (her biri en fazla 3 adet) tanımlayabilirsiniz. Ayrıca, ek sütunlar ve satırlar tanımlayıp bu sütunların önceliklerini belirleyebilirsiniz.
Tablolar dikey listelerden farklıdır, çünkü tablolarda statik veriler görüntülenir ve liste öğeleri gibi etkileşim kurulamaz.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/table.png?authuser=7&hl=tr)
Özellikler
Tablo kartlarında, yapılandırabileceğiniz aşağıdaki gereksinimler ve isteğe bağlı özellikler bulunur:
actions.capability.SCREEN_OUTPUT
özelliğine sahip yüzeylerde desteklenir.
Aşağıdaki bölümde, bir tablo kartındaki öğeleri nasıl özelleştirebileceğiniz özetlenmektedir.
Ad | İsteğe Bağlı | Özelleştirilebilir | Özelleştirme Notları |
---|---|---|---|
title |
Evet | Evet | Tablonun genel başlığı. Altyazı ayarlanmışsa ayarlanmalıdır. Yazı tipi ailesini ve rengini özelleştirebilirsiniz. |
subtitle |
Evet | Hayır | Tablonun alt başlığı. |
image |
Evet | Evet | Tabloyla ilişkilendirilen resim. |
Row |
Hayır | Evet |
Tablonun satır verileri. Bir İlk 3 satırın gösterilmesi garanti edilir ancak diğerleri belirli yüzeylerde görünmeyebilir. Belirli bir yüzeyde hangi satırların gösterildiğini görmek için lütfen simülatörü kullanarak test yapın. |
ColumnProperties |
Evet | Evet | Bir sütunun başlığı ve hizalaması. Bir header özelliği (bir sütunun başlık metnini temsil eder) ve bir horizontal_alignment özelliğinden (HorizontalAlignment türünde) oluşur. |
Cell |
Hayır | Evet | Bir satırdaki hücreyi açıklar. Her hücre, metin değerini temsil eden bir dize içerir. Hücredeki metni özelleştirebilirsiniz. |
Button |
Evet | Evet | Genellikle kartın alt kısmında görünen bir düğme nesnesi. Tablo kartında yalnızca 1 düğme olabilir. Düğme rengini özelleştirebilirsiniz. |
HorizontalAlignment |
Evet | Evet | Hücre içindeki içeriğin yatay hizalaması. Değerler LEADING , CENTER veya TRAILING olabilir. Belirtilmemişse içerik, hücrenin ön kenarına hizalanır. |
Örnek kod
Aşağıdaki snippet'lerde basit bir tablo kartının nasıl uygulanacağı gösterilmektedir:
Node.js
app.intent('Simple Table Card', (conv) => { if (!conv.screen) { conv.ask('Sorry, try this on a screen device or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('This is a simple table example.'); conv.ask(new Table({ dividers: true, columns: ['header 1', 'header 2', 'header 3'], rows: [ ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'], ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'], ], })); conv.ask('Which response would you like to see next?'); });
Java
@ForIntent("Simple Table Card") public ActionResponse simpleTable(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("This is a simple table example.") .add( new TableCard() .setColumnProperties( Arrays.asList( new TableCardColumnProperties().setHeader("header 1"), new TableCardColumnProperties().setHeader("header 2"), new TableCardColumnProperties().setHeader("header 3"))) .setRows( Arrays.asList( new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 1 item 1"), new TableCardCell().setText("row 1 item 2"), new TableCardCell().setText("row 1 item 3"))), new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 2 item 1"), new TableCardCell().setText("row 2 item 2"), new TableCardCell().setText("row 2 item 3")))))); return responseBuilder.build(); }
Node.js
if (!conv.screen) { conv.ask('Sorry, try this on a screen device or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('This is a simple table example.'); conv.ask(new Table({ dividers: true, columns: ['header 1', 'header 2', 'header 3'], rows: [ ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'], ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'], ], })); conv.ask('Which response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("This is a simple table example.") .add( new TableCard() .setColumnProperties( Arrays.asList( new TableCardColumnProperties().setHeader("header 1"), new TableCardColumnProperties().setHeader("header 2"), new TableCardColumnProperties().setHeader("header 3"))) .setRows( Arrays.asList( new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 1 item 1"), new TableCardCell().setText("row 1 item 2"), new TableCardCell().setText("row 1 item 3"))), new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 2 item 1"), new TableCardCell().setText("row 2 item 2"), new TableCardCell().setText("row 2 item 3")))))); return responseBuilder.build();
JSON
Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.
{ "payload": { "google": { "expectUserResponse": true, "richResponse": { "items": [ { "simpleResponse": { "textToSpeech": "This is a simple table example." } }, { "tableCard": { "rows": [ { "cells": [ { "text": "row 1 item 1" }, { "text": "row 1 item 2" }, { "text": "row 1 item 3" } ], "dividerAfter": true }, { "cells": [ { "text": "row 2 item 1" }, { "text": "row 2 item 2" }, { "text": "row 2 item 3" } ], "dividerAfter": true } ], "columnProperties": [ { "header": "header 1" }, { "header": "header 2" }, { "header": "header 3" } ] } }, { "simpleResponse": { "textToSpeech": "Which response would you like to see next?" } } ] } } } }
JSON
Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.
{ "expectUserResponse": true, "expectedInputs": [ { "inputPrompt": { "richInitialPrompt": { "items": [ { "simpleResponse": { "textToSpeech": "This is a simple table example." } }, { "tableCard": { "columnProperties": [ { "header": "header 1" }, { "header": "header 2" }, { "header": "header 3" } ], "rows": [ { "cells": [ { "text": "row 1 item 1" }, { "text": "row 1 item 2" }, { "text": "row 1 item 3" } ], "dividerAfter": true }, { "cells": [ { "text": "row 2 item 1" }, { "text": "row 2 item 2" }, { "text": "row 2 item 3" } ], "dividerAfter": true } ] } }, { "simpleResponse": { "textToSpeech": "Which response would you like to see next?" } } ] } }, "possibleIntents": [ { "intent": "actions.intent.TEXT" } ] } ] }
Aşağıdaki snippet'lerde karmaşık bir tablo kartının nasıl uygulanacağı gösterilmektedir:
Node.js
app.intent('Advanced Table Card', (conv) => { if (!conv.screen) { conv.ask('Sorry, try this on a screen device or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('This is a table with all the possible fields.'); conv.ask(new Table({ title: 'Table Title', subtitle: 'Table Subtitle', image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Alt Text', }), columns: [ { header: 'header 1', align: 'CENTER', }, { header: 'header 2', align: 'LEADING', }, { header: 'header 3', align: 'TRAILING', }, ], rows: [ { cells: ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'], dividerAfter: false, }, { cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'], dividerAfter: true, }, { cells: ['row 3 item 1', 'row 3 item 2', 'row 3 item 3'], }, ], buttons: new Button({ title: 'Button Text', url: 'https://assistant.google.com', }), })); conv.ask('Which response would you like to see next?'); });
Java
@ForIntent("Advanced Table Card") public ActionResponse advancedTable(ActionRequest request) { ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("This is a table with all the possible fields.") .add( new TableCard() .setTitle("Table Title") .setSubtitle("Table Subtitle") .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Alt text")) .setButtons( Arrays.asList( new Button() .setTitle("Button Text") .setOpenUrlAction( new OpenUrlAction().setUrl("https://assistant.google.com")))) .setColumnProperties( Arrays.asList( new TableCardColumnProperties() .setHeader("header 1") .setHorizontalAlignment("CENTER"), new TableCardColumnProperties() .setHeader("header 2") .setHorizontalAlignment("LEADING"), new TableCardColumnProperties() .setHeader("header 3") .setHorizontalAlignment("TRAILING"))) .setRows( Arrays.asList( new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 1 item 1"), new TableCardCell().setText("row 1 item 2"), new TableCardCell().setText("row 1 item 3"))) .setDividerAfter(false), new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 2 item 1"), new TableCardCell().setText("row 2 item 2"), new TableCardCell().setText("row 2 item 3"))) .setDividerAfter(true), new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 2 item 1"), new TableCardCell().setText("row 2 item 2"), new TableCardCell().setText("row 2 item 3")))))); return responseBuilder.build(); }
Node.js
if (!conv.screen) { conv.ask('Sorry, try this on a screen device or select the ' + 'phone surface in the simulator.'); conv.ask('Which response would you like to see next?'); return; } conv.ask('This is a table with all the possible fields.'); conv.ask(new Table({ title: 'Table Title', subtitle: 'Table Subtitle', image: new Image({ url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png', alt: 'Alt Text', }), columns: [ { header: 'header 1', align: 'CENTER', }, { header: 'header 2', align: 'LEADING', }, { header: 'header 3', align: 'TRAILING', }, ], rows: [ { cells: ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'], dividerAfter: false, }, { cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'], dividerAfter: true, }, { cells: ['row 3 item 1', 'row 3 item 2', 'row 3 item 3'], }, ], buttons: new Button({ title: 'Button Text', url: 'https://assistant.google.com', }), })); conv.ask('Which response would you like to see next?');
Java
ResponseBuilder responseBuilder = getResponseBuilder(request); if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) { return responseBuilder .add("Sorry, try ths on a screen device or select the phone surface in the simulator.") .add("Which response would you like to see next?") .build(); } responseBuilder .add("This is a table with all the possible fields.") .add( new TableCard() .setTitle("Table Title") .setSubtitle("Table Subtitle") .setImage( new Image() .setUrl( "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png") .setAccessibilityText("Alt text")) .setButtons( Arrays.asList( new Button() .setTitle("Button Text") .setOpenUrlAction( new OpenUrlAction().setUrl("https://assistant.google.com")))) .setColumnProperties( Arrays.asList( new TableCardColumnProperties() .setHeader("header 1") .setHorizontalAlignment("CENTER"), new TableCardColumnProperties() .setHeader("header 2") .setHorizontalAlignment("LEADING"), new TableCardColumnProperties() .setHeader("header 3") .setHorizontalAlignment("TRAILING"))) .setRows( Arrays.asList( new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 1 item 1"), new TableCardCell().setText("row 1 item 2"), new TableCardCell().setText("row 1 item 3"))) .setDividerAfter(false), new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 2 item 1"), new TableCardCell().setText("row 2 item 2"), new TableCardCell().setText("row 2 item 3"))) .setDividerAfter(true), new TableCardRow() .setCells( Arrays.asList( new TableCardCell().setText("row 2 item 1"), new TableCardCell().setText("row 2 item 2"), new TableCardCell().setText("row 2 item 3")))))); return responseBuilder.build();
JSON
Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.
{ "payload": { "google": { "expectUserResponse": true, "richResponse": { "items": [ { "simpleResponse": { "textToSpeech": "This is a table with all the possible fields." } }, { "tableCard": { "title": "Table Title", "subtitle": "Table Subtitle", "image": { "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png", "accessibilityText": "Alt Text" }, "rows": [ { "cells": [ { "text": "row 1 item 1" }, { "text": "row 1 item 2" }, { "text": "row 1 item 3" } ], "dividerAfter": false }, { "cells": [ { "text": "row 2 item 1" }, { "text": "row 2 item 2" }, { "text": "row 2 item 3" } ], "dividerAfter": true }, { "cells": [ { "text": "row 3 item 1" }, { "text": "row 3 item 2" }, { "text": "row 3 item 3" } ] } ], "columnProperties": [ { "header": "header 1", "horizontalAlignment": "CENTER" }, { "header": "header 2", "horizontalAlignment": "LEADING" }, { "header": "header 3", "horizontalAlignment": "TRAILING" } ], "buttons": [ { "title": "Button Text", "openUrlAction": { "url": "https://assistant.google.com" } } ] } }, { "simpleResponse": { "textToSpeech": "Which response would you like to see next?" } } ] } } } }
JSON
Aşağıdaki JSON'un bir webhook yanıtını açıkladığını unutmayın.
{ "expectUserResponse": true, "expectedInputs": [ { "possibleIntents": [ { "intent": "actions.intent.TEXT" } ], "inputPrompt": { "richInitialPrompt": { "items": [ { "simpleResponse": { "textToSpeech": "This is a table with all the possible fields." } }, { "tableCard": { "title": "Table Title", "subtitle": "Table Subtitle", "image": { "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png", "accessibilityText": "Alt Text" }, "rows": [ { "cells": [ { "text": "row 1 item 1" }, { "text": "row 1 item 2" }, { "text": "row 1 item 3" } ], "dividerAfter": false }, { "cells": [ { "text": "row 2 item 1" }, { "text": "row 2 item 2" }, { "text": "row 2 item 3" } ], "dividerAfter": true }, { "cells": [ { "text": "row 3 item 1" }, { "text": "row 3 item 2" }, { "text": "row 3 item 3" } ] } ], "columnProperties": [ { "header": "header 1", "horizontalAlignment": "CENTER" }, { "header": "header 2", "horizontalAlignment": "LEADING" }, { "header": "header 3", "horizontalAlignment": "TRAILING" } ], "buttons": [ { "title": "Button Text", "openUrlAction": { "url": "https://assistant.google.com" } } ] } }, { "simpleResponse": { "textToSpeech": "Which response would you like to see next?" } } ] } } } ] }
Yanıtlarınızı özelleştirme
Özel bir tema oluşturarak zengin yanıtlarınızın görünümünü değiştirebilirsiniz. Actions projeniz için bir tema tanımlarsanız projenizin İşlemler genelindeki zengin yanıtların stili, temanıza göre belirlenir. Bu özel markalama özelliği, kullanıcılar İşlemler ekranlı bir yüzeyde çağrıldığında iletişimin benzersiz bir görünümünü ve tarzını tanımlamak için yararlı olabilir.
Özel bir yanıt teması belirlemek için aşağıdakileri yapın:
- Actions Console'da Geliştirme > Tema özelleştirme'ye gidin.
- Aşağıdakilerden birini veya tümünü ayarlayın:
- Kartlarınızın arka planı olarak kullanılacak arka plan rengi. Kartın içeriğinin kolay okunabilmesi için genellikle arka planda açık bir renk kullanmanız gerekir.
- Birincil renk, kartlarınızın başlık metinlerinin ve kullanıcı arayüzü öğelerinin ana rengidir. Genel olarak, arka planla kontrast oluşturmak için daha koyu bir birincil renk kullanmanız gerekir.
- Yazı tipi ailesi, başlıklar ve diğer belirgin metin öğeleri için kullanılan yazı tipi türünü açıklar.
- Resim köşe stili, kartlarınızın köşelerinin görünümünü değiştirebilir.
- Arka plan resmi, arka plan rengi yerine özel bir resim kullanır. Yüzey cihazı yatay veya dikey moddayken sırasıyla iki farklı resim sağlamanız gerekir. Arka plan resmi kullanırsanız birincil rengin beyaz olarak ayarlandığını unutmayın.
- Kaydet'i tıklayın.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/theme-customization.png?authuser=7&hl=tr)