1. Giriş
Önceki codelab'de TV rehberi için bir Dialogflow chatbot'u oluşturduğunuzu varsayarak, bu chatbot'u Google Chat'e nasıl genişleteceğinizi göstereceğiz. Bu platform için dinamik ve etkileşimli kartlar oluşturmayı ve birden fazla entegrasyon yapmayı öğreneceksiniz.
Ne oluşturacaksınız?
Google Workspace alanınızda özelleştirilebilir yanıtlarla yanıt verebilen bir Dialogflow chatbot oluşturacağız.
Neler öğreneceksiniz?
- Google Chat sohbet uygulamasını dağıtma ve yapılandırma
- Google Chat'te bilgi kartları oluşturma
- Dialogflow fulfillment'da özel yükler oluşturma
İhtiyacınız olanlar
- Bu 2 bölümlük serideki ilk codelab'i tamamlayın.
- Dialogflow konsolunda oturum açmak için web tarayıcısı ve e-posta adresi
- Google Workspace alanınızda Chat'in etkin olması
2. Google Chat'i etkinleştirme ve yapılandırma
Önceki codelab'lerde oluşturduğunuz Dialogflow aracısıyla başlayacağız.
- Dialogflow Console'da
simgesini tıklayın. - Genel sekmesinde Proje kimliği'ne gidin ve Google Cloud'u
tıklayın.
- Google Cloud Console'da Gezinme menüsü ☰ > API'ler ve Hizmetler > Kitaplık'ı tıklayın.
- "Google Chat API"yi arayın, ardından Google Cloud projenizde API'yi kullanmak için Etkinleştir'i tıklayın.
- Şimdi Google Chat uygulamanızı yapılandıracağız. API'nin Yapılandırma sayfasına gidin. Her GCP projesinin en fazla bir Google Chat uygulaması olabileceğini lütfen unutmayın.
- Yapılandırma seçeneklerinin Dialogflow alanlarıyla doldurulduğunu görmeniz gerekir.
- Avatar URL'si alanını şu TV resmine değiştirin:
[https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png](https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png) - Google Chat uygulamanızı hem doğrudan mesajlar hem de alanlar için etkinleştirme
Kaydet'i tıklayın ve Cloud Console'dan çıkın.
Ayrıca Dialogflow entegrasyonları. Google Chat varsayılan olarak etkindir ancak birden fazla platforma hizmet vermek istiyorsanız bunları etkinleştirmek için Dialogflow Konsolu'ndaki Entegrasyonlar sayfasına gidebilirsiniz.
3. Google Chat'te test etme
Google Chat uygulamanız yapılandırıldığına göre şimdi bunu bir Chat alanına ekleyip test edelim. Google Chat'i açın ve bir test sohbet alanı oluşturun. Alanının sağ üst köşesinde açılır listeyi tıklayın ve Kullanıcı ve uygulama ekle'yi seçin.
tvguide simgesini arayın ve Google Chat uygulamasını alana ekleyin.
Artık Google Chat'te yerleşik olarak bulunan Google Chat uygulamasıyla etkileşim kurmak için alana @tvguide yazmanız yeterli. Denemek için @tvguide hello yazın.
Ardından, daha zengin yanıtlar eklemek için Google Chat'teki özelleştirmeleri kullanacağız.
4. Özel Google Chat kartları
Google Chat ile uygulamanızın kullanıcıya temel bir metin yanıtı veya resimler, düğmeler vb. gibi farklı widget'larla oluşturulmuş daha zengin bir arayüz sunan kart yanıtı döndürmesini sağlayabilirsiniz. Dialogflow aracınızı bir Google Chat uygulamasına bağladığınıza göre, artık yalnızca karşılama kodunuzda Google Chat'te gösterilecek JSON'u doğru biçimde döndürmeniz yeterlidir. Bazı JSON örneklerine göz atalım.
Temel metin yanıtı şu şekilde görünür:
{
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
Widget'lı örnek bir kart yanıtı şu şekilde görünür:
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. Özel Yükler ve Sohbet Kartları
Dialogflow'daki özel yükler , platforma özel zengin yanıt mesajlarına olanak tanır. Buraya, Hangouts Chat JSON kartlarımızı ekleyeceğiz. Bu kartlar, temsilci tarafından kullanıcıya geri sunulacak.
Başlamak için karşılama amacına yönelik temel bir kart ekleyelim. Dialogflow Console'da Varsayılan Karşılama Niyeti'ne gidin ve yanıtlar bölümüne ilerleyin.
Google Chat'i tıklayın ve DEFAULT sekmesindeki yanıtları ilk yanıtlar olarak kullan'ın seçimini kaldırın, ardından YANIT EKLE > Özel Yük'ü tıklayın.
Bir JSON iskeleti görürsünüz.
Aşağıdaki kodu kopyalayıp yapıştırın. TextParagraph widget'ı içeren bir kart oluşturduk.
{
"hangouts": {
"header": {
"title": "TV Guide App"
},
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
}
]
}
]
}
}
Kaydet'i tıklayın. Ardından, bu kartın oluşturulup oluşturulmadığını görmek için test sohbet alanınıza gidin. Sohbet alanına "@tvguide merhaba" yazın.
Ardından, içeriği kodumuzla dinamik olarak oluşturabilmek için karşılama koduna özel bir yük ekleyeceğiz.
Kartlar hakkında daha fazla bilgi edinmek için lütfen Mesaj Biçimi dokümanlarına bakın. Sonraki bölümde kart ekleyeceğiz.
6. Adding a Card in Fulfillment
Şimdi TV program listesini göstermek için widget'lar içeren bir kart oluşturacağız. Sonuçtaki listeleme bilgilerini oluşturacağımız getGoogleCard adlı bir işlev ekleyelim. Kart yanıtını oluşturmak için keyValue ve button widget'larını kullanacağız.
Aşağıdaki işlevi index.js dosyasındaki kodunuzun en altına ekleyin.
/**
* Return a Google Chat Card in JSON
* @param {Object} JSON tv results
*/
var getGoogleCard = function(tvresults) {
console.log('In Google Chat card, tv results: ' + JSON.stringify(tvresults));
if(tvresults['Listings'][0]) {
let channelName = tvresults['Name'];
let currentlyPlayingTime = getShowTime(tvresults['Listings'][0]['Time']);
let laterPlayingTime = getShowTime(tvresults['Listings'][1]['Time']);
const cardHeader = {
title: channelName + ' Shows',
};
const currentWidget = {
keyValue: {
content: `${tvresults['Listings'][0]['Title']}`,
bottomLabel: `${currentlyPlayingTime}`,
}
};
const laterWidget = {
keyValue: {
content: `${tvresults['Listings'][1]['Title']}`,
bottomLabel: `${laterPlayingTime}`
}
};
const buttonWidget = {
buttons: [
{
textButton: {
text: 'View Full Listing',
onClick: {
openLink: {
url: TVGUIDE_WEBSERVICE + '/' + tvresults['ID'],
},
},
},
},
],
};
return {
'hangouts': {
header: cardHeader,
sections: [{widgets: [currentWidget, laterWidget, buttonWidget]}],
}
};
} else {
const errorWidget = {
keyValue: {
content: 'No listings found',
bottomLabel: 'Please try again.'
}
};
return {
'hangouts': {
'sections': {widgets: [errorWidget]},
}
};
}
}
Şimdi, aracının kullanıcıya geri göndereceği yanıtı alabilmesi için bu yöntemi çağırmamız gerekiyor. function channelHandler içinde işlevin içeriğini aşağıdaki kodla değiştirin.
function channelHandler(agent) {
console.log('in channel handler');
var jsonResponse = `{"ID":10,"Listings":[{"Title":"Catfish Marathon","Date":"2018-07-13","Time":"11:00:00"},{"Title":"Videoclips","Date":"2018-07-13","Time":"12:00:00"},{"Title":"Pimp my ride","Date":"2018-07-13","Time":"12:30:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:30:00"},{"Title":"Daria","Date":"2018-07-13","Time":"13:45:00"},{"Title":"The Real World","Date":"2018-07-13","Time":"14:00:00"},{"Title":"The Osbournes","Date":"2018-07-13","Time":"15:00:00"},{"Title":"Teenwolf","Date":"2018-07-13","Time":"16:00:00"},{"Title":"MTV Unplugged","Date":"2018-07-13","Time":"16:30:00"},{"Title":"Rupauls Drag Race","Date":"2018-07-13","Time":"17:30:00"},{"Title":"Ridiculousness","Date":"2018-07-13","Time":"18:00:00"},{"Title":"Punk'd","Date":"2018-07-13","Time":"19:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"20:00:00"},{"Title":"MTV Awards","Date":"2018-07-13","Time":"20:30:00"},{"Title":"Beavis & Butthead","Date":"2018-07-13","Time":"22:00:00"}],"Name":"MTV"}`;
var results = JSON.parse(jsonResponse);
var listItems = {};
textResults = getListings(results);
for (var i = 0; i < results['Listings'].length; i++) {
listItems[`SELECT_${i}`] = {
title: `${getShowTime(results['Listings'][i]['Time'])} - ${results['Listings'][i]['Title']}`,
description: `Channel: ${results['Name']}`
}
}
if (agent.requestSource === 'hangouts') {
const cardJSON = getGoogleCard(results);
const payload = new Payload(
'hangouts',
cardJSON,
{rawPayload: true, sendAsMessage: true},
);
agent.add(payload);
} else {
agent.add(textResults);
}
}
Yanıtın eklendiği en alttaki kodu not edin. Aracının istek kaynağı bu platform olarak tanımlanırsa JSON yükünü "hangouts" etiketiyle oluştururuz. Bu, yükün karşılamada doğru şekilde geri iletilmesi için önemlidir.
Şimdi sohbet alanınıza geri dönüp özelliği test edin. @tvguide What is on MTV? yazın. Benzer bir yanıt görmeniz gerekir.
7. Tebrikler
Dialogflow ile ilk Google Chat botunuzu oluşturdunuz.
Yapabilecekleriniz
Bu kod laboratuvarını beğendiniz mi? Bu harika laboratuvarlara göz atın.