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 ad avere 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 implementare e configurare un'app Google Chat
- Come creare schede display in Google Chat
- Come creare payload personalizzati nel fulfillment 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. Abilitare e configurare Google Chat
Inizieremo con l'agente Dialogflow che hai creato nei codelab precedenti.
- Nella console di Dialogflow, fai clic su
. - Nella scheda Generale, scorri fino a ID progetto, quindi fai clic su Google Cloud
.
- Nella console Google Cloud, fai clic sul menu di navigazione Џ > API e Servizi > Raccolta.
- Cerca "API Google Chat" e fai clic su Abilita per utilizzare l'API nel tuo progetto Google Cloud.
- Ora configuriamo l'app Google Chat. Vai alla pagina Configurazione per l'API. Tieni presente che ogni progetto Google Cloud può avere al massimo un'app Google Chat.
- Dovresti vedere i campi di Dialogflow che completano le opzioni di configurazione.
- Modifica il campo URL avatar con questa immagine 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 sia per gli spazi
Fai clic su Salva ed esci dalla console Cloud.
Inoltre, le integrazioni di Dialogflow. Google Chat è abilitato per impostazione predefinita, ma se vuoi gestire più piattaforme, puoi andare alla pagina Integrazioni nella console Dialogflow per abilitarle.
3. Esegui un test in Google Chat
Ora che l'app Google Chat è configurata, aggiungila a uno spazio di Chat per testarla. Apri Google Chat e crea uno spazio di Chat di prova. Nell'angolo in alto a destra dello spazio, fai clic sul menu a discesa e seleziona Aggiungi persone e Google Cloud.
Cerca tvguide e aggiungi l'app Google Chat allo spazio.
Ora puoi interagire con l'app Google Chat che hai già integrato in Google Chat digitando @tvguide nello spazio. Digita @tvguide hello per provarlo.
Dopodiché utilizzeremo le personalizzazioni di Google Chat per aggiungere risposte più complete.
4. Schede Google Chat personalizzate
Con Google Chat, puoi fare in modo che l'app restituisca all'utente una risposta di testo di base o una risposta a una scheda che ti offre un'interfaccia più ricca creata da diversi widget, tra cui immagini, pulsanti e così via. Ora che abbiamo collegato l'agente Dialogflow a un'app Google Chat, devi semplicemente restituire il file JSON nel formato corretto da visualizzare in Google Chat nel tuo codice di evasione degli ordini. Vediamo alcuni esempi JSON.
La risposta di testo di base è simile a questa:
{
"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?"
}
Un esempio di risposta di una scheda con widget ha questo aspetto:
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. Payload e schede chat personalizzati
Payload personalizzati in Dialogflow consentono messaggi di risposta avanzati specifici della piattaforma. Qui aggiungeremo le nostre schede JSON di Hangouts Chat, che verranno mostrate all'utente dall'agente.
Inizia 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 Utilizza le risposte della scheda PREDEFINITE come prime risposte, quindi AGGIUNGI RISPOSTE > Payload personalizzato.
Verrà visualizzato uno scheletro in formato JSON.
Copia e incolla il codice riportato di seguito. 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 accediamo allo spazio della chat di prova per vedere che la scheda è stata visualizzata. Nello spazio di Chat, digita "@tvguide hello"
Successivamente aggiungeremo un payload personalizzato nel codice di fulfillment in modo da poter generare dinamicamente il contenuto con il nostro codice.
Per ulteriori informazioni sulle schede, consulta la documentazione sul formato dei messaggi. Nella sezione successiva aggiungeremo le schede.
6. Aggiunta di una carta in Fulfillment
Ora creeremo una scheda con widget per mostrare gli elenchi TV. Aggiungiamo una funzione chiamata getGoogleCard in cui eseguiremo il rendering delle informazioni dell'elenco risultanti. Utilizzeremo i valori-chiave e i widget dei pulsanti per creare la risposta della scheda.
Aggiungi la funzione seguente al codice in index.js in basso.
/**
* 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 channelGestori, sostituisci i contenuti della funzione con il codice seguente.
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);
}
}
Annota il codice nella parte inferiore in cui viene aggiunta la risposta. Se l'origine della richiesta dell'agente è identificata come questa piattaforma, costruiamo il payload JSON con il tag "hangouts". Questo è importante per ritrasmettere correttamente il payload in fulfillment.
Ora torna al tuo spazio di Chat e testalo. Digita @tvguide What is on MTV?. Dovresti vedere 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!