1. Pengantar
Setelah Anda membuat chatbot Dialogflow untuk Panduan TV di codelab sebelumnya, kami akan menunjukkan cara memperluasnya ke Google Chat. Anda akan mempelajari cara membuat kartu yang dinamis dan interaktif untuk platform ini dan memiliki beberapa integrasi.
Yang akan Anda buat
Kami akan membangun chatbot Dialogflow yang dapat merespons di domain Google Workspace Anda dengan respons yang dapat disesuaikan.
Yang akan Anda pelajari
- Cara men-deploy dan mengonfigurasi aplikasi Google Chat
- Cara membuat kartu tampilan di Google Chat
- Cara membangun payload kustom dalam fulfillment Dialogflow
Yang Anda butuhkan
- Selesaikan codelab pertama dalam seri yang terdiri atas 2 bagian ini.
- Browser web dan alamat email untuk login ke konsol Dialogflow
- Chat diaktifkan di domain Google Workspace Anda
2. Mengaktifkan dan Mengonfigurasi Google Chat
Kita akan mulai dengan Agen Dialogflow yang telah Anda buat di codelab sebelumnya.
- Di Konsol Dialogflow, klik
. - Di tab General, scroll ke Project ID, lalu klik Google Cloud
.
- Di Konsol Google Cloud, klik Navigation menu try > API & Layanan > Koleksi.
- Telusuri "Google Chat API", lalu klik Enable untuk menggunakan API di project Google Cloud Anda.
- Sekarang kita akan mengonfigurasi aplikasi Google Chat Anda, buka halaman Configuration untuk API. Perhatikan bahwa setiap project GCP dapat memiliki maksimal satu aplikasi Google Chat.
- Anda akan melihat kolom Dialogflow yang mengisi opsi konfigurasi.
- Ubah kolom URL Avatar ke gambar TV ini:
[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) - Mengaktifkan aplikasi Google Chat untuk pesan langsung dan ruang
Klik Save dan keluar dari Cloud Console.
Selain itu, Integrasi Dialogflow. Google Chat diaktifkan secara default. Namun, jika Anda ingin melayani beberapa platform, Anda dapat membuka halaman Integrations di Konsol Dialogflow untuk mengaktifkannya.
3. Menguji di Google Chat
Setelah aplikasi Google Chat Anda dikonfigurasi, mari kita menambahkannya ke ruang chat dan mengujinya. Buka Google Chat dan buat ruang chat uji coba. Di pojok kanan atas ruang, klik menu drop-down, lalu pilih Tambahkan orang & aplikasi.
Telusuri tvguide dan tambahkan aplikasi Google Chat ke ruang.
Kini Anda dapat berinteraksi dengan aplikasi Google Chat yang telah disertakan di Google Chat hanya dengan mengetik @tvguide di ruang. Ketik @tvguide hello untuk mengujinya.
Selanjutnya, kita akan menggunakan penyesuaian di Google Chat untuk menambahkan respons yang lebih beragam.
4. Kartu Google Chat kustom
Dengan Google Chat, Anda dapat meminta aplikasi menampilkan kepada pengguna Respons Teks atau Respons Kartu dasar yang memungkinkan Anda membuat antarmuka yang lebih kaya yang dibuat oleh berbagai widget termasuk gambar, tombol, dll. Setelah menghubungkan Agen Dialogflow Anda ke aplikasi Google Chat, Anda hanya perlu mengembalikan JSON dalam format yang benar untuk ditampilkan di Google Chat dalam kode fulfillment Anda. Mari kita lihat beberapa contoh JSON.
Respons teks dasar terlihat seperti ini:
{
"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?"
}
Contoh respons kartu dengan widget akan terlihat seperti ini:
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. Payload Kustom dan Kartu Chat
Payload kustom di Dialogflow memungkinkan pesan respons lengkap khusus platform. Di sinilah kita akan menambahkan kartu JSON Hangout Chat tempat kartu tersebut akan ditampilkan kembali kepada pengguna oleh agen.
Mari kita mulai dengan menambahkan kartu dasar untuk intent sambutan. Di Konsol Dialogflow, arahkan ke Default Welcome Intent dan scroll ke bawah ke bagian response.
Klik Google Chat dan hapus pilihan Gunakan respons dari tab DEFAULT sebagai respons pertama, lalu TAMBAHKAN RESPONS > Payload Kustom.
Anda akan melihat kerangka JSON.
Salin dan tempel kode berikut di bawah. Kita telah menyiapkan kartu dengan widget TextParagraph.
{
"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?"
}
}
]
}
]
}
}
Klik Simpan, lalu buka ruang chat uji coba Anda untuk melihat kartu ini dirender. Di ruang chat, ketik ‘@tvguide hello'
Selanjutnya, kita akan menambahkan payload kustom dalam kode penyelesaian sehingga kita bisa membuat konten secara dinamis dengan kode kita.
Untuk mempelajari kartu lebih lanjut, lihat dokumentasi Format Pesan. Di bagian berikutnya, kita akan menambahkan kartu.
6. Menambahkan Kartu dalam Pemenuhan
Sekarang kita akan membuat kartu dengan widget untuk menampilkan listingan TV. Mari tambahkan fungsi bernama getGoogleCard tempat kita akan merender informasi listingan yang dihasilkan. Kita akan menggunakan keyValue dan widget tombol untuk membuat respons kartu.
Tambahkan fungsi di bawah ini ke kode Anda di index.js di bagian bawah.
/**
* 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]},
}
};
}
}
Sekarang kita perlu memanggil metode ini sehingga agen bisa mendapatkan respons untuk dikirim kembali ke pengguna. Di fungsi channelHandler, ganti konten fungsi dengan kode di bawah ini.
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);
}
}
Catat kode di bagian bawah tempat respons ditambahkan. Jika sumber permintaan agen diidentifikasi sebagai platform ini, kami akan membuat payload JSON dengan tag 'hangouts'. Hal ini penting untuk meneruskan kembali payload dalam fulfillment dengan benar.
Sekarang kembali ke ruang chat Anda dan cobalah. Ketik @tvguide What is on MTV?. Anda akan melihat respons yang serupa.
7. Selamat
Anda telah membuat bot Google Chat pertama Anda dengan Dialogflow.
Apa selanjutnya?
Suka dengan codelab ini? Lihatlah lab-lab hebat ini!