Etapes de construction et de déploiement d’un robot Discord

Dans cet article, vous allez construire et déployer un bot Discord en utilisant Node.js, la bibliothèque officielle discord.js, et les conteneurs Back4app.

Les robots Discord sont des programmes qui effectuent des tâches automatisées sur Discord. Ces bots peuvent interagir avec les utilisateurs, gérer la conduite de la communauté et fournir des fonctionnalités supplémentaires non disponibles par défaut sur Discord, telles que la lecture de musique, la modération de contenu, l’organisation de sondages et l’intégration avec des services externes ou des API.

Mise en place de l’environnement de développement

Cet article présente un bot Discord qui donne aux utilisateurs des questions à résoudre en fonction du niveau de difficulté et du type de question qu’ils préfèrent sur un serveur Discord.

Pour suivre ce tutoriel, vous devez disposer des éléments suivants :

• Un compte Discord : Vous pouvez vous inscrire gratuitement si vous n’en avez pas.
• Node.js v20 ou supérieur : Vous pouvez le télécharger et l’installer sur votre système si vous ne l’avez pas.

Configurez votre répertoire de projet en exécutant la commande ci-dessous :

mkdir discord-bot && cd discord-bot && npm init -y

La commande ci-dessus crée un répertoire discord-bot et y initialise npm.

Ensuite, naviguez vers votre fichier package.json et ajoutez le script de démarrage ci-dessous :

"start": "node server.js"

Ensuite, installez les dépendances nécessaires à votre projet en exécutant la commande ci-dessous :

npm install discord.js axios dotenv 

Les dépendances que vous avez installées ci-dessus sont les suivantes :

• discord.js: Cette bibliothèque vous permettra d’interagir avec l’API Discord à partir de votre application Node.js.
• dotenv: Ce paquetage vous aidera à gérer les données sensibles comme le token de votre bot.
• axios: Ce paquet vous permettra de demander l’API Trivia.

Vous avez maintenant mis en place votre environnement de développement et installé les dépendances nécessaires. Ensuite, vous allez créer un compte de bot Discord.

Création d’un compte de robot Discord

Un compte Discord Bot est un compte Discord créé pour faire fonctionner un bot. Contrairement aux comptes d’utilisateurs ordinaires contrôlés par les utilisateurs humains, les comptes de robots sont contrôlés par des logiciels.

Ce compte servira de passerelle, accordant à votre bot les autorisations nécessaires pour accéder aux ressources du serveur, répondre aux événements et exécuter des actions au sein de votre communauté Discord.

Vous devez d’abord créer une application Discord pour créer un compte de bot Discord. Pour ce faire, rendez-vous sur le portail des développeurs de Discord et cliquez sur le bouton “Créer une application”, comme le montre l’image ci-dessous.

En cliquant sur le bouton, vous serez invité à vous connecter à votre compte Discord. Une fois connecté, donnez un nom à votre application et cliquez sur le bouton “Créer”, comme indiqué dans l’image ci-dessous.

Ensuite, désactivez l’option “bot public” pour vous assurer que vous êtes le seul à pouvoir ajouter votre bot aux serveurs.

Configurez ensuite les autorisations du robot en désactivant tous les “Privileged Gateway Intents” pour vous assurer qu’il a accès aux mises à jour en temps réel de l’activité du serveur, comme la présence des membres.

Ensuite, naviguez jusqu’à l’onglet “OAuth2” sur votre barre latérale gauche. Dans la section “SCOPES”, cochez les cases bot et application.commands, comme indiqué dans l’image ci-dessous.

La sélection de la portée bot permet à Discord de reconnaître votre application comme un bot, tandis que la portée application.commands vous permet de créer des commandes slash que votre bot écoutera.

Une section “BOT PERMISSIONS” s’ouvre lorsque vous cochez la case “bot”. Dans la section “BOT PERMISSIONS”, cochez la case Administrateur, comme indiqué dans l’image ci-dessous.

En cochant cette case, le bot dispose de toutes les autorisations possibles au sein du serveur. Ces permissions incluent la possibilité de gérer les messages et les canaux.

Sous la section “BOT PERMISSIONS”, Discord génère une URL vous permettant d’ajouter ce bot à un serveur. Collez l’URL dans votre navigateur web et choisissez le serveur sur lequel vous souhaitez ajouter votre bot.

Ensuite, récupérez votre token dans l’onglet “bot” en cliquant sur le bouton“Reset Token“, comme le montre l’image ci-dessous.

En cliquant sur le bouton pour la première fois, vous réinitialiserez le jeton par défaut de votre robot et vous obtiendrez un nouveau jeton. Copiez et conservez ce jeton en toute sécurité. Si vous perdez le jeton, vous devrez le réinitialiser à nouveau, car il n’est affiché qu’une seule fois.

Créez un fichier .env pour ajouter vos variables d’environnement, comme le jeton du bot, ainsi que d’autres données, comme l ‘identifiant de la guilde à laquelle vous avez ajouté le bot et l’identifiant du client de votre bot:

TOKEN = "<BOT TOKEN>"
GUILD_ID = "<GUILD ID>"
CLIENT_ID = "<BOT'S CLIENT ID>"

Vous avez maintenant créé votre compte Discord Bot. Ensuite, vous allez construire votre Discord Bot.

Construire votre projet de robot Discord avec Node.js

Cette section vous guidera dans la création de votre bot de quiz Discord et dans l’intégration des paquets que vous avez installés pour enregistrer les commandes slash du bot avec Discord et gérer l’interaction de votre bot avec un membre de la guilde.

Structurez le répertoire de votre projet de la même manière que ci-dessous pour suivre ce tutoriel.

quiz-bot/
│
├── src/
│   ├── register-commands.js   # Script to register slash commands with Discord
│   └── quiz-bot.js                # Script for message handling and fetching questions
│
├── server.js                  # Entry point for your bot and script for running a server
├── node_modules/              # Node.js modules
│
├── .env                       
├── .gitignore                   
├── package.json                         
└── package-lock.json

Enregistrement des commandes du robot

Les robots exigent que les utilisateurs saisissent une commande. Avec les bots Discord, vous définissez les commandes que vous voulez que votre bot écoute avec le préfixe slash (/).

Pour enregistrer la commande /quiz de votre bot sur votre serveur Discord, ajoutez d’abord les importations suivantes de discord.js à votre fichier register-commands.js:

// register-commands.js
const { REST, Routes, ApplicationCommandOptionType } = require('discord.js');

Les classes que vous avez importées ci-dessus sont les suivantes :

• REST: Cette classe vous permet de faire des appels API REST à l’API Discord.
• Routes: Cette classe fournit des fonctions utilitaires qui génèrent des points d’accès à l’API Discord.
• ApplicationCommandOptionType: Cette classe permet de définir les types de données pour les options acceptées par la commande.

Ensuite, vous devez définir un tableau d’objets de commande contenant toutes les commandes de votre robot. Un objet commande contient un nom, une description et un tableau d’options.

Ces options permettent aux utilisateurs de personnaliser la commande du robot. Dans ce cas, le tableau d’options permet aux utilisateurs de spécifier la difficulté et le type de question que le robot doit poser.

Ajoutez le bloc de code ci-dessous à votre fichier register-commands.js pour créer votre tableau de commandes:

// register-commands.js
const commands = [
  {
    name: 'quiz',
    description:
      'Select difficulty and question type to tailor the quiz experience.',
    options: [
      {
        type: ApplicationCommandOptionType.String,
        name: 'difficulty',
        description: "Options include 'easy', 'medium', or 'hard'.",
        required: true,
      },
      {
        type: ApplicationCommandOptionType.String,
        name: 'type',
        description:
          " Choose 'multiple' for multiple choice or 'boolean' for true/false",
        required: true,
      },
    ],
  },
];

Le bloc de code ci-dessus définit la commande quiz dans le tableau des commandes. L’objet quiz contient deux options que l’utilisateur doit saisir avec la commande /quiz, telles que le niveau de difficulté et le type de question que le robot posera.

Ensuite, vous devez enregistrer votre commande /quiz pour la rendre accessible par le biais de votre bot. Pour enregistrer la commande, vous devez d’abord créer une instance de la classe REST avec votre token discord bot et votre version REST préférée.

Pour enregistrer votre commande /quiz et la rendre accessible via votre bot, commencez par créer une instance de la classe REST en utilisant votre jeton de bot Discord et en spécifiant votre version REST préférée.

Comme cela :

// register-commands.js
const rest = new REST({ version: '10' }).setToken(process.env.TOKEN);

Discord met régulièrement à jour son API, ce qui entraîne des modifications au niveau des points finaux, de la structure des réponses et du comportement.

Définir une version REST spécifique pour votre projet Discord vous permet de gérer efficacement les fonctionnalités disponibles pour votre projet. Le bloc de code ci-dessus utilise la version 10 de l’API Discord.

Ensuite, vous devez définir une fonction asynchrone pour enregistrer les commandes du bot avec le serveur d’une guilde en utilisant la méthode applicationGuildCommands de la classe Routes.

Comme cela :

// register-commands.js
(async () => {
  try {
    console.log('Started refreshing SLASH (/) commands.');
    await rest.put(
      Routes.applicationGuildCommands(
        process.env.CLIENT_ID,
        process.env.GUILD_ID
      ),
      { body: commands }
    );
    console.log('Successfully reloaded SLASH (/) commands.');
  } catch (error) {
    console.error(error);
  }
})();

Le bloc de code ci-dessus exécute une requête PUT vers le point de terminaison de l’API Discord avec le tableau de commandes comme corps de la requête.

Il construit le point de terminaison de l’API à l’aide de la méthode applicationGuildCommands, en prenant l’ID client du bot et l’ID de la guilde cible.

Après avoir enregistré les commandes, vous devrez gérer le flux d’interaction entre votre robot et un membre de la guilde.

Gérer l’interaction des utilisateurs avec le robot Discord

Pour gérer le flux d’interaction entre votre robot et un membre de la guilde, ajoutez d’abord les importations suivantes à votre fichier quiz-bot.js:

// quiz-bot.js
const { Client, IntentsBitField } = require('discord.js');
const axios = require('axios');

Vous devez utiliser la classe Client pour créer une nouvelle instance de bot Discord, tandis que vous utiliserez la classe IntentsBitField pour spécifier les intents (événements) que votre bot recevra de l’API Discord.

Ensuite, ajoutez le bloc de code ci-dessous dans votre fichier quiz-bot.js pour créer une nouvelle instance de client pour votre bot et spécifier des intentions particulières pour votre application de bot :

// quiz-bot.js
const client = new Client({
  intents: [
    IntentsBitField.Flags.Guilds,
    IntentsBitField.Flags.GuildMembers,
    IntentsBitField.Flags.GuildMessages,
    IntentsBitField.Flags.MessageContent,
  ],
});

Le bloc de code ci-dessus définit les intentions spécifiques dont le robot a besoin pour fonctionner :

• IntentsBitField.Flags.Guilds: Cette intention permet au bot de recevoir des informations sur les guildes (serveurs) dont il est membre, y compris leurs noms, icônes et rôles.

• IntentsBitField.Flags.GuildMembers: Cette intention permet au bot de recevoir des informations sur les membres de la guilde, telles que leur nom d’utilisateur, leur statut et leur rôle.

• IntentsBitField.Flags.GuildMessages: Cette intention permet au bot d’accéder aux messages envoyés dans les guildes où il se trouve, ce qui lui permet de répondre aux commandes ou aux événements déclenchés par les messages.

• IntentsBitField.Flags.MessageContent: Cette intention permet à votre bot d’accéder au contenu des messages envoyés dans les guildes. Sans cette intention, le contenu du message sera vide.

Vous allez créer un écouteur d’événement pour l’événement ready. Cet événement se déclenche lorsque votre robot Discord s’est connecté avec succès aux serveurs Discord et qu’il est prêt à fonctionner.

Ajoutez le bloc de code ci-dessous à votre fichier quiz-bot.js pour créer votre écouteur d’événement prêt :

// quiz-bot.js
client.on('ready', () => {
  console.log(`✅ Bot is online and ready`);
});

Ensuite, vous devez créer un écouteur pour l’événement interactionCreate. Cet événement se produit lorsqu’un utilisateur effectue une interaction que votre robot peut gérer, comme l’utilisation d’une commande slash.

Lorsqu’il est émis, votre récepteur d’événements reçoit l’événement interactionCreate ainsi qu’un objet d’interaction.

Cet objet contient tous les détails de l’interaction, tels que le type d’interaction et les données fournies par l’utilisateur.

Ajoutez le bloc de code ci-dessous à votre fichier quiz-bot.js pour créer votre écouteur d’événement interactionCreate:

// quiz-bot.js
client.on('interactionCreate', async (interaction) => {
 if (!interaction.isChatInputCommand()) return;
 
 if (interaction.commandName === 'quiz') {
  // Rest of the code goes here...
 }
});

Le bloc de code ci-dessus met en place un écouteur d’événement interactionCreate.

L’écouteur d’événements vérifie si l’interaction entre l’utilisateur et le robot est une commande d’entrée de chat (commande slash) et filtre les autres types d’interactions.

Il vérifie ensuite si le nom de la commande est quiz et procède à la gestion de la session de quiz entre le robot et l’utilisateur.

Si le commandName est quiz, faites une requête GET avec Axios à l’URL de l’API Trivia pour obtenir la question et ses réponses (correctes et incorrectes).

Mélangez les réponses pour randomiser les options, puis présentez-les à l’utilisateur.

Comme cela :

// quiz-bot.js

await interaction.deferReply();

const difficulty = interaction.options.getString("difficulty");
const type = interaction.options.getString("type");

try {
  const url = `https://opentdb.com/api.php?amount=1&difficulty=${difficulty}&type=${type}`;
  const response = await axios.get(url);
  const data = response.data.results[0];
  const question = data.question;
  const correctAnswer = data.correct_answer;
  const options = [...data.incorrect_answers, correctAnswer];

  // Shuffle the options
  for (let i = options.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [options[i], options[j]] = [options[j], options[i]];
  }

  await interaction.editReply({
    content: `Question: ${question}\\nOptions: ${options.join(", ")}`,
  });
} catch (error) {
  console.error(error);
  // Notify the user in case of an error after deferring
  await interaction.followUp("Failed to fetch the question. Please try again.");
}

Le bloc de code ci-dessus reporte d’abord la réponse du robot à l’aide de la méthode deferReply afin de laisser au robot le temps de traiter la demande GET.

Le bloc de code récupère ensuite la difficulté et le type de question sélectionnés par l’utilisateur dans l’objet d’interaction à l’aide de interaction.options.getString().

Ensuite, le robot extrait la question, la réponse correcte et les réponses incorrectes des données récupérées.

Après avoir mélangé les réponses correctes et incorrectes pour randomiser l’ordre des choix, il modifie la réponse différée initiale en y ajoutant la question et les options du quiz.

Ensuite, vous devez gérer la réponse de l’utilisateur à la question en la comparant à la bonne réponse et en informant l’utilisateur s’il s’est trompé ou non.

Collecte des réponses des utilisateurs

Pour recueillir la réponse de l’utilisateur à la question, vous utiliserez la méthode createMessageCollector sur le canal de l’interaction(interaction.channel).

Cette méthode vous permet de filtrer les messages qui n’ont pas été envoyés par l’utilisateur qui a lancé la commande /quiz, de fixer un délai pour la réponse de l’utilisateur et de spécifier le nombre maximum de messages à collecter.

Lorsque l’utilisateur envoie une réponse, la méthode createMessageCollector déclenche un événement de collecte.

Vous devez ajouter un écouteur à cet événement ; l’écouteur vérifiera la réponse de l’utilisateur par rapport à la réponse correcte à la question et enverra un message approprié.

En revanche, si l’utilisateur n’envoie pas de réponse appropriée dans le délai imparti, la méthode createMessageCollector déclenche un événement de fin.

Vous devez ajouter un écouteur qui répondra à l’utilisateur pour l’informer que son temps est écoulé pour cet événement.

Comme cela :

// quiz-bot.js
const filter = (m) => m.author.id === interaction.user.id;

const collector = interaction.channel.createMessageCollector({
  filter,
  time: 15000,
  max: 1,
});

collector.on("collect", async (m) => {
  if (m.content.toLowerCase() === correctAnswer.toLowerCase()) {
    await m.reply("Correct answer! 🎉");
  } else {
    await m.reply(`Wrong answer! The correct answer was: ${correctAnswer}`);
  }
});

collector.on("end", (collected) => {
  if (collected.size === 0) {
    interaction.followUp("Time is up! No answer was provided.");
  }
});

Le bloc de code ci-dessus crée un collecteur de messages pour le canal où l’interaction a eu lieu(collecteur). Le collecteur filtrera les messages en fonction de l’identifiant de l’auteur, afin de s’assurer que seul l’utilisateur à l’origine du quiz puisse fournir une réponse dans un délai de 15 secondes.

Le bloc de code crée ensuite deux récepteurs d’événements pour le collecteur. Le premier écouteur d’événement, collect, déclenchera un rappel pour vérifier la réponse de l’utilisateur et lui répondre en conséquence.

Le deuxième écouteur d’événement, end, déclenche un rappel pour informer l’utilisateur qu’il n’a pas fourni de réponse dans le délai imparti.

Ensuite, établissez une connexion entre votre robot et Discord en ajoutant la ligne de code à la fin de votre fichier quiz-bot.js:

// quiz-bot.js
client.login(process.env.TOKEN);

Création d’un fichier d’entrée

Vous allez créer un fichier d’entrée, qui est un fichier unique qui initialisera l’ensemble de votre application bot. Il aura deux fonctions :

• Importation de la logique du bot : Le fichier d’entrée exécutera la logique du bot en exigeant les fichiers JavaScript, qui gèrent l’enregistrement de votre commande de bot avec le serveur Discord et la réponse aux messages des utilisateurs.

• Démarrer le serveur : Le fichier d’entrée mettra en place un serveur qui permettra à votre bot de fonctionner sur un conteneur Back4app. Les conteneurs Back4app ont besoin de ports exposés pour que le déploiement de votre application soit réussi.

Ajoutez le bloc de code ci-dessous au fichier server.js pour créer un serveur :

// server.js
require('dotenv').config();
const http = require('http');
require('./src/register-commands.js');
require('./src/quiz-bot.js');

http
  .createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Bot is running!');
  })
  .listen(3000, () => {
    console.log('Server is ready.');
  });

Le bloc de code ci-dessus met en place votre bot Discord en créant un simple serveur HTTP. Ce serveur sert de point d’entrée, permettant au bot de fonctionner dans l’environnement du conteneur.

Le bloc de code ci-dessus importe la logique de base de votre bot et spécifie un port Back4app pour permettre à votre bot de se déployer sur un conteneur Back4app.

Après avoir créé le fichier d’entrée, vous pouvez tester votre bot Discord localement avant de le déployer dans un conteneur Back4app.

Tester votre robot Discord

Démarrez votre bot Discord en exécutant le bloc de code ci-dessous dans le terminal de votre application :

node server.js

La commande affichera des messages indiquant que vous avez enregistré votre robot avec succès et que celui-ci est prêt et en ligne.

Allez sur le serveur auquel vous avez ajouté votre robot. Vous devriez constater qu’il est maintenant en ligne.

Pour interagir avec votre robot, envoyez la commande /quiz. Le robot devrait répondre avec des options détaillant la façon dont vous souhaitez que la question du quiz se présente.

Choisissez les options souhaitées (par exemple, sélectionnez une catégorie de quiz ou un niveau de difficulté) et appuyez sur Entrée. Le robot répondra par une question et fixera un délai de 15 secondes pour votre réponse.

Si vous soumettez votre réponse dans le délai imparti, le robot comparera votre réponse à la bonne réponse et vous indiquera si votre réponse est bonne ou mauvaise.

Vous avez déterminé que votre bot peut gérer toutes les fonctionnalités pour lesquelles vous l’avez conçu ; ensuite, déployez votre bot Discord dans un conteneur Back4app.

Déployer le Discord Bot sur les conteneurs Back4app avec l’agent AI

Dans cette section, vous allez déployer votre bot Discord sur des conteneurs Back4app avec l’agent Back4app AI.

Pour déployer une application sur des conteneurs Back4app, vous avez besoin des éléments suivants :

• Un fichier Docker dans votre projet
• Dépôt GitHub: Votre projet doit être téléchargé sur un dépôt GitHub.
• Back4app GitHub App: Installez et accordez les permissions nécessaires à l’application GitHub de Back4app pour votre dépôt.

Tout d’abord, créez un fichier Docker dans le répertoire racine de votre projet et ajoutez-y le bloc de code ci-dessous :

# Dockerfile
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

Ensuite, vous devez télécharger votre code sur un dépôt GitHub afin de le rendre accessible pour le déploiement.

Avant de suivre l’étape suivante, assurez-vous que l’application GitHub Back4App Containers est installée sur votre compte GitHub et qu’elle dispose des permissions nécessaires pour accéder à l’application que vous souhaitez déployer.

Rendez-vous sur la page d’accueil de Back4app et cliquez sur le bouton “Nouvelle application” en haut à droite de votre écran.

Vous accéderez à un écran d’initialisation, où vous devrez choisir le type d’application que vous souhaitez créer.

Sélectionnez l’option Back4app Agent, comme le montre l’image ci-dessous.

Lorsque vous sélectionnez l’option Agent Back4app, vous serez redirigé vers la page de l’agent Back4app AI.

Donnez à l’agent IA l’invite ci-dessous pour déployer votre application :

Deploy my "YOUR_REPOSITORY_URL" repository on GitHub to a Back4App Container.
Here are the required environmental variables:
TOKEN = "YOUR_DISCORD_BOT_TOKEN"
GUILD_ID = "YOUR_GUILD_ID"
CLIENT_ID = "YOUR_CLIENT_ID"

Remplacez les caractères de remplacement dans l’invite ci-dessus par leurs valeurs réelles.

Vous devriez obtenir une réponse similaire à celle ci-dessous :

La réponse ci-dessus indique que le processus de déploiement est en cours et que votre application sera en ligne et disponible à l’adresse URL fournie.

Vous pouvez surveiller le processus de déploiement sur le tableau de bord de votre conteneur Back4app, ou vous pouvez donner à l’agent AI l’invite ci-dessous après un certain temps pour confirmer l’état actuel du déploiement.

What is the current deployment status of my web app?

Vous devriez obtenir une réponse similaire à celle ci-dessous :

Vous pouvez également choisir de déployer votre application sur Back4App manuellement.

Conclusion

Dans cet article, vous avez appris à construire un bot Discord avec Node.js. Vous avez exploré comment créer un compte de bot Discord, enregistrer les commandes du bot et gérer les réponses des utilisateurs.

En outre, vous avez testé votre bot Discord et l’avez déployé sur un conteneur Back4app avec l’aide de l’agent AI.

Les robots Discord peuvent être très utiles pour automatiser des tâches, fournir des divertissements, etc. En fonction de votre cas d’utilisation, vous pouvez adapter le robot pour qu’il exécute des fonctions spécifiques répondant à vos besoins.

Le code complet utilisé dans ce tutoriel est disponible sur ce dépôt GitHub.