1. Introducción
Ahora que creaste un chatbot de Dialogflow para una guía de TV en el codelab anterior, te mostraremos cómo extenderlo a Google Chat. Aprenderás a crear tarjetas dinámicas e interactivas para esta plataforma y a realizar varias integraciones.
Qué compilarás
Compilaremos un chatbot de Dialogflow que pueda responder en tu dominio de Google Workspace con respuestas personalizables.
Qué aprenderás
- Cómo implementar y configurar una app de Google Chat
- Cómo crear tarjetas de visualización en Google Chat
- Cómo crear cargas útiles personalizadas en la entrega de Dialogflow
Requisitos
- Completa el primer codelab de esta serie de 2 partes.
- Un navegador web y una dirección de correo electrónico para acceder a la consola de Dialogflow
- Chat habilitado en tu dominio de Google Workspace
2. Habilita y configura Google Chat
Comenzaremos con el agente de Dialogflow que creaste en los codelabs anteriores.
- En la consola de Dialogflow, haz clic en
. - En la pestaña General, desplázate hasta Project ID y, luego, haz clic en Google Cloud
.
- En la consola de Google Cloud, haz clic en Menú de navegación ☰ > APIs y servicios > Biblioteca.
- Busca "API de Google Chat" y, luego, haz clic en Habilitar para usar la API en tu proyecto de Google Cloud.
- Ahora configuraremos tu app de Google Chat. Para ello, navega a la página Configuración de la API. Ten en cuenta que cada proyecto de GCP puede tener como máximo una app de Google Chat.
- Deberías ver los campos de Dialogflow que completan las opciones de configuración.
- Cambia el campo URL del avatar a esta imagen de 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) - Habilita tu app de Google Chat para mensajes directos y espacios
Haz clic en Guardar y sal de la consola de Cloud.
Además, integraciones de Dialogflow Google Chat está habilitado de forma predeterminada, pero, si deseas publicar tu agente en varias plataformas, puedes navegar a la página Integraciones en la consola de Dialogflow para habilitarlas.
3. Prueba en Google Chat
Ahora que tu app de Google Chat está configurada, agreguémosla a un espacio de chat y probémosla. Abre Google Chat y crea un espacio de chat de prueba. En la esquina superior derecha del espacio, haz clic en el menú desplegable y selecciona Agregar personas y apps.
Busca tvguide y agrega la app de Google Chat al espacio.
Ahora puedes interactuar con la app de Google Chat que ya compilaste en Google Chat. Para ello, solo debes escribir @tvguide en el espacio. Escribe @tvguide hello para probarlo.
A continuación, usaremos las personalizaciones en Google Chat para agregar respuestas más enriquecidas.
4. Tarjetas personalizadas de Google Chat
Con Google Chat, puedes hacer que tu app le muestre al usuario una respuesta de texto básica o una respuesta de tarjeta, lo que te permite tener una interfaz más enriquecida creada por diferentes widgets, como imágenes, botones, etcétera. Ahora que conectamos tu agente de Dialogflow a una app de Google Chat, solo debes devolver el JSON en el formato correcto para que se muestre en Google Chat en tu código de cumplimiento. Veamos algunos ejemplos de JSON.
La respuesta de texto básica se ve de la siguiente manera:
{
"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 ejemplo de respuesta con tarjeta y widgets se ve de la siguiente manera:
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. Cargas útiles y tarjetas de chat personalizadas
Las cargas útiles personalizadas en Dialogflow permiten mensajes de respuesta enriquecida específicos de la plataforma. Aquí agregaremos nuestras tarjetas JSON de Hangouts Chat, que el agente mostrará al usuario.
Comencemos por agregar una tarjeta básica para la intención de bienvenida. En la consola de Dialogflow, navega a la intención de bienvenida predeterminada y desplázate hacia abajo hasta la sección de respuestas.
Haz clic en Google Chat y desmarca Use responses from the DEFAULT tab as the first responses y, luego, ADD RESPONSES > Custom Payload.
Verás un esqueleto JSON.
Copia y pega el siguiente código. Configuramos una tarjeta 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?"
}
}
]
}
]
}
}
Presiona Guardar y, luego, ve a tu espacio de chat de prueba para ver cómo se renderiza esta tarjeta. En el espacio de chat, escribe “@tvguide hola”.
A continuación, agregaremos una carga útil personalizada en el código de cumplimiento para poder generar el contenido de forma dinámica con nuestro código.
Para obtener más información sobre las tarjetas, consulta la documentación sobre el formato de mensajes. En la siguiente sección, agregaremos tarjetas.
6. Cómo agregar una tarjeta en Fulfillment
Ahora crearemos una tarjeta con widgets para mostrar la programación de TV. Agreguemos una función llamada getGoogleCard en la que renderizaremos la información del fichaje resultante. Usaremos widgets de keyValue y button para construir la respuesta de la tarjeta.
Agrega la siguiente función a tu código en index.js en la parte inferior.
/**
* 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]},
}
};
}
}
Ahora debemos llamar a este método para que el agente pueda obtener la respuesta y enviársela al usuario. En la función channelHandler, reemplaza el contenido de la función por el siguiente código.
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);
}
}
Ten en cuenta el código en la parte inferior, donde se agrega la respuesta. Si la fuente de la solicitud del agente se identifica como esta plataforma, creamos la carga útil JSON con la etiqueta "hangouts". Esto es importante para devolver correctamente la carga útil en el cumplimiento.
Ahora, regresa a tu espacio de chat y pruébalo. Tipo @tvguide What is on MTV?. Deberías ver una respuesta similar.
7. Felicitaciones
¡Creaste tu primer bot de Google Chat con Dialogflow!
¿Qué sigue?
¿Te gustó este codelab? Echa un vistazo a estos excelentes labs.