1. Wprowadzenie
W poprzednich ćwiczeniach z programowania utworzyliśmy chatbota Dialogflow do przewodnika po programach telewizyjnych. Teraz pokażemy Ci, jak rozszerzyć go o Google Chat. Dowiesz się, jak tworzyć dynamiczne, interaktywne karty na tej platformie i korzystać z wielu integracji.
Co utworzysz
Utworzymy chatbota Dialogflow, który będzie mógł odpowiadać w domenie Google Workspace za pomocą dostosowywanych odpowiedzi.
Czego się nauczysz
- Jak wdrożyć i skonfigurować aplikację Google Chat
- Jak tworzyć karty wyświetlania w Google Chat
- Jak tworzyć niestandardowe ładunki w ramach realizacji w Dialogflow
Czego potrzebujesz
- Ukończ pierwsze ćwiczenie z tej 2-częściowej serii.
- przeglądarka internetowa i adres e-mail do logowania się w konsoli Dialogflow;
- czat włączony w domenie Google Workspace,
2. Włączanie i konfigurowanie Google Chat
Zaczniemy od agenta Dialogflow utworzonego w poprzednich ćwiczeniach.
- W konsoli Dialogflow kliknij
. - Na karcie Ogólne przewiń do opcji Identyfikator projektu i kliknij Google Cloud
.
- W konsoli Google Cloud kliknij Menu nawigacyjne ☰ > Interfejsy API i usługi > Biblioteka.
- Wyszukaj „Google Chat API”, a następnie kliknij Włącz, aby używać interfejsu API w projekcie Google Cloud.
- Teraz skonfigurujemy aplikację Google Chat. Otwórz stronę Konfiguracja interfejsu API. Pamiętaj, że każdy projekt GCP może mieć co najwyżej 1 aplikację Google Chat.
- Pola Dialogflow powinny wypełniać opcje konfiguracji.
- Zmień pole URL awatara na ten obraz telewizora:
[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) - Włączanie aplikacji do obsługi czatu Google Chat zarówno w przypadku czatów, jak i pokoi
Kliknij Zapisz i zamknij Cloud Console.
Dodatkowo integracje Dialogflow. Google Chat jest domyślnie włączony, ale jeśli chcesz obsługiwać wiele platform, możesz włączyć je na stronie Integracje w konsoli Dialogflow.
3. Testowanie w Google Chat
Aplikacja do Google Chat jest już skonfigurowana, więc dodajmy ją do pokoju czatu i przetestujmy. Otwórz Google Chat i utwórz testowy pokój czatu. W prawym górnym rogu pokoju kliknij menu i wybierz Dodaj osoby i aplikacje.
Wyszukaj tvguide i dodaj aplikację Google Chat do pokoju.
Możesz teraz korzystać z aplikacji Google Chat, którą masz już w Google Chat, wpisując w pokoju @tvguide. Wpisz @tvguide hello, aby wypróbować tę funkcję.
Następnie użyjemy dostosowań w Google Chat, aby dodać bardziej rozbudowane odpowiedzi.
4. Niestandardowe karty Google Chat
W Google Chat możesz skonfigurować aplikację do obsługi czatu tak, aby zwracała użytkownikowi podstawową odpowiedź tekstową lub odpowiedź w formie karty, która umożliwia korzystanie z bogatszego interfejsu zbudowanego z różnych widżetów, w tym obrazów, przycisków itp. Po połączeniu agenta Dialogflow z aplikacją Google Chat wystarczy, że w kodzie realizacji zwrócisz JSON w odpowiednim formacie, aby wyświetlić go w Google Chat. Przyjrzyjmy się kilku przykładom JSON.
Podstawowa odpowiedź tekstowa wygląda tak:
{
"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?"
}
Przykładowa odpowiedź karty z widgetami wygląda tak:
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. Niestandardowe ładunki i karty czatu
Niestandardowe ładunki w Dialogflow umożliwiają wysyłanie bogatych wiadomości z odpowiedzią na konkretnej platformie. W tym miejscu dodamy karty JSON Hangouts Chat, które będą zwracane użytkownikowi przez agenta.
Zacznijmy od dodania podstawowej karty dla intencji powitalnej. W konsoli Dialogflow otwórz domyślny zamiar powitania i przewiń w dół do sekcji odpowiedzi.
Kliknij Google Chat i odznacz Use responses from the DEFAULT tab as the first responses (Używaj odpowiedzi z karty DOMYŚLNE jako pierwszych odpowiedzi), a potem kliknij ADD RESPONSES > Custom Payload (DODAJ ODPOWIEDZI > Niestandardowy ładunek).
Zobaczysz szkielet JSON.
Skopiuj i wklej poniższy kod. Skonfigurowaliśmy kartę z widżetem 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?"
}
}
]
}
]
}
}
Kliknij Zapisz, a potem przejdź do testowego pokoju czatu, aby sprawdzić, czy karta została wyrenderowana. W pokoju czatu wpisz „@tvguide hello”.
Następnie dodamy do kodu realizacji niestandardowy ładunek, aby móc dynamicznie generować treść za pomocą naszego kodu.
Więcej informacji o kartach znajdziesz w dokumentacji formatu wiadomości. W kolejnej sekcji dodamy karty.
6. Dodawanie karty w procesie realizacji
Teraz utworzymy kartę z widżetami, która będzie wyświetlać program telewizyjny. Dodajmy funkcję o nazwie getGoogleCard, w której będziemy renderować informacje o wynikach wyszukiwania. Do utworzenia odpowiedzi w postaci karty użyjemy widżetów keyValue i button.
Dodaj poniższą funkcję na końcu kodu w pliku index.js.
/**
* 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]},
}
};
}
}
Teraz musimy wywołać tę metodę, aby agent mógł uzyskać odpowiedź i odesłać ją do użytkownika. W funkcji channelHandler zastąp zawartość funkcji kodem podanym poniżej.
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);
}
}
Zwróć uwagę na kod u dołu, w którym dodano odpowiedź. Jeśli źródło żądania agenta zostanie zidentyfikowane jako ta platforma, utworzymy ładunek JSON z tagiem „hangouts”. Jest to ważne, aby prawidłowo przekazać ładunek w procesie realizacji.
Teraz wróć do pokoju czatu i przetestuj tę funkcję. Wpisz @tvguide What is on MTV?. Powinna wyświetlić się podobna odpowiedź.
7. Gratulacje
Udało Ci się utworzyć pierwszego bota do Google Chat za pomocą Dialogflow.
Co dalej?
Podobało Ci się to laboratorium? Zapoznaj się z tymi świetnymi laboratoriami.