Anleitung Einen Discord Bot mit Discord.js programmieren

Hydrablades

Ehrenmitglied
Themen-Ersteller
Com. Redakteur
Okt 26, 2019
2.739
4.168
Hey zusammen,
in diesem Guide werde ich euch erklären, wie ihr mit Hilfe von discord.js und node.js einen eigenen Bot programmieren könnt.

Wie wird dieser Guide aufgebaut sein?

Ich werde für alles Themen/Befehle einen eigenen Post erstellen und ihn hier in diesem Post ganz unten in einem Inhaltsverzeichnis verlinken, sodass ihr nicht lange suchen müsst sondern direkt dorthin kommt. Ich werde das Ganze nicht alphabetisch ordnen, sondern dem Schwierigkeitsgrad nach, sprich je weiter runter man kommt, desto anspruchsvoller/fortgeschrittener wird es.
Außerdem werde ich nicht alles auf einmal hier posten, das wäre schlichtweg zu viel. Ich werde aber immer ein großes Thema auf einmal abschließen.
Und ich werde in jedem Post zu einem Bot Befehl eine GitHub Link einfügen, wo ihr das Ganze noch mal downloaden könnt und euch im gesamten ansehen könnt.

Brauche ich Vorkenntnisse?

Das ist ja das Schöne an diesem Guide und discord.js: Ihr braucht theoretisch keinerlei Vorwissen in Sachen JavaScript, discord.js ist eine Bibliothek an Befehlen, welche speziell auf die Programmierung von Discord Bots mit dieser Library ausgelegt sind. Das einzige, was dem normalen JavaScript entspricht (und auch allen anderen Sprachen) ist der Aufbau des Codes, die if-Bedingungen usw.

Was ist Discord.js?

Discord.js ist eine kostenlose, auf JavaScript (deshalb die Endung .js) basierende Bibliothek mit Befehlssätzen, die speziell auf die Programmierung von Discord Bots eben mit JS angepasst ist. Diese macht es unglaublich viel einfacher, einen Bot zu programmieren. Das Schöne daran ist, die Befehle sind so selbsterklärend, dass damit jeder, der mit JS vorher nichts am Hut hatte, damit programmieren kann. So auch ich. Ich hatte vorher keine Ahnung von JS aber hab mich einfach ran gesetzt. Und bis jetzt hat alles mehr oder weniger gut geklappt.

Was sind die Voraussetzungen, um mit Discord.js einen Bot zu programmieren?

Es gibt lediglich zwei Voraussetzungen, um anhand von diesem Guide einen Discord Bot zu programmieren:
  • Ihr müsst Node.js auf eurem PC/Laptop installiert haben (12.0 oder neuer. Die Version könnt ihr einfach über die PowerShell und dem Befehl node -v prüfen. Wenn die Version älter als 12.0 ist, müsst ihr node.js updaten)
  • Ihr müsst einen Discord-Account besitzen und entweder auf einem Server mit Admin Berechtigungen sein, oder euch einfach einen neuen „Testserver“ erstellen. Letzteres werde ich der Einfachheit halber in diesem Guide machen.
  • Wobei, eine dritte Voraussetzung gibt es doch: Motivation, auch wenn mal etwas nicht sofort wie gewünscht funktioniert! Denn das ist leider des Öfteren der Fall beim Programmieren ;)

Sonstiges

Wie immer, bei Fragen, Problemen, Hinweisen, Kritik, Tipps und so weiter einfach den Diskussionsthread verwenden. Scheut nicht davor, mich dort auch nah Hilfe zu Fragen wenn etwas gar nicht funktioniert. Aber bitte vorher immer einmal den Code überprüfen auf Tippfehler, fehlende Klammern, Kommas, Semikolons etc. damit ich nicht wegen jeder fehlenden Klammer gepingt werde :D
Ansonsten lohnt es sich auch immer, in die Discord.js Dokumentation reinzugucken. Dort wird auch immer einiges erklärt wie alles angewendet wird etc.

Jetzt aber viel Spaß beim Lesen!

Inhaltsverzeichnis​

1. Vorbereitung
2. Der Bot kommt auf unseren Server
3. Der erste Bot Befehl
 
Zuletzt bearbeitet:

Hydrablades

Ehrenmitglied
Themen-Ersteller
Com. Redakteur
Okt 26, 2019
2.739
4.168

Vorbereitung

Bevor wir aber mit dem Programmieren an sich loslegen können, müssen wir noch ein paar Dinge erledigen.

Projektordner

Zu allererst müssen wir uns einen Projektordner erstellen, wo wir am Ende alles, was den Bot betrifft, abspeichern können. Das muss unbedingt ein neuer, leerer Ordner sein, damit es nicht zu irgendwelchen Fehlern kommt.
Wie das geht weiß hoffentlich jeder. Und es empfiehlt sich auch, einen Ort zu wählen, auf den ihr schnell zugreifen könnt, bspw. Der Desktop. Natürlich kann es auch jeder Ort sein, ich werde den Ordner für diesem Guide jedoch auf dem Desktop erstellen.
Dazu macht ihr einfach einen neuen Ordner (in meinem Fall auf dem Desktop), benennt ihn entweder so wir ihr euren Bot später auch nennen wollen, discord-bot, back-to-the-future-ist-cool oder wie auch immer ihr wollt. Ist euch komplett selbst überlassen. Aber bitte, wenn ihr Leerstellen im Namen habt, dann diese mit Bindestrichen füllen (wie in meinen Beispielen).

Die package.json erstellen

Die package.json ist eine Datei die alle wichtigen Infos zum Bot und drum herum beinhaltet. Ohne die geht nix.
Das erstellen ist auch ganz einfach, ihr öffnet euren Projektordner, und klickt bei gedrückter Shift Taste auf die rechte Maustaste.
Dadurch bekommt ihr die Option, ein PowerShell Fenster in diesem Ordner zu öffnen (heißt nichts anderes als dass statt dem normalen C:\User\… Verzeichnis, welches verwendet wird wenn ihr die PowerShell normal öffnet, wird das Verzeichnis eures Projektordners übernommen). Dieses Feld klick ich logischerweise an, und es sollte sich ein PowerShell Fenster öffnen, was mehr oder weniger so aussieht:
Bild 5.png
(Quelle: eigener Screenshot)

Statt …\robin\Desktop\Lil-Hydrablades steht bei euch logischerweise euer Verzeichnis mit eurem Account Namen, Ort des Ordners und eurem Ordnernamen.
Anschließend gebt ihr folgenden Befehl ein (erst noch weiterlesen bevor ihr Enter drückt):

npm init -y

Ihr könnt das -y auch weglassen, denn das bezweckt nur dass die package.json Datei automatisch ausgefüllt wird. Wenn ihr das -y weg lasst, müsst ihr ein paar Dinge selbst angeben. Alles, was ihr nicht angeben wollt, einfach leer lassen und Enter drücken. Was ihr aber ausfüllen müsst, ist der Punkt main. Dort legt ihr fest, welcher Name eure Mainklasse des Discord-Bots, also die Datei, in der später der gesamte Code drin sein wird, heißt. Am besten eignet sich main.js, was ich auch verwenden werde. Das .js am Ende ist wichtig.
Bei mir hat npm init ohne -y aber zu komischen Fehlern geführt, weshalb ich -y präferiere. Ihr könnt diese Informationen natürlich jederzeit in der Datei selbst ändern!
Wenn ihr (mit -y) Enter gedrückt habt, sollte es so aussehen:
Bild 6.png
(Quelle: Eigener Screenshot)

Ich denke alles was da steht ist recht selbsterklärend.
Aber auf was ihr achten müsst: Wenn ihr npm init -y eingegeben habt, ist der Dateiname eures Quellcodes standardmäßig als „index.js“ festgelegt. Ihr müsst euren Quellcode also auch als index.js abspeichern. Wenn ihr ihn aber anders benennen wollt, einfach die package.json Datei öffnen und im Punkt „Main“ den Namen ändern. Wichtig ist, dass ihr .js am Ende dran stehen habt, sonst funktioniert das alles nicht.
Jetzt können wir auch endlich Discord.js installieren!

Discord.js installieren

Das installieren von Discord.js ist unglaublich unspektakulär. Im gleichen Fenster wie vorher, also im PowerShell Fenster mit dem Pfad eures Projektordners, gebt ihr folgenden Befehl ein:

npm install discord.js

Danach kommen jede Menge Zeilen mit Zeug, was uns komplett unwichtig ist, was aber auf eine erfolgreiche Installation hinweist. Und wenn ihr nun in euren Projektordner schaut, werdet ihr eine Datei namens „package-lock.json“ und einen Ordner namens „node_modules“. Beides wir eben von Discord.js benötigt, damit alle Befehle so funktionieren wie sie sollen. Hier solltet ihr auch auf gar keine Umständen etwas ändern/löschen oder sonst was damit anstellen. Einfach lassen wie es ist.
Bild 7.png
(Quelle: Eigener Screenshot)

Bei euch könnte ggf. mehr stehen, da ich discord.js ja schon installiert habe und es somit nur geupdated wurde.
Und das wars auch schon mit Discord.js installieren.

Die Discord Bot Application erstellen

Wir wollen einen Bot programmieren-schön und gut. Aber der kommt ja nicht einfach aus dem nichts hervor. Deswegen müssen wir eine sogenannte Application erstellen, die nachher unser Bot ist.
Dafür geht ihr auf die Website https://discord.com/developers/applications . Dort seht ihr dann, wenn ihr zum ersten mal einen Discord Bot programmiert, so etwas:
Bild 1.png
(Quelle: Eigener Screenshot)

Das ist auch überhaupt nicht schlimm, denn das lässt sich ja ganz einfach ändern. Dafür müsst ihr auf den „New Application“ Button klicken, woraufhin ein „Create an Application“ Fenster aufpoppt (Bild siehe unten), darunter ein Hinweis für Game Entwickler der uns nicht weiter interessieren soll und darunter wiederum ein Feld über dem „Name*“ steht. Wer hätte es gedacht, hier müsst ihr den Namen für euren Discord Bot eintragen. Der kann jederzeit geändert werden, sprich es ist egal wie ihr ihn zunächst nennt. Auch darf dieser Name Leerstellen beinhalten! Darunter seht ihr dann noch mal die Terms of Service die wir natürlich alle durchgelesen haben und darunter den heiligen „Create“ Button. Wenn ihr einen Namen eingegeben habt, müsst ihr nur noch auf diesen Button klicken und zack-eure Discord Bot Application wurde mit allem Drum und Dran erstellt.
Bild 2.png
(Quelle: Eigener Screenshot)

Nun seht ihr eure neu erstellte Application, und wenn ihr sie anklickt jede Menge Zeug, von dem ihr bestimmt nicht viel verstehen wird wofür sie da sind uns so weiter. Ist aber auch nicht schlimm, denn sie sind für uns eh unwichtig. Und so sollte es aussehen:
Bild 3.png
(Quelle: Eigener Screenshot)

Unter den zwei schwarzen Balken verstecken sich zwei ellenlange Zeichenabfolge von denen ich ehrlich gesagt selbst nicht weiß, wofür sie gebraucht werden, ich habe sie aber zur Sicherheit mal unkenntlich gemacht. Nicht dass mir da jemand Blödsinn mit anstellt ;)
Wie ihr aber auch seht, kann man hier eine Beschreibung einfügen, den Namen ändern und ein App Icon einfügen. Das App Icon ist das kleine Bild, welches angezeigt wird, wenn ihr den Bot auf einen Server einladen wollt. Dazu später aber mehr.

Der Bot Token

Wenn ihr Links unter „Settings“ auf „Bot“ klickt, werdet ihr folgendes vorfinden:
Bild 4.png
(Quelle: Eigener Screenshot)

Und hier kommt jetzt ein unheimlich wichtiger Punkt:
Unter dem Username findet ihr den „TOKEN“. Dieser wird nachher in unserem Quellcode zum einloggen in diese Application benötigt. Sprich, mit dem könnt ihr euren Bot machen lassen, was ihr wollt.
Deshalb sollte dieser Token NIEMALS! An jemand anderen weitergegeben werden, auch nicht euren besten Kumpel!
Dieser kann zwar neu generiert werden, aber glaubt mir. Ihr erspart euch selbst damit so unglaublich viel Arbeit wenn ihr den einfach für euch behaltet. Wenn ihr auf „Click to Reveal Token“ klickt, wird euch dieser angezeigt. Das ist eine ellenlange Reihenfolge von Buchstaben und Zahlen, zwischendrin auch mal ein Bindestrich, Punkt oder Unterstrich. Wenn ihr unten drunter auf „Copy“ klickt, wird der in eure Zwischenablage kopiert wonach ihr den dann ganz einfach in euren Quellcode einfügen könnt. Dazu später aber mehr.

Jedenfalls seht ihr über dem Token das Feld „Username“. Dort könnt ihr den Usernamen des Bots ändern, wie er auf dem Discord Server angezeigt wird. Der sollte immer dem Namen der Application entsprechen, die werden nämlich nicht automatisch synchronisiert. Links daneben sehr ihr „Icon“, wo ihr das Profilbild eures Bots festlegen könnt. Auch dieses wird nicht mit dem Application Icon gesynct, kann aber unterschiedlich sein. Lediglich der Name sollte gleich sein, sonst kann es zu Verwirrung kommen.

Aber genug gelabert, jetzt seid ihr ready, euch endlich an den Quellcode ranzusetzen!
 

Hydrablades

Ehrenmitglied
Themen-Ersteller
Com. Redakteur
Okt 26, 2019
2.739
4.168

Der Bot kommt auf unseren Server

Wie bereits erwähnt, habe ich mir einfach einen neuen „Testserver“ erstellt, auf dem ich meinen Bot nach Belieben testen kann.

Als erstes müsst ihr wieder zurück zum Discord Developer Portal, wo wir unsere Bot Application erstellt haben (im besten Fall ist der Tab im Browser noch offen). Ihr klickt wieder eure Application an und geht anschließen links bei „Settings“ auf „OAuth2“. Dort seht ihr zunächst einen „OAuth2 URL Generator“, der für uns aber uninteresasnt ist. Drunter seht ihr sog. „Scopes“, also wörtlich übersetzt „Bereiche“. Und wir wollen den Bereich „bot“. Also klicken wir auf das Kästchen vor „bot“ und unten in dem Feld, in dem vorher noch unwichtiger Kladderadatsch stand, ist jetzt ein Link erschienen:
Bild 8.png
(Quelle: Eigener Screenshot)

Das ist zwar schön und gut, aber noch hätte der Bot keinerlei Berechtigungen auf unserem Server.

Deswegen scrollen wir ein wenig weiter runter, wo durch das anklicken des „bot“ Scopes ein weiterer Bereich aufgepoppt ist, der „Bot Permissions“ Bereich. Dort haben wir eine Liste an Standardmäßigen Discord Rollen Berechtigungen, die wir unserem Bot über den Link geben können. Denn die aufmerksamen unter euch werden gesehen haben, dass der Link auch ein „persmissions=0“ beinhaltet. 0 bedeutet einfach nur, dass er keine Berechtigungen hat. Wenn wir jetzt aber unten ein Feld anklicken, wird die 0 zu einer anderen Zahl geändert. Ich werde der Einfachheit halber „Administrator“ nehmen, sprich der Bot, oder besser unser Quellcode, kann machen was er will.
Wenn wir jetzt also „Administrator“ anklicken (ihr könnt euch auch selbst aussuchen, was der Bot können darf und was nicht, einfach die jeweiligen Kästchen anklicken), ändert sich wie gesagt die Zahl hinter dem „permissions=“ zu (im Fall von „Administrator“) 8.
Bild 9.png
(Quelle: Eigener Screenshot)

Und was bringen uns diese Permissions eigentlich?

Ganz einfach: Wenn wir den Bot auf unseren Server holen, wird von der Bot Application automatisch eine Rolle für den Bot mit dem Namen des Bots erstellt. Diese beinhaltet am Ende auch die von uns eben ausgewählten Berechtigungen.

Der Bot kommt auf unseren Server

Wenn wir jetzt also rechts von dem Link auf copy klicken, ein neues Fenster öffnen, den Link einfügen und Enter drücken, kommen wir zur klassischen „Mit Discord verbinden“ Seite, wie ihr sie vielleicht schon von anderen Bots kennt. Hier müsst ihr einfach nur euren Server auswählen, auf dem ihr den Bot zum testen haben wollt und anschließend auf „Weiter“ klicken.
Bild 10.png
(Quelle: Eigener Screenshot)

Wenn ihr auf „Weiter“ geklickt habt, müsst ihr noch die Berechtigungen bestätigen, die wir zuvor angehabt haben, und auf „Autorisieren“ klicken. Dann noch kurz bestätigen, dass ihr ein Mensch seid und sich der Bot gerade nicht probiert selbst auf den Server zu holen, und dann habt ihr den Bot endlich auf eurem Server.
Bild 11.png
(Quelle: Eigener Screenshot)

Natürlich ist unser Bot jetzt noch Offline, weil wir kein Gerät haben, von dem er aktuell gehostet wird und er sowieso keine Funktion hat.
 

Hydrablades

Ehrenmitglied
Themen-Ersteller
Com. Redakteur
Okt 26, 2019
2.739
4.168

Den Bot zum Leben erwecken (oder auch: „Der erste Bot Befehl“)

GitHub Link

Jetzt geht es endlich ans programmieren selbst. Als erstes solltet ihr euch noch für eine IDE entscheiden. Ich werde immer Visual Studio Code verwenden, da es einfach für mich am besten zu verwenden ist und ich damit schon länger arbeite. Was ihr nehmt, ist letztlich eure Sache.
Also öffnet ihr als erstes euren Editor/eure IDE eurer Wahl und erstellt eine neue Datei. Bei VSCode einfach Strg+N. Das erste, was wir eintippen müssen, ist folgendes:

const Discord = require('discord.js'); //damit holen wir uns Dicord.js in unseres Dokument

Danach ist es am einfachsten, wenn ihr die Datei als index/main.js (je nach dem wie ihr es in der package.json Datei festgelegt habt) in eurem Projektordner abspeichert, da wir dann auch die In-Line Insert Vorschläge bekommen etc.
Wenn ihr die Datei also gespeichert habt, werden die verschiedenen Wörter auch schon bunt angezeigt, und nicht mehr alle nur weiß/grau wie vorher.

Jetzt kann es richtig losgehen!

Es lebt!

Als nächstes müssen wir uns in unsere Bot Application einloggen. Und das geht wie folgend:

const client = new Discord.Client; //wir legen fest, dass eine neue Discord Application (=Discord Client) mit "client" abgerufen werden kann. Ihr könnt auch bot oder sonst was nehmen, client ist aber am einfachsten.

Jetzt haben wir alle benötigten Konstanten festgelegt und können uns an den ersten Befehl machen. Den Bot quasi zum leben erwecken.

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

Über client.on(‚ready‘ fragen wir ab, ob unser client (=Bot Application) Online ist. Wenn ja, gibt er uns in unserer Konsole, welche wir in unserem IDE haben, „I am ready!“ aus. Ihr könnt da natürlich auch „Ich bin cool“ reinschreiben, aber irgendetwas mit ready/bereit oder so wäre am sinnvollsten.
Das reicht aber noch nicht, um den Bot starten zu können. Schließlich weiß unser Programm ja nicht, wo er sich einloggen soll. Das ändern wir jetzt aber:

client.login('token')

client ist wieder unsere am Anfang definierte Konstante. Das .login heißt, dass er sich mit dem folgenden einloggen soll. Und hier kommt jetzt unser streng geheimer Token zum Einsatz. Natürlich schreibt ihr statt 'token‘ euren tatsächlichen Token da rein, aber da ihr meinen ja nicht wissen solltet, habe ich hier als Platzhalter token geschrieben. Wenn wir das Programm so starten würden, würde aber nichts passieren bzw. würde wir eine Fehlermeldung bekommen, dass 'token' ein ungültiger Token ist.
Wenn wir jetzt über die Integrierte Option, das Programm zu starten unserer IDE unser Programm starten, sollte so etwas in eurer Konsole ausgegeben werden (oder was auch immer ihr da vorher reingeschrieben habt):
Bild 12.png
(Quelle: Eigener Screenshot)

Und wenn wir jetzt auf Discord gucken, sollte unser Bot online sein:
Bild 13.png
(Quelle: Eigener Screenshot)

Aber natürlich ist der jetzt einfach nur so online und kann noch nichts. Deswegen wollen wir uns jetzt dem ersten Befehl widmen, quasi dem „Hello World“ der Discord Bot Programmierung.
Dafür stoppt ihr euren Bot am besten zuerst (könnt ihr auch später machen) denn wir müssen ihn mit dem neuen Quellcode ja wieder starten, sonst übernimmt er ja nicht das was wir eingetippt haben. Bei VSCode ist mit dem starten eine kleine Leiste aufgepoppt, wo ganz rechts ein Rechteck ist. Wenn ihr das drückt, wird der Bot gestoppt. In der Konsole wird dann etwas wie „Process exited with code 1“ stehen, was auch komplett okay ist, denn das bedeutet dass unser Bot erfolgreich gestoppt wurde.
Jetzt gehen wir wieder in unseren Code, unter unser client.on und unter die geschweifte und normale geschlossene Klammer. Dort geben wir jetzt folgendes ein:

client.on('message', message => { });

Damit sagen wir unserem Bot, dass er von nun an immer mitlesen soll, also auf jede Nachricht theoretisch reagieren kann. Aber selbst wenn wir den Bot jetzt starten würden, und auf unserem Server eine Nachricht eingeben würden, würde der Bot nichts machen. Denn er weiß ja nicht, auf was er denn jetzt reagieren soll und wie bzw. womit er dann reagieren soll. Denn genau das kommt jetzt in diese geschweiften Klammern.
Und damit unser Bot endlich was kann, tippen wir dort jetzt folgendes ein:

if(message.content.toLowerCase() == '!ping'){ message.channel.send('Pong!'); };

Damit sagen wir unserem Bot im übertragenen Sinne „He du, wenn du im Chat ‚!ping‘ siehst, dann antworte mir im gleichen Channel mit 'Pong!'!“. Das toLowerCase sagt einfach nur, dass wir auch !PING oder !piNg oder sonst wo beliebig Groß-/Kleinbuchstaben verwenden können, sprich er reagiert auf den Inhalt "ping“, egal wie es geschrieben ist. Die zwei Gleichheitszeichen dürfen auch nicht fehlen, denn die legen in Verbindung mit dem toLowerCase fest, dass er reagieren soll, solange der Inhalt der Nachricht ‚Ping‘ ist. Würde wir drei Gleichheitszeichen verwenden, würde der Bot nur auf das ‚!ping! reagieren, wie es in unserem Quellcode niedergeschrieben steht. Denn die drei Gleichheitszeichen stehen im übertragenen Sinne für „Entweder so oder gar nicht“. Jetzt drücken wir also Strg+S um das ganze zu speichern, und starten unseren Bot erneut. Das speichern ist wichtig, weil der Bot immer den zuletzt gespeicherten Quellcode zugreift, was ja logisch ist.
Wenn wir jetzt also wieder auf unseren Server gehen, sehen wir, dass unser Bot wieder online ist. Und wenn wir ‚!ping! in den Chat eingeben, egal wie es geschrieben wird, antwortet er uns immer mit 'Pong!':
Bild 14.png
(Quelle: Eigener Screenshot)

Und schon habt ihr den ersten Befehl für euren Discord Bot programmiert!