Integración de llamadas telefónicas en un chatbot de Dialogflow mediante WebSockets

Introducción

Este tutorial le mostrará cómo realizar una llamada telefónica a un agente Dialogflow utilizando Dialogflow Essentials y una integración WebSockets de Vonage.

El siguiente diagrama muestra una visión general de la arquitectura.

Diagram of the call

Requisitos previos

Para realizar las acciones descritas en los pasos siguientes, deberá crear:

1. A Account de Dialogflow

2. A Cuenta API de Vonage

Crear un agente Dialogflow

Dialogflow es un software como servicio (SaaS) y una plataforma de comprensión del lenguaje natural utilizada para crear interfaces de usuario conversacionales.

Un agente es una instancia de Dialogflow, que puede considerarse como su aplicación de chatbot. Le permite tomar lo que dicen los usuarios, asignarlo a intents y proporcionarles respuestas.

Siga los pasos

1. Abrir la consola dialogflow

2. Cree un agente dándole un nombre, estableciendo el idioma por defecto, eligiendo la zona horaria y pulsando el botón para crear un agente. El botón puede mostrarse como Create o Create Agent

3. En el menú de la izquierda, haga clic en el icono de engranaje

4. En Google Project, haz clic en el nombre de ID del proyecto. Por ejemplo, VonageDF Accederá a la consola de consola de Google Cloud

Gif showing the steps to create the dialogflow Agent

Crear una cuenta de servicio en Google Cloud Console

Utilizaremos la interfaz gráfica de usuario para gestionar nuestro proyecto y recursos de Google Cloud a través de la consola de Google Cloud utilizando el mismo proyecto creado en Dialogflow. En los siguientes pasos, crearemos una Account de servicio para el control de acceso y autenticación.

Siga los pasos

1. Desde la consola de Google Cloudhaga clic en Go to project settings

2. En el menú de la izquierda, haga clic en Service accounts

3. En la barra superior, haga clic en + Create Service Account

4. Póngale un nombre de cuenta de servicio que recuerde, por ejemplo VonageDF

5. Añadir una descripción de cuenta de servicio

6. Haga clic en Create and Continue

7. En Grant this service account access to projectfiltrar y seleccionar la función Dialogflow API Admin

Gif showing the seven above steps while creating the Service Account

Volverá a la página de Cuentas de servicio.

1. Haga clic en los tres puntos situados debajo de action

2. Haga clic en Manage keys

3. Haga clic en Add Key

4. Haga clic en Create new Key

5. Seleccione JSON

6. Haga clic en Create

7. Puede ver que un .json archivo fue descargado. Añadiremos este archivo al repositorio Dialogflow Reference Connection repositorio GitHub que clonaremos en el siguiente paso

Gif showing the above steps to generate the keys

Configurar la conexión de referencia de Dialogflow

La conexión de referencia de Dialogflow utiliza la función función WebSockets de Voice API de Vonage. Cuando se establece una llamada de voz, una aplicación Voice API activa una conexión WebSocket a la conexión Conexión de referencia Dialogflow. Transmite el audio hacia y desde la llamada de voz en tiempo real.

En los siguientes pasos a continuación, vamos a dar dos opciones como ejemplos. Usar ngrok para tunelizar el servidor de conexión, que está interactuando con nuestro Dialogflow Agent y desplegarlo Heroku.

Siga los pasos

1. Clonar el repositorio repositorio dialogflow-reference-connection de GitHub y cambia el directorio git clone https://github.com/nexmo-community/dialogflow-reference-connection && cd dialogflow-reference-connection

2. Abra el código en su IDE o editor de texto favorito

3. Añada el archivo .json que acabamos de descargar a la raíz del proyecto

4. Cree un .env archivo desde el .env.example

5. Rellene las variables de entorno: GCLOUD_PROJECT_ID=<TheProjectIdFoundOnDialogflow> GOOGLE_CLOUD_CREDENTIALS=<TheJSONFileYouDownloaded.json> Desde el terminal:

6. Instalar las dependencias npm install

7. Ejecutar el archivo Dialogflow servidor de conexión node df-connecting-server.js Hay muchos tipos de despliegue, como App Engine, Heroku, Cloud Run.

Para este tutorial, mostraremos ejemplos utilizando el módulo ngrok tunneling. Aquí hay un enlace que explica más sobre ngrok y Heroku.

Opción 1: Ejemplo con ngrok

1. Ejecutar ngrok http 5000

2. Anote la URL que aparece en la consola (por ejemplo xxxx.ngrok.io). Añadiremos esta información en la parte DF_CONNECTING_SERVER argumento de Configuración de la aplicación de ejemplo Voice API de Dialogflow' parte del tutorial

The ngrok URL highlighted on the IDE

Opción 2: Ejemplo con Heroku

1. Instale git

2. Instalar Heroku línea de comandos e inicie sesión en su cuenta de Heroku

3. Si aún no dispone de un repositorio git local, cree uno: git init

4. Empieza creando esta aplicación en Heroku desde la línea de comandos usando la CLI de Heroku. Nota: En el comando de abajo, reemplaza thisappname con un nombre único en toda la plataforma Heroku. heroku create thisappname

5. En tu panel de control de Heroku, donde se muestra la página de tu aplicación, haz clic en el botón Settings añada lo siguiente Config Vars y establécelos con sus respectivos valores:

1. Despliegue de la aplicación git push heroku master o git push heroku main dependiendo del nombre de su rama.

2. Anote la URL que aparece en la consola (por ejemplo thisappname.herokuapp.com). Añadiremos esta información en la parte DF_CONNECTING_SERVER argumento de la parte del tutorial 'Configurar la aplicación de ejemplo Voice API de Dialogflow

Configura las credenciales y el número de teléfono de tu aplicación Voice API de Vonage

Siga los pasos

1. Crear una Application desde el Panel de la API de Vonage

2. Asigne un nombre a la aplicación, por ejemplo VonageDF

3. Haga clic en el botón para generar una clave pública y privada, un private.key archivo. Lo añadiremos a la aplicación de ejemplo Voice API de Dialogflow en la siguiente sección de este tutorial.

4. Vincule un número de teléfono a esta aplicación. Si aún no lo tiene, en el menú de la izquierda haga clic en Numbers y después Buy Numbers y siga los pasos para adquirirlo

Configuraremos la aplicación de ejemplo Voice API de Dialogflow y volveremos pronto al panel de esta aplicación de Vonage para agregar más información.

Configuración de la aplicación de ejemplo Voice API de Dialogflow

Esta aplicación de ejemplo utiliza la Voice API de Vonage para responder a las llamadas de voz entrantes y configurar una conexión WebSocket para transmitir audio hacia y desde la conexión de referencia de Dialogflow para cada llamada.

La dirección conexión de referencia dialogflow lo hará:

• Enviar audio al agente Dialogflow desde el habla de la persona que llama,

• Transmita las respuestas de audio del agente Dialogflow a la persona que llama a través del WebSocket,

• Publicar transcripciones en tiempo real y puntuaciones de sentimiento de voz de la persona que llama a través de webhooks callbacks a este Aplicación de ejemplo de Voice API.

Una vez ejecutada esta aplicación, llamará al número de teléfono vinculado a su aplicación para interactuar por voz con su agente Dialogflow.

Usaremos ngrok para tunelizar el servidor de conexión que está interactuando con nuestro Dialogflow Agent, pero si quieres ver un ejemplo usando Heroku puedes seguir los pasos de Ejemplo de aplicación Dialogflow Voice API de GitHub.

Siga los pasos

1. Desde su terminal, clone la Aplicación de ejemplo de Voice API de Dialogflow de GitHub y cambie el directorio git clone https://github.com/nexmo-community/dialogflow-sample-voice-application && cd dialogflow-sample-voice-application Puede continuar siguiendo la explicación de los pasos siguientes o desde el archivo readme de la Aplicación de ejemplo de Voice API de Dialogflow

2. Añade el archivo private.key generado desde Vonage Dashboard y descargado en tu máquina a la raíz del proyecto

3. Desde la sección .env.example crear un .env archivo

4. Rellene las variables de entorno con la información presente en el Panel de API de Vonage

• El SERVICE_NUMBER es el número virtual que ha adquirido. Recuerde añadir previamente el prefijo del país sin 00 ni +.

• El DF_CONNECTING_SERVER es el servidor de la Referencia Dialogflow que ya tiene en ejecución (el que anotó anteriormente)

1. Instalar las dependencias npm install

2. Ejecutar el df-application.js node df-application.js A continuación puedes encontrar los siguientes pasos para ngrok y para Heroku respectivamente:

   Opción 1: A continuación se indican los pasos a seguir con ngrok

3. En una pestaña de terminal separada ejecuta ngrok http 8000 Vuelve al sitio web de Vonage Dashboard y en capacidades

4. Activar Voice para activar esta función

5. Añada la URL de ngrok que se ejecuta en dialogflow-sample-voice-application seguido de /answer en la URL de respuesta. Asegúrese de que HTTP GET está seleccionado.

6. Añada la URL de ngrok que se ejecuta en dialogflow-sample-voice-application seguido de /event en la URL del evento. Asegúrese de que HTTP POST está seleccionado.

7. Haga clic en Guardar cambios

Vonage Dashboard

Opción 2: Pasos siguientes utilizando Heroku

1. En otra pestaña del terminal, Si aún no tienes un repositorio git local, crea uno: git init

2. Empieza creando esta aplicación en Heroku desde la línea de comandos usando la CLI de Heroku. Nota: En el comando, reemplaza myappname con un nombre único en toda la plataforma Heroku. heroku create myappname

3. En tu panel de control de Heroku, donde se muestra la página de tu aplicación, haz clic en el botón Settings añada lo siguiente Config Vars y establécelos con sus respectivos valores que se encuentran en tu archivo .env archivo.

Añade también el parámetro PRIVATE_KEY_FILE con el valor ./private.key

1. En tu panel de control de Heroku, donde se muestra la página de tu aplicación, haz clic en el botón Open App y copia la URL

2. Ahora, implementemos la aplicación. Vuelve al sitio web de Vonage Dashboard y en capacidades:

3. Activar Voice para activar esta función

4. Ese nombre de host (la URL que acabas de copiar de Heroku) se utilizará seguido de /answer en la URL de respuesta. Asegúrese de que HTTP GET está seleccionado

5. Haga lo mismo para /event en la URL del evento. Asegúrese de que HTTP POST está seleccionado

6. Haga clic en Guardar cambios

Vonage Dashboard

Mejora del agente Dialogflow

Si intentara llamar al número de teléfono en este punto del tutorial, podría interactuar con el punto de partida de la conversación desde la perspectiva de Dialogflow, el botón Default Welcome Intent.

Se devolvería un mensaje a la persona que llama a partir de la lista de respuestas del usuario. Pero la conversación no tomaría turnos, ya que no disponemos de otros datos formados para otros turnos de conversación.

Demos un paso atrás y exploremos algunos de los Concepts de Dialogflow para añadir las expresiones que podrían decir los usuarios, proporcionarles una respuesta y añadir el final de la conversación, de modo que pueda ver cómo se desarrolla una conversación completa por turnos.

Una vez creado un agente, creará intents que manejarán y darán forma a la conversación.

Cuando un usuario pronuncia una frase, Dialogflow compara lo que se dice con una intención, que se basa en la PNL y en las frases de entrenamiento que un usuario podría decir para que coincidiera con esa intención. Una vez clasificada la intención, se envía una respuesta al usuario.

Las entidades son los tipos de información que extraeremos de la conversación. Para el caso de uso que veremos a continuación, estamos reservando una mesa a través de una llamada telefónica. La información que extraeremos de la conversación son person, date y time.

Mejoremos la intención de bienvenida predeterminada, creemos una intención, describamos las entidades y añadamos un final a la conversación y probémosla.

Siga los pasos

1. Abrir la consola dialogflow y asegúrate de que estás en el agente correcto para este tutorial

2. Haga clic en el botón Default Welcome Intent

3. Desplázate hacia abajo, borra las respuestas y añade: Welcome to our Demonstration Restaurant. When and for whom would you like to book a table?

4. Haga clic en Guardar

5. Haga clic en la opción de menú Intenciones

6. Haga clic en el botón Nueva intención

7. Dale el nombre de Table Booker

8. En Frases de entrenamiento añada las siguientes frases de entrenamiento

   • Una mesa para Nicole el día 10 a las 13:00, por favor.

   • ¿Podría reservar un hueco a las 14:00 del 10/12/2021 para Joseph?

   • Me gustaría reservar una mesa el 10/09/2020 a las 16:00 para Amanda Notará que mientras escribe estas frases, algunas palabras aparecerán resaltadas en color, asegúrese de hacer doble clic en las palabras y compruebe que están utilizando las entidades correctas @sys.person, @sys.date y @sys.time.

9. En Acciones y parámetros, marque required en person, date y time

10. Añade indicaciones para cada uno de los parámetros porque, en caso de que no hayan dicho ese dato concreto durante la conversación, se les pedirá que lo añadan.

Training phrases examples

1. En la respuesta, puede añadir lo siguiente: Table booked for $person at $time on $date. Thank you!

2. Toggle Set this intent as end of conversationa continuación las respuestas

3. Haga clic en Guardar

Table Booker Intent Overview

Interactuar por Voice con el agente Dialogflow

¡Ahora que tenemos todas las partes configuradas es el momento de llamar a tu número de teléfono virtual y probarlo, vamos a repasar lo que está pasando y luego seguir nuestro paso final para hacer la llamada!

Una vez que llame al número de teléfono vinculado a su aplicación Voice API para interactuar con el Agente Dialogflow Escuchará el mensaje de confirmación: Connecting your call, please wait.. Ese texto a voz de la plataforma API de Vonage se reproduce tan pronto como la plataforma responde tu llamada.

Una vez que se establece el WebSocket, la plataforma API de Vonage reproduce el texto a voz Hello al agente Dialogflow (tú, como persona que llama, no lo escucharás).

Acaba de establecer que el agente Dialogflow se lo lea.

En este punto, interactuará con los intentos que configuró en la sección anterior de este tutorial para reservar una mesa.

Verá las transcripciones en la consola de la aplicación de conexión de referencia de Dialogflow y también en la consola de la aplicación API de voz de ejemplo de Dialogflow.

Si quieres ver los resultados del análisis de sentimiento, tendrás que habilitar la API Cloud Natural desde la consola de Google Cloud. Si no está habilitada, aparecerá un error similar a PERMISSION_DENIED: Cloud Natural Language API has not been used in project xxxx before or it is disabled.

Vayamos al último paso y veamos todos los componentes en acción.

Siga los pasos

1. Llame al número de teléfono vinculado a su aplicación Voice API e interactúe con el agente Dialogflow.

2. He aquí una posible forma de poner a prueba la conversación:

   1. Vonage Websocket: Conectando tu llamada, por favor espera.

   2. Bot: Bienvenido a nuestro restaurante de demostración. ¿Cuándo y para quién desea reservar mesa?

   3. A ti: Me gustaría reservar una mesa a las 10:00 am en 01/09/2022 para Tanya

   4. Respuesta de Bot: Mesa reservada para Tanya a las 10:00 el 01/09/2022. Gracias.

   Fin de la llamada

Enhorabuena

Ha completado este tutorial sobre cómo realizar llamadas telefónicas a un agente Dialogflow utilizando una integración WebSockets de Vonage.

Recursos

Encontrará el Ejemplo de referencia de Dialogflow y Ejemplo de aplicación Voice en Github.

Consulte la Guía de referencia de WebSockets.

Compruebe el Una entrada de blog que explica ngrok.

También puede ver un ejemplo similar utilizando un Amazon Lex Bot.

Espero que le haya gustado. No dude en ponerse en contacto conmigo en Twitter o únete a nuestro Canal Slack de la Comunidad.