Änderungen am GalaxyBot Dashboard in der V5

Mit dem großen V5-Update hat sich nicht nur viel an den Modulen des GalaxyBots und deren Funktionen geändert. Wir haben unseren Systemen auch technisch ein dickes Upgrade verpasst! Hier geht’s jetzt um das GalaxyBot Dashboard. In weiteren Blog-Posts kannst du mehr über die neue Webseite der V5, den V5-Discord-Bot oder unsere generelle IT-Infrastruktur lesen.

Das GalaxyBot Dashboard

Das GalaxyBot Dashboard bietet dir schon seit den Anfängen des GalaxyBots die Möglichkeit die Einstellungen vom Bot ganz bequem und einfach online im Browser zu verwalten. Ganz ohne, dass du in Discord nervige Befehle eingeben müsstest.

Mit der Zeit hat sich vieles geändert

Wir haben hier einiges geändert. Schau dir mal an, wie das Dashboard in der ersten Version ausgesehen hat. Das Design war damals noch sehr modern und passte gut zu Discord und unserem alten Logo. Aus technischer Sicht haben wir auf PHP gesetzt, weil wir so ein zuverlässiges und vor allem sicheres Dashboard entwickeln und dir zur Verfügung stellen konnten. Eine Eigenschaft von PHP ist allerdings, dass der Code komplett auf dem Server ausgeführt wird. Deswegen wurde die Seite bei fast jedem Klick auf einen Button oder Link im Dashboard neu geladen. So war das Dashboard natürlich recht langsam - und das wollten wir ändern!

Das ganz alte Dashboard

In der nächsten Version unseres Dashboards hat sich schon einiges geändert, wie du sehen kannst. Wir haben unser Branding, also das Logo, die Farben und so weiter, einmal auf den Kopf gestellt und so auch das Design vom Dashboard komplett geändert. Der Aufbau ist aber gleich geblieben. Das sieht doch schon fast so aus wie das aktuelle Dashboard!

Wir haben immer noch PHP verwendet aber deutlich mehr über JavaScript mit dem Nutzer interagiert und uns einige Page-Reloads und Weiterleitungen gespart.

Das Dashboard wurde etwas moderner

Aktuell sieht das GalaxyBot Dashboard so aus wie im dritten Screenshot. Wir haben noch ein bisschen am Design geschraubt und den Aufbau mancher Seiten komplett neu gestaltet. Auch sind einige coole Module dazu gekommen! Was in der V5 alles neu ist kannst du auch hier im Blogpost zu den Änderungen der Version 5 nachlesen.

Das modernste Dashboard was GalaxyBot bisher hatte

Dashboard jetzt auf Basis von Nuxt - technische Änderungen

Die größte Änderung vom letzten zum aktuellen Dashboard ist definitiv die technische Umsetzung im Hintergrund. Unser Entwickler-Team ist stetig gewachsen und hat sich weiter entwickelt. So konnten wir endlich einen großen und schon lang ersehnten Schritt wagen: wir haben das Dashboard komplett neu programmiert und auf der Basis von TypeScript und Nuxt ein modernes, hübsches und vor allem schnelles Dashboard geschaffen.

Das Dashboard ist jetzt aufgeteilt in ein Backend und ein Frontend wobei das Frontend das ist, was du siehst, wenn du das Dashboard öffnest und deinen Bot konfigurierst. Das Dashboard verarbeitet auch alle Befehle, die du ihm beim Treffen der Einstellungen sendest. Das Frontend schickt dann deine Anfragen weiter an das Backend, wo dann die Einstellungen in der Datenbank gesetzt werden und wirklich angewendet werden.

Nuxt im Frontend und TypeScript im Backend

Frontend mit Nuxt

Nuxt, was wir im Frontend benutzen, ist ein Open-Source Framework für die Entwicklung von Webseiten und Web-Apps auf der Basis von Vue.js. Vue.js basiert wiederum auf JavaScript. JavaScript wird mittlerweile von fast jeder Website verwendet, weil sich der Code direkt im Browser des Benutzers der Website ausführen lässt. Dadurch sind viele Funktionen möglich, bei denen du beispielsweise mit der Website interagierst, ohne, dass diese neu laden muss.

An Nuxt gefällt uns besonders gut, dass es ein recht schlank aufgebautes Framework ist und nicht mit Funktionen überladen ist. Dadurch kommen wir im Entwicklungsprozess schneller an unser Ziel. Zusätzlich zum Framework selbst gibt es eine riesige Community, die auch mit Nuxt Webseiten entwickelt. Dadurch gibt es eine große Auswahl von Plugins und vorgefertigten Komponenten auf dem Markt, die die Entwicklung deutlich beschleunigen können. Außerdem hilft uns Nuxt, neue Entwickler im Team schneller einzuarbeiten, weil sich viele zumindest schon mit Vue.js auskennen und dadurch schnell in Nuxt herein finden.

Backend mit TypeScript

Das Backend wurde komplett in TypeScript geschrieben. TypeScript basiert auf JavaScript und bietet ziemlich coole zusätzliche Funktionen an. Im Gegensatz zu JavaScript gibt’s bei TypeScript auch eine viel bessere Integration mit den Programmen, die wir zum Programmieren benutzen. Wir können also schon viel früher Fehler feststellen und beheben, so dass sie dich erst gar nicht betreffen! Vor allem freut uns, dass man bei TypeScript explizite Typen angeben kann. Beispielsweise kann man für eine Variable, die man im Code schreibt, ganz klar definieren, ob sie eine Zahl oder ein Text sein soll. Das hilft dabei, Fehler im Betrieb vom Dashboard zu vermeiden.

Die Vorteile vom Recode

Durch das neu programmierte Dashboard ergeben sich viele Vorteile. Wir haben zum Beispiel die Ladezeiten analysiert und dabei ist rausgekommen, dass sich die Ladezeiten im Vergleich zum alten Dashboard fast vier mal so schnell sind. Das freut uns natürlich ganz besonders und dich bestimmt auch.

Neue Funktionen im Dashboard

Schneller beim Einrichten mit dem Setup-Wizard

Das Dashboard bietet dir seit der Version 5 einen Setup-Wizard an, also eine Anleitung zum Einrichten der Module des GalaxyBots. Dadurch wirst du viel schneller fertig und kannst ein Modul erstmal benutzen und später weiter anpassen.

Mit dem Setup Wizard noch schneller einrichten

Schönere Embeds einfacher gestalten mit dem Embed-Editor

Unseren Embed-Editor kennst du bestimmt noch von der letzten Version des Dashboards. Embeds können jetzt noch viel einfacher bearbeitet werden. Außerdem sind die Platzhalter für das automatische Einfügen von Informationen wie dem Namen eines Nutzers etc. deutlich besser zugänglich.

Der Embed Editor im Dashboard

Bilder mit dem Image-Editor direkt im Dashboard bearbeiten

Eine Funktion, auf die wir auch sehr stolz sind, ist der neue Image-Editor. Mit diesem kannst du Bilder, die du im Dashboard hoch lädst, direkt dort bearbeiten. Das ist natürlich kein Bildbearbeitungsprogramm, aber du kannst deine Bilder komfortabel zuschneiden und drehen und somit für den Anwendungsfall perfekt einpassen.

Bilder direkt im Dashboard bearbeiten mit dem Image Editor

Weitere Änderungen

Wir haben noch einiges mehr verändert und weitere Funktionen hinzugefügt. Zum Beispiel wird jetzt direkt im Dashboard angezeigt, wenn der Bot eine ausgewählte Rolle nicht verwalten kann und die Dropdown-Menüs wurden alle neu designed. Schau dazu am Besten in unseren Livestream vom V5-Event. Da haben wir alles ausführlich erklärt und anschließend mit den Entwicklern über die Neuerungen gesprochen: V5-Event auf YouTube.

Was sich noch mit der Version 5 geändert hat

Mit dem großen Update der V5 haben wir mit unserem Entwickler-Team einige Änderungen am GalaxyBot und seinen Systemen vorgenommen. Zum Beispiel sind viele neue Funktionen dazugekommen, die wir bereits in einem Blog-Artikel vorgestellt haben. Außerdem gab es einige Änderungen an technischen Systemen, wie der IT-Infrastruktur und dem Bot-Code selbst. Auch die Website haben wir komplett neu designed und moderner programmiert.

Die aktuelle Übersicht über alle Funktionen des GalaxyBots findest du direkt hier auf der Website: zu den Funktionen vom GalaxyBot!

Probiere das Dashboard jetzt aus!

Du hast das neue Dashboard noch nicht ausprobiert und die neuen Funktionen noch nicht entdeckt? Dann schau doch mal vorbei: zum GalaxyBot Dashboard.

Falls du noch kein Nutzer vom GalaxyBot bist, kannst du den Discord-Bot jederzeit über unsere Website hinzufügen. Oder du klickst auf den Link hier: GalaxyBot jetzt einladen. Die Einrichtung dauert nicht lang und wenn du Fragen hast, hilft dir unser Support-Team auf unserem Discord-Server gerne weiter.