2

El Chatbot que deseas con menos complicaciones 😜.

paso6.png¿Tienes un pequeño negocio de comida y quieres perder menos tiempo en tomar la orden? ¿Qué tal si eres dentista o abogado y quieres automatizar tus citas? Son pequeñas tareas importantes pero que te distraen y quitan tiempo para hacer otras cosas que quizá necesitan un poco más de atención dentro de tu negocio. Tal vez dedicarle una tarde a aprender cómo generar un asistente virtual para automatizar esas pequeñas tareas sea una buena idea. Aceptémoslo David, quizá tú como recién egresado no puedes pagarte un asistente pero sí te lo puedes programar 😝.

Si por alguna razón no puedes correr heroku en tu consola ni te es posible correr ngrok (porque a veces windows y ubuntu te dan estos problemas) sigue este tutorial, quiero dejarte esta opción en la que no necesitaras de mucho código. Voy a mostrarte cómo conectar DialogFlow con messenger para poder hacer un bot conversacional. De esta manera vas a poder hacer uso de webhooks que google te provee.

Vamos a crear unos tacos platzeros y para ello necesitamos lo siguiente:

1.- Cuenta de google.

Para generar un agente de DialogFlow.

link de DialogFlow:https://www.google.com.mx/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjskrbborzsAhUJEawKHYZ1AakQFjAAegQIDxAD&url=https%3A%2F%2Fdialogflow.cloud.google.com%2F&usg=AOvVaw2AsLbzcr82t1GsECYjUNf0

2.- Cuenta de Facebook for developers.

Es necesario tener una cuenta personal en Facebook para poder hacer uso de esta característica.

link de Facebook for developers:https://developers.facebook.com/

3.- Página de empresa en Facebook.

En nuestro caso crearemos una taquería llamada “Taquito Platzero”.

Paso 1:

Necesitamos crear nuestra página empresarial de Facebook. (Si ya tomaste el curso de bots para Facebook Messenger puedes saltar este paso).

1.1 Desde nuestra cuenta personal vamos a darle clic al icono que contiene el signo más.signo.png
Nos desplegará un menú vertical.
paso1f.png

1.2 Damos clic al botón “página”.paso2f.png

Nos generará un template que podremos configurar a nuestro gusto para generar el proyecto que nos interesa.
paso15.png

Al finalizar nuestra personalización deberíamos tener algo parecido a esto.
![Captura de pantalla 2020-10-17 135510.png](https://static.platzi.com/media/user_upload/Captura de pantalla 2020-10-17 135510-f1b7220a-0c75-4555-ad33-467ba900d41d.jpg

Así terminamos el primer paso y estamos listos para hacer las configuraciones necesarias desde nuestro perfil de desarrollador.

Paso 2:

Desde nuestro navegador vamos a buscar facebook for developers (este es el link:https://developers.facebook.com/ ) y deberíamos encontrar una pantalla similar a esta.
Captura de pantalla 2020-10-17 130818.png

2.1 Daremos clic al botón “Mis aplicaciones” y se nos desplegará una pantalla así.
Captura de pantalla 2020-10-17 140308.png

2.2 En este punto debemos dar el clic en el botón que nos indica “Crear aplicación”.
Captura de pantalla 2020-10-17 130900.png

2.3 Nos darán algunas opciones y vamos a escoger la primera “Administrar integraciones empresariales”.
Captura de pantalla 2020-10-17 130933.png

2.4 Llenamos los campos del formulario donde pondremos nuestros datos.
Captura de pantalla 2020-10-17 131019.png

2.5 Necesitamos activar la extensión de messenger en nuestro desarrollo.
paso13.png

2.6 Activaremos también los webhooks para que nuestro bot pueda funcionar. paso14.png

Sobre este último paso volveremos al final para poder conectar todo nuestro proyecto.

Paso 3:

Para este paso tendremos que crear un agente con DialogFlow. Este paso es algo que podemos brincarnos si tomamos la clase de asistente de voz con DialogFlow del cual te dejo el enlace: https://platzi.com/clases/dialogflow/

Para empezar necesitamos una cuenta de google. Basta con tener una cuenta de Gmail asumo que tienes una y obviaré ese paso. En nuestro navegador vamos a buscar DialogFlow y entraremos a la página para generar un nuevo agente.

Captura de pantalla 2020-10-17 125919.png

3.1 Crearemos un nuevo agente haciendo clic en el botón “Create new agent”.
paso1.png

3.2 En la parte coloreada hacemos clic.
paso2.png

3.3 Crea un nuevo agente dándole un nombre. Dale clic al botón de "Create "para guardar tu configuración.
paso3.png
Taquito platzero es un buen nombre para mí porque me gusta platzi y los tacos placeros 😋😋😋. Aquí puedes: (https://www.facebook.com/Pueblaa/photos/martes-de-taco-placero-dónde-se-encuentran-los-mejores-de-puebla-foto-de-instagr/10154763340660956/

3.4 Una vez creado nuestro nuevo agente también crearemos una intención y usaremos el “Default Welcome Intent”.
paso4.png

3.5 Debes hacer un poco de scroll y llegar a la sección “Responses”. Creamos una nueva respuesta para poder probar nuestro agente. Debemos asegurarnos de borrar las respuestas configuradas por default y procedemos a configurar una respuesta personalizada.
paso7 .png

3.6 Genera una respuesta en facebook dándole clic al signo más que se encuentra a lado de “DEFAULT”.
InkedCaptura_de_pantalla_2020-10-17_192027_LI.jpg

3.7 Guardamos nuestro intent haciendo clic en el botón “SAVE”.Tp.png

3.8 Ahora necesitamos activar la integración de Facebook Messenger en DialogFlow.
paso11.png

3.9 Activamos la integración de messenger.
paso12.png

Paso 4:

En este paso vamos a conectar nuestros webhooks de tal manera que nuestro agente configurado en DialogFlow pueda funcionar en messenger.

4.1 Añadimos la página de negocios que creamos en nuestro proyecto, en este caso la de Taquito Platzero.
paso16.png
![Captura de pantalla 2020-10-17 131147.png](https://static.platzi.com/media/user_upload/Captura de pantalla 2020-10-17 131147-1176d080-dd96-4e88-b2bd-e524d3bcf5f8.jpg

4.2 Al llegar a este identificador tenemos que dar clic en el botón de “Generar identificador”. Este número es importante, asegúrate de no perderlo, en caso de que eso te ocurriera tendrías que generar uno nuevo.
paso17.png

4.3 En nuestra configuración de Webhooks dentro del proyecto en facebook tenemos que hacer estas modificaciones.

Damos clic en el botón de “Editar” y se nos desplegará un nuevo menú.
Captura de pantalla 2020-10-17 131410.png

Selecciona dando clic en los recuadros blancos de messages y messaging_postbacks.
Captura de pantalla 2020-10-17 131428.png

4.4 Una vez generado nuestro identificador necesitamos conectarlo en el apartado de “Page Access Token”.
token.jpg

4.5 Copiamos el callback URL de nuestro DialogFlow y nuestro Verify Token llamado TaquitoPlatzero lo pegamos en la parte de identificador de verificación:webhooks.png

4.6 ¡Tadan! tenemos funcionando nuestro bot conversacional dentro de facebook messenger. paso20.png

Por supuesto esta es sólo una de las tantas maneras para llegar al resultado final. El mundo de los Chatbots es fascinante y muy diverso, puedes hacer un bot conversacional de esta manera, con JavaScript o incluso pagar a un proveedor.

Esta es la mejor opción si aún no te sientes tan cómodo haciendo código o si tienes alguna limitación técnica en tu computadora. En mi caso fue la mejor opción por una serie de errores que me impedían desplegar con heroku o hacer uso de ngrok.

Este es un mundo bastante diverso por ello te invito a suscribirte y profundizar en estas dos herramientas dentro de platzi en los cursos de Bots para Facebook Messenger y Curso de DialogFlow: Programación de chatbots por voz.

Entiendo que si es tu primera vez utilizando estas herramientas tengas muchas dudas respecto al cómo funcionan. Siéntete con toda la libertad de hacerme llegar tus dudas a mi Twitter o bien, a mi correo electrónico. Estaré muy contento de responder tus preguntas y recuerda nunca parar aprender. 😊😉

Escribe tu comentario
+ 2
1
6768Puntos

Estoy creando un chatbot, Espero esta información me ayude, gracias por compartir

0
20631Puntos
un año

Genial, seguro que te va ser de muchísima utilidad.