discord bot dashboard next

Veraltet

Bitte betrachten Sie andere Alternativen. Sie können es kontinuierlich verwenden, aber es wird keine Unterstützung angeboten.

Discord Bot Dashboard -Vorlage

Verwenden Sie TypeScript, Next.js 13, React 18 und Chakra UI 2.0

• Unterstützen Sie hell/dunkles Thema
• Support für Multisprachen (i18n)
• Unterstützung von Typenkript
• Schöne UI & UX + schnelle Leistung
• Flexibel und anpassbar
• Detaillierte Dokumentation

Video: https://youtu.be/idmpjt5pzvk
Live-Demo: https://demo-bot.vercel.app

• Nur die Funktion "Begrüßungsnachricht" wird unterstützt

Bewertung (nicht die neueste Version)

Licht	Dunkel

Erste Schritte

Als Vorlage müssen Sie ein paar Dinge anpassen, damit sie funktioniert

Davor

• Installieren Sie Node.js und einen Paketmanager (Beispiel: NPM oder PNPM)

Erforderliche Fähigkeiten

• Grundkenntnisse über React.js
• In der Lage, JavaScript/TypeScript zu lesen

Aufstellen

1. Klonen Sie das Repo
   git clone https://github.com/fuma_nama/discord-bot-dashboard-next.git

2. Abhängigkeiten installieren
   Wir bevorzugen immer PNpm

   NPM	Pnpm
   npm install	pnpm install

3. Dateien anpassen
   Die Dateistruktur dieses Projekts

   Weg	Beschreibung
   src/Seiten/*	Alle Seiten
   SRC/Komponenten/*	Komponenten
   src/api/*	API -Utils
   src/config/*	Gemeinsame Konfigurationen

4. Merkmale definieren
   Das Dashboard bietet integrierte Unterstützung für die Konfiguration von Funktionen
   Benutzer können Funktionen aktivieren/deaktivieren und die Funktion nach Aktivierung konfigurieren

   Passen Sie alle Typierungen in src/config/typen/benutzerdefinierten typen an.ts an.
   CustomFeatures werden zum Definieren von Funktionen und Optionen verwendet. Weitere Informationen finden Sie im Beispiel

   Öffnen Sie SRC/Konfiguration/Funktionen
   Sie können sehen, wie eine Funktion konfiguriert ist

    'feature-id' : {
        name : 'Feature name' ,
        description : 'Description about this feature' ,
        icon : < Icon as = { BsMusicNoteBeamed } /> , //give it a cool icon
        useRender : ( data ) => {
            //render the form
        } ,
    }

   Die Eigenschaft useRender wird verwendet, um das Feature -Konfigurationspanel zu rendern
   Schauen Sie sich hier für Beispiele an

5. Allgemeine Informationen konfigurieren
   Ändern Sie SRC/config/Common.tsx

   • Bot Name & Symbol
   • URL einladen (Beispiel: https://discord.com/oauth2/authorize?client_id=1234&scope=bot)
   • Gildeneinstellungen

6. Konfigurieren von Umgebungsvariablen
   Diese Variablen in .Env.Example sind erforderlich
   Sie können Umgebungsvariablen definieren, indem Sie eine .env -Datei erstellen

7. Setup Backend Server
   Um das Dashboard mit Ihrem Discord Bot in Verbindung zu bringen, benötigen Sie einen Backend -Server
   Sie können es in allen Programmiersprachen implementieren

   Lesen Sie hier, um einen Leitfaden zur Entwicklung Ihres eigenen Servers zu entwickeln

8. Erledigt!
   Starten Sie die App mit pnpm run dev (hängt von Ihrem Paketmanager ab)
   Dann sollten Sie sehen, wie die App in Port 3000 gestartet wird

   Lokalisierung | Formen

Genehmigung

Wir verwenden die API -Routen von Next.js, um die Autorisierung zu bewältigen

Konfigurieren Sie die Anwendung

1. Open Discord Developer Portal

2. Erstellen Sie Ihre OATH2 -Anwendung in https://discord.com/developers/applications

3. In <Your Application> -> oAuth2 -> Weiterleitet

   Fügen Sie <APP_URL>/api/auth/callback -URL zu den Weiterleitungen hinzu

   Zum Beispiel: http://localhost:3000/api/auth/callback
   Dies ist für die Genehmigung erforderlich

Autorisierungsfluss

Login -> Discord OAuth -> API Routes -> Client

• Login ( /api/auth/login )
  
  • Leitet den Benutzer in die Discordo -URL weiter
• Offene Zwietracht OAuth URL
  • Der Benutzer autorisiert die Anwendung
  • Umleiten Sie zurück zu /api/auth/callback
• API -Routen
  • Speichern Sie das Zugangstoken in nur HTTP-Cookies nur in HTTP
  • Umleiten Sie zurück zur Startseite

Token -Ablauf

Das Discord Access Token kann vom Benutzer abgelaufen oder nicht autorisiert werden
Wir verlangen vom Benutzer, sich erneut anzumelden, nachdem wir 401 Fehler von der Discord -API erhalten haben

Der Aktualisierungstoken wird nicht verwendet, aber Sie können den Autorisierungsfluss anpassen

Backend -Entwicklung

Überprüfen Sie die SRC/API/Bot.ts. Es definierte eine integrierte API zum Abholen von Daten

Sie können express.js (Node.js), Rocket (Rost) oder Bibliotheken/Sprachen verwenden, um Ihren eigenen Server zu entwickeln
Normalerweise läuft der Server zusammen mit Ihrem Discord Bot (im selben Programm) zusammen mit Ihrem Discord Bot.
Darüber hinaus können Sie Redis verwenden, anstatt sich direkt mit dem Bot -Server zu verbinden

Offizielles Beispiel

Node.js (TypeScript)

Genehmigung

Der Kunde wird sein Zugangstoken über die Authorization bestehen

 Bearer MY_TOKEN_1212112

Erforderliche Routen

Sie können es für weitere Funktionen erweitern

Get /guilds/{guild}

• Holen Sie sich Guild Info ( custom-types.ts > CustomGuildInfo )
• Antworten Sie 404 oder null , wenn Bot der Gilde nicht beigetreten ist

Get /guilds/{guild}/features/{feature}

• Feature-Optionen abrufen ( custom-types.ts > CustomFeatures[K] )
• Antworten Sie 404, wenn nicht aktiviert ist

Patch /guilds/{guild}/features/{feature}

• Aktualisieren Sie die Funktionsoptionen
• Mit benutzerdefiniertem Körper (definiert in config/features )
• Aktualisierte Funktionoptionen für aktualisierte Funktionen

Post /guilds/{guild}/features/{feature}

• Aktivieren Sie eine Funktion

/guilds/{guild}/features/{feature}

• Deaktivieren Sie ein Merkmal

Get /guilds/{guild}/roles

• Holen Sie sich Rollen der Gilde
• Reagiert eine Liste von Rollenobjekten (wie die Dokumentdokumentation)

Get /guilds/{guild}/channels

• Holen Sie sich Kanäle der Gilde
• Antwortet eine Liste von Gildenkanal (wie die Discord -Dokumentation)

Irgendwelche Probleme?

Fühlen Sie sich frei, eine Frage zu stellen, indem Sie ein Problem eröffnen

Lieben Sie dieses Projekt? Geben Sie diesem Repo einen Stern!