Programación y publicación de un bot de discord utilizando angular

Bot de discord con angular

¿Qué es discord?

Discord es una plataforma social destinada a permitir crear grupos de chat para diferentes finalidades. Puedes pensar en ella como algo similar a Skype o TeamSpeak, aunque incluyendo las funciones de otras herramientas más profesionales. Tiene versiones tanto para PC como para dispositivos móviles, pasando también por un cliente que puedes utilizar directamente desde el navegador. Además, tiene bastantes funcionalidades, permitiendo chatear por texto, por voz e incluso realizar videoconferencias, todo ello con una aplicación totalmente gratuita.

En discord podemos diferenciar dos tipos de chat, los chats privados y los servidores. El potencial de esta aplicación consiste en estos últimos, ya que permiten la creación y administración de servidores de discord, compuestos a su vez por canales de voz (donde se realizan las llamadas o videollamadas) y canales de texto, (donde los diversos integrantes del servidor pueden realizar acciones tales como escribir, reaccionar a mensajes, etc).

¿Qué es un bot de discord?

En este contexto entendemos un bot de discord como un integrante automatizado del servidor que está esperando a que sucedan ciertos eventos para accionarse. Estos eventos pueden ser desde que una persona se añada al servidor, que se escriba algún mensaje (normalmente precedidos por algún prefijo como “!” o “>”) y realizar cualquier tipo de acción como añadir a esa persona a un grupo de permisos concreto o enviar un mensaje automático, etc. Permitiendo así simplificar la administración del servidor y otorgar facilidades a sus integrantes.

Nuestro bot consistirá en un buscador automático en la wiki de Terraria. En concreto devolverá 2 links buscando el término que se ha escrito en el canal correspondiente.

El primer link llevará al artículo en concreto si es que existe.

El segundo link será una búsqueda más genérica en caso de no existir un artículo que encaje el 100% con el termino buscado.

Además, ignorará los mensajes que puedan aparecer de otros posibles bots o si algún usuario envía un link en el canal de texto. También tendrá un comando de apagado.

Requisitos del bot

• Creación: Cuenta en discord.
• Publicación: Cuenta en Heroku
• Desarrollo: Node.js

Requisitos previos

Lo primero que haremos será preparar el entorno para la creación del bot, por lo que empezaremos accediendo a la web oficial de discord.js, (librería de angular que necesitaremos dentro del proyecto) para ver que versión mínima de node necesitamos, actualmente indica que necesitamos una versión de node.js superior a la 16.6.0.

Accedemos a la web de node.js y elegimos que versión descargar. En este caso cualquiera de las que nos muestra es suficiente ya que son posteriores a la 16.6.0, yo usaré la version LTS (en caso de tener ya instalado node podemos consultar la versión desde la consola con el comando node -v).

Una vez instalado node.js, procedemos a instalar angular a través del comando: npm install -g @angular/cli.

Creación del proyecto

Ahora procedemos a crear el proyecto de angular que contendrá el bot, para ello lanzamos el comando: ng new TajamarBot.

Por norma general bots integrados dentro de los servidores de discord suelen estar conectados permanentemente, por lo que deberemos tener en ejecución el proceso de nuestro proyecto para que este esté en funcionamiento. Esto se puede conseguir de muchas maneras. Las dos más comunes consisten en alojarlo en un VPS o en un servicio de hosting. En este caso lo alojaremos en un hosting gratuito llamado heroku, por lo que necesitaremos crearnos una cuenta gratuita en su sitio oficial.

Una vez creada la cuenta seleccionamos que queremos crear una app.

Rellenamos el sencillo formulario con el nombre que vamos a darle a la aplicación, la región en la que vamos a alojarla y seleccionamos que cree la App.

Una vez creada la aplicación dentro de Heroku, procedemos a instalar Heroku CLI, que nos permitirá realizar el control de versiones y subida de ficheros de nuestra aplicación a Heroku para su despliegue. Para ello vamos al apartado de Deploy, seleccionamos como Deployment Method Heroku Git y seleccionamos Download and install the Heroku CLI. Seguimos los sencillos pasos de descarga e instalación de Heroku CLI.

Ahora tendremos que vincular este repositorio en Heroku a nuestro proyecto de angular, para ello navegamos desde la consola de comandos a nuestro proyecto y seguimos los pasos indicados en el apartado de Heroku Git en el apartado de Deploy.

Si todo ha funcionado correctamente deberíamos obtener una salida parecida a esta. Es recomendable realizar la vinculación de Heroku con nuestro proyecto antes de la adición de cualquier librería, ya que si no podría haber conflictos a hora de detectarla desde heroku

Creación del bot

Para crear el bot tenemos que acceder a la zona de desarrolladores de discord, una vez en el panel vamos a aplicaciones y seleccionamos que queremos crear una aplicación introduciendo el nombre que le vamos a dar.

Una vez creada la app vamos al panel de Bot y clicamos sobre Add Bot.

Una vez añadido el botón vamos a la pestaña de OAuth2 para asignarle los permisos a nuestro bot. En el scope marcamos bot para desplegar los permisos específicos de bots y marcamos los permisos de Administrador. Una vez marcados los permisos copiamos el link que se genera para invitar el bot a nuestro servidor de discord.

Pegamos el link en el navegador web y nos mostrará una ventana con los servidores de discord que somos propietarios. Seleccionamos el servidor que deseemos y clicamos sobre Continuar.

Ahora en el panel del servidor de discord nos aparece el bot que hemos creado como si fuera un usuario del servidor.

Contenido del proyecto

Lo primero que haremos será añadir las dos librerías que vamos a utilizar en nuestro proyecto:

• Discord.js: Librería que permite conectarse y comunicarse con la API de discord.
• dotenv: Librería que permite la gestión de variables del entorno.

Una vez añadido el bot al servidor, para que nuestra aplicación funcione, necesitamos el token de autenticación, para extraerlo, en el panel de configuración del bot en la página de discord navegamos a la pestaña de Bot y clicamos sobre Copy.

Puesto que el bot no va a tener interfaz y simplemente va a recibir comandos y realizar funciones en función de ellos, no necesitamos declararlo como un componente, por lo que podemos eliminar la carpeta src. Vamos a trabajar con un único fichero principal llamado server.js alojado en la raíz y unos pocos ficheros de json que utilizaremos para ordenar diversos parámetros y configuraciones.

Conf.json

En este fichero json almacenaremos las variables que son comunes independientemente del modo que carguemos nuestro bot. Tendremos:

1. botToken: Token de autenticación del bot
2. channelID: Identificador del canal que el bot analizará en busca de comandos y también en el que escribirá las respuestas. Nuestro bot no actuará en todo el servidor, sólo analizará los mensajes de este canal de texto.
3. link1, link2_1 y link2_2: Cadenas de texto estáticas que necesitará para construir los links de respuesta.

lang.en.json y lang.es.json

Para permitir el multilenguaje en nuestro bot, almacenaremos ficheros nombrados siguiendo este formado lang.[idioma].json. Contendrán frases personalizadas que va a retornar nuestro bot. Si queremos añadir un lenguaje adicional copiaremos uno de estos ficheros y modificaremos sólo los valores.

Procfile

Para el correcto funcionamiento de nuestra aplicación en heroku es necesario crear un fichero en la raíz indicando que función va a tener nuestra app. Para indicar que es un bot debe tener el siguiente contenido:

server.js

Este será nuestro fichero principal del bot y está compuesto por diversas partes.

El primer bloque son las configuraciones iniciales del bot. Leerá en que idioma queremos desplegarlo, luego le añadiremos la librería de discord que hemos instalado previamente y la del lector de ficheros (fs).

Posteriormente extraemos los valores de los ficheros de configuración.

Y finalmente crearemos la conexión con la API de discord creando un objeto de tipo client con nuestro token de autenticación del bot.

Funciones

Dentro del código disponemos sólo de dos funciones.

La primera es una función que transforma un string en minúsculas y luego pone en mayúsculas la primera letra. Esta función es necesaria ya que el link que queremos generar de la wiki necesita que todas las palabras estén con ese formato o no realizará una búsqueda correcta.

La segunda función se encarga de analizar el mensaje que llega y devuelve un string indicándole al cuerpo principal qué hacer. Principalmente ayuda a interpretar el switch principal.

1. Si el autor del mensaje es un bot, devuelve «bot».
2. El mensaje empieza con HTTP, devuelve «link».
3. Si el mensaje empieza por «!» devuelve «command».
4. Si no coincide con ninguno de los criterios anteriores devuelve «search».

Adicionalmente al conectarse enviará un mensaje indicando que está online y posteriormente customizará su actividad.

Código principal.

El funcionamiento del bot consiste en:

1. Determina si el mensaje se encuentra en el canal guardado en el fichero de configuración. Si es de cualquier otro canal lo ignorará.
2. Si pertenece a ese canal le pasa el mensaje a la función que analiza el tipo del mensaje y realiza un switch del string que retorna.
   • «search»:
     1. Transforma el contenido del mensaje en un vector cortando por los espacios en blanco.
     2. Almacena el inicio del primer link que va a retornar
     3. Recorre el array transformando cada cadena de caracteres a minúsculas con la primera en mayúscula a excepción de los artículos y lo añade a la cadena que va a retornar separados por «_».
     4. Le añade la cabecera en el idioma correspondiente al primer link que va a retornar
     5. Añade al retorno el inicio del segundo link que va a retornar
     6. Vuelve a recorrer el vector transformando las cadenas.
     7. Le añade el final al link que va a retornar
     8. Le añade la segunda cabecera
     9. Retorna el link
   • «command»:
     1. Realiza un switch que contiene todos los comandos de nuestro bot.
        • «!POWEROFF»: Desconecta el bot
   • Cualquier otra opción no tiene acción por parte del bot. Ignora los links y los mensajes enviados por otros bots.

Publicación del bot

Una vez añadidos todos los ficheros de configuración del server, el fichero server.js con la funcionalidad y el Procfile para indicar que tipo de aplicación vamos a tener en heroku, procedemos a subir nuestra aplicación con los mismos comandos que introducimos para hacer el primer commit.

Una vez subidos los ficheros tenemos que activar el modo worker, para ello vamos a la pestaña de overview en heroku y clicamos sobre Configure Dynos.

Tenemos que desactivar la version web (que es la que viene por defecto y activar la version worker que es la que ha leído del fichero Procfile.

¡Como podemos comprobar, nuestro bot ya se encuentra activo y atiende solicitudes!

Autor/a: Sergio de San Clemente Muóz

Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma

Centro: Tajamar

Año académico: 2021-2022

Código: GitHub