Créer des boutons sur son bot Discord avec Sheweny

Bienvenue dans ce nouveau chapitre sur la création et l'utilisation de boutons. Ce chapitre fait partie d'une série de tutoriels. Bien qu'il soit possible de la suivre sans avoir lu les chapitres précédents, il est conseillé de les lire avant de commencer ce chapitre.

Introduction aux boutons

Depuis l'année derrière, les boutons ont été introduits par discord. Ils permettent d'intéragir avec nos utilisateurs de façon conviviale grâce à leurs couleurs et leurs aspect graphiques.
Les boutons peuvent êtres envoyés sous n'importe quel message du bot sauf les messages éphémères (ephemeral).

Modification de notre client

Comme pour les événements, l'utilisation des boutons nécéssite l'ajout d'un manager Sheweny pour charger nos différents boutons. Si ce n'est pas déjà fait, vous pouvez créer un dossier boutons dans la structure de votre bot et modifier le client comme suit :

Envoi d'un bouton dans un message

Pour envoyer un bouton dans un message il est nécéssaire de le construire (comme un message embed).
Cependant, il est nécéssaire de comprendre comment les boutons et les composants d'une manière générale sont construits sur discord : Il est possible d'ajouter des lignes d'actions à nos messages, jusqu'à 5 lignes d'actions par message. Ensuite sur chaque ligne d'action, il est possible d'ajouter des composants.
Les composants sont des select-menus, des inputs, des boutons etc. Chaque composant prend une place définie :

• Les boutons prennent une place de 1
• Les select-menus prennent une place de 5
• Les inputs prennent une place de 5 Il est possible d'ajouter jusqu'à 5 places de composants par lignes d'actions.
  Vous suivez ?
  En clair vous pouvez ajouter jusqu'à 25 boutons par message (5 lignes de 5 boutons), 5 select-menus (5 lignes de 1 select-menu) et 5 inputs (5 lignes de 1 input).

Construction sur discord

Nous allons créer une commande pour illustrer cette construction.

On voit que dans un premier temps on crée un bouton, on lui donne un identifiant et on lui donne un label.
Ensuite on crée une nouvelle ligne d'action et on ajoute le bouton à cette ligne d'action.
Enfin on envoie le message avec le bouton.
Vous pouvez en savoir plus en lisant le guide de discord.js qui est très bien fait : discordjs.guide/interactions/buttons

Les styles de boutons

Comme vous avez vu, nous avons choisi "PRIMARY" comme style de bouton. Cela correspond à une couleur bleu.
Voici la liste des styles disponibles :

• PRIMARY : Couleur bleu
• SECONDARY : Couleur grise
• SUCCESS : Couleur verte
• DANGER : Couleur rouge
• LINK : Couleur grise + logo lien Démonstration :

Recevoir un bouton

Nous allons maintenant voir comment recevoir un bouton. Si vous vous souvenez du chapitre précédent sur les événements, vous verrez que c'est quasiment le même processus. Dans notre dossier /buttons nous allons créer un fichier pour recevoir notre bouton :

Note: Pour une utilisation plus avancée il est possible d'utiliser des expressions régulières et même des cooldowns, voyons un exemple ensemble :

Conclusion

Dans ce chapitre nous avons appris à utiliser des boutons avec Sheweny. Après ce chapitre vous êtes maintenant capables :

• De créer des boutons et les envoyer dans des messages
• De recevoir des boutons
• D'utiliser des expressions régulières pour recevoir des boutons et d'ajouter des cooldowns

Rejoindre la communauté de développeurs

Rejoins notre communauté de développeurs pour progresser et t'améliorer

C'est parti !