discord bot dashboard next

弃用

请考虑其他选择。您可以不断使用它，但不会提供任何支持。

Discord Bot仪表板模板

使用Typescript，Next.js 13，React 18和Chakra UI 2.0

• 支持光/黑暗主题
• 多语言支持（I18N）
• 打字稿支持
• 不错的UI和UX +快速性能
• 可弹性且可自定义
• 详细的文档

视频： https：//youtu.be/idmpjt5pzvk
实时演示： https：//demo-bot.vercel.app

• 仅支持“欢迎消息”功能

评论（不是最新版本）

光	黑暗的

入门

作为模板，您需要自定义一些内容才能使其正常工作

在那之前

• 安装node.js和软件包管理器（ex：npm或pnpm）

必需的技能

• 关于react.js的基本知识
• 能够读取JavaScript/tyspript

设置

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/组件/*	成分
   src/api/*	API UTILS
   src/config/*	常见配置

4. 定义功能
   仪表板具有用于配置功能的内置支持
   用户能够启用/禁用功能并在启用该功能后配置该功能

   在src/config/type/custom-types.ts中自定义所有打字
   CustomFeatures用于定义功能和选项，请参见示例以获取更多详细信息

   打开src/config/功能
   您可以看到如何配置功能

    '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中启动

   本地化|表格

授权

我们正在使用Next.js的API路由来处理授权

配置应用程序

1. 开放不和谐开发人员门户网站

2. 在https://discord.com/developers/applications中创建您的OAuth2应用程序

3. 在<Your Application> - > oauth2->重定向

   添加<APP_URL>/api/auth/callback URL到重定向

   例如： http://localhost:3000/api/auth/callback
   这是授权需要的

授权流

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

• 登录（ /api/auth/login ）
  
  • 将用户重定向到Discord Oauth URL
• 打开不和谐的Oauth URL
  • 用户授权应用程序
  • 重定向返回/api/auth/callback
• API路线
  • 将访问令牌存储在仅http的cookie中
  • 重定向回到主页

令牌到期

用户可能会过期或未经授权，不访问令牌
我们将要求用户在从Discord API中获得401错误后再次登录

不使用刷新令牌，但是您可以自定义授权流

后端发展

检查src/api/bot.ts，它定义了用于获取数据的内置API

您可以使用express.js （node.js）， Rocket （锈）或任何库/语言来开发自己的服务器
通常，服务器与您的Discord Bot一起运行（在同一程序中）
此外，您可以使用redis而不是直接连接到机器人服务器

官方例子

node.js（typescript）

授权

客户将通过Authorization标头传递其访问令牌

 Bearer MY_TOKEN_1212112

所需的路线

您可以将其扩展以获取更多功能

获取/guilds/{guild}

• 获取公会信息（ custom-types.ts > CustomGuildInfo ）
• 响应404或null ，如果Bot没有加入公会

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}

• 禁用功能

获取/guilds/{guild}/roles

• 获得公会的角色
• 响应角色对象的列表（与Discord文档相同）

获取/guilds/{guild}/channels

• 获取公会的频道
• 响应公会渠道列表（与不符合文档相同）

有问题吗？

通过打开问题随意提出问题

喜欢这个项目吗？给这个仓库一个明星！