Site non compatible avec cette vieillerie d'Internet Explorer. Pour une expérience complète, voir la liste des navigateurs supportés.
Thumbnail

 Memo Discord - Créer un bot avec discord.js et l'héberger 24h/24 gratuitement

La fameuse application Discord est très populaire de nos jours, c'est pourquoi je vous propose un petit tuto pour créer un bot et l'héberger h24 gratuitement.


Tuto | Javascript

Auteur : Guillaume M.
Créé le : 13 Nov 2020
Dernière mise à jour : 16 Nov 2020

Création et configuration du bot via le portail développeur de Discord


Avant de commencer à coder quoi que ce soit, il nous faut dans un premier temps créer le bot sur la plateforme développeur fournie par Discord, pour se faire rendez-vous à cette adresse : https://discord.com/developers/applications.

Une fois sur la page, cliquez sur New Application en haut à droite et entrez un nom (j'appellerai cette application TutoBot, super original vous me direz ^^).

Pour le moment le bot n'est toujours pas créé, simplement l'application qui le contiendra, passons donc à la création de celui-ci.

Direction le menu de gauche et cliquez sur Bot puis sur cette nouvelle page cliquez sur Add Bot (une popup apparaît vous indiquant que c'est une action irréversible mais pas d'inquiétude, notre but est bien de créer un bot). Ça y est le bot est officiellement créé ! Notez bien la présence d'un token privé ici (il sera utilisé pour permettre à notre code d'intéragir avec lui) :

Passons maintenant à la configuration.

Dans un premier temps, vous pouvez décocher la case Public Bot, rien ne vous empêchera par la suite de recocher cette case si vous souhaitez passer celui-ci en public mais pour le moment nous sommes en phase de développement et nous serons donc les seuls à l'utiliser.

Note : D'ailleurs je vous conseille fortement de créer un serveur sur Discord spécialement pour la phase de développement du bot, personnellement c'est ce que je fais, ça évite d'embêter les potes et si vous avez besoin de cobayes, vous pourrez toujours les inviter :)

Bien, cliquez maintenant sur OAuth2 dans le menu de gauche, c'est ici que nous allons lui donner les permissions et générer une url nous permettant de l'inviter sur un serveur Discord.

D'abord, cochez le scope bot ici :

Après avoir séléctionné "bot", l'url a bien été générée et une nouvelle portion apparaît juste en-dessous contenant les permissions du bot. Pour ne pas s'embêter, choisissons la permission suprême Administrator, cela à pour effet de modifier l'url d'invitation.

Bon et bien ça y est, notre bot est prêt à être intégré à notre serveur ! Pour se faire, copiez l'url d'invitation puis naviguez vers celle-ci, vous atterissez ensuite sur une page vous demandant de choisir un serveur sur lequel inviter le bot :

Une fois le serveur sélectionné, continuez et confirmez que vous souhaitez lui donner les droits administrateur et... voilà enfin notre bot présent sur notre serveur :) :

Comme vous pouvez le constater, il est hors-ligne pour le moment et c'est normal, nous n'avons pas encore attaqué la partie coding permettant de le faire tourner, c'est donc maintenant l'heure de s'y mettre !

 

Création d'un répertoire sur github et installation de discord.js


Dans un premier temps nous allons créer un répertoire sur github qui contiendra notre bot.

Note : Rien ne vous oblige à le faire, vous pouvez simplement créer un dossier sur votre machine mais sachez une chose, si vous ne le faites pas, vous ne pourrez pas héberger le bot sur la plateforme que nous allons utiliser par la suite, à savoir Heroku. Libre à vous donc de zaper cette étape ou non :)

Au niveau du repo, je l'ai initialisé comme ceci :

Notez que pour le moment celui-ci est privé, vous pourrez le passer en public par la suite si vous le souhaitez. J'ai aussi généré un Readme et un .gitignore contenant déjà ce qu'il faut pour ne pas tracker les modules nodes.

Une fois créé, clonez celui-ci sur votre machine puis ouvrez-le avec votre IDE préféré.

Note : À partir de maintenant nous allons utiliser node, il vous faut au minimum la version 12 pour faire tourner discord.js, vérifiez bien qu'une version antérieure ne soit pas installée sur votre machine et si c'est le cas, mettez-le jour.

Ouvrez maintenant un terminal, placez-vous à la racine du projet et installez discord.js :

npm install discord.js

Une fois l'installation faites, créez un fichier index.js à la racine du projet, ce sera notre point d'entrée pour le programme. Notre arborescence ressemble maintenant à ceci :

Bien il est maintenant temps d'entrer dans le vif du sujet !

 

Configuration de discord.js


D'abord nous allons mettre en place une bonne pratique : l'utilisation du module node dotenv. Celui-ci va nous permettre de mettre nos données sensibles dans un fichier .env (certains ont peut-être déjà l'habitude de le faire). Et nous ajouterons aussi ce fichier à notre .gitignore, en effet, si vous passez votre répertoire en public, vous ne voudriez pas vous retrouver avec vos données sensibles exposées à la vue de tous :). Et cela nous sera utile aussi lors de la mise en ligne du bot sur Heroku ;).

Dans un premier temps installons dotenv :

npm install dotenv

Une fois fait, modifiez votre fichier .gitignore en y ajoutant cette ligne :

*.env

Créez ensuite le fichier .env à la racine du projet et ajoutez-y le token privé de votre bot en remplaçant "VOTRE_TOKEN_ICI" par le votre bien entendu (souvenez-vous, nous en avons parlé dans la première partie de ce tuto) :

BOT_TOKEN=VOTRE_TOKEN_ICI

Bien, maintenant que tout est en place, let's go to code !

 

Première interaction avec le bot


Retournez maintenant dans le fichier index.js créé précédemment et ajoutez-y ces lignes :


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

client.on("ready", () => {
    console.log("I'm ready !");
});

client.on("message", msg => {
    if (msg.content === "ping") {
        msg.reply("pong");
    }
});

client.login(process.env.BOT_TOKEN);

Ici rien de bien particulier, notre bot est représenté par la variable client et c'est grâce à celle-ci que nous allons pouvoir faire intéragir notre bot via différents events.

On peut noter que 2 events sont déjà implémentés : ready nous permet de savoir lorsque le bot est prêt à recevoir des infos depuis Discord (ici le callback n'est qu'un simple message en console) et message est déclenché lorsqu'un message est posté sur le serveur (le callback contiendra principalement les commandes).

La dernière ligne est bien sûr essentielle pour connecter notre projet à notre bot via le token privé.

Il ne reste plus qu'à tester le bot, pour se faire lancez-le via cette commande :

node index.js

Le bot est maintenant online et fonctionnel, nous pouvons à présent le tester avec la commande ping sur notre serveur :

Et voilà le travail, la base du bot est prête, nous allons pouvoir améliorer tout ça :).

Note : Lorsque le bot est lancé, n'oubliez pas de l'arrêter (Ctrl+C dans le terminal) puis de le relancer avec la commande node index.js si vous avez apporté une modification au code.

 

Amélioration du système de commande


Nous allons maintenant améliorer tout cela en ajoutant un préfixe pour les commandes et l'extraction des arguments de commande, voici le code complet :

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

// Notre préfixe de commande
const prefixCmd = '!';

client.on("ready", () => {
    console.log("I'm ready !");
});

client.on("message", msg => {

    // Si le message n'est pas préfixé ou qu'il vient d'un autre bot, nous l'ignorons
    if(!msg.content.startsWith(prefixCmd) || msg.author.bot) return

    // Si nous arrivons jusque ici, alors c'est une commande

    // Nous convertissons la commande sous forme de tableau en prenant soin de retirer le préfixe
    const args = msg.content.slice(prefixCmd.length).trim().split(/ +/);
    // Extraction du premier élément de 'args', ce qui correspond à la commande
    const command = args.shift().toLowerCase();

    // À ce stade, args est un tableau ne contenant que les arguments étant donné que la commande a été extraite de celui-ci

    // On se sert maintenant de la varibale 'command' pour le test
    if (command === "ping") {
        msg.reply("pong");
    }

});

client.login(process.env.BOT_TOKEN);

Ici rien de spécial, les commentaires parlent d'eux-même, n'hésitez pas à tester au fur et à mesure (sans oublier de relancer le bot via le terminal ^^). On constate maintenant que le bot ne réagit que si un message est préfixé avec '!' :

Ajoutons maintenant une commande avec argument pour le fun, disons une addition :

// ...

if (command === "ping") {
    msg.reply("pong");
} else if(command === "add"){
    let result = 0;
    args.forEach(element => {
        result += Number(element);
    });
    msg.channel.send("Résultat = " + result);
}

// ...

Le bot est désormais capable d'additionner ! :

Vous avez certainement remarqué que le message envoyé par le bot n'est pas formaté de la même manière qu'avec la commande !ping. En effet, plutôt que d'utiliser la fonction reply() du message j'ai utilisé la fonction send() de l'objet channel du message, cela a pour effet d'envoyer simplement un message dans le channel où la commande a été envoyée. Libre à vous de choisir la manière dont vous envoyez la réponse :).

Tiens d'ailleurs amusons-nous à formater un peu la réponse de l'addition :

// ...

let result = 0;
let str = ">>> Je vois que tu n'es pas doué en math <@" + msg.author.id + ">, laisse-moi t'aider :\n";

args.forEach((element, index, arr) => {
    result += Number(element);
    if(Number(element) < 0){
        element = "(" + element + ")";
    }
    if(index !== arr.length - 1){
        str += element + " + ";
    } else {
        str += element + " = ";
    }
});

str += result.toString();

msg.channel.send(str);

// ...

Ce qui nous donne :

Bon je ne développerai pas le bout de code, il n'est pas très compliqué et si vous avez besoin d'informations concernant la librairie discord.js je vous renvoie vers ces 2 liens à garder bien au chaud :

La documentation vous aidera principalement à connaître les objets et fonctions de manière plus accrue. Quand au guide, il contient une tonne d'exemples concrets, ce qui est très pratique pour se faire la main ;).

Aller, il est temps d'héberger ça !

 

Héberger le bot sur Heroku


Nous voici donc dans la partie hébergement du bot. Personnellement, je n'héberge jamais un bot tant que je suis en phase de développement, c'est vraiment la dernière étape à mon goût. Bien sûr, rien ne vous empêche de l'héberger dès le départ, c'est vous qui voyez :).

Pourquoi choisir Heroku ? Et bien d'abord c'est gratuit, cette plateforme ne fait pas payer si on ne dépasse pas les 1000h d'utilisation par mois or au max dans un mois il y a 744h donc cela passe aisément à partir du moment où nous n'hébergeons q'une seule application (au delà il faudra payer). Ensuite, la mise en place reste vraiment simple d'utilisation, vous le verrez par la suite.

Donc rendez-vous sur Heroku à cette adresse : https://www.heroku.com/Créez-vous ensuite un compte.

Une fois le compte créé et les termes validés, vous vous retrouvez sur votre page d'applications. Passons directement à la création de notre appli en cliquant sur Create new app :

Renseignez les champs nécessaires (le nom importe peu) et cliquez sur Create app :

Une fois l'application créée, vous atterissez sur l'onglet Deploy de celle-ci, durant cette étape nous allons connecter notre compte Github à l'application, pour se faire, choisissez la méthode de déploiement Github puis cliquez sur Connect to Github :

Entrez ensuite le nom du répertoire auquel vous souhaitez connecter Heroku, pour ma part c'est TutoBot, cliquez sur Search, le répertoire apparaîtra en-dessous si il a été trouvé, cliquez ensuite sur Connect :

Avant de déployer notre application sur Heroku, ils nous faut impérativement un fichier à la racine de notre projet qui permettra à Heroku de savoir ce qu'il doit faire de notre application.

Pour se faire, créez un fichier Procfile (sans extension) à la racine du projet et ajoutez cette ligne à l'intérieur :

worker: node index.js

Je vous passe les détails, pour plus de renseignements sur ce fichier n'hésitez pas à consulter la doc ;).

Un dernier fichier est ensuite nécessaire, le fameux package.json. Pour le générer rien de plus simple, entrez cette commande :

npm init

Une série de chose vous seront demandées, remplissez selon vos désirs :

Note : Lorsque qu'une valeur se situe entre parenthèses, si celle-ci vous convient appuyez directement sur "entrée". Notez aussi que je n'ai rien mis pour test command et keywords.
package name: (tutobot)
version: (1.0.0)
description: A simple discord bot
entry point: (index.js)
test command:
git repository: (https://github.com/GuiM0x/TutoBot.git)
keywords:
author: Guillaume M.
license: (ISC)

Le fichier package.json sera alors généré à la racine de votre projet.

Votre arborescence devrait ressembler à ceci maintenant :

Vous pouvez maintenant commit les modifications puis push tout ça si ce n'est pas déjà fait.

Bien il nous reste une dernière configuration à effectuer. Retournez sur Heroku, et naviguez dans l'onglet Settings. Une fois dedans, cliquez sur Reveal Config Vars ici :

Puis entrez votre token privé (le même que nous utilisons dans notre fichier .env) :

Une fois le token ajouté, retournez dans l'onglet Deploy et cliquez sur Deploy Branch ici :

Notez qu'ici je me sers du déploiement manuel, mais rien ne vous empêche de configurer un déploiement automatique ;).

Bon maintenant que notre application est déployée sur Heroku, il ne nous reste plus qu'à la démarrer ! Pour se faire, rendez-vous dans l'onglet Resources, désactivez web et activez le worker, comme ceci :

Et voilà ! Note bot est désormais actif 24h/24 ! C'est pas beau ça ? :)

Note : Pour travailler tranquillement en local, désactivez simplement le worker. Une fois que vous aurez fini, n'oubliez pas de push puis de déployer à nouveau la branche (sauf si vous avez choisi la solution automatique) et bien sûr n'oubliez pas de ré-activer le worker ;)