Crear un ChatBot en React

Lo primero que debemos saber es ¿qué es un chatbot?

Un chatbot es una aplicación o programa informático que permite simular una conversación real, normalmente suelen estar basados en inteligencia artificial y son cada vez más habituales en diferentes servicios como marketing, ventas y posventa de las empresas, asistencia virtual…

El objetivo de la aplicación es proporcionar una experiencia de comunicación fluida y amigable para los usuarios, para llevar a cabo esta idea utilizaremos la tecnología React.

React nos permitirá construir una interfaz de usuario dinámica y receptiva que permitirá a los usuarios interactuar de manera intuitiva con el chatbot.

Antes de comenzar es recomendable tener claras las bases del framework de React para poder trabajar con él.

Así pues, comenzamos con el tutorial.

Lo primero que haremos será crear nuestro proyecto de React utilizando el programa cmder.

Una vez creado el proyecto, utilizamos cd para navegar hasta el directorio del proyecto e instalaremos las librerías que vamos a utilizar para realizar el ChatBot.

Y tras esto, abriremos nuestro código e iniciaremos nuestro proyecto.

Lo primero que haremos en nuestro código será irnos a App.js y vaciaremos el contenido del componente para dejarlo preparado para trabajar.

Nos crearemos una carpeta llamada components donde iremos metiendo los componentes que vayamos necesitando para nuestra aplicación.

Tras este paso crearemos nuestro primer component y lo dejaremos listo para trabajar.

Este component será el que albergará todo el ChatBot.

En este paso comenzamos a importar ChatBot de ‘react-simple-chatbot’ y lo incluiremos en el render. Una vez realizado este paso tendremos que ir a App.js e importar nuestro componet.js (en este caso MainChatBot.js).

Incluiremos un css a nuestro proyecto para que nos aparezca el ChatBot en el centro de nuestra pantalla, para ello tendremos que modificar App.css

Tras hacer los pasos anteriores si nos vamos a la web del servidor, encontraremos numerosos errores relacionados con el ChatBot.

Esto ocurre porque tenemos que darle un atributo al Chatbot para que pueda empezar a funcionar. Dicho atributo es steps y es el encargado de mandar los datos al bot para lanzar y recibir mensajes.

Dicho step a su vez contendrá un id, un menssage y un end

También le añadiremos unos estilos a nuestro ChatBot utilizando la librería ‘styled-components’.

Primero importaremos ThemeProvider, después añadiremos una constante con los atributos css que nos permiten cambiar los estilos y envolvemos el component ChatBot con el component ThemeProvider.

Si nos vamos a nuestra web veremos el ChatBot funcionando correctamente y con el estilo que le hemos añadido.

Para continuar con nuestra aplicación tenemos que hacer que el usuario pueda introducir datos, es decir, que el usuario tenga interacción con nuestro ChatBot.

Para ello vamos a incluir dos nuevos steps:

User: Nos permitirá el ingreso de datos por el chat.

Trigger: Nos permite movernos por los diferentes steps indicado el ID del step al que queremos ir.

Con este código lo que estaríamos haciendo es:

Primero preguntamos el nombre en el step con id ‘intro’.

Tras finalizar ese step iremos al step con id 1 (por medio del trigger) el cual nos permitirá introducir por el chat nuestro nombre (por medio de user).

Tras finalizar este iremos a los steps con id 2 y 3 donde como vemos añadimos más texto que tendrá nuestro bot y también añadimos {previousValue} que se encarga de pintar el valor que ha recibido en el step previo.

Si volvemos a nuestra web veremos el resultado de esta manera.

Como vemos estamos teniendo un error visual el cual nos repite las respuestas numerosas veces, para solucionar este error debemos dirigirnos a index.js y eliminamos <React.StrictMode>

Tras esto si volvemos a nuestra web ya sí que veremos nuestra aplicación de forma correcta.

Le podemos añadir más funcionalidad al proyecto añadiendo un atributo que nos permite validar los datos introducidos por el usuario.

El atributo que utilizaremos será validator y nos crearemos un método el cual será llamado por dicho atributo.

En nuestro código nos aparecerá este mensaje al introducir un dato incorrecto.

Podemos hacernos la pregunta de si ¿es posible que el ChatBot me muestre diferentes opciones de respuesta? ¿quizás añadiendo botones?

Veremos que esta opción es posible utilizando otro atributo como es options

Dicho atributo mostrara al usuario unos botones con diferentes opciones.

El contenido de los botones se lo damos en label.

Con trigger igual que hicimos anteriormente viajaremos al step con dicho ID.

El value es opcional pero más adelante veremos que nos será útil a la hora de recoger los valores de cada option.

Lo único que nos faltaría para que no nos diese error es crear los steps con los id anteriores, de lo contrario no nos encontraría el id y nos saltaría un error como este:

Creamos los steps con un mensaje para ver nuestra página funcionando.

Si vamos a nuestra página se verá así.

Incluiremos más steps para que nuestra aplicación sea más extensa y tenga diferentes soluciones

Otra mejora que podemos hacer a nuestro ChatBot es insertar nuestros propios componentes, para ello podemos utilizar el atributo component.

Crearemos un componente con el nombre que queramos (en mi caso WikiComponent.js).

Necesitaremos recoger los valores de los input para poder hacer las búsquedas en Wikipedia. Para ello, usaremos los id de los steps.

En el constructor del componente WikiComponent usaremos los id para aplicar los valores a variables que tendemos en state.

Tendremos un statusProgramacion que cambiaremos a True cuando el usuario pinche en “aprender que es programación”.

Y un detail el cual inicializaremos como vacío y cambiaremos su valor más adelante.

Añadimos el método componentDidMount() para realizar las acciones cuando el componente se monte.

Hacemos que si el value del step con id select es “n” cambiaremos el status mencionado anteriormente.

Y si el value es “y” cambiaremos el contenido de detail por el value de la opción que el usuario seleccione en el step con id selectReact.

Una vez hemos modificado los valores podemos pasar a pintar el render.

Nos mostrara un enlace a la página de Wikipedia donde habla de programación si statusProgramacion == true.

Si no lo es, nos pintara un enlace que nos llevara a la ruta de wikipeda + lo que contenga detail en ese momento.

Nos quedaría algo como:

Ejemplo: https://es.wikipedia.org/wiki/React#Hooks

Para terminar, si vamos a nuestra web veremos que nos da error, eso es debido a que nos falta incluir en el component MainChatBot el componente que acabamos de crear (WikiComponent).