discord bot dashboard next

Descontinuado

Por favor, considere outras alternativas. Você pode usá -lo continuamente, mas nenhum suporte será fornecido.

Modelo de painel de bot Bot Discord

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

• Apoie o tema claro/escuro
• Suporte de vários idiomas (i18n)
• Suporte TypeScript
• Bom ui e ux + desempenho rápido
• Flexível e personalizável
• Documentação detalhada

Vídeo: https://youtu.be/idmpjt5pzvk
Demoção ao vivo: https://demo-bot.vercel.app

• Somente o recurso de 'mensagem de boas -vindas' é suportada

Revisão (não a versão mais recente)

Luz	Escuro

Começando

Como modelo, você precisa personalizar algumas coisas para fazer com que funcione

Antes disso

• Instale o Node.js e um gerenciador de pacotes (Ex: NPM ou PNPM)

Habilidades necessárias

• Conhecimento básico sobre react.js
• Capaz de ler JavaScript/TypeScript

Configurar

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

2. Instalar dependências
   Nós sempre preferimos PNpm

   Npm	PNPM
   npm install	pnpm install

3. Personalize arquivos
   A estrutura do arquivo deste projeto

   Caminho	Descrição
   src/páginas/*	Todas as páginas
   src/componentes/*	Componentes
   src/api/*	API UTILS
   src/config/*	Configurações comuns

4. Defina recursos
   O painel possui suporte interno para configurar recursos
   Os usuários podem ativar/desativar os recursos e configurar o recurso depois de ativá -lo

   Personalize todas as tímidas em src/config/types/personaliza- types.ts
   CustomFeatures é usada para definir recursos e opções, consulte o exemplo para obter mais detalhes

   Abra SRC/Config/Recursos
   Você pode ver como um recurso está configurado

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

   A propriedade useRender é usada para renderizar o painel de configuração de recursos
   Dê uma olhada aqui para exemplos

5. Configure informações gerais
   Modificar SRC/config/Common.tsx

   • Nome e ícone de bot
   • Invite URL (Exemplo: https://discord.com/oauth2/authorize?client_id=1234&scope=bot)
   • Configurações da guilda

6. Configure variáveis de ambiente
   Essas variáveis em .env.example são necessárias
   Você pode definir variáveis de ambiente criando um arquivo .env

7. Setup Backend Server
   Para deixar o painel conectado com o seu Bot Discord, você precisará de um servidor de back -end
   Você pode implementá -lo em qualquer linguagem de programação

   Leia aqui para um guia para desenvolver seu próprio servidor

8. Feito!
   Inicie o aplicativo pelo pnpm run dev (depende do seu gerenciador de pacotes)
   Então você deve ver o aplicativo iniciado na porta 3000

   Localização | Formas

Autorização

Estamos usando as rotas de API do Next.js para lidar com a autorização

Configure o aplicativo

1. Open Discord Developer Portal

2. Crie seu aplicativo OAuth2 em https://discord.com/developers/applications

3. Em <Your Application> -> oauth2 -> redireciona

   Adicionar <APP_URL>/api/auth/callback para os redirecionamentos

   Por exemplo: http://localhost:3000/api/auth/callback
   Isso é necessário para a autorização

Fluxo de autorização

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

• Login ( /api/auth/login )
  
  • Redireciona o usuário para discórdia OAuth URL
• Open Discord Oauth URL
  • O usuário autoriza o aplicativo
  • Redirecionar de volta para /api/auth/callback
• Rotas de API
  • Armazene o token de acesso em cookies somente HTTP
  • Redirecionar de volta para a página inicial

Expiração do token

O token de acesso à discórdia pode ser expirado ou não autorizado pelo usuário
Exigiremos que o usuário faça login novamente após obter o erro 401 da API Discord

O token de atualização não será usado, mas você pode personalizar o fluxo de autorização

Desenvolvimento de back -end

Verifique SRC/API/BOT.TS, ele definiu uma API embutida para buscar dados

Você pode usar express.js (node.js), Rocket (ferrugem) ou qualquer biblioteca/linguagem para desenvolver seu próprio servidor
Normalmente, o servidor é executado junto com o seu Bot Discord (no mesmo programa)
Além disso, você pode usar o Redis em vez de se conectar diretamente ao servidor de bot

Exemplo oficial

Node.js (TypeScript)

Autorização

O cliente passará seu token de acesso através do cabeçalho Authorization

 Bearer MY_TOKEN_1212112

Rotas necessárias

Você pode estendê -lo para mais funções

Get /guilds/{guild}

• Get Guild Info ( custom-types.ts > CustomGuildInfo )
• Responda 404 ou null se o bot não se juntar à guilda

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

• Obtenha opções de recursos ( custom-types.ts > CustomFeatures[K] )
• Responda 404 se não estiver ativado

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

• Atualizar opções de recursos
• Com corpo personalizado (definido em config/features )
• Responder opções de recursos atualizadas

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

• Ativar um recurso

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

• Desative um recurso

Get /guilds/{guild}/roles

• Obtenha papéis da guilda
• Responde uma lista do objeto de função (o mesmo que a documentação da discórdia)

Get /guilds/{guild}/channels

• Obtenha canais da guilda
• Responde uma lista do canal da guilda (o mesmo que a documentação da discórdia)

Algum problema?

Sinta -se à vontade para fazer uma pergunta abrindo um problema

Ama este projeto? Dê a este repo uma estrela!