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

• 獲取公會的頻道
• 響應公會渠道列表（與不符合文檔相同）

有問題嗎？

通過打開問題隨意提出問題

喜歡這個項目嗎？給這個倉庫一個明星！