Chapitre 1 - La Base

Nous allons pouvoir enfin commencer à coder ! Dans ce chapitre, nous allons apprendre la base d'un robot Discord.

MESSAGE IMPORTANT.

Cette documentation n'est plus à jour depuis trop longtemps. Si vous voulez de l'aide, veuillez rejoindre ce serveur Discord et lire cet article qui date de Septembre 2021 mais qui est fréquemment mis à jour.

Si vous souhaitez un robot pour automatiquement supprimer les insultes, n'hésitez pas à vous renseigner sur Mr. Robøt.

Installer Discord.js

Pour commencer, ouvrez l'explorateur de fichiers.

Trouvez un endroit où vous souhaitez placer le dossier de votre robot. Il est important de le placer dans un endroit facile d'accès, comme votre Bureau, par exemple.
Créez un dossier du nom de votre robot à l'emplacement que vous avez choisi à l'étape précédente. Il ne doit pas pas comporter d'espace.
Rentrez dans ce dossier.
Faites un clic droit, puis "Nouveau" > "Document texte".
Nommez le "app".
Faites un clic droit, puis "Ouvrir avec" > "Bloc-notes".
En haut à gauche, cliquez sur "Fichier" > "Enregistrer sous...":

Pensez à selectionner "Tout type de fichier" dans la case Type pour pouvoir enregistrer votre fichier en tant que app.js
Cliquez sur "Enregistrer" en bas à droite.
Revenez sur l'explorateur de fichiers. Vous remarquerez qu'il existe désormais deux fichiers dans votre dossier:

Supprimez le fichier "app.txt/app" (sélectionné dans la capture d'écran)
Appuyer sur les touches Windows + R. Une fenêtre ressemblante à celle-ci devrait apparaître:

Dans la barre de saisie, tapez "cmd". Encore une fois, une fenêtre ressemblante à celle-ci devrait apparaître:

Cette fenêtre à plusieurs noms: on peut l'appeler Terminal, invité de commande ou, pour aller plus vite, cmd. Lorsque vous effectuez une action sur votre ordinateur (lancer un logiciel, créer un dossier, ...), votre ordinateur traduit ce que vous avez fait par une commande dans ce terminal.

Nous allons devoir atteindre le dossier de notre robot. Pour cela, vous devez connaître les deux commandes suivantes:

cd <Nom d'un dossier se trouvant à l'emplacement où vous êtes>

Cette commande vous permet de vous déplacer à travers les dossiers de votre ordinateur.

Exemple:

cd ..

Cette commande vous permet de revenir au dossier précédent.

Exemple:

Dans l'invité de commande, vous devez saisir "Desktop" pour désigner "Bureau" et "Users" à la place du dossier "Utilisateurs".

Une fois que vous êtes parvenus au dossier de votre robot, tapez la commande npm init -y.
- La commande aura pour but de créer un fichier package.json. Il permet de à Node de savoir quel paquet est utilisé pour le développement et quel paquet est utilisé pour la production. Discord.js, par exemple, est un paquet de développement quand à EsLint (un formateur de code) est lui un paquet de développement car, pour la production, il ne fait strictement rien.
Ensuite, tapez la commande npm i discord.js -s.

Normalement, après un temps de chargement, une montagne de lignes apparaîtront. N'y tenez pas compte, mais laissez le cmd ouvert, on va s'en servir bientôt.

Revenez au dossier de votre robot dans l'explorateur de fichiers. Vous remarquerez qu'un nouveau dossier est apparu:

Ignorez le fichier package-lock, il ne sert que pour le partage des fichiers lors d'un projet collaboratif (sur Github par exemple). Observez le fichier node_modules. Il regroupe ce qu'on appelle les packages de votre robot.

Un package est comme une extension à votre code pour interagir avec des API. Par exemple, discord.js est un package pour interagir avec l'API de Discord.

NPM est une bibliothèque de packages. Elle est incluse avec Node.js. Pour connaître tout les packages disponibles et le nom de leur commandes, rendez vous sur le site de NPM. Nous reviendrons dessus plus tard.

Vous pouvez fermer l'explorateur de fichiers.
Ouvrez votre éditeur de code.
En haut à gauche, cliquez sur Fichier/File > Ouvrir le dossier/Open File.
Avec la fenêtre qui est apparue, sélectionnez votre dossier en cliquant une fois dessus puis cliquez sur "Sélectionner un dossier" en bas à droite.
À droite de votre éditeur de code, sélectionnez "app.js"

Vous êtes fin prêts ! On commence à coder !

La Base

Pour commencer, tapez ce code dans le fichier "app.js":

base.js

const Discord = require('discord.js');
const client = new Discord.Client();
var prefix = "."; // Remplacez le "." par le préfixe de votre bot

client.on("ready", () => {
  console.log("Salut je suis connecté");  
  var TailleMembres = client.users.size;
  var TailleServeurs = client.guilds.size;
  client.user.setActivity("Connecté - " + TailleServeurs + " serveur(s) et " + TailleMembres + " membre(s)");
}

client.on('message', (msg) => { // Jusqu'au "}" affiché plus bas, il ne faut mettre que des codes destinés à des messages ici.
  
}          
client.login("VOTRE_TOKEN_SANS_ESPACE");

Je vous conseille très fortement de taper les codes que vous trouvez et de ne pas les copier-coller, ça vous aidera à mémoriser le vocabulaire.

En tapant le code, vous remarquerez que lorsque vous tapez un (, ou un " , votre éditeur de code complétera automatiquement votre ligne par ) ou un ". Ce sont un des fameux "raccourcis" dont je parlais dans la page précédente.

Bon, ça fait énormément d'information d'un coup, et on va déchiffrer ça ligne par ligne:

Ligne 1 : On déclare que ce code doit impérativement fonctionner avec la package Discord.js.

Ligne 2 : On demande à l'API Discord de créer une nouvelle "session" au token inséré un peu plus bas.

Ligne 3 : On donne la valeur . à la valeur prefix. Vous pouvez remplacer le"." par le préfixe de votre robot.

Ligne 5 : On informe que ce qui va suivre est destiné a être utilisé par un robot Discord.

Ligne 6 : On affiche le message entre parenthèses dans la console.

Ligne 7 : On donne la valeur client.users.size à la valeur prefix. Ce nom de variable (qui peut vous paraître étrange) définit le nombre d'utilisateurs total sur tout les serveur ou votre robot est présent.

Ligne 8 : On donne la valeur client.guilds.size à la valeur prefix. Ce nom de variable (qui peut vous paraître étrange) définit le nombre de serveur sur lequel le robot est présent.

Ligne 9 : On change le jeu du robot par la valeur Connecté - "+TailleServeurs+" serveur(s) et "+TailleMembres+" membre(s). Le jeu peut donc changer en fonction de la présence du robot sur les serveurs. Pour ma part, ça donne ça:

Ligne 12 : On informe que jusqu'au "}" affiché ligne 13, cette partie sera consacrée à l'envoi et la réception de messages.

Ligne 15 : On renseigne le token du robot, pour faire le lien entre notre application et le code que l'on vient de taper. Il faut remplacer "VOTRE_TOKEN_SANS_ESPACE" par le token de votre bot. Faites attention à laisser les guillemets entre le token.

Voilà, vous avez appris la base d'un robot Discord. Mais actuellement, votre application ne fait strictement rien, à part modifier son jeu. Et si nous lui faisons envoyer un message ?

Envoyer un message et Markdown

Entre la ligne 12 et 14 de votre code, écrivez ceci :

ping.js

if (msg.content.startsWith(prefix + "ping")) {
    msg.channel.send("Pong ! :ping_pong:")
}

Enregistrez le fichier (Ctrl + S)

Pour ne pas me répéter, je ne vous dirait plus d'enregistrer le fichier. Visual Studio Code présente une fonction d'enregistrement automatique, dans "Fichier" > "Enregistrement automatique".

Reprenez l'invité de commande.
Tapez la commande "node app.js".
Dans un salon textuel où est présent votre robot, envoyez le message: "<préfixe>ping" (dans mon cas, ça donne ".ping").

Votre robot aura répondu:

Là encore, on va décrire ce qui c'est passé:

Ligne 1: L'instruction suivante, qui se terminera après le "}" ligne 3, ne sera executée seulement si l'utilisateur envoie le message ".ping".

Ligne 2: On dit au robot d'envoyer le message "Pong ! :ping_pong:".

Ce code est polyvalent pour tout les textes que vous voulez faire dire à votre robot. Remplacez "ping" par le nom de votre commande et le "Pong ! :ping_pong:" par son contenu, en laissant bien les guillemets.

Recopiez ce code en nommant la commande "markdown" et en lui donnant le contenu suivant:

Vous pouvez écrire du texte en *italique*, en **gras**, en ~~barré~~ ou même
en __souligné__. Vous pouvez aussi afficher ``des petits morceaux de codes`` et des
```blocs de code.```

Faites Ctrl+C pour éteindre le robot
Relancez-le avec la commande node app.js

En testant la commande .markdown, on obtient ce message:

Pour la mise en forme, Discord utilise un système appelé Markdown, qui permet d'effectuer des modifications visuelles du texte en encadrant la partie à modifier de caractères. Nous avons tapé du texte sans la formation automatique du texte, et Discord l'a "traduit". En observant donc les trois lignes un peu plus haut, vous pouvez en déduire la syntaxe de Markdown sur Discord :

markdown_syntaxe.txt

*italique*
**gras**
~~barré~~
__souligné__
``petits morceaux de code``
```blocs de codes```

En réalité, Markdown n'a pas la même syntaxe que sur Discord. Ce dernier l'a modifié pour une raison inconnue.

Maintenant qu'on est passé par les bases de Markdown, on attaque le dernier point de ce chapitre, les avatars, et, par la même occasion, les variables.

Envoyer l'avatar d'une personne est extrêmement simple, du fait que la structure est presque la même que celle pour envoyer un message. Tout d'abord, vous devez comprendre que, en JavaScript, lorsque vous encadrez quelque chose de guillemets (""), vous faites allusion à du texte.

texte.js

if (msg.content.startsWith(prefix + "texte")) {
    msg.channel.send("Je suis du texte")
}

Variables et commentaires

Si vous retirez les guillemets, vous pouvez alors parler d'une variable, ou d'une fonction.

variable.js

var jeSuisUneVariable = "Contenu de la variable" /* Définit le contenu "Contenu de la variable"
pour la variable nommée "jeSuisUneVariable" */
if (msg.content.startsWith(prefix + "variable")) {
    msg.channel.send(jeSuisUneVariable) // Affiche le contenu de la variable
}

Les symboles "//" forcent l’interpréteur de la commande (ici votre ordinateur) à ignorer tout ce qui ce trouve après ce symbole, et ce jusqu'à la fin de la ligne. Cette fonction sert notamment à ajouter des commentaires à son programme, destinés à soi-même ou à autrui pour mieux comprendre le code. Vous n'êtes pas obligés de les recopier, mais je vous le conseille.

Variante: En encadrant du code avec les symboles "/* et */", vous pouvez définir "une fin" au commentaire, et appliquer cela sur plusieurs lignes.

Tapez ce code dans votre script.
Redémarrez votre robot.
Testez la commande "variable". Votre robot devrait répondre ça:

On observe donc que le robot a répondu par le contenu de la variable. Vous pouvez re-tester l'expérience en modifiant le contenu de la variable, en laissant les guillemets).

Maintenant que la notion de variable est en partie maîtrisée (on verra des variantes dans d'autres chapitres), on peut parler des fonctions. Les fonctions fonctionnent comment les variables, mais elles ont était définies dans un autre fichier, ici dans le code source de discord.js pour la fonction qui va suivre.

Envoyer l'avatar de l'auteur de la commande

Remplacez "jeSuisUneVariable" dans la ligne 4 par msg.author.avatarURL, et "variable" dans la ligne 3 par avatar.
Redémarrez votre robot.

À partir de maintenant, je ne vous rappellerai plus de redémarrer le robot, ça devra être un automatisme avant chaque test d'une quelconque modification.

Tapez la commande "avatar". Votre bot répondra comme ceci:

La fonction msg.author.avatarURL renvoie donc l'avatar de l'auteur de la commande.

Ce chapitre est donc terminé. Dans le prochain, nous allons parler des embeds, du kick, du ban, des conditions de variables et autres fonctionnalités que peut vous offrir l'API et le JavaScript. Vous allez également réaliser quelques exercices pour appendre mieux.

PreviousInstaller Sublime Text NextChapitre 2 - Découvrez de nouvelles fonctionnalités

Last updated 1 month ago