Cómo crear el Comando `/ping` en tu Bot de Discord con TypeScript.

Nota: Este post asume que estás utilizando nuestra plantilla de bot de Discord. Si no es el caso, puedes adaptarlo según tus necesidades. Más información sobre la plantilla en nuestro Repositorio de Github.

Aprende a crear un comando /ping para tu bot de Discord con TypeScript. Este post incluye la implementación paso a paso, explicaciones sobre cómo medir la latencia del bot y la API de Discord, y cómo responder con un mensaje embebido mostrando los resultados.

📂 Estructura del Proyecto

Antes de comenzar, asegúrate de que tu proyecto tiene la siguiente estructura:

src/
├── commands/
│   ├── text/
│   └── slash/
│       ├── ping.ts
└── index.ts

Ahora sí, pasemos a la implementación.

⚙️ Implementación

📝 Paso 1: Crear el archivo necesario

Dirígete a la carpeta src/commands/slash/ y crea un archivo llamado ping.ts.

La estructura básica de los comandos ya está definida por la plantilla, así que solo necesitamos rellenar los detalles. Puedes consultar más sobre las propiedades de los comandos aquí.

💻 Paso 2: Escribir el código del comando `/ping`

Abre el archivo y añade el siguiente código:

import {
    SlashCommandBuilder,
    CommandInteraction,
    EmbedBuilder,
    Colors,
} from "discord.js";
import { SlashCommand } from "@/types/SlashCommand";
import { Bot } from "@/bot";

export const cmd: SlashCommand = {
    name: "ping",
    data: new SlashCommandBuilder()
        .setName("ping")
        .setDescription("Muestra la latencia del bot y de la API de Discord"),
    async execute(interaction: CommandInteraction, bot: Bot) {
        const sentMessage = await interaction.reply("Calculando ping...");

        const botLatency = Date.now() - interaction.createdTimestamp;
        const apiLatency = bot.client!.ws.ping;

        const embed = new EmbedBuilder()
            .setTitle("🌿 Pong!")
            .setColor(Colors.Green)
            .addFields(
                {
                    name: "Latencia del bot",
                    value: `\`${botLatency}ms\``,
                    inline: true,
                },
                {
                    name: "Latencia de la API",
                    value: `\`${
                        apiLatency === -1 ? "No medido" : apiLatency + "ms"
                    }\``,
                    inline: true,
                }
            )
            .setFooter({
                text: `Solicitado por ${interaction.user.username}`,
                iconURL: interaction.user.displayAvatarURL(),
            });

        await sentMessage.edit({ content: "", embeds: [embed] });
    },
};

🔍 Explicación del código

Importación de dependencias:

SlashCommandBuilder, CommandInteraction, EmbedBuilder y Colors de discord.js para la definición y respuesta del comando.
Bot y SlashCommand de las rutas personalizadas del proyecto.

Definición del comando:

name: Nombre del comando.
data: Estructura del comando utilizando SlashCommandBuilder.
execute: Funcionalidad del comando.

Lógica del comando:

El bot responde inicialmente con "Calculando ping...".
Calcula la latencia del bot restando el timestamp de la interacción al timestamp actual.
Obtiene la latencia de la API de Discord a través de bot.client.ws.ping.

Respuesta del bot:

Crea un embed con la latencia del bot y de la API de Discord.
La latencia de la API se muestra si ha sido medida, en caso contrario se muestra como "No medido".
Agrega un footer con el nombre y avatar del usuario que ejecutó el comando.

🛠️ Paso 3: Probar el comando

Guarda el archivo y asegúrate de que tu bot esté en ejecución:

npm run dev

En Discord, escribe /ping y verifica que funcione correctamente.

🎯 Conclusión

Ahora ya tienes un comando /ping funcional en tu bot de Discord.

¿Dudas o problemas? Únete a nuestra Comunidad de Discord y te ayudaremos con lo que necesites.

Cómo crear el Comando /ping en tu Bot de Discord con TypeScript.