discord bot dashboard next

Desapercibido

Considere otras alternativas. Puede usarlo continuamente, pero no se proporcionará soporte.

Plantilla de tablero de discordia Bot

Usando TypeScript, Next.js 13, React 18 y Chakra UI 2.0

• Tema de luz/oscuro de apoyo
• Soporte de múltiples idiomas (i18n)
• Soporte mecanografiado
• Bonito ui y ux + rendimiento rápido
• Flexible y personalizable
• Documentación detallada

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

• Solo se admite la característica de 'mensaje de bienvenida'

Revisión (no la última versión)

Luz	Oscuro

Empezando

Como plantilla, debe personalizar algunas cosas para que funcione

Antes de eso

• Instale Node.js y un administrador de paquetes (ex: NPM o PNPM)

Habilidades requeridas

• Conocimientos básicos sobre react.js
• Capaz de leer JavaScript/TypeScript

Configuración

1. Clonar el repositorio
   git clone https://github.com/fuma_nama/discord-bot-dashboard-next.git

2. Instalar dependencias
   Siempre preferimos PNpm

   Npm	PNPM
   npm install	pnpm install

3. Personalizar archivos
   La estructura de archivos de este proyecto

   Camino	Descripción
   src/páginas/*	Todas las páginas
   src/componentes/*	Componentes
   Src/API/*	API Utils
   src/config/*	Configuraciones comunes

4. Definir características
   El tablero tiene soporte incorporado para configurar características
   Los usuarios pueden habilitar/deshabilitar las funciones y configurar la función después de habilitarla

   Personalizar todas las tipificaciones en SRC/config/tipos/personalizados de types.ts
   CustomFeatures se utiliza para definir características y opciones, consulte el ejemplo para obtener más detalles

   Abrir src/config/características
   Puede ver cómo se configura una función

    '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 propiedad useRender se utiliza para representar el panel de configuración de funciones
   Echa un vistazo aquí para ver ejemplos

5. Configurar información general
   Modificar src/config/common.tsx

   • Bot Nombre e icono
   • Invite URL (ejemplo: https://discord.com/oauth2/authorize?client_id=1234&scope=bot)
   • Configuración del gremio

6. Configurar variables de entorno
   Esas variables en .env.example son necesarias
   Puede definir las variables de entorno creando un archivo .env

7. Configuración del servidor de backend
   Para dejar que el tablero se conecte con su bot de discordia, necesitará un servidor de backend
   Puede implementarlo en cualquier lenguaje de programación

   Lea aquí para una guía para desarrollar su propio servidor

8. ¡Hecho!
   Inicie la aplicación por pnpm run dev (depende de su administrador de paquetes)
   Entonces debería ver que la aplicación se inició en el puerto 3000

   Localización | Formularios

Autorización

Estamos utilizando las rutas API de Next.js para manejar la autorización

Configurar la aplicación

1. Portal de desarrollador de discordia abierto

2. Cree su aplicación OAuth2 en https://discord.com/developers/Applesations

3. En <Your Application> -> OAuth2 -> Redirects

   Agregar <APP_URL>/api/auth/callback URL a las redirecciones

   Por ejemplo: http://localhost:3000/api/auth/callback
   Esto se requiere para la autorización

Flujo de autorización

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

• Iniciar sesión ( /api/auth/login )
  
  • Redirige al usuario a discordia OAuth URL
• Open Discord Oauth URL
  • El usuario autoriza la aplicación
  • Redirigir de nuevo a /api/auth/callback
• Rutas API
  • Almacene el token de acceso en cookies solo HTTP
  • Redirigir de regreso a la página de inicio

Expiración del token

El token de acceso a discordia puede ser expirado o no autorizado por el usuario
Le requeriremos que el usuario inicie sesión nuevamente después de obtener un error 401 de la API de Discord.

El token de actualización no se usará, pero puede personalizar el flujo de autorización

Desarrollo de back -end

Verifique SRC/API/BOT.TS, definió una API incorporada para obtener datos

Puede usar express.js (node.js), Rocket (óxido) o cualquier bibliotecas/lenguajes para desarrollar su propio servidor
Por lo general, el servidor se ejecuta junto con su bot (en el mismo programa)
Además, puede usar Redis en lugar de conectarse al servidor BOT directamente

Ejemplo oficial

Node.js (mecanografiado)

Autorización

El cliente pasará su token de acceso a través del encabezado Authorization

 Bearer MY_TOKEN_1212112

Rutas requeridas

Puede extenderlo para más funciones

Get /guilds/{guild}

• Get Guild Info ( custom-types.ts > CustomGuildInfo )
• Responder 404 o null si Bot no se ha unido al gremio

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

• Obtener opciones de características ( custom-types.ts > CustomFeatures[K] )
• Responda 404 si no está habilitado

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

• Actualizar opciones de características
• Con cuerpo personalizado (definido en config/features )
• Responder opciones de funciones actualizadas

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

• Habilitar una función

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

• Deshabilitar una función

Get /guilds/{guild}/roles

• Obtener papeles del gremio
• Responde una lista de objeto de roles (igual que la documentación de Discord)

Get /guilds/{guild}/channels

• Obtener canales del gremio
• Responde una lista de canal del gremio (igual que la documentación de Discord)

¿Algún problema?

No dude en hacer una pregunta abriendo un problema

¿Te encanta este proyecto? ¡Dale a este repositorio una estrella!