Creación de Chatbot con React Simple Chatbot

Si has llegado hasta aquí es posible que conozcas lo que es un Chatbot o que tengas curiosidad por descubrir qué es. De ambas formas al acabar de leer este Post, conocerás qué es, cómo funciona a un nivel básico y sabrás como programar tu propio Chatbot de una manera sencilla y eficaz.

Un Chatbot es una aplicación que permite simular una conversación real. Sin embargo, como usuarios, estaremos hablando con un montón de código programado con preguntas y respuestas fijas, o bien a día de hoy, con inteligencias artificiales que conocen gran cantidad de datos para usar en la conversación.

Antes de comenzar, existen unos requisitos previos que debes conocer para que puedas entender todos los pasos que seguiremos:
· Conocer los fundamentos de la programación en JavaScript
· Conocer a nivel básico/intermedio el framework de React

Así pues, podemos comenzar con este tutorial. En primer lugar, crearemos nuestro proyecto de React a través de nuestro Command Prompt (cmd) y usando el gestor de paquetes npm que viene por defecto al instalar Node.js con el siguiente comando:

Una vez creado el proyecto, nos movemos a su raiz e instalamos las librerías necesarias para continuar (react-simple-chatbot y styled-components):

Al finalizar la instalación de las librerías podemos lanzar el servidor local con yarn start y dejarlo funcionando para poder observar cualquier cambio que hagamos en el código en tiempo real.

A continuación abrimos nuestro editor de código de confianza y realizamos los primeros cambios en la estructura del proyecto:

· En App.js vaciaremos el componente para dejarlo preparado.

· En App.css eliminamos todo y en la clase .App realizaremos cambios para centrar el contenido de nuestro futuro Chatbot

Teniendo la base limpia del proyecto para trabajar, creamos la carpeta components y en ella a su vez una carpeta para el componente que albergará el Chatbot (podemos darle el nombre que prefiramos, pues yo lo nombraré Contenido.js):

Como siguiente paso, importaremos ChatBot de ‘react-simple-chatbot’ y lo incluiremos en el render de Contenido.js. Una vez hecho esto, importamos Contenido.js en App.js y lo incluimos a su vez en el render:

Ahora bien, si echamos un vistazo a la web del servidor local, encontraremos una serie de errores relacionados con el Chatbot. Esto se debe a que no podemos simplemente declarar el Chatbot en el render. Hay que otorgarle un atributo para que pueda funcionar. Este atributo es steps y es el que mandará directrices al bot para lanzar mensajes y recibirlos.

Lo inicializaremos con un objeto JSON que contendrá un id, un message y un atributo end que indica el final de la funcionalidad de nuestro ChatBot:

Si volvemos a nuestra web, encontraremos por fin el ChatBot que nos mandará el mensaje del atributo message:

Antes de continuar con la funcionalidad del bot, haremos uso de la librería styled-components que instalamos previamente. Para ello, debemos importar ThemeProvider de ‘styled-components’. Una vez importado, incluiremos una constante con los atributos css fijados que permiten cambiar los estilos del bot y envolveremos el componente de ChatBot con el componente ThemeProvider, asignándole como atributo nuestra constante:

Los atributos del tema tienen nombres acorde con la función estilística que realizan, así pues al ser fácil de comprender, continuaremos con la funcionalidad del bot.

De momento hemos hecho que el bot envíe un mensaje y el proceso se detenga, pero, ¿y si queremos tener una interacción del usuario? Así pues, vamos a incluir dos nuevos steps en los que podamos recibir input y mostrarlo posteriormente. Para ello utilizamos el atributo user que nos permite el ingreso de datos por el chat y eliminamos el atributo end para permitir la continuación de steps:

Ahora bien, se puede observar que hemos incluído el atributo trigger en varios steps. El atributo trigger se encarga de continuar hacia el step cuyo id hemos indicado. En el caso de id: intro, realiza la pregunta y redirige al step pregunta-nombre. Aquí tenemos el atributo user en true para recibir input del usuario, y ningún mensaje, puesto que solo queremos recibir datos. A continuación redirigimos a respuesta-nombre en cuyo message incluímos {previousValue} que se encarga de pintar el valor recibido por el step previo. En nuestra web veremos algo así:

A su vez, existe un atributo que nos permite validar los datos introducidos por el usuario, lo cual puede ser muy útil si queremos guardar los datos para su posterior tratamiento. Dicho atributo es validator y podemos hacerlo funcionar con expresiones regulares:

Para entender su funcionamiento, consideremos que la variable value es el input del usuario. Recogiendo la variable de esta manera podemos utilizarla en código lógico para someterla al test() y comprobar si cumple nuestras indicaciones. En caso de que las cumpla y queramos continuar con el proceso, hacemos un return true. Si por el contrario no se cumple, podemos devolver un string que se enviará como mensaje en el input para alertar al usuario de que debe introducir de nuevo su dato:

Para proseguir, veamos otro atributo. Esta vez, uno que nos permita otro tipo de interacción con el usuario, como es options. Dicho atributo mostrará al usuario un número de botones acorde con la cantidad de opciones que queramos otorgarle, los cuales tendrán su trigger y su value para redirigir con datos a otros steps.

Creemos unos cuantos steps más para otorgarle más funcionalidad al bot:

Options requiere un value, un label y un trigger. El label será el mensaje contenido en la opción mostrada al usuario. Cada opción tiene su trigger para poder divergir y crear un bot más complejo. El value podemos utilizarlo o no, pero lo veremos posteriormente. Por el momento, echemos un vistazo a la web…

Oh, oh. Nos encontramos unos errores, si es que no hemos creado los steps referidos el los triggers de nuestras opciones. Esto se debe a que si declaramos el atributo trigger, estamos obligados a tener un step con dicho id, al que pueda acudir el redireccionamiento. Vamos a solucionarlo:

Vamos a comprobar el resultado visual de esto:

¡Genial! Ahora podemos manejar tanto respuestas escritas como interactivas. Sin embargo, esto hace parecer el potencial del bot algo pobre. ¿Podemos escalar la potencia de nuestro bot de alguna manera? Claro que sí.

Podemos utilizar el maravilloso atributo component e insertar nuestos propios componentes en el bot.

Para ello hemos preparado un componente llamado WikipediaSearch.js, el cual nos permitirá recibir el input del usuario y realizar una busqueda en Wikipedia para acceder a las páginas encontradas:

También rediseñaremos las steps del bot para que no carezcan de sentido en el uso del componente de busqueda:

Como podemos comprobar en el step con id: 9, insertamos en component nuestro componente WikipediaSearch y añadimos el atributo asMessage, el cual convierte el render() de WikipediaSearch al formato de mensaje de nuestro bot.

Ahora, necesitamos recoger los valores de los inputs que requerimos para hacer la busqueda en Wikipedia. Para ello, debemos usar los id de los steps que le piden al usuario input tanto por texto como por botón.

En el constructor() de WikipediaSearch es donde usaremos esos id para aplicar sus valores a variables del state:

Hemos creado dos variables más en state (busqueda y nombreCurado). Esto es debido a que el valor que necesita la query en la URL de Wikipedia es feo visualmente para mostrarlo en nuestro bot, por ende separaremos la parte lógica (busqueda) de la parte visual (nombreCurado).

Para acceder al valor de dichas variables, tenemos que añadir .value al final. Para verlo, vamos a realizar los condicionales necesarios en componentDidMount() para obtener el resultado final de busqueda y el nombre curado:

*Debemos recordar que los valores que recibiremos en .value son los recibidos por input si el step tiene el atributo user: true o los enviados por el step que tenga el atributo options en cada una de sus opciones.

Una vez guardados los valores en this.state.busqueda y this.state.nombreCurado, podemos pasar a pintar el render de WikipediaSearch que queramos que se muestre en el mensaje del bot:

En el href del link que nos llevará a la página de Wikipedia adecuada, concatenamos la busqueda que hemos guardado en componentDidMount(). El link se abrirá en una nueva pestaña y si llegamos hasta los pasos de elegir framework, el bot nos acabará mostrando esto:

Ahora, podréis testear la funcionalidad del bot que hemos programado a vuestro gusto y comprobar el resultado del código adjuntado en todas las imágenes. También podréis encontrar un link al Github del proyecto para echar un vistazo al código si lo necesitáis.

Para concluir el tutorial, debemos mencionar que la librería de react-simple-chatbot tiene una documentación oficial poco explicativa, y por ende, si se quiere conocer más sobre esta, es recomendable buscar tutoriales aparte para complementar la información de la documentación oficial.

---

Autor: Alejo Pérez Benayas
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
Github: Enlace a GitHub