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とパッケージマネージャー（例：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/コンポーネント/*	コンポーネント
   src/api/*	API Utils
   src/config/*	一般的な構成

4. 機能を定義します
   ダッシュボードには、機能の構成に組み込まれたサポートがあります
   ユーザーは機能を有効/無効にして、それを有効にした後に機能を構成することができます

   SRC/config/types/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. Open Discord開発者ポータル

2. https://discord.com/developers/applicationsでOAUTH2アプリケーションを作成します

3. in <Your Application> - > oauth2->リダイレクト

   <APP_URL>/api/auth/callback urlをリダイレクトに追加します

   例： http://localhost:3000/api/auth/callback
   これは許可に必要です

認可フロー

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

• ログイン（ /api/auth/login ）
  
  • ユーザーを不一致にリダイレクトします
• Open Discord oauth url
  • ユーザーはアプリケーションを承認します
  • /api/auth/callbackにリダイレクトします
• APIルート
  • HTTPのみのクッキーにアクセストークンを保存します
  • ホームページに戻します

トークンの有効期限

不一致のアクセストークンは、ユーザーによって有効期限が切れたり、許可されたりすることができます
Discord APIから401エラーを取得した後、ユーザーに再度ログインする必要があります

更新トークンは使用されませんが、認証フローをカスタマイズできます

バックエンド開発

SRC/API/bot.tsを確認すると、データを取得するための組み込みのAPIを定義しました

express.js （node.js）、 Rocket （Rust）、またはライブラリ/言語を使用して、独自のサーバーを開発できます
通常、サーバーはあなたの不一致ボットと一緒に実行されます（同じプログラムで）
さらに、ボットサーバーに直接接続する代わりに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に応答します

patch /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 Documentationと同じ）

何か問題がありますか？

問題を開いてお気軽に質問してください

このプロジェクトが好きですか？このレポを星にしてください！