Skip to main content

Introduction et Prérequis

Nous rejoindre sur Discord

Introduction

Dans cette suite ce cours, nous allons essayer de nous initier au développement d'un bot Discord. Ce cours n'a pas comme objectif de développer un bot en particulier (administration, antitroll, etc., beaucoup de vidéos sur internet le fond), mais de comprendre comment le fonctionnement et l'interaction avec l'API de Discord. Tout au long de ce cours, nous suivrons et utiliserons le guide de développement d'un bot discord en js proposé par discordjs.guide.

Dans ce cours, nous utiliserons :

  • Node v16.16.0
  • Librairie v14 de Discord
  • Windows (les personnes utilisant un MAC ou un Linux pourront également suivre ce cours. Il n'y a que la partie prérequis qui changera)

Les pratiques et les méthodes que nous allons vous montrer sont celles que nous utilisons personnellement. Elles ne sont pas universelles et peuvent varier en fonction d'un développeur à un autre.

Prérequis

Pour le suivi de ce cours et le développement de notre bot, nous aurons besoin de plusieurs éléments indispensable.


Un IDE

Définition : Un IDE (environnement de développement intégré), est un logiciel de création d'applications, qui rassemble des outils de développement fréquemment utilisés dans une seule interface utilisateur graphique (GUI).

Il existe plusieurs IDE qui ont tous des avantages différents, vous pouvez les configurer comme vous le souhaitez afin qu'ils puissent répondre à vos attentes. Voici deux IDE que nous vous conseillons :

Attention : Si vous avez l'habitude de développer votre code avec un IDE en particulier, nous vous conseillons de le garder.


NodeJS

Node JS est un environnement d'exécution qui va nous permettre d'utiliser notre bot. Pour l'installer, aller sur le site officiel : https://nodejs.org/fr/

Pour installer node sur macOS :

Une fois que vous aurez téléchargé et exécuté l'installeur, pour vérifier l'installation de node : il faudra ouvrir une fenêtre powershell (ou shell) et tapez : node -v

Ouvrir une fenêtre powershell

Vérifier l'installation de node

Vérifier également que vous avez la commande npm disponible en tapant npm -v dans une fenêtre powershell


Paramétrer son discord

  1. Pour le développement d'application Discord, il est essentiel que vous ayez l'option Discord développeur activée sur votre compte. Pour l'activer, rendez-vous dans vos paramètres de compte :

Ouverture des paramètres utilisateur

Activation du mode développeur

  1. Pour essayer les différentes fonctionnalités que vous développerez pour votre bot, nous vous conseillons de créer un serveur Discord dédié. Vous pourrez alors tester tout ce que vous souhaitez sans prendre le risque de compromettre votre serveur personnel.

Liens utiles et indispensables

Notions de développement

Si vous n'avez aucune notion dans le développement, le suivi de ce cours pourra être compliqué. Néanmoins, voici quelques éléments qui vous seront indispensables si vous souhaitez le suivre.


Les variables

Définition : Les variables sont des éléments qui associent un nom (l'identifiant) à une valeur. Une variable contient une valeur qui peut varier durant l'exécution du programme.

Durant ce cours, nous pourrons retrouver deux définitions de variable : let et const (l'utilisation de la déclaration avec var n'est pas recommandée par Discordjs).

Pour plus d'informations : https://code-garage.fr/blog/quelles-sont-les-differences-entre-var-let-et-const-en-javascript

Voici deux exemples de déclaration de variables :

const variableConstante = "Ma nouvelle constante";
let variableLocale = "Ma variable locale";

Les fonctions

Définition : Les fonctions sont des blocs qui permettent d'effectuer des instructions (calcul, effectuer une tâche, etc.). Une fonction peut prendre en entrée un ou plusieurs paramètres et peut renvoyer un résultat.

Il existe plusieurs manières de définir une fonction :

// Avec l'indicateur fonction
function somme(a, b) {
  let resultat = a + b;
  return a + b;
}

// Avec une variable
const somme = (a, b) => {
  let resultat = a + b;
  return a + b;
}

// Avec les deux
const somme = function(a, b) {
  return a +b;
}

// Appel de la fonction
const monResultat = somme(5, 3); // monResultat = 8

Les structures clé/valeur (dictionnaire)

Définition : Les structures (ou couples) clé/valeur est un format qui ressemble au JSON (JavaScript Object Nation). C'est une structure que l'on retrouvera beaucoup lorsque l'on interagira avec l'API de Discord. La valeur peut être de n'importe quel type (y compris un nouveau dictionnaire). Voici un exemple de structure :

// Déclaration du dictionnaire
const monDictionnaire = {
  "cle": "valeur",
  "nombre1": 1,
  "dictionnaire": {
    "a": "A",
    "...": "..."
  },
  "tableauNombre": [1, 2, 3, 4],
  "tableauDictionnaire": [
    {"1": 1},
    {"2": 2},
  ]
}

// Appel du dictionnaire
console.log(monDictionnaire.cle); // résultat = 'valeur'
console.log(monDictionnaire['cle']); // résultat = 'valeur'
console.log(monDictionnaire.dictionnaire.a); // résultat = 'A'
console.log(monDictionnaire.tableauDictionnaire[0]["1"]); // résultat = 1

Durant ce cours, le mot clé pourra également être appelé attribut.


L'exécution asynchrone

La partie suivante peut être compliquée à la compréhension. Ce n'est pas grave, nous reviendrons dessus dans notre cours lorsque nous l'utiliserons.

Définition : La déclaration async function définit une fonction asynchrone qui renvoie un objet AsyncFunction. Une fonction asynchrone est une fonction qui s'exécute de façon asynchrone grâce à la boucle d'évènement en utilisant une promesse (Promise) comme valeur de retour.

Pour plus d'informations : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/async_function

Pour faciliter la compréhension de ce système, on va définir 3 fonctions :

  • waitFiveSecond : cette fonction va exécuter une autre fonction après 5 secondes d'attente
  • afficherA : affiche A dans les logs
  • afficherB : affiche B dans les logs
/**
 * Exécuter une fonction après 5 seconde d'attente
 * @param fct fonction à exécuter
 */
const waitFiveSecond = async (fct) => {
    await wait(5000); // On attend 5 secondes (5000 millisecondes) avant de continuer
    fct();
};

/**
 * Afficher la valeur A dans les logs
 */
const afficherA = () => {
    console.log('Afficher A !');
}

/**
 * Afficher la valeur B dans les logs
 */
const afficherB = () => {
    console.log('Afficher B !');
}
  1. Dans un premier temps, on appelle les deux fonctions afficherA() et afficherB à la suite :
console.log('Lancement du script');
afficherA();
afficherB();

Résultat : Les deux fonctions s'exécutent à la suite très rapidement

[2022-07-30T15:00:45.100Z] Lancement du script
[2022-07-30T15:00:45.104Z] Afficher A !
[2022-07-30T15:00:45.105Z] Afficher B !
  1. Dans un deuxième temps, on appelle la waitFiveSecond() en lui ajoutant comme paramètre la fonction afficherA() :
console.log('Lancement du script');
waitFiveSecond(afficherA());
afficherB();

Résultat : On voit ici que la fonction A est exécutée 5 secondes après la fonction B, même si elle a été appelée en premier.

[2022-07-30T15:01:37.826Z] Lancement du script
[2022-07-30T15:01:37.831Z] Afficher B !
[2022-07-30T15:01:42.834Z] Afficher A !
  1. Certaines fonctions peuvent prendre plus de temps pour être exécutée. Cependant, il est parfois essentiel d'attendre le retour de celle-ci avant de continuer dans notre programme. Pour cela, nous allons ajouter await devant l'appel d'une fonction asynchrone. Cet ajout va tout simplement faire en sorte d'attendre que la fonction se termine avant de continuer.
console.log('Lancement du script');
await waitFiveSecond(afficherA);
afficherB();

Résultat : Lors de l'exécution du script, tant que la fonction waitFiveSecond n'est pas terminée, le reste du script n'est pas exécuté

[2022-07-30T15:00:11.034Z] Lancement du script
[2022-07-30T15:00:16.053Z] Afficher A !
[2022-07-30T15:00:16.053Z] Afficher B !