DEV Community: Somos Devs

Primeros pasos en Discord.JS: MessageEmbed

Christopher — Tue, 23 Mar 2021 15:51:03 +0000

Introducción

Un Embed es un tipo de mensaje que representa el Objeto Embed en Discord, tiene una interfaz fluida y no va a verse igual en telefonos. Este tipo de mensajes puede ser utilizado para presentar información con un formato en específico. Debes de tomar en cuenta que:

Los campos son opcionales.
Debe de contener al menos un campo.
Los campos no pueden estar vacíos, indefinidos o nulos.

Así mismo los embeds pueden contener los siguientes datos:

Un autor, incluyendo un avatar y un link.
Un título.
Una descripción.
Campos, que pueden incluir a su vez un título y un subtítulo

Puedes incluir la cantidad de campos que requieras.

Un footer o pie de mensaje, puede incluir texto y un ícono.
Y un color que se muestra en la parte izquierda del mensaje

Este color debe de ser expresado en su valor hexadecimal.

Creando un embed

La forma más práctica de crear un embed es utilizando el constructor MessageEmbed.

Primero lo declaramos ya sea como una variable o como una constante, dependiendo de como lo vayas a utilizar.

const embed = new Discord.MessageEmbed()

A partir de ahí solo debemos ir agregando los métodos que vayamos a utilizar. A continuación una plantilla creada por CraterMike en su guía "Uso de mensajes Embeds" que representa fielmente los elementos que podemos agregar al mensaje:

const embedDatos = new Discord.MessageEmbed() 
    .setTitle("Este es su título, puede contener 256 caracteres")
    .setAuthor(message.author.username, message.author.displayAvatarURL())
    .setColor(0x00AE86)
    .setDescription("Este es el cuerpo principal del texto, puede contener 2048 caracteres.")
    .setFooter("Pie de página, puede contener 1024 caracteres", client.user.avatarURL())
    .setImage(message.author.displayAvatarURL())
    .setThumbnail(message.author.displayAvatarURL())
    .setTimestamp()
    .setURL("https://github.com/CraterMaik")
    .addField("Este es un título de campo", "Este es un valor de campo puede contener 1024 caracteres.")
    .addField("Campo en línea", "Debajo del campo en línea",  true)
    .addField("Campo en línea 3", "Puede tener un máximo de 25 campos.", true);

message.channel.send({ embed: embedDatos });

El resultado del código anterior se vería algo así:

Un error muy común al utilizar el constructor MessageEmbed es el colocar el ; (punto y coma) antes de declarar el último método que formará parte del Embed, esto causará un error a la hora de enviar el mensaje.

Te invitamos también a pasarte por la documentación oficial de Discord.js para información más detallada.

También te invitamos a seguirnos en nuestra cuenta de Instagram, podrás encontrarnos como @somos.devs, siguenos también aquí en Dev Community para enterarte más rápido de nuestras últimas públicaciones.

Primeros pasos en Discord.JS: Config.JSON

Christopher — Tue, 09 Mar 2021 00:38:09 +0000

¡Hola!, en esta ocasión traemos una guía corta sobre el uso de prefijos y archivos externos para guardar datos importantes para el bot.

Lo primero que vamos a hacer es crear un archivo llamado config.json en el cual, como dijimos al principio, vamos a guardar cualquiera dato importante que vayamos a referenciar más adelante en el archivo principal del bot.

Ahora en el archivo app.js declaramos que necesitamos el contenido dentro de este archivo, en una constante:

const config = require('./config.json');

Con esto vamos a cargar todo el contenido json, pero dicho contenido debe existir para ser extraido, el contenido del config.json será el siguiente:

{
"prefix": "!",
"token": "tutoken"
}

Ya que tenemos estos datos en una constante llamada config basta con especificar el valor que necesitamos a través de su respectiva clave:

let prefix = config.prefix;

Y para el token lo mismo

client.login(config.token)

Y eso es todo por esta guía, recuerda seguirnos en nuestra cuenta de Instagram

Primeros pasos en Discord.JS

Christopher — Wed, 03 Mar 2021 00:16:07 +0000

Introducción

¡Hola!, estamos muy emocionados por darle comienzo a esta serie donde les daremos el empujón inicial hacia la API de Discord, antes que nada vamos a empezar por conocer lo que necesitamos para esta guía.

Requisitos:

Javascript básico, ya que es el lenguaje de programación que vamos a usar, aunque hay una variedad de librerias a su disposición, por ejemplo, Python. Sientete libre de probarlas para conseguir tu entorno de programación ideal.
Node(+NPM).
Editor de código (cualquiera).

Instalando Node

Primero debemos instalar la versión más reciente (o la que sea compatible con tu ordenador) de Node.

Le recomendamos instalar la versión LTS debido a que es la que proporciona mayor estabilidad, pero si desea probar las últimas caracteristicas que ofrece Node instale la versión más reciente.

Las versiones más recientes de Node no soportan Windows 7, si usted es usuario de este sistema operativo debe instalar la versión 13 o anteriores.

Cabe destacar que el instalador trae consigo NPM, que será nuestro gestor de paquetes aliado a lo largo de todo este proceso.

Inicializando el proyecto

1. Creando cuenta del bot

Una vez instalado Node en nuestro sistema es hora de crear una cuenta para el bot en el portal de desarrolladores de discord.

Para acceder a el portal de desarrolladores deberás iniciar sesión con tu cuenta de discord, no te preocupes, es un portal oficial.

Click en New application
Ingresa el nombre que le quieras colocar a la aplicación en el portal
Click en la pestaña bot
Create new bot account Y aqui podrás editar datos como el nombre del bot, su foto de perfil, si va a ser público, etc. Guarda datos importante de la cuenta del bot, como el ID y el token ya que los usaremos más adelante.

NUNCA COMPARTAS DEL TOKEN DEL BOT, EL TOKEN ES LO QUE AUTENTICA LA CONEXIÓN ENTRE EL CÓDIGO Y LA API DE DISCORD, EL MISMO DEBE DE SER PRIVADO. TEN CUIDADO

Actualmente Discord te informa si el token de alguno de tus bots ha sido publicado en algún sitio, como por ejemplo, Github.

2. Invitando el bot al servidor

Ahora vamos a añadir el bot que acabamos de crear a un servidor, te recomendamos tener un servidor de pruebas a la hora de desarrollar bots, por si algo sale mal o simplemente para evitar distracción o saboteo por parte de otros usuarios.

Ingresa a este sitio web, en el cual podrás generar un link de invitación para el bot, simplemente debes introducir el ID del bot, sin preocuparte ya que el mismo es un dato público, en el mismo sitio podrás decidir que permisos le vas a dar al bot, te recomendamos dejarlo como administrador, pero al hacer un bot público tendrás que darle los permisos que necesite y que se adapten a sus funciones.

3. Instalando Discord.js

Vamos a empezar a usar el editor de código, te recomendamos Visual Studio Code, un editor de código desarrollado por Microsoft, de todas formas puedes usar el de tu preferencia.

Ahora sí, primero vamos a abrir una consola o terminal en la carpeta que vamos a utilizar para trabajar en el bot, y a ejecutar el siguiente comando para iniciar un proyecto con node.

npm init -y

Esto lo que hará es crear el package.json el cual es el archivo raíz de nuestro proyecto, en el que se encontraran datos como el nombre del proyecto, la version, comandos de prueba, módulos instalados, y colocará estos valores según una plantilla que viene por defecto.

Tambien puedes usar

npm init

Para introducir cada uno de los datos por ti mismo.

Ahora vamos a instalar paquete de discord.js con el siguiente comando:

npm i discord.js --save

Y al cabo de unos segundos tendras una nueva carpeta creada llamada node_modules en esta carpeta se guardarán los paquetes que instales a medida de que vayas avanzando en el proyecto.

Encendiendo el bot

Te pudiste haber dado cuenta cuando añadiste el bot al servidor que este está desconectado, a partir de ahora vamos a empezar a trabajar con código en el lenguaje de programación Javascript, como dijimos en el principio, te recomendamos rotundamente dos cosas.

Si no tienes los conocimientos básicos del mismo por favor, consulta algún curso, puedes conseguir muchos en Youtube de forma gratuita.
Trata en lo posible de evitar el Copy&Paste, prueba escribir el código por ti mismo para que te acostumbres a la sintaxis de la libreria, recuerda que en el mundo de la programación todo se consigue con la práctica.

Ahora bien, en la carpeta que habiamos elegido en un principio para desarrollar el proyecto vamos a tener hasta ahora un archivo y una carpeta (node_modules y package.json), algo como esto:

En nuestro editor de código favorito vamos a crear un nuevo archivo el cual podemos titular como queramos, los nombres más comunes son app.js, server.js o bot.js, en lo que resta de la guía vamos a titular el archivo principal del bot como app.js.

Ahora en app.js vamos a comenzar declarando que necesitamos el modulo de Discord.js

const Discord = require('discord.js');
const client = new Discord.Client();

Vamos a crear el evento ready el cual se llamará una vez el bot se haya iniciado correctamente.

client.on('ready', () => { 
    console.log('El bot se ha iniciado correctamente'); 
});

Vamos a crear el evento message el cual es el evento fudamental de nuestro bot, el cual detecta cuando un usuario envia un mensaje en alguno de los servidores donde se encuentra el bot o via mensaje directo, el nombre con el cual nos referimos al objeto del mensaje puede ser cualquiera en realidad, los mas usados son msg o message, en lo que resta de guía nos vamos a referir al mismo como message.


client.on('message', (message) => {

//Código 

});

Ahora por último añadiremos nuestro token, la cual es la llave que nos dará acceso a la cuenta del bot en si y por ende acceso a la API de Discord, recuerda no debes compartir este dato con nadie

client.login('token');

Recuerda sustituir la palabra "token" por el que se le asignó a tu bot en el portal de desarrolladores de Discord.

Y eso sería todo, el código quedaría algo así:

const Discord = require("discord.js"); 
const client = new Discord.Client(); 

//Evento ready 

client.on('ready', () => { 

    console.log('El bot se ha iniciado correctamente');  

}); 

//Evento message 

client.on('message', (message) => { 

//Código 

}); 

client.login('token');

Ahora, ¿por qué no probamos a añadir nuestro primer comando?
Vamos a añadir el siguiente código dentro del evento message

if(message.content.startsWith('!'+'ping')){
message.channel.send('¡Pong!');
};

En la primera línea colocamos una condicional que va a devolver true en caso de que el contenido del mensaje que envie el usuario sea !ping, luego de eso el bot enviará un mensaje diciendo ¡Pong!, eso es lo que estamos haciendo en este código.

Finalmente vamos a encender el bot.
Simplemente debes abrir una terminal en al carpeta raíz del proyecto y ejecutar el siguiente comando

node app.js

Hay una mejor forma, usando el módulo nodemon el cual lo que hace es mantener el bot encendido y lo reinicia de forma automática cada vez que realizamos un cambio en el código, es bastante útil, para instalarlo, en la misma consola ejecutamos el siguiente comando:

npm i nodemon -g

El cual instalará de manera global el módulo, por lo que no vas a tener que instalarlo en cada proyecto que vayas a crear.

Utilizarlo es bastante sencillo, solo con un comando

nodemon app

Si vamos a Discord, al servidor de pruebas en el que añadimos al bot podremos observar que el bot ya está en línea, ahora queda probar que el comando funcione correctamente.

Y listo, ya tienes un bot funcional, pero eso no es todo, si quieres seguir aprendiendo sobre este tópico, puedes revisar nuestras guías en las cuales ponemos a tu disposición temas como embeds, prefijos, reacciones y mucho más.

Esperamos que esta guía te haya sido de ayuda, recuerda seguirnos en nuestra cuenta de Instagram.