Integra Dialogflow en Google Chat

1. Antes de comenzar

En este codelab, aprenderás cómo Dialogflow se conecta con las APIs de Google Workspace para crear un programador de citas completamente funcional con Calendario de Google y respuestas dinámicas en Google Chat.

Si aún no tienes la configuración de los codelabs anteriores o te sientes seguro con Dialogflow y el cumplimiento, puedes descargar el código de partida y la configuración del agente desde aquí.

https://github.com/googleworkspace/appointment-scheduler-codelab

Requisitos previos

Antes de continuar, debes completar los siguientes codelabs:

También debes comprender los conceptos básicos y las construcciones de Dialogflow, que puedes obtener de los siguientes videos que se encuentran en la ruta de aprendizaje Crea un chatbot con Dialogflow.

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

Qué compilarás

Integración entre Dialogflow, Google Chat y Calendario
(Opcional) Integra Google Maps para obtener tarjetas más enriquecidas

Requisitos

Un navegador web y una dirección de correo electrónico para acceder a la consola de Dialogflow
Calendario y Google Chat habilitados 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 Chat. Para ello, navega a la página Configuration de la API. Ten en cuenta que cada proyecto de GCP puede tener como máximo una app de Chat.

Deberías ver los campos de Dialogflow que completan las opciones de configuración.
Cambia el campo URL del avatar a la siguiente imagen de automóvil: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
Para habilitar tu app de Chat tanto para mensajes directos como para espacios, selecciona La app puede recibir mensajes directamente y La app funciona en espacios con varios usuarios.

Haz clic en Guardar y sal de la consola de Cloud.

3. Integraciones adicionales en Dialogflow

Google Chat está habilitado de forma predeterminada, pero, si quieres que un bot funcione en varias plataformas, puedes navegar a la página Integraciones en la consola de Dialogflow para habilitarlas.

4. Prueba en Google Chat

Ahora que configuraste tu app de Chat, agreguémosla a un espacio de Chat y probémosla. Abre Google Chat y crea un espacio de prueba.

En la esquina superior derecha del espacio, haz clic en el menú desplegable y selecciona Agregar personas y apps.
Busca AppointmentScheduler y agrega la app al espacio.
Ahora puedes interactuar con la app que ya creaste en Google simplemente escribiendo @AppointmentScheduler en el espacio.

Pruébalo en esta plataforma con la misma entrada de los codelabs anteriores:

Usuario: "@AppointmentScheduler Establece una cita para el registro del vehículo mañana a las 2 p.m.".
App de chat: "De acuerdo. Veamos si podemos incluirte. El 24 de abril a las 2 p.m. está bien".

A continuación, usaremos las personalizaciones en Google Chat para agregar respuestas más enriquecidas.

5. 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 en tu código de cumplimiento. Veamos algunos ejemplos de JSON.

La respuesta de texto básica se ve de la siguiente manera:

 {
  "text": "Your pizza delivery is here!"
}

Un ejemplo de respuesta con tarjeta y widgets se ve de la siguiente manera:

{
  "cards": [
    {
      "sections": [
        {
          "widgets": [
            {
              "image": { "imageUrl": "https://..." }
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "OPEN IN GOOGLE MAPS",
                    "onClick": {
                      "openLink": {
                        "url": "https://..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

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 a nuestra app de Chat.

6. 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": "Appointment Scheduler"
   },
   "sections": [
     {
       "widgets": [
         {
           "textParagraph": {
             "text": "Welcome, I am the scheduler agent. Please request an appointment type and time."
           }
         }
       ]
     }
   ]
 }
}

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 “@AppointmentScheduler 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.

7. Cómo agregar una tarjeta en Fulfillment

Ahora crearemos una tarjeta con varios widgets para mostrar una cita programada. Agreguemos una función llamada getGoogleChatCard en la que renderizaremos las entradas: appointmentType, date y time.

Agrega la siguiente función a tu código en index.js en la parte inferior.

function getGoogleChatCard(appointmentType, date, time) {
   const cardHeader = {
     title: 'Appointment Confirmation',
     subtitle: appointmentType,
     imageUrl: ICON_IMAGE_URL,
     imageStyle: 'IMAGE',
   };
    const dateWidget = {
     keyValue: {
       content: 'Date',
       bottomLabel: date,
     },
   };
    const timeWidget = {
     keyValue: {
       content: 'Time',
       bottomLabel: time,
     },
   };

    const buttonWidget = {
     buttons: [
       {
         textButton: {
           text: 'View Appointment',
           onClick: {
             openLink: {
               url: CALENDAR_URL,
             },
           },
         },
       },
     ],
   };
    const infoSection = {widgets: [dateWidget, timeWidget,
     buttonWidget]};
    return {
     'hangouts': {
       'name': 'Confirmation Card',
       'header': cardHeader,
       'sections': [infoSection],
     },
   };
 }

Esta tarjeta contiene un par clave-valor y un widget de botón. Luego, los widgets se ordenan en un section y el card contiene una lista de secciones para renderizar.

Ahora llamemos a esta función cuando se cree un evento de calendario. En tu función createCalendarEvent, reemplaza el contenido por el siguiente código y, luego, implementa la función.

return createCalendarEvent(dateTimeStart, dateTimeEnd, appointmentType).then(() => {
   agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);

   const dateString = dateTimeStart.toLocaleString(
     'en-US',
       {month: 'long', day: 'numeric'},
   );
   const dateParts = appointmentTimeString.split(',');
   const json = getGoogleChatCard(appointmentType, dateParts[0], dateParts[1]);
   const payload = new Payload(
       'hangouts',
       json,
       {rawPayload: true, sendAsMessage: true},
   );
   agent.add(payload);

 }).catch(() => {
   agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
 });
}

Cuando el agente responda en Google Chat, sabrá que debe devolver la tarjeta que se construyó anteriormente. Pruébalo con una solicitud de programación.

8. (Opcional) Agrega un widget de imagen de Google Maps

Si deseas que tu tarjeta de respuesta sea más visual, puedes agregar un mapa estático de la ubicación de la cita generado por la API de Maps Static. La API te permite crear una imagen de Maps con parámetros de URL. Luego, podemos usar la imagen en un widget de imagen en nuestra tarjeta.

Habilita la API de Maps Static en la consola de Google Cloud de la misma manera en que habilitaste las APIs de Calendar y Google Chat.
Crea y guarda una clave de API para tu proyecto en la página APIs & Services de la consola. Para obtener más información sobre la recuperación y las prácticas recomendadas relacionadas con las claves de API de Maps, consulta este artículo.
Copia la clave de API y las siguientes constantes en la parte superior del archivo en index.js.

const API_KEY = 'YOUR_API_KEY';
const MAP_IMAGE_URL = 'https://maps.googleapis.com/maps/api/staticmap?center=Googleplex&zoom=14&size=200x200&key=' + API_KEY;
const ICON_IMAGE_URL = 'https://fonts.gstatic.com/s/i/googlematerialicons/calendar_today/v5/black-48dp/1x/gm_calendar_today_black_48dp.png';
const CALENDAR_URL = 'YOUR_CALENDAR_URL';

A continuación, agrega un widget de imagen en tu función getGoogleChatCard.

  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };

Agrega mapImageWidget a la lista de widgets de tu variable infoSection, guarda y realiza la implementación.
Prueba tu app de Chat en tu espacio de Chat y deberías ver una respuesta enriquecida basada en el código que agregaste hoy.

9. Limpia

Si planeas completar otros codelabs de Dialogflow, omite esta sección por ahora y vuelve a ella más adelante.

Borra el agente de Dialogflow

Haz clic en junto a tu agente existente.

En la pestaña General, desplázate hasta la parte inferior y haz clic en Borrar este agente.
Escribe Borrar en el diálogo y haz clic en Borrar.

10. Felicitaciones

Creaste un chatbot en Dialogflow y lo integraste en Calendario y ahora en Google Chat. ¡Eres un profesional de Google Workspace!

Más información

Para obtener más información, consulta las muestras de código en la página Dialogflow de GitHub.