1. Introducción
Ahora que compilaste 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 interactivas y dinámicas para esta plataforma y a realizar varias integraciones.
Qué compilarás
Crearemos 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 compilar 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 ID del proyecto y, luego, haz clic en Google Cloud
.
- En la consola de Google Cloud, haz clic en el menú de navegación ⁕ > APIs y Servicios > Biblioteca.
- Busca “API de Google Chat”, Luego, haz clic en Habilitar para usar la API en tu proyecto de Google Cloud.
- Ahora configuraremos tu app de Google Chat. 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 propagando las opciones de configuración.
- Cambia el campo de la 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 la app de Google Chat para los mensajes directos y los 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 entregar contenido en varias plataformas, puedes navegar a la página Integraciones en la consola de Dialogflow para habilitarlas.
3. Probar en Google Chat
Ahora que ya configuraste la app de Google Chat, vamos a agregarla a un espacio de chat y probarla. 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 integraste en Google Chat con solo escribir @tvguide en el espacio. Escribe @tvguide hello para probarlo.
A continuación, usaremos las personalizaciones en Google Chat para agregar respuestas 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 completa compilada por diferentes widgets, como imágenes, botones, etc. Ahora que conectamos tu agente de Dialogflow a una app de Google Chat, solo debes mostrar el JSON en el formato correcto para que se muestre en Google Chat en tu código de entrega. 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?"
}
A continuación, se muestra una respuesta de tarjeta de ejemplo con widgets:
{
"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 personalizadas y tarjetas de chat
Las cargas útiles personalizadas en Dialogflow permiten mensajes de respuesta enriquecida específicos de la plataforma. Aquí es donde agregaremos nuestras tarjetas JSON de Hangouts Chat para que el agente las envíe al usuario.
Comencemos por agregar una tarjeta básica para el intent de bienvenida. En la consola de Dialogflow, navega al intent de bienvenida predeterminado y desplázate hacia abajo hasta la sección de respuestas.
Haz clic en Google Chat y anula la selección de Use answers from the DEFAULT tab as the first responses. Luego, haz clic en ADD RESPONSES > Carga útil personalizada.
Verás un esqueleto JSON.
Copia y pega el siguiente código a continuación. 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?"
}
}
]
}
]
}
}
Haz clic en 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 hello".
A continuación, agregaremos una carga útil personalizada en el código de entrega para 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 Formato de mensajes. En la próxima sección, agregaremos tarjetas.
6. Cómo agregar una tarjeta en Fulfillment
Ahora, crearemos una tarjeta con widgets para mostrar las listas de canales de TV. Agreguemos una función llamada getGoogleCard en la que renderizaremos la información resultante de la ficha. Usaremos keyValue y widgets de botón 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 el channelHandler de la función, 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);
}
}
Toma nota del código de la parte inferior donde se agrega la respuesta. Si la fuente de la solicitud del agente se identifica como esta plataforma, construimos la carga útil JSON con la etiqueta "hangouts". Esto es importante para pasar correctamente la carga útil en la entrega.
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.