discord bot dashboard next

Tercerahkan

Harap pertimbangkan alternatif lain. Anda dapat terus menggunakannya tetapi tidak ada dukungan yang akan diberikan.

Template dasbor Discord bot

Menggunakan TypeScript, Next.js 13, React 18 dan Chakra UI 2.0

• Dukung tema terang/gelap
• Dukungan Multi Bahasa (I18N)
• Dukungan naskah
• Ui yang bagus & ux + kinerja cepat
• Flexable dan dapat disesuaikan
• Dokumentasi terperinci

Video: https://youtu.be/idmpjt5pzvk
Demo Langsung: https://demo-bot.vercel.app

• Hanya fitur 'Pesan Selamat Datang' yang didukung

Ulasan (bukan versi terbaru)

Lampu	Gelap

Memulai

Sebagai template, Anda perlu menyesuaikan beberapa hal untuk membuatnya bekerja

Sebelum itu

• Instal Node.js, dan Paket Manajer (mis: NPM atau PNPM)

Keterampilan yang dibutuhkan

• Pengetahuan Dasar tentang React.js
• Dapat membaca JavaScript/TypeScript

Mendirikan

1. Kloning repo
   git clone https://github.com/fuma_nama/discord-bot-dashboard-next.git

2. Instal dependensi
   Kami selalu lebih suka PNpm

   NPM	PNPM
   npm install	pnpm install

3. Kustomisasi file
   Struktur file proyek ini

   Jalur	Keterangan
   SRC/halaman/*	Semua halaman
   src/komponen/*	Komponen
   SRC/API/*	API utils
   src/config/*	Konfigurasi Umum

4. Tentukan fitur
   Dasbor memiliki dukungan bawaan untuk mengkonfigurasi fitur
   Pengguna dapat mengaktifkan/menonaktifkan fitur dan mengkonfigurasi fitur setelah mengaktifkannya

   Kustomisasi semua pengetikan di SRC/config/type/custom-types.ts
   CustomFeatures digunakan untuk mendefinisikan fitur dan opsi, lihat contoh untuk detail lebih lanjut

   Buka SRC/Config/Fitur
   Anda dapat melihat bagaimana fitur dikonfigurasi

    'feature-id' : {
        name : 'Feature name' ,
        description : 'Description about this feature' ,
        icon : < Icon as = { BsMusicNoteBeamed } /> , //give it a cool icon
        useRender : ( data ) => {
            //render the form
        } ,
    }

   Properti useRender digunakan untuk membuat panel konfigurasi fitur
   Lihatlah di sini untuk contoh

5. Konfigurasikan informasi umum
   Ubah SRC/Config/Common.tsx

   • Nama & ikon bot
   • Undang URL (Contoh: https://discord.com/oauth2/authorize?client_id=1234&scope=bot)
   • Pengaturan Persekutuan

6. Konfigurasikan variabel lingkungan
   Variabel -variabel di .env.Example diperlukan
   Anda dapat mendefinisikan variabel lingkungan dengan membuat file .env

7. Siapkan server backend
   Untuk membiarkan dasbor terhubung dengan bot Discord Anda, Anda akan memerlukan server backend
   Anda dapat mengimplementasikannya dalam bahasa pemrograman apa pun

   Baca di sini untuk panduan untuk mengembangkan server Anda sendiri

8. Selesai!
   Mulai aplikasi dengan pnpm run dev (tergantung pada manajer paket Anda)
   Maka Anda akan melihat aplikasi dimulai di port 3000

   Lokalisasi | Bentuk

Otorisasi

Kami menggunakan rute API Next.js untuk menangani otorisasi

Konfigurasikan aplikasi

1. Open Discord Developer Portal

2. Buat aplikasi OAuth2 Anda di https://discord.com/developers/applications

3. Di <Your Application> -> OAuth2 -> Redirects

   Tambahkan URL <APP_URL>/api/auth/callback ke pengalihan

   Sebagai contoh: http://localhost:3000/api/auth/callback
   Ini diperlukan untuk otorisasi

Aliran Otorisasi

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

• Login ( /api/auth/login )
  
  • Redirects Pengguna ke Perselisihan URL OAuth
• Buka Perselisihan OAuth URL
  • Pengguna mengesahkan aplikasi
  • Redirect Back to /api/auth/callback
• Rute API
  • Simpan token akses dalam cookie khusus http
  • Redirect Back to Home Page

Token kedaluwarsa

Token Akses Perselisihan dapat kedaluwarsa atau tidak sah oleh pengguna
Kami akan meminta pengguna untuk masuk lagi setelah mendapatkan kesalahan 401 dari API Perselisihan

Token Refresh tidak akan digunakan, tetapi Anda dapat menyesuaikan aliran otorisasi

Pengembangan backend

Periksa SRC/API/BOT.TS, mendefinisikan API bawaan untuk mengambil data

Anda dapat menggunakan express.js (Node.js), Rocket (Rust) atau perpustakaan/bahasa apa pun untuk mengembangkan server Anda sendiri
Biasanya server berjalan seiring dengan bot Discord Anda (dalam program yang sama)
Selain itu, Anda dapat menggunakan redis alih -alih menghubungkan ke server bot secara langsung

Contoh resmi

Node.js (typeScript)

Otorisasi

Klien akan melewati token akses mereka melalui header Authorization

 Bearer MY_TOKEN_1212112

Rute yang diperlukan

Anda dapat memperpanjangnya untuk lebih banyak fungsi

Get /guilds/{guild}

• Dapatkan Info Guild ( custom-types.ts > CustomGuildInfo )
• Tanggapi 404 atau null jika bot belum bergabung dengan guild

Get /guilds/{guild}/features/{feature}

• Dapatkan Opsi Fitur ( custom-types.ts > CustomFeatures[K] )
• Tanggapi 404 jika tidak diaktifkan

Patch /guilds/{guild}/features/{feature}

• Perbarui opsi fitur
• Dengan badan khusus (didefinisikan dalam config/features )
• Tanggapi opsi fitur yang diperbarui

POST /guilds/{guild}/features/{feature}

• Aktifkan fitur

Hapus /guilds/{guild}/features/{feature}

• Nonaktifkan fitur

Get /guilds/{guild}/roles

• Dapatkan Peran Persekutuan
• Menanggapi daftar objek peran (sama seperti dokumentasi perselisihan)

Get /guilds/{guild}/channels

• Dapatkan saluran guild
• Menanggapi daftar saluran guild (sama seperti dokumentasi perselisihan)

Ada masalah?

Jangan ragu untuk mengajukan pertanyaan dengan membuka masalah

Suka proyek ini? Beri repo ini bintang!