Blog

Creando un bot de pedidos con DialogFlow

Luego de haber conocido todo sobre DialogFlow, en este tutorial, te enseñaremos paso a paso a crear un bot sencillo con ayuda de este portal de Google.

PASO 1: Crear un agente

Empezamos creando un agente, en este caso lo llamamos Meals&Cheers.

PASO 2: Crear las entidades

Para crear una entidad, nos dirigimos a la barra lateral izquierda, y hacemos clic en la pestaña “Entities”.

Nuestra página vende pizzas y makis, así que los usuarios pueden pedir estas comidas. Por lo tanto, creamos una entidad llamada “comidas”, y allí colocamos dos entradas: “pizza” y “makis”. Además, colocamos algunos sinónimos al lado de cada entrada, para que así el bot pueda reconocer cualquiera de esos términos cuando el usuario los introduzca.

Aquí podemos ver nuestra entidad ya creada.

PASO 3: Crear las intenciones

Ahora nos dirigiremos a la pestaña de “Intents” para crear las intenciones. Por defecto aparecerán estas dos. La de “Default Fallback Intent” se activará cuando el bot no entienda lo que el usuario le ha dicho, mientras que la de “Default Welcome Intent” la eliminaremos porque a continuación crearemos la intención de “Saludar” que hace exactamente lo mismo que la intención antes mencionada.

Haremos clic en el botón de “Create Intent”, empezaremos creando la entidad “Saludar”.

Como vemos, aquí hemos introducido las frases de entrenamiento. Es decir, las frases que el usuario podría enviar, y que el bot debería poder reconocer para poder dar una respuesta.

Si bajamos un poco, entonces podremos introducir el texto que el bot dirá cuando reconozca alguna de las frases para saludar con las que lo hemos entrenado.

Ahora creamos el intento “Despedir”. Como en el caso anterior, introducimos las frases de entrenamiento, y la respuesta que dará el bot.

También hemos creado el intento “Agradecer”.

Ahora entramos al intento que venía por defecto llamado “Default Fallback Intent”. Este es el intento que se activará si el bot no logra reconocer la entrada del usuario. Como vemos, solo tenemos que configurar la respuesta que dará el bot si no entiende lo que el usuario le pide. 

Nuestro bot ofrecerá las opciones que tiene mediante un carrusel. Asi que, creamos la intención “VerOpciones”, e introducimos las frases de entrenamiento.

Ahora, iremos a la parte de “Responses” para poder implementar el carrusel de opciones. Aquí haremos clic en el +.

Aquí tendremos una lista de los canales en los que podemos implementar nuestro chatbot. En nuestro caso, será en Facebook, así que haremos clic en esa opción.

Luego de agregar el canal de Facebook, iremos a “Add Responses”.

Aquí podremos ver varias opciones de recursos, pero nosotros escogeremos la de “Custom Payload”, ya que tendremos que insertar un bloque de códigos para poder construir el carrusel.

Como podemos ver, la zona resaltada de amarillo, representa una tarjeta que contendrá el carrusel. Como vemos una tarjeta contiene un título, un subtítulo, y botones. Los botones pueden ser de dos tipos: “payload” o “web_url”.

Lo de tipo “web-url” permitirán abrir enlaces, mientras que los de tipo “payload”, nos permitirán acceder a otra intención. Para los botones de “Realizar pedido”, “Ver pedido”, y “Calificar”, necesitaremos invocar sus propias intenciones, asi que les asignamos un nombre en la etiqueta “payload”. Este nombre deberemos recordarlo, porque será una frase de entrenamiento en sus respectivas intenciones.

A continuación creamos la intención “Calificar”, como podemos ver, como frase de entrenamiento hemos ingresado “Calificar”, ya que esta era la frase con la que etiquetamos a nuestro botón tipo payload. Además, esta vez, la respuesta del bot será una “Quick Reply” ya que este tipo de recurso nos permite colocar una pregunta y posibles opciones presentadas como botones. En nuestro caso las opciones serán las puntuaciones que el usuario puede darnos.

Sin embargo, también necesitamos crear la intención “Calificación” para poder obtener la respuesta del usuario, y agradecerle por la puntuación recibida.

Para ello, como una frase de entrenamiento colocaremos cualquier número (1-5) más el ícono de la estrella. No es importante qué número coloquemos, ya que nos servirá como entidad. Si seleccionamos el número y le asignamos el tipo number-integer, entonces en la respuesta, para poder mostrar la respuesta capturada del usuario la invocaremos utilizando el símbolo $ más el nombre del parámetro .original. Entonces, quedaría así $number-integer.original.

Después creamos la intención “InformaciónContacto”, como podemos ver, como frase de entrenamiento hemos ingresado “Información de Contacto”, ya que esta era la frase con la que etiquetamos a nuestro botón tipo payload. Además, escribimos la respuesta que da el bot si el usuario requiere la información de contacto.

Ahora creamos la intención de “Realizar pedido”.

Para ello, como una frase de entrenamiento colocaremos “Realizar pedido”, ya que esta era la frase con la que etiquetamos a nuestro botón tipo payload.

Aquí no colocaremos ninguna respuesta, pero esto tiene una explicación, y es que, luego de que el usuario haga clic en el botón, empezaremos a pedirle sus datos. Para ello, crearemos otra intención. 

Entonces, para saltar de una intención a otra, necesitamos “transportar” el contexto. Por ello, añadimos un “output context” con el nombre que deseemos, y el número de iteraciones que queramos habilitar.

Aquí tenemos la intención “core”. Esta se llamará “infoPedido”, es a esta intención a la que saltará la de “realizarPedido”. Es por ello que colocamos como “input context” infoPedido.

En esta intención preguntaremos los datos al usuario. Sin embargo, cada usuario introducirá datos distintos, asi que es frases de entrenamiento colocaremos cualquier nombre, y le asignaremos la entidad given-name. De igual manera, colocaremos cualquier dirección y le asignaremos la entidad address. Lo mismo haremos con el número de contacto, le asignaremos la entidad phone-number.

Ahora bien, podemos también introducir la frase “quiero una pizza hawaiana” y asignar a la frase pizzza hawaiana la entidad de comidas que creamos al principio, lo mismo con “quiero unos makis california”.

Esto hará que, si el usuario introduce alguna de esas frases, se sepa el pedido de una vez, y no se le pregunte cuál es su pedido.

Como vemos, en la tabla tenemos los parámetros que estamos utilizando. Aquí tendremos que marcar las casillas de “Required” para que se nos pueda habilitar la fila de prompts, es gracias a esta que podremos escribir las preguntas que mostraremos al usuario para que ingresen sus datos.

Aquí vemos el prompt que se mostrará para pedir el nombre del cliente.

Aquí vemos el prompt que se mostrará para pedir el número de contacto del cliente.

Aquí vemos el prompt que se mostrará para pedir la dirección a la que se enviará el pedido.

Finalmente, aquí vemos el prompt que se mostrará para que el usuario ingrese lo que quiere pedir.

Ahora configuraremos la respuesta del bot luego de recibir los datos. Para ello utilizaremos un “Quick reply”.

Ahora crearemos la intención “confirmarPedido” por si el usuario hizo clic en el botón con el check. Entonces, es ese símbolo el que colocaremos como frase de entrenamiento. Y como queremos activar este intento luego del intento “infoPedido”, pasamos el “setInfo” como “input context”.  También asignamos una respuesta.

Después crearemos la intención “verPedido”, colocamos las frases de entrenamiento, y configuramos la respuesta llamando a los parámetros que utilizamos para mostrar los detalles del pedido.

Ahora crearemos la intención “rechazarPedido” por si el usuario hizo clic en el botón con la X . Entonces, es ese símbolo el que colocaremos como frase de entrenamiento. Y como queremos activar este intento luego del intento “infoPedido”, pasamos el “setInfo” como “input context”. Además, como vamos a necesitar de esta respuesta, crearemos un “output context” llamado “setRechazar”. También asignamos una respuesta.

A continuación, crearemos un intento para mostrar un mensaje si se ha rechazado el pedido. Para ello, pasamos el “inputcontext” llamado “setRechazar”. Colocaremos como frase de entrenamiento “Ver pedido” y agregaremos los parámetros que hemos utilizado para recopilar los datos, pero esta vez, no les daremos un valor. También configuraremos una respuesta.

En esta imagen podemos ver todos los intentos creados.

PASO 4: Integración con Facebook Messenger

Para poder integrar nuestro bot a Messenger, nos vamos a la pestaña de “Integrations” que se encuentra en la barra lateral izquierda, y hacemos clic en la aplicación “Messenger from Facebook”.

Nos saldrá la siguiente ventana. Nosotros tenemos que llenar esos dos campos en blanco.

Para ello, tenemos que acceder al portal de developers.facebook.com e irnos a “Mis apps”.

Luego haremos clic en “Crear app”.

Después seleccionamos el tipo de app que queremos crear. En este caso seleccionaremos “Negocios”.

Luego es el momento de colocar el nombre y propósito de nuestra página. Cuando terminemos, haremos clic en “Crear app”.

Se nos dirigirá automáticamente a esta ventana. Aquí haremos clic en botón de configurar de la app “Messenger”.

Haremos clic en “Crear una nueva página” si es que aún nuestro negocio no cuenta con una.

Se nos dirigirá a Facebook. Aquí tendremos que colocar el nombre del negocio, y la categoría a la que pertenece. Haremos clic en “Crear página”.

También podremos agregar una imagen de portada y de perfil. Luego haremos clic en “Guardar”.

Ahora sí, creada nuestra página, volvemos a facebook developers, y haremos clic en “Agregar o eliminar páginas”.

Se nos abrirá una ventana con todas las páginas que tenemos, y tendremos que hacer clic en la que hemos creado para implementar el chatbot, en nuestro caso “Meals & Cheers”. Luego daremos clic en “Siguiente”.

Luego hacemos clic en “Listo”.

Finalmente, haremos clic en “Aceptar”.

Como podemos ver, nuestra página ya ha sido agregada, ahora lo que haremos es seleccionar el botón de “Generar token”.

Tendremos que hacer clic en la casilla de acepto, y copiar el token porque lo necesitaremos.

Volvemos al portal de DialogFlow y pegamos en el campo de “Page Access Token” el token que copiamos en el paso anterior.

Ahora, en el campo de “Verify Token” creamos una clave, y copiamos la cadena del campo “Callback URL”.

Entonces, volvemos al portal de facebook developers, y nos vamos a la sección de Webhooks, y hacemos clic en “Agregar url de llamada”.

Aquí pegamos la url que copiamos en el portal de DialogFlow, y también colocaremos el token de verificación que creamos. Finalmente, haremos clic en “Verificar y guardar”.

Ahora hagamos clic en el botón “Agregar suscripciones”.

Aquí tendremos que seleccionar los campos de “messages” y “messages_postbacks” para poder enviar y recibir mensajes.

Listo, como vemos, ya podemos utilizar nuestro chat en Messenger.

PASO 5: ¡Probar nuestro chatbot!

Aquí podemos ver cómo saluda el bot, y nos muestra el carrusel de opciones luego de pedirle ayuda.

Aquí hemos realizado y confirmado un pedido.

Luego hemos seleccionado la opción “Ver pedido” para obtener el detalle de nuestra orden.

Aquí hemos realizado otro pedido, pero esta vez, no lo hemos confirmado.

Como resultado, al hacer clic en “Ver pedido” no nos da un detalle, simplemente nos dice que no hemos realizado ninguno.

Ahora hemos ingresado que queremos una pizza pepperoni, entonces, a continuación me piden todos los datos, a excepción de “¿Cuál es tu pedido?”, porque esta entidad ya ha sido capturada gracias a la frase ingresada por el usuario.

Al seleccionar el botón “Sitio Web”, se nos abre la url con la página web de la compañía.

Al hacer clic en “Información de contacto”, el bot nos responde con los datos requeridos.

Si hacemos clic en cualquiera de los botones de redes sociales, también se nos abrirá la página requerida.

Aquí podemos ver cómo podemos calificar al bot haciendo clic en “Calificar”.

Finalmente, el bot es capaz de responder a nuestro agradecimiento, preguntas a las que no está entrenado, y a nuestra despedida.

¡Listo! Terminamos de construir nuestro bot gracias a DialogFlow de manera rápida y sencilla. Esperamos que gracias a nuestro tutorial, puedas realizar el tuyo paso a paso. ¡Nos vemos pronto!

hearts.png

Equipo redactor

Fiorella Arias Alvarez
Fiorella Arias Alvarez
Read More
Verónica Cahuana Oscata
Verónica Cahuana Oscata
Read More
Edwin Gómez Ancasi
Edwin Gómez Ancasi
Read More
Yoel Quintanilla Gamboa
Yoel Quintanilla Gamboa
Read More
Pablo Ramos Tito
Pablo Ramos Tito
Read More
Rosa Poma Vilca
Rosa Poma Vilca
Read More
Previous
Next

Comparte esta publicación

Share on facebook
Share on whatsapp
Share on telegram
Share on twitter