1. Introduzione
Ora che hai creato un chatbot Dialogflow per una guida TV nel codelab precedente, ti mostreremo come estenderlo a Google Chat. Imparerai a creare schede dinamiche e interattive per questa piattaforma e a eseguire più integrazioni.
Cosa creerai
Creeremo un chatbot Dialogflow in grado di rispondere nel tuo dominio Google Workspace con risposte personalizzabili.
Cosa imparerai a fare
- Come eseguire il deployment e configurare un'app Google Chat
- Come creare schede di visualizzazione in Google Chat
- Come creare payload personalizzati nell'evasione di Dialogflow
Che cosa ti serve
- Completa il primo codelab di questa serie in due parti.
- Un browser web e un indirizzo email per accedere alla console Dialogflow
- Chat abilitata nel tuo dominio Google Workspace
2. Attivare e configurare Google Chat
Inizieremo con l'agente Dialogflow che hai creato nei codelab precedenti.
- Nella console di Dialogflow, fai clic su
. - Nella scheda Generali, scorri fino a ID progetto, quindi fai clic su Google Cloud
.
- Nella console Google Cloud, fai clic sul menu di navigazione ☰ > API e servizi > Libreria.
- Cerca "API Google Chat", quindi fai clic su Abilita per utilizzare l'API nel tuo progetto Google Cloud.
- Ora configureremo la tua app Google Chat. Vai alla pagina Configurazione dell'API. Tieni presente che ogni progetto GCP può avere al massimo un'app Google Chat.
- Dovresti vedere i campi di Dialogflow che compilano le opzioni di configurazione.
- Modifica il campo URL avatar con questa immagine della TV:
[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) - Attiva l'app Google Chat sia per i messaggi diretti che per gli spazi
Fai clic su Salva ed esci da Cloud Console.
Inoltre, integrazioni di Dialogflow. Google Chat è abilitato per impostazione predefinita, ma se vuoi pubblicare su più piattaforme, puoi andare alla pagina Integrazioni nella console Dialogflow per abilitarle.
3. Test in Google Chat
Ora che la tua app Google Chat è configurata, aggiungiamola a uno spazio di chat e testiamola. Apri Google Chat e crea uno spazio di chat di test. Nell'angolo in alto a destra dello spazio, fai clic sul menu a discesa e seleziona Aggiungi persone e app.
Cerca tvguide e aggiungi l'app Google Chat allo spazio.
Ora puoi interagire con l'app Google Chat già integrata in Google Chat semplicemente digitando @tvguide nello spazio. Digita @tvguide hello per provarlo.
Successivamente, utilizzeremo le personalizzazioni in Google Chat per aggiungere risposte più ricche.
4. Schede Google Chat personalizzate
Con Google Chat, puoi fare in modo che la tua app restituisca all'utente una risposta di testo di base o una risposta a scheda, che ti consente di avere un'interfaccia più ricca creata da diversi widget, tra cui immagini, pulsanti e così via. Ora che hai collegato il tuo agente Dialogflow a un'app Google Chat, devi semplicemente restituire il JSON nel formato corretto da visualizzare in Google Chat nel codice di fulfillment. Vediamo alcuni esempi di JSON.
La risposta di testo di base è simile alla seguente:
{
"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?"
}
Una risposta di esempio della scheda con i widget è simile alla seguente:
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. Payload personalizzati e schede di chat
I payload personalizzati in Dialogflow consentono messaggi di risposta avanzata specifici per la piattaforma. Qui aggiungeremo le schede JSON di Hangouts Chat che verranno restituite all'utente dall'agente.
Iniziamo aggiungendo una scheda di base per l'intent di benvenuto. Nella console Dialogflow, vai all'intent di benvenuto predefinito e scorri verso il basso fino alla sezione delle risposte.
Fai clic su Google Chat e deseleziona Usa le risposte della scheda PREDEFINITA come prime risposte, poi AGGIUNGI RISPOSTE > Payload personalizzato.
Verrà visualizzato uno scheletro JSON.
Copia e incolla il seguente codice. Abbiamo configurato una scheda con un 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?"
}
}
]
}
]
}
}
Fai clic su Salva, quindi vai allo spazio di chat di test per vedere il rendering di questa scheda. Nello spazio di chat, digita "@tvguide hello" (ciao).
Successivamente, aggiungeremo un payload personalizzato nel codice di fulfillment in modo da poter generare dinamicamente i contenuti con il nostro codice.
Per saperne di più sulle schede, consulta la documentazione sul formato dei messaggi. Nella sezione successiva aggiungeremo le schede.
6. Aggiunta di una carta nell'evasione
Ora creeremo una scheda con widget per mostrare i programmi TV. Aggiungiamo una funzione chiamata getGoogleCard in cui eseguiremo il rendering delle informazioni della scheda risultanti. Utilizzeremo i widget keyValue e pulsante per creare la risposta della scheda.
Aggiungi la funzione riportata di seguito al tuo codice in index.js in fondo.
/**
* 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]},
}
};
}
}
Ora dobbiamo chiamare questo metodo in modo che l'agente possa ottenere la risposta da inviare all'utente. Nella funzione channelHandler, sostituisci i contenuti della funzione con il codice riportato di seguito.
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);
}
}
Prendi nota del codice in basso, dove viene aggiunta la risposta. Se l'origine della richiesta dell'agente viene identificata come questa piattaforma, creiamo il payload JSON con il tag "hangouts". Questo è importante per restituire correttamente il payload nell'evasione.
Ora torna al tuo spazio di chat e prova. Digita @tvguide What is on MTV? Dovresti visualizzare una risposta simile.
7. Complimenti
Hai creato il tuo primo bot di Google Chat con Dialogflow.
Passaggi successivi
Ti è piaciuto questo codelab? Dai un'occhiata a questi fantastici lab.