discord bot dashboard next Download - discord bot dashboard next Source Code Download

discord bot dashboard next

โค้ดแหล่งที่มา AI

v1.2.0

ดาวน์โหลด

ซึ่งเลิกใช้แล้ว
โปรดพิจารณาทางเลือกอื่น ๆ คุณสามารถใช้งานได้อย่างต่อเนื่อง แต่จะไม่มีการสนับสนุน

แบนเนอร์

เทมเพลต Discord Bot Dashboard

ใช้ typeScript, next.js 13, ตอบสนอง 18 และ Chakra UI 2.0

รองรับธีมแสง/มืด
การสนับสนุนหลายภาษา (i18n)
การสนับสนุน TypeScript
Nice UI & UX + ประสิทธิภาพที่รวดเร็ว
ยืดหยุ่นและปรับแต่งได้
เอกสารโดยละเอียด

วิดีโอ: https://youtu.be/idmpjt5pzvk
การสาธิตสด: https://demo-bot.vercel.app

รองรับคุณสมบัติ 'ข้อความต้อนรับ' เท่านั้น

รีวิว (ไม่ใช่เวอร์ชันล่าสุด)

แสงสว่าง	มืด

เริ่มต้น

เป็นเทมเพลตคุณต้องปรับแต่งบางสิ่งเพื่อให้ได้ผล

ก่อนหน้านั้น

ติดตั้ง node.js และตัวจัดการแพ็คเกจ (เช่น: NPM หรือ PNPM)

ทักษะที่จำเป็น

ความรู้พื้นฐานเกี่ยวกับ React.js
สามารถอ่าน JavaScript/typeScript

ตั้งค่า

โคลน repo
git clone https://github.com/fuma_nama/discord-bot-dashboard-next.git
ติดตั้งการพึ่งพา
เราชอบ PNpm เสมอ
NPM PNPM
npm install pnpm install

NPM	PNPM
`npm install`	`pnpm install`

ปรับแต่งไฟล์
โครงสร้างไฟล์ของโครงการนี้

เส้นทาง	คำอธิบาย
src/pages/*	ทุกหน้า
src/ส่วนประกอบ/*	ส่วนประกอบ
src/api/*	api utils
src/config/*	การกำหนดค่าทั่วไป

กำหนดคุณสมบัติ
แดชบอร์ดมีการสนับสนุนในตัวสำหรับการกำหนดค่าคุณสมบัติ
ผู้ใช้สามารถเปิดใช้งาน/ปิดการใช้งานคุณสมบัติและกำหนดค่าคุณสมบัติหลังจากเปิดใช้งาน
ปรับแต่งการพิมพ์ทั้งหมดใน 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 ใช้เพื่อแสดงผลการกำหนดค่าคุณสมบัติ
ดูตัวอย่างที่นี่
กำหนดค่าข้อมูลทั่วไป
แก้ไข src/config/common.tsx
- ชื่อบอทและไอคอน
- เชิญ URL (ตัวอย่าง: https://discord.com/oauth2/authorize?client_id=1234&scope=bot)
- การตั้งค่ากิลด์
กำหนดค่าตัวแปรสภาพแวดล้อม
ตัวแปรเหล่านั้นใน. env.example เป็นสิ่งจำเป็น
คุณสามารถกำหนดตัวแปรสภาพแวดล้อมได้โดยการสร้างไฟล์ .env
ตั้งค่าเซิร์ฟเวอร์แบ็กเอนด์
เพื่อให้แดชบอร์ดเชื่อมต่อกับบอท Discord ของคุณคุณจะต้องใช้เซิร์ฟเวอร์แบ็กเอนด์
คุณสามารถนำไปใช้ในภาษาการเขียนโปรแกรมใด ๆ
อ่านที่นี่สำหรับคำแนะนำในการพัฒนาเซิร์ฟเวอร์ของคุณเอง
เสร็จแล้ว!
เริ่มต้นแอปโดย pnpm run dev (ขึ้นอยู่กับตัวจัดการแพ็คเกจของคุณ)
จากนั้นคุณควรเห็นแอปเริ่มต้นในพอร์ต 3000
การแปล รูปแบบ

การอนุญาต

เรากำลังใช้เส้นทาง API ของ next.js เพื่อจัดการการอนุญาต

กำหนดค่าแอปพลิเคชัน

เปิดพอร์ทัลนักพัฒนา Discord
สร้างแอปพลิเคชัน OAuth2 ของคุณใน https://discord.com/developers/applications
ใน <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
เปิด discord oauth url
- ผู้ใช้อนุญาตแอปพลิเคชัน
- เปลี่ยนเส้นทางกลับไปที่ /api/auth/callback
เส้นทาง API
- เก็บโทเค็นการเข้าถึงในคุกกี้ HTTP เท่านั้น
- เปลี่ยนเส้นทางกลับไปที่หน้าแรก

โทเค็นหมดอายุ

โทเค็นการเข้าถึง Discord สามารถหมดอายุหรือไม่ได้รับอนุญาตจากผู้ใช้
เราจะกำหนดให้ผู้ใช้เข้าสู่ระบบอีกครั้งหลังจากได้รับข้อผิดพลาด 401 จาก Discord API

โทเค็นรีเฟรชจะไม่ถูกใช้ แต่คุณสามารถปรับแต่งโฟลว์การอนุญาต

การพัฒนาแบ็กเอนด์

ตรวจสอบ src/api/bot.ts มันกำหนด API ในตัวสำหรับการดึงข้อมูล

คุณสามารถใช้ express.js (node.js), Rocket (Rust) หรือไลบรารี/ภาษาใด ๆ เพื่อพัฒนาเซิร์ฟเวอร์ของคุณเอง
โดยปกติเซิร์ฟเวอร์จะทำงานพร้อมกับบอท Discord ของคุณ (ในโปรแกรมเดียวกัน)
นอกจากนี้คุณสามารถใช้ Redis แทนการเชื่อมต่อกับเซิร์ฟเวอร์บอทโดยตรง