Tutorial Server API Discord: Statistik Live dengan JavaScript

Tutorial ini membahas cara membuat kunci Noxyr Server API, memanggil enam endpoint dari Node.js dan browser, dan menampilkan data Discord live di halaman publik. Jika Anda pernah ingin menampilkan penghitung member yang sungguhan di situs web dan diperbarui tanpa koneksi bot, inilah caranya.

Langkah 1: Buat kuncinya

Buka dashboard Noxyr, pilih server Anda, lalu buka API Access. Klik Generate API Key. Kunci (diawali nxr_) hanya ditampilkan sekali, jadi salin ke variabel lingkungan sekarang juga. Di sisi server hanya disimpan hash SHA-256, jadi jika kunci hilang, Anda harus membuat ulang.

Langkah 2: Atur scope

Di bawah kunci, ada enam toggle yang mengatur apa saja yang bisa dibaca kunci ini: Server Overview, Tickets, Activity, Invoices, Reviews, Giveaways. Matikan yang tidak Anda butuhkan. Scope yang nonaktif langsung mengembalikan 403, jadi kunci yang bocor pun tidak bisa membaca scope yang tidak pernah Anda aktifkan.

Langkah 3: Uji dengan curl

curl https://noxyrbot.com/api/v1/server \
  -H "Authorization: Bearer nxr_YOUR_KEY"

Anda akan melihat JSON berisi id server, nama, URL ikon, jumlah member, jumlah online, dan boost.

Langkah 4: Panggil dari Node.js

const KEY = process.env.NOXYR_API_KEY;

async function getStats() {
    const [server, tickets, activity] = await Promise.all([
        fetch('https://noxyrbot.com/api/v1/server',              { headers: { Authorization: `Bearer ${KEY}` } }),
        fetch('https://noxyrbot.com/api/v1/tickets',             { headers: { Authorization: `Bearer ${KEY}` } }),
        fetch('https://noxyrbot.com/api/v1/activity?days=7',     { headers: { Authorization: `Bearer ${KEY}` } })
    ]);
    return {
        server:   await server.json(),
        tickets:  await tickets.json(),
        activity: await activity.json()
    };
}

getStats().then(console.log);

Langkah 5: Panggil dari browser

CORS terbuka, jadi Anda bisa langsung mengambil data dari situs statis. Jangan sematkan kunci di kode sisi klien yang dikirim ke pengguna sungguhan: siapa pun yang membuka DevTools akan melihatnya. Dua pola yang aman:

• Dashboard publik di balik proxy: sebuah fungsi serverless kecil di sisi Anda membaca kunci dari variabel lingkungan, memanggil Noxyr, dan meneruskan JSON ke browser.
• Alat internal tepercaya: kunci halaman di balik autentikasi Anda sendiri, lalu masukkan kuncinya.

// Cloudflare Worker / Vercel Edge - key stays on the server
export default {
    async fetch(request, env) {
        const upstream = await fetch('https://noxyrbot.com/api/v1/server', {
            headers: { Authorization: `Bearer ${env.NOXYR_API_KEY}` }
        });
        return new Response(await upstream.text(), {
            headers: { 'content-type': 'application/json', 'cache-control': 'public, max-age=60' }
        });
    }
};

Langkah 6: Tampilkan datanya

<div id="members">…</div>
<script>
    fetch('/api/live-server-stats')
        .then((r) => r.json())
        .then((data) => {
            document.getElementById('members').textContent =
                `${data.memberCount.toLocaleString()} members · ${data.onlineCount} online`;
        });
</script>

Batas permintaan dan caching

60 permintaan per menit per kunci. Data realtime terasa bagus di dashboard privat, tetapi boros di situs publik. Simpan cache respons upstream selama 30–60 detik di lapisan proxy Anda, dan Anda tidak akan pernah mendekati batas.

Respons error

• 401 unauthorized: kunci hilang atau salah.
• 403 key_disabled: kunci dinonaktifkan di dashboard.
• 403 scope_disabled: scope endpoint dimatikan. Perbaiki di dashboard.
• 404 guild_unavailable: bot sudah dikeluarkan dari server itu.
• 429 rate_limited: perlambat permintaan.

Ingin tahu mengapa API dibentuk seperti ini? Prinsip desain API untuk bot Discord.