Comment créer un Bot Discord en JS ?

Vous voulez dynamiser votre serveur Discord ? Vous ne trouvez pas le bot parfait qui fait ce que vous voulez ? Vous pensez donc à créer le votre ? Vous vous débrouillez en Javascript ?

Alors cet article de blog est fait pour vous ! J’ai développé des dizaines de bots au long de ma carrière et je vous dis tout.

Pour créer un bot Discord avec Node JS, vous devrez au préalable avoir Node.js d’installé sur votre machine et un compte Discord. Ensuite vous devrez utiliser la bibliothèque discord.js pour développer votre bot en Javascript. Finalement, vous devrez le configurer sur le Discord Developer Portal.

Nous allons vous ensemble :

• Quelle est la bibliothèque js essentielle à utiliser
• Comment faire un chatbot Discord avec Node JS
• Comment héberger son bot gratuitement ou pas

Attention ! Avant de commencer, peut-être que le bot ultime que vous cherchez existe déjà. Ou peut-être qu’une base de bot existe déjà sur GitHub. Pour vous en assurer et ne pas perdre de temps, n’oubliez pas de lire mon article de blog sur les bots Discord.

Un tutoriel bot Discord Node JS facile

Faire une application Discord n’est pas très compliqué. Dans ce tutoriel, nous utiliserons le JavaScript et les exemples de bases de bots disponibles sur le site officiel de Discord pour développeurs.

Comme je vous fournis la base du code, il ne vous reste plus qu’à y ajouter de la complexité à l’aide de conditions et autres structures de contrôle. Armé de ces connaissances fondamentales en code, vous devriez être capable de faire à peu près tout ce que vous voulez avec votre bot Discord.

Si vous n’avez pas compris le paragraphe du dessus car vous n’avez pas les connaissances de base en code, je vous invite à apprendre la base du JavaScript sur FreeCodeCamp ou le tutoriel Apprendre à Coder avec Javascript sur OpenClassroom si vous ne parlez pas anglais.

Pourquoi Discord.js ?

Il est possible de créer des bots Discord dans plusieurs langages de programmation. Que ce soit en Rust, Swift, Python, Ruby, PHP, Java ou autre, les développeurs de Discord recommandent un certain nombre de bibliothèques pour interagir avec leur API et une simple recherche Google ou sur Github vous permettra de trouver des APIs moins reconnues par l’équipe Discord dans votre langage de programmation préféré.

Programmer un bot Discord v12 en Javascript avec Node JS

Pour ce tuto, c’est JavaScript que j’ai choisi pour sa simplicité et son universalité. Le JS prend le dessus sur beaucoup de fronts en programmation depuis ces dernières années. L’application de chat Discord elle-même est codée en JavaScript avec React, Electron et React-Native, toutes des librairies JS.

Mon blog mettant principalement l’accent sur le fait de “leverage” le code pour arriver à ses fins avec ces mêmes technologies, c’est donc tout naturellement que nous utiliserons la librairie Discord.js v12 pour ce premier tuto sur l’utilisation des applications Discord.

Comment installer NodeJS ?

Node permet d’exécuter du JavaScript comme un programme, sur un ordinateur, un téléphone ou un serveur. Il s’installe comme un programme classique sur votre ordinateur ou par ligne de commande.

Installer Node JS sur Windows

Rendez-vous la page de téléchargement pour Windows de NodeJS et choisissez la version LTS pour Windows. Suivez le processus d’installation et vous devriez avoir tout ce qu’il faut pour commencer à programmer votre bot.

NodeJS pour Mac et Linux

Pour Mac et Linux, vous pouvez soit télécharger le GUI pour installer Node comme pour windows en allant sur la page de téléchargement pour Mac OSX ou Linux de NodeJS.

Si vous préférez passer par la console ou que vous êtes sur Linux, vous pouvez passer par votre gestionnaire de paquets préféré comme brew, apt, yum, dpkg, rpm, pacman ou un autre.

Installer Discord.js

Avec Visual Studio Code ou PowerShell sur Windows ou votre terminal préféré sur Mac et Linux, rendez-vous dans le dossier dans lequel vous voulez créer votre bot Discord. C’est un dossier dans lequel se trouveront les fichiers JavaScript et la configuration de votre bot. Vous pouvez le mettre n’importe où, tant que c’est un nouveau dossier vide pour rester organisé.

Une fois dans le dossier, initialisons le projet avec npm grâce à la commande :

npm init

Répondez oui à toutes les questions ou insérez les informations que vous voulez.

Si tout s’est bien passé, vous avez maintenant un dossier fermé dans lequel l’environnement de votre projet réside.

Installons maintenant Discord.js v12 avec la commande :

npm install discord.js

Ou si vous préférez yarn :

yarn add discord.js

Voilà votre environnement de travail est prêt et vous avez tout ce qu’il faut pour commencer.

Configurer Discord.js

Une fois Node installé, votre machine devrait avoir tout ce qu’il faut pour pouvoir installer la bibliothèque discord.js et vous pourrez commencer à programmer le bot. Mais avant cela, il faut faire un petit tour sur le site de Discord pour récupérer des identifiants, voyons tout cela ensemble.

Où mettre le client id et le token de Discord dans votre code JavaScript ?

Retournez sur le portail de développeurs de Discord pour récupérer le token que l’on va mettre dans notre projet.

Créez un fichier JavaScript, par exemple index.js et ce code pour commencer :

const Discord = require('discord.js');
const client = new Discord.Client();
const token = ‘INSÉREZ VOTRE TOKEN ICI’

client.once('ready', () => {
   console.log(‘Félicitations, votre bot Discord a été correctement initialisé !');
});

client.login(token);

Veillez à bien insérez votre token à la ligne 3 entre les apostrophes.

Sauvez votre fichier et lancez la commande node index.js (remplacez index.js par le nom de votre fichier si vous avez choisi un autre nom).

Si vous voyez le message Félicitations, votre bot Discord a été correctement initialisé !, c’est que tout s’est passé comme prévu, votre bot est bien lié à votre serveur Discord et nous pouvons commencez à ajouter de l’intelligence pour qu’il fasse des choses utiles.

Note : Si on vous vole le token du bot, on a accès à votre bot, n’hésitez pas à le régénérer sur le Portail de Développeur Discord. Vous devrez alors remplacez l’ancien token dans votre code par le nouveau, l’ancien étant maintenant inactif.

Exploiter au mieux Discord.js

Vous possédez maintenant toutes les clés pour vous aider dans la réussite de votre serveur Discord. Grâce aux différentes possibilités qu’un bot Discord vous offre.

Félicitations, vous avez tout ce qu’il faut pour créer un bot original qui correspond exactement à vos attentes !

Je vous souhaite un serveur Discord populaire grâce à son automatisation et que l’API Discord.js vous mène vers d’autres créations par le code.

Vous avez maintenant un boilerplate qui fonctionne, le temps est venu de s’amuser en explorant l’API Discord.js v12.

Il existe de nombreuses manières d’automatiser ses tâches et de créer des interactions avec ses membres. Je vous en montre 3 ici avec du texte, des images et de la voix.

Un auto répondeur en Javascript

client.on("message", message => {
  if (message.content === "!ping") {
    message.channel.send("Pong.")
  }
})

Créer une commande Discord js

Vous savez maintenant intéragir simplement avec un serveur Discord. Pour une meilleure organisation, les bots Discord js suivent une convention qui est de créer un dossier commands dans lequel on met toutes notes commandes. Ainsi, si on créait la commande pour kicker des utilisateurs, on aurait un fichier kick.js dans le dossier command et on appelerait la commande dans index.js.

Créez un dossier commandes à la racine du dossier.

Créez un fichier kick.js et utilisez ce code :

module.exports = message => {
  const member = message.mentions.members.first()
  if (!member) {
    return message.reply(`Utilisateur pas trouvé ou pas spécifié`)
  }
  if (!member.kickable) {
    return message.reply(`L'utilisateur n'est pas kickable`)
  }
  return member
    .kick()
    .then(() => message.reply(`L'utilisateur ${member.user.tag} a été kicked`))
    .catch(error => message.reply(`Une erreur s'est produite`))
}

Importez la commande dans votre fichier principal index.js, importez et appelez la commande kick comme ceci :

const kick = require("../commands/kick")
module.exports = (client, message) => {
  if (message.content.startsWith("!kick")) {
    return kick(message)
  }
}

Canva et Discord.js

Il faut installer une nouvelle bibliothèque, Canvas, pour gérer les images :

npm i canvas

Ensuite, ajoutez à votre script le code suivant :

client.on("guildMemberAdd", async member => {
  const channel = member.guild.channels.cache.find(
    ch => ch.name === "member-log"
  )
  if (!channel) return

  const canvas = Canvas.createCanvas(700, 250)
  const ctx = canvas.getContext("2d")

  const background = await Canvas.loadImage("./wallpaper.jpg")
  ctx.drawImage(background, 0, 0, canvas.width, canvas.height)

  ctx.strokeStyle = "#74037b"
  ctx.strokeRect(0, 0, canvas.width, canvas.height)

  // Texte générique d'introduction avant le nom d'utilisateur
  ctx.font = "28px sans-serif"
  ctx.fillStyle = "#ffffff"
  ctx.fillText(
    "Bienvenue sur le serveur,",
    canvas.width / 2.5,
    canvas.height / 3.5
  )

  // Ajouter le nom d'utilisateur
  ctx.font = applyText(canvas, `${member.displayName}`)
  ctx.fillStyle = "#ffffff"
  ctx.fillText(
    `${member.displayName}!`,
    canvas.width / 2.5,
    canvas.height / 1.8
  )

  ctx.beginPath()
  ctx.arc(125, 125, 100, 0, Math.PI * 2, true)
  ctx.closePath()
  ctx.clip()

  const avatar = await Canvas.loadImage(
    member.user.displayAvatarURL({ format: "jpg" })
  )
  ctx.drawImage(avatar, 25, 25, 200, 200)

  const attachment = new Discord.MessageAttachment(
    canvas.toBuffer(),
    "bienvenue-image.jpg"
  )

  channel.send(`Bienvenue sur le serveur, ${member}!`, attachment)
})

La voix avec Discord js

client.on("message", async message => {
  // On rejoint le même salon que la personne qui a envoyé le message
  if (message.member.voice.channel) {
    const connection = await message.member.voice.channel.join()

    // Créer un dispatcher
    const dispatcher = connection.play("audio.mp3")

    dispatcher.on("start", () => {
      console.log("audio.mp3 a commencé !")
    })

    dispatcher.on("finish", () => {
      console.log("audio.mp3 s'est terminé !")
    })

    // Gestion d'erreurs !
    dispatcher.on("error", console.error)

    dispatcher.destroy()
  }
})

Les bots Discord js open source sur Github

Vous pouvez suivre le repo git associé à cet article sur github. Si vous comprenez l’anglais, voici la documentation officielle de Discord.js et un guide complet qui reprend beaucoup d’exemples et de bonnes pratiques.

Héberger son bot Discord js en ligne gratuitement

A ce stade, votre devriez être satisfait de votre bot qui devrait bien interagir avec votre serveur.

Il tourne bien sur votre ordinateur mais vous avez remarqué que quand votre script JavaScript ne tourne plus, le bot ne répond plus au serveur.

Dans l’idéal nous voudrions que notre bot tourne en continu, sans interruption et de manière stable, c’est là qu’un hébergeur est utile.

💡 Ces hébergeurs fonctionnent aussi pour les bots et scripts développés dans d’autres langages de programmation.

On sait pourquoi il faut héberger son bot Discord, regardons maintenant comment y arriver.

Host un Bot Discord js sur un VPS

Pour héberger votre bot, le plus facile est de passer par un VPS. Un Virtual Private Server ou un Serveur Dédié Virtuel est une session virtuelle sur une partie de serveur physique. Cette location de bout de serveur vous permet de profiter de la haute performance d’un serveur dans le cloud pour un prix réduit.

Certains des VPS les plus connus sont DigitalOcean, Heroku ou encore AWS EC2.

Voyons comment faire tourner votre script sur ces services.

Comment héberger son bot Discord Node JS sur Heroku ?

Avant de pouvoir host sur heroku, il faut que vous compreniez Git. Si ce n’est pas le cas, il existe de nombreux tutos pour vous expliquer comment créer un compte github et y mettre votre code.

Sinon, commitez votre code avec git et inscrivez-vous sur Heroku. Une fois inscrit et votre compte validé, lancez dans la console la commande heroku login.

Pour que Heroku sache quoi faire de votre projet, créez un fichier nommé Procfile avec comme contenu :

worker: npm start

Et ajoutez dans le fichier package.json, la commande associée :

"start": "node index.js"

Ensuite, tapez dans la console :

heroku create LE_NOM_DE_VOTRE_BOT_DISCORD
git remote add heroku https://git.heroku.com/LE_NOM_DE_VOTRE_BOT_DISCORD.git
git push heroku master

DigitalOcean pour host son bot Discord JS

Vous pouvez aussi faire tourner le bot de manière permanente sur DigitalOcean pour moins de 5 euros par mois avec la plus petite Droplet.

D’ailleurs, si vous n’avez pas encore de compte DigitalOcean, vous pouvez utiliser mon lien d’affiliation pour recevoir 100 dollars de crédit pour recevoir près de 2 ans d’hébergement gratuit.

Mettre son bot Discord js sur AWS EC2

Si vous êtes familier avec les Amazon Web Services, il est aussi possible d’host son bot dessus. Utiliser EC2 est l’approche la plus simple mais vous expliquer comment faire pourrait être un article de blog à lui tout seul ! Google est votre ami si c’est le chemin que vous voulez emprunter pour héberger votre bot.

Apprendre le développement de Bots Discord.js sur YouTube

Pour aller plus loin dans le développement de bot Discord avec le package node Discord.js, je vous recommande cette vidéo de Pentiminax en 2 parties :

Vous avez maintenant la base d’un bot Discord NodeJS !

Dans cet article vous avez découvert :

• comment créer son propre bot Discord en Node JS
• quelles sont les principales commandes de base
• comment organiser votre code et vos commandes

En plus, vous avez pu l’héberger gratuitement sur Heroku ou en payant avec d’autres services.

Maintenant c’est à vous de jouer, explorer les possibilités pour les bots Discord avec JavaScript, inspirez-vous de ce que vous trouvez sur Github et ailleurs et n’hésitez pas à me partager vos créations sur Twitter avec le lien ci-dessous.

À vois aussi :

• Les meilleures formations JS en 2023
• Tout savoir sur le Bot Discord MEE6
• Comment développer des Bots Discord en Python
• Des idées de projets en Javascript pour débutants