Comprender la entrega a través de la integración de Dialogflow con el Calendario

1. Antes de comenzar

En este codelab, aprenderás cómo Dialogflow se conecta con los sistemas de backend para proporcionar respuestas enriquecidas y dinámicas a las preguntas de los usuarios.

Requisitos previos

Antes de continuar, debes completar los siguientes codelabs:

  1. Compila un programador de citas con Dialogflow
  2. Integra Dialogflow con Actions on Google
  3. Comprende las entidades en Dialogflow

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

  • Qué es la entrega
  • Cómo configurar una cuenta de servicio para Calendar
  • Cómo configurar el Calendario
  • Cómo habilitar la entrega en Dialogflow
  • Cómo probar la entrega

Qué compilarás

  • Entrega con Cloud Functions
  • Una integración entre Dialogflow y Calendar

Requisitos

  • Un navegador web y una dirección de correo electrónico para acceder a la consola de Dialogflow
  • Una Cuenta de Google para acceder al Calendario

2. ¿Qué es la entrega?

La entrega es código que se implementa como un webhook, que le permite a tu agente de Dialogflow llamar a lógicas empresariales para cada intent. Durante una conversación, la entrega te permite usar la información extraída por el procesamiento de lenguaje natural de Dialogflow para generar respuestas dinámicas o activar acciones en tu backend. La mayoría de los agentes de Dialogflow usan la función de fulfillment.

Los siguientes son algunos ejemplos de cuándo puedes usar la entrega para ampliar un agente:

  • Generar respuestas dinámicas basadas en la información buscada en una base de datos
  • Para realizar pedidos basados en productos que ha pedido un cliente
  • Implementar las reglas y condiciones de victoria para un juego

3. Habilita la API de Calendar

  1. En la consola de Dialogflow, haz clic en d7d792687e597dd5.png.
  2. En la pestaña General, desplázate hasta Project ID y, luego, haz clic en Google Cloud f2bffd4fcdb84fa9.png.

34be16fcd4c5aeff.png

  1. En la consola de Google Cloud, haz clic en Menú de navegación ☰ > APIs y servicios > Biblioteca.
  2. Busca "API de Google Calendar" y, luego, haz clic en Habilitar para usar la API en tu proyecto de Google Cloud.

4. Configura la cuenta de servicio

  1. Haz clic en Menú de navegación ☰ > APIs y servicios > Credenciales.
  2. Haz clic en Crear credenciales > Cuenta de servicio.

86f51af0e7886fdd.png

  1. En Detalles de la cuenta de servicio, ingresa "appointment-scheduler" como el Nombre de la cuenta de servicio y, luego, haz clic en Crear.

845d25f3e07ff770.png

  1. En la sección Otorga a esta cuenta de servicio acceso al proyecto, haz clic en Continuar para omitirla.
  2. En la sección Otorga a los usuarios acceso a esta cuenta de servicio (opcional), haz clic en Crear clave, selecciona JSON y haz clic en Crear.

Se descargará un archivo JSON en tu computadora, que necesitarás en las siguientes secciones de configuración. a424cec60144d707.png

5. Configuración del calendario

  1. Navega a Calendario y, luego, haz clic en Menú principal ☰ > Agregar otros calendarios fbc354048b0a2c6c.png> Crear calendario.

d6ec2fcf0bd2ae22.png

  1. Ingresa "Calendario de citas" como el nombre del calendario y haz clic en Crear calendario.
  2. Vuelve a cargar la página, haz clic en Calendario de citas, desplázate hasta Compartir con personas específicas y, luego, haz clic en Agregar personas.
  3. Copia el client_email del archivo JSON que descargaste como parte de la configuración de la cuenta de servicio y pégalo en el diálogo.

7927f6fa675e3e87.png

  1. Haz clic en la lista desplegable Permisos y, luego, en Realizar cambios en los eventos > Enviar.

2ee99d3d15eed97b.png

  1. Mientras sigues en Configuración, desplázate hasta Integrar calendario y copia el ID del calendario.

df8a731f0713c52.png

6. Configura la entrega en Dialogflow

Agrega la cuenta de servicio y el ID del calendario al cumplimiento

  1. Navega al agente de Dialogflow AppointmentScheduler y haz clic en Fulfillment.
  2. Habilita el Editor intercalado.

c8574c6ef899393f.png

  1. Actualiza el archivo index.js con el siguiente código:
'use strict';

// Import the Dialogflow module from Google client libraries.
const functions = require('firebase-functions');
const {google} = require('googleapis');
const {WebhookClient} = require('dialogflow-fulfillment');

// Enter your calendar ID below and service account JSON below
const calendarId = "<INSERT YOUR CALENDAR ID>";
const serviceAccount = {<INSERT CONTENTS OF YOUr JSON FILE HERE>}; // Starts with {"type": "service_account",...

// Set up Google Calendar Service account credentials
const serviceAccountAuth = new google.auth.JWT({
 email: serviceAccount.client_email,
 key: serviceAccount.private_key,
 scopes: 'https://www.googleapis.com/auth/calendar'
});

const calendar = google.calendar('v3');
process.env.DEBUG = 'dialogflow:*'; // enables lib debugging statements

const timeZone = 'America/Los_Angeles';
const timeZoneOffset = '-07:00';

// Set the DialogflowApp object to handle the HTTPS POST request.
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
 const agent = new WebhookClient({ request, response });
 console.log("Parameters", agent.parameters);
 const appointment_type = agent.parameters.appointment_type;
 function makeAppointment (agent) {
   // Calculate appointment start and end datetimes (end = +1hr from start)
   const dateTimeStart = new Date(Date.parse(agent.parameters.date.split('T')[0] + 'T' + agent.parameters.time.split('T')[1].split('-')[0] + timeZoneOffset));
   const dateTimeEnd = new Date(new Date(dateTimeStart).setHours(dateTimeStart.getHours() + 1));
   const appointmentTimeString = dateTimeStart.toLocaleString(
     'en-US',
     { month: 'long', day: 'numeric', hour: 'numeric', timeZone: timeZone }
   );
    // Check the availability of the time, and make an appointment if there is time on the calendar
   return createCalendarEvent(dateTimeStart, dateTimeEnd, appointment_type).then(() => {
     agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);
   }).catch(() => {
     agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
   });
 }

// Handle the Dialogflow intent named 'Schedule Appointment'.
 let intentMap = new Map();
 intentMap.set('Schedule Appointment', makeAppointment);
 agent.handleRequest(intentMap);
});

//Creates calendar event in Google Calendar
function createCalendarEvent (dateTimeStart, dateTimeEnd, appointment_type) {
 return new Promise((resolve, reject) => {
   calendar.events.list({
     auth: serviceAccountAuth, // List events for time period
     calendarId: calendarId,
     timeMin: dateTimeStart.toISOString(),
     timeMax: dateTimeEnd.toISOString()
   }, (err, calendarResponse) => {
     // Check if there is a event already on the Calendar
     if (err || calendarResponse.data.items.length > 0) {
       reject(err || new Error('Requested time conflicts with another appointment'));
     } else {
       // Create event for the requested time period
       calendar.events.insert({ auth: serviceAccountAuth,
         calendarId: calendarId,
         resource: {summary: appointment_type +' Appointment', description: appointment_type,
           start: {dateTime: dateTimeStart},
           end: {dateTime: dateTimeEnd}}
       }, (err, event) => {
         err ? reject(err) : resolve(event);
       }
       );
     }
   });
 });
}
  1. Reemplaza <INSERT YOUR CALENDAR ID> por el ID del calendario que copiaste en la sección anterior.
  2. Reemplaza <INSERT CONTENTS OF YOUR JSON FILE HERE> por el contenido de tu archivo JSON.
  3. Opcional: Cambia const timeZone y const timeZoneOffset según la zona horaria del Calendario de citas.
  4. Haz clic en Implementar.

Habilita la respuesta de entrega

  1. Navega a la consola de Dialogflow y haz clic en Intents.
  2. Haz clic en Schedule Appointment Intent.
  3. Desplázate hacia abajo hasta Entregas y activa Habilitar llamadas de webhook para este intent.

a5b41336b5249e44.png

  1. Haz clic en Guardar.
  2. Haz clic en Implementar.

7. Probar el chatbot

Puedes probar tu chatbot en el simulador de Actions o usar la integración web o de Google Home que aprendiste anteriormente.

  1. Usuario: "Establece una cita para el registro del vehículo mañana a las 2 p.m.".
  2. Chatbot: “De acuerdo, déjame ver si podemos incluirte. El 24 de abril a las 2 p.m. está bien".

96d3784c103daf5e.png

  1. El calendario reserva la respuesta.

b7da9da814271db8.png

8. 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

  1. Haz clic en dc4ac6f9c0ae94e9.png junto a tu agente existente.

520c1c6bb9f46ea6.png

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

9. Felicitaciones

Creaste un chatbot en Dialogflow y lo integraste con el Calendario. Ya eres un desarrollador de chatbots.

Más información

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