discord bot dashboard next

تم إهماله

يرجى النظر في بدائل أخرى. يمكنك استخدامه بشكل مستمر ولكن لن يتم تقديم أي دعم.

قالب لوحة معلومات Discord Bot

باستخدام TypeScript ، Next.js 13 ، React 18 و شقرا 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/الصفحات/*	جميع الصفحات
   SRC/مكونات/*	عناصر
   SRC/API/*	upi utils
   SRC/config/*	التكوينات الشائعة

4. تحديد الميزات
   تحتوي لوحة القيادة على دعم مدمج لتكوين الميزات
   يمكن للمستخدمين تمكين/تعطيل الميزات وتكوين الميزة بعد تمكينها

   تخصيص جميع الطباعة في src/config/types/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

   التوطين | الأشكال

إذن

نحن نستخدم طرق API لـ NEXT.JS للتعامل مع التفويض

تكوين التطبيق

1. بوابة مطور Discord Open

2. إنشاء تطبيق OAUTH2 الخاص بك في https://discord.com/developers/applications

3. في <Your Application> -> OAUTH2 -> إعادة التوجيه

   أضف <APP_URL>/api/auth/callback

   على سبيل المثال: http://localhost:3000/api/auth/callback
   هذا مطلوب للترخيص

تدفق التفويض

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

• تسجيل الدخول ( /api/auth/login )
  
  • يعيد توجيه المستخدم إلى Discord Oauth URL
• فتح عنوان UAuth Discord Oauth
  • يجيز المستخدم التطبيق
  • إعادة توجيه العودة إلى /api/auth/callback
• طرق API
  • قم بتخزين رمز الوصول في ملفات تعريف الارتباط HTTP فقط
  • إعادة توجيه العودة إلى الصفحة الرئيسية

رمز الصلاحية

يمكن انتهاء صلاحية رمز الوصول إلى Discord أو غير مصرح به من قبل المستخدم
سنطلب من المستخدم تسجيل الدخول مرة أخرى بعد الحصول على خطأ 401 من Discord API

لن يتم استخدام رمز التحديث ، لكنك قادر على تخصيص تدفق التفويض

التنمية الخلفية

تحقق من SRC/API/BOT.TS ، فقد حدد واجهة برمجة تطبيقات مدمجة لجلب البيانات

يمكنك استخدام express.js (node.js) أو Rocket (صدأ) أو أي مكتبات/لغات لتطوير الخادم الخاص بك
عادة ما يعمل الخادم جنبا إلى جنب مع روبوت الخلاف الخاص بك (في نفس البرنامج)
علاوة على ذلك ، يمكنك استخدام redis بدلاً من الاتصال بخادم BOT مباشرة

مثال رسمي

node.js (TypeScript)

إذن

سيقوم العميل بتمرير رمز الوصول الخاص بهم عبر رأس Authorization

 Bearer MY_TOKEN_1212112

الطرق المطلوبة

يمكنك تمديده لمزيد من الوظائف

GET /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}

• تمكين ميزة

حذف /guilds/{guild}/features/{feature}

• تعطيل ميزة

Get /guilds/{guild}/roles

• احصل على أدوار النقابة
• يستجيب قائمة كائن الدور (مثل وثائق Discord)

Get /guilds/{guild}/channels

• احصل على قنوات النقابة
• يستجيب قائمة قناة النقابة (مثل وثائق Discord)

أي قضايا؟

لا تتردد في طرح سؤال عن طريق فتح مشكلة

أحب هذا المشروع؟ أعط هذا الريبو نجم!