discord bot dashboard next

Устарел

Пожалуйста, рассмотрите другие альтернативы. Вы можете постоянно использовать его, но поддержка не будет предоставлена.

Шаблон панели панели дискордов

Использование TypeScript, Next.js 13, React 18 и Chakra UI 2.0

• Поддержка света/темная тема
• Поддержка мульти -языков (i18n)
• Поддержка TypeScript
• Хороший пользовательский интерфейс и ux + быстрая производительность
• Гибкий и настраиваемый
• Подробная документация

Видео: https://youtu.be/idmpjt5pzvk
Живая демонстрация: https://demo-bot.vercel.app

• Поддерживается только функция «приветствующего сообщения»

Обзор (не последняя версия)

Свет	Темный

Начиная

Как шаблон, вам нужно настроить несколько вещей, чтобы заставить его работать

До этого

• Установить node.js и диспетчер пакетов (например: NPM или PNPM)

Требуемые навыки

• Основные знания о React.js
• Способен читать JavaScript/TypeScript

Настраивать

1. Клонировать репо
   git clone https://github.com/fuma_nama/discord-bot-dashboard-next.git

2. Установить зависимости
   Мы всегда предпочитаем PNpm

   Npm	PNPM
   npm install	pnpm install

3. Настройте файлы
   Структура файла этого проекта

   Путь	Описание
   src/pages/*	Все страницы
   src/components/*	Компоненты
   src/api/*	API Utils
   src/config/*	Общие конфигурации

4. Определите функции
   Дискона имеет встроенную поддержку для настройки функций
   Пользователи могут включить/отключить функции и настраивать функцию после включения ее

   Настроить все типинги в src/config/types/custom-types.ts.
   CustomFeatures используется для определения функций и параметров, см. Пример для получения более подробной информации

   Откройте SRC/Config/Features
   Вы можете увидеть, как настроена функция

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

   Свойство useRender используется для отображения панели конфигурации функции
   Взгляните на примеры

5. Настройте общую информацию
   Измените src/config/common.tsx

   • Название бота и значок
   • Пригласить URL (пример: https://discord.com/oauth2/authorize?client_id=1234&scope=bot)
   • Настройки гильдии

6. Настройте переменные среды
   Эти переменные в .env.example требуются
   Вы можете определить переменные среды, создав файл .env

7. Настройка бэкэнд -сервера
   Чтобы позволить инструментальной панели подключиться к вашим боту Discord, вам понадобится сервер Бэкэнд
   Вы можете реализовать его на любых языках программирования

   Прочитайте здесь для руководства по разработке собственного сервера

8. Сделанный!
   Запустите приложение от pnpm run dev (зависит от вашего диспетчера пакетов)
   Тогда вы должны увидеть, что приложение запустилось в порту 3000

   Локализация | Формы

Авторизация

Мы используем маршруты API Next.js для обработки авторизации

Настройте приложение

1. Открытый портал разработчиков Discord

2. Создайте приложение OAuth2 в https://discord.com/developers/applications

3. В <Your Application> -> oauth2 -> перенаправления

   Добавить <APP_URL>/api/auth/callback url в перенаправления

   Например: http://localhost:3000/api/auth/callback
   Это требуется для разрешения

Поток авторизации

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

• Login ( /api/auth/login )
  
  • Перенаправляет пользователя на URL -адрес oauth
• Open Discord oauth url
  • Пользователь разрешает приложение
  • Перенаправить обратно в /api/auth/callback
• API -маршруты
  • Храните токен доступа в печенье только для HTTP
  • Перенаправить обратно на домашнюю страницу

ИСКЛЮЧЕНИЕ ИСПОЛЬЗОВАНИЯ

Токен доступа доступа может быть истек или неавторизован пользователем
Мы потребуем, чтобы пользователь снова входил в систему после получения ошибки 401 от API Discord

Токен обновления не будет использоваться, но вы можете настроить поток авторизации

Развитие бэкэнд

Проверьте SRC/API/BOT.TS, он определил встроенный API для получения данных

Вы можете использовать express.js (node.js), Rocket (ржавая) или любые библиотеки/языки для разработки собственного сервера
Обычно сервер работает вместе с вашим ботом для Discord (в той же программе)
Кроме того, вы можете использовать Redis, а не подключаться к серверу бот.

Официальный пример

Node.js (TypeScript)

Авторизация

Клиент передаст свой токен доступа через заголовок Authorization

 Bearer MY_TOKEN_1212112

Требуемые маршруты

Вы можете расширить его для большего количества функций

Get /guilds/{guild}

• Получить информацию о гильдии ( custom-types.ts > CustomGuildInfo )
• Ответьте 404 или null , если бот не присоединился к гильдии

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

• Получить параметры функций ( custom-types.ts > CustomFeatures[K] )
• Ответьте 404, если не включено

Патч /guilds/{guild}/features/{feature}

• Обновление параметров функций
• С пользовательским корпусом (определено в config/features )
• Ответить обновленные параметры функции

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

• Включить функцию

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

• Отключить функцию

Get /guilds/{guild}/roles

• Получить роли гильдии
• Отвечает на список объекта роли (так же, как документация Discord)

Get /guilds/{guild}/channels

• Получить каналы гильдии
• Отвечает список каналов гильдии (так же, как документация Discord)

Есть проблемы?

Не стесняйтесь задавать вопрос, открыв проблему

Любите этот проект? Дайте этому репо звезду!