discord bot dashboard next

Déprécié

Veuillez considérer d'autres alternatives. Vous pouvez l'utiliser en permanence, mais aucun support ne sera fourni.

Modèle de tableau de bord Discord Bot

Utilisation de TypeScript, Next.js 13, React 18 et Chakra UI 2.0

• Soutenir le thème clair / sombre
• Support multi-langues (i18n)
• Support dactylographié
• Belle ui et ux + performance rapide
• Flexable et personnalisable
• Documentation détaillée

Vidéo: https://youtu.be/idmpjt5pzvk
Démo en direct: https://demo-bot.vercel.app

• Seule la fonctionnalité «Message de bienvenue» est prise en charge

Examen (pas la dernière version)

Lumière	Sombre

Commencer

En tant que modèle, vous devez personnaliser certaines choses pour le faire fonctionner

Avant cela

• Installez Node.js et un gestionnaire de packages (Ex: NPM ou PNPM)

Compétences requises

• Connaissances de base sur react.js
• Capable de lire JavaScript / TypeScript

Installation

1. Cloner le repo
   git clone https://github.com/fuma_nama/discord-bot-dashboard-next.git

2. Installer des dépendances
   Nous préférons toujours PNpm

   NPM	Pnpm
   npm install	pnpm install

3. Personnaliser les fichiers
   La structure de fichiers de ce projet

   Chemin	Description
   src / pages / *	Toutes les pages
   src / composants / *	Composants
   src / api / *	API Utils
   src / config / *	Configurations communes

4. Définir les fonctionnalités
   Le tableau de bord a une prise en charge intégrée pour la configuration des fonctionnalités
   Les utilisateurs peuvent activer / désactiver les fonctionnalités et configurer la fonctionnalité après l'activer

   Personnalisez tous les types de Src / Config / Types / Custom-Types.ts
   CustomFeatures est utilisée pour définir des fonctionnalités et des options, voir l'exemple pour plus de détails

   Ouvrez SRC / Config / Fonctions
   Vous pouvez voir comment une fonctionnalité est configurée

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

   La propriété useRender est utilisée pour rendre le panneau de configuration des fonctionnalités
   Jetez un œil ici pour des exemples

5. Configurer les informations générales
   Modifier src / config / commun.tsx

   • Nom de bot et icône
   • Inviter URL (Exemple: https://discord.com/oauth2/authorize?client_id=1234&scope=bot)
   • Paramètres de guilde

6. Configurer les variables d'environnement
   Ces variables dans .env.example sont nécessaires
   Vous pouvez définir les variables d'environnement en créant un fichier .env

7. Configuration du serveur backend
   Afin de laisser le tableau de bord connecté avec votre bot Discord, vous aurez besoin d'un serveur backend
   Vous pouvez l'implémenter dans tous les langages de programmation

   Lisez ici pour un guide pour développer votre propre serveur

8. Fait!
   Démarrez l'application par pnpm run dev (dépend de votre gestionnaire de packages)
   Ensuite, vous devriez voir l'application démarrée dans le port 3000

   Localisation | Formes

Autorisation

Nous utilisons les routes API de Next.js pour gérer l'autorisation

Configurer l'application

1. Portail des développeurs de discorde ouverte

2. Créez votre application OAuth2 dans https://discord.com/developers/applications

3. Dans <Your Application> -> oAuth2 -> Redirection

   Ajouter une URL <APP_URL>/api/auth/callback vers les redirectes

   Par exemple: http://localhost:3000/api/auth/callback
   Ceci est requis pour l'autorisation

Flux d'autorisation

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

• Connexion ( /api/auth/login )
  
  • Redirige l'utilisateur vers la discorde OAuth URL
• URL OUT DISCORD OAUTH
  • L'utilisateur autorise l'application
  • Rediriger vers /api/auth/callback
• Routes API
  • Stockez le jeton d'accès dans les cookies HTTP uniquement
  • Rediriger vers la page d'accueil

Expiration des jetons

Le jeton Discord Access peut être expiré ou non autorisé par l'utilisateur
Nous aurons besoin de l'utilisateur à se connecter à nouveau après avoir obtenu une erreur 401 de l'API Discord

Le jeton de rafraîchissement ne sera pas utilisé, mais vous pouvez personnaliser le flux d'autorisation

Développement backend

Vérifiez Src / API / Bot.ts, il a défini une API intégrée pour récupérer les données

Vous pouvez utiliser express.js (Node.js), Rocket (Rust) ou n'importe quelle bibliothèque / langues pour développer votre propre serveur
Habituellement, le serveur exécute votre Discord Bot (dans le même programme)
De plus, vous pouvez utiliser Redis au lieu de vous connecter directement au serveur BOT

Exemple officiel

Node.js (TypeScript)

Autorisation

Le client passera son jeton d'accès via l'en-tête Authorization

 Bearer MY_TOKEN_1212112

Itinéraires requis

Vous pouvez l'étendre pour plus de fonctions

Get /guilds/{guild}

• Get Guild Info ( custom-types.ts > CustomGuildInfo )
• Répondre 404 ou null si le bot n'a pas rejoint la guilde

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

• Obtenez des options de fonctionnalité ( custom-types.ts > CustomFeatures[K] )
• Répondre 404 si non activé

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

• Mettre à jour les options des fonctionnalités
• Avec un corps personnalisé (défini dans config/features )
• Répondre aux options de fonctionnalité mises à jour

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

• Activer une fonctionnalité

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

• Désactiver une fonctionnalité

Get /guilds/{guild}/roles

• Obtenez des rôles de la guilde
• Répond une liste d'objets de rôle (identique à la documentation de discorde)

Get /guilds/{guild}/channels

• Obtenez des canaux de la guilde
• Répond une liste de la chaîne de guilde (identique à la documentation de la discorde)

Des problèmes?

N'hésitez pas à poser une question en ouvrant un problème

Vous aimez ce projet? Donnez une étoile à ce référentiel!