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 dinamis dan interaktif untuk platform ini serta memiliki beberapa integrasi.
Yang akan Anda buat
Kita akan membuat 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 membuat payload kustom dalam fulfillment Dialogflow
Yang Anda butuhkan
- Selesaikan codelab pertama dalam seri 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 memulai dengan Agen Dialogflow yang telah Anda buat di codelab sebelumnya.
- Di konsol Dialogflow, klik
. - Di tab Umum, scroll ke Project ID, lalu klik Google Cloud
.
- Di Konsol Google Cloud, klik Navigation menu ☰ > APIs & Services > Library.
- Telusuri "Google Chat API", lalu klik Aktifkan 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 Avatar URL 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 Anda untuk pesan langsung dan ruang
Klik Simpan dan keluar dari Konsol Cloud.
Selain itu, Integrasi Dialogflow. Google Chat diaktifkan secara default, tetapi jika Anda ingin menayangkan beberapa platform, Anda dapat membuka halaman Integrasi di Konsol Dialogflow untuk mengaktifkannya.
3. Menguji di Google Chat
Setelah aplikasi Google Chat Anda dikonfigurasi, mari tambahkan ke ruang chat dan uji. Buka Google Chat dan buat ruang chat uji. Di pojok kanan atas ruang, klik drop-down dan pilih Tambahkan orang & aplikasi.
Telusuri tvguide dan tambahkan aplikasi Google Chat ke ruang.
Sekarang Anda dapat berinteraksi dengan aplikasi Google Chat yang telah Anda buat 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 kaya.
4. Kartu Google Chat Kustom
Dengan Google Chat, Anda dapat membuat aplikasi menampilkan Respons Teks dasar atau Respons Kartu kepada pengguna yang memungkinkan Anda membuat antarmuka yang lebih kaya dengan berbagai widget, termasuk gambar, tombol, dll. Setelah menghubungkan Agen Dialogflow ke aplikasi Google Chat, Anda cukup menampilkan JSON dalam format yang benar untuk ditampilkan di Google Chat dalam kode pemenuhan. Mari kita lihat beberapa contoh JSON.
Respons teks dasar akan terlihat seperti:
{
"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 multimedia khusus platform. Di sinilah kita akan menambahkan kartu JSON Hangout Chat yang akan ditampilkan kembali kepada pengguna oleh agen.
Mari kita mulai dengan menambahkan kartu dasar untuk maksud sambutan. Di Konsol Dialogflow, buka Default Welcome Intent, lalu scroll ke bawah ke bagian respons.
Klik Google Chat dan batalkan pilihan Gunakan respons dari tab DEFAULT sebagai respons pertama, lalu ADD RESPONSES > Custom Payload.
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?"
}
}
]
}
]
}
}
Tekan Simpan, lalu buka ruang chat pengujian Anda untuk melihat apakah kartu ini dirender. Di ruang chat, ketik '@tvguide hello'
Selanjutnya, kita akan menambahkan payload kustom dalam kode pemenuhan agar kita dapat 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 daftar acara TV. Mari kita tambahkan fungsi bernama getGoogleCard tempat kita akan merender informasi listingan yang dihasilkan. Kita akan menggunakan widget keyValue dan button untuk membuat respons kartu.
Tambahkan fungsi di bawah 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 agar agen dapat memperoleh respons untuk dikirim kembali kepada pengguna. Di channelHandler fungsi, ganti konten fungsi dengan kode di bawah.
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);
}
}
Perhatikan kode di bagian bawah tempat respons ditambahkan. Jika sumber permintaan agen diidentifikasi sebagai platform ini, kita akan membuat payload JSON dengan tag'hangouts'. Hal ini penting untuk meneruskan kembali payload dengan benar dalam pemenuhan.
Sekarang, kembali ke ruang chat Anda dan coba. Ketik @tvguide What is on MTV?. Anda akan melihat respons yang serupa.
7. Selamat
Anda telah membuat bot Google Chat pertama dengan Dialogflow.
Apa selanjutnya?
Menyukai lab kode ini? Lihat lab menarik ini.