Discord Bot Client: Arayüz ile Kolayca Yönetmek

Büyük ve popüler Discord botlarının (MEE6, ProBot, Carl-bot) ortak bir özelliği vardır: Kullanıcı dostu bir web yönetim paneli. Bu rehberde, kendi Discord botunuz için nasıl profesyonel bir kontrol paneli (dashboard) oluşturabileceğinizi adım adım öğreneceğiz.

1. Gerekli Teknolojiler

Bir bot dashboard'u geliştirmek için üç ana bileşene ihtiyacımız var:

• Discord Bot: Arka planda çalışan discord.js uygulaması.
• Backend API: Web sitesi ile bot arasında köprü kuracak Express.js sunucusu.
• Frontend (Arayüz): Kullanıcının gördüğü kontrol paneli (React, Next.js veya saf HTML/CSS).

2. API Tasarımı (Express.js ile)

Web sitemizin botun güncel verilerini (sunucu sayısı, ping, loglar) çekebilmesi için bota bir API eklemeliyiz. Botunuzun index.js dosyasına şu kodları ekleyin:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // Farklı portlardan erişime izin ver
app.use(express.json());

// Temel istatistikleri döndüren API
app.get('/api/stats', (req, res) => {
  res.json({
    sunucuSayisi: client.guilds.cache.size,
    kullaniciSayisi: client.users.cache.size,
    ping: client.ws.ping,
    botIsmi: client.user.username
  });
});

// Belirli bir sunucunun bilgilerini döndüren API
app.get('/api/guild/:id', (req, res) => {
  const guild = client.guilds.cache.get(req.params.id);
  if (!guild) return res.status(404).json({ error: 'Sunucu bulunamadı' });
  
  res.json({
    isim: guild.name,
    uyeler: guild.memberCount,
    roller: guild.roles.cache.size
  });
});

app.listen(3000, () => {
  console.log('Bot API 3000 portunda çalışıyor!');
});

3. Discord OAuth2 ile Kullanıcı Girişi

Kullanıcıların dashboard'a girip sadece yönetici oldukları sunucuları görmesini sağlamak için Discord ile Giriş Yap (OAuth2) sistemini kullanmalıyız.

1. Discord Developer Portal'da uygulamanızı seçin.
2. Sol menüden "OAuth2" sekmesine gidin.
3. Redirect URI ekleyin (örnek: http://localhost:3000/callback).
4. Scopes olarak identify ve guilds seçin.

Kullanıcı giriş yaptığında, Discord size bir Token verir. Bu token ile kullanıcının bulunduğu tüm sunucuları çekebilir ve botunuzun olduğu sunucularla eşleştirerek bir liste sunabilirsiniz.

4. Frontend Geliştirme (React/Next.js)

React kullanarak kullanıcıya verileri gösterelim. Botun API'sinden veri çeken basit bir bileşen örneği:

import { useState, useEffect } from 'react';

export default function BotIstatistikleri() {
  const [stats, setStats] = useState(null);

  useEffect(() => {
    // Kendi bot API'mize istek atıyoruz
    fetch('http://localhost:3000/api/stats')
      .then(res => res.json())
      .then(data => setStats(data));
  }, []);

  if (!stats) return <div>Yükleniyor...</div>;

  return (
    <div className="dashboard-grid">
      <div className="stat-card">
        <h3>Sunucu Sayısı</h3>
        <p>{stats.sunucuSayisi}</p>
      </div>
      <div className="stat-card">
        <h3>Ping</h3>
        <p>{stats.ping}ms</p>
      </div>
    </div>
  );
}

5. Dashboard Üzerinden Komut Gönderme

Sadece veri okumakla kalmayıp, web sitesinden bir butona basarak Discord'a mesaj göndermek harika olmaz mıydı? Express API'nize bir POST route'u ekleyin:

// Mesaj gönderme API'si
app.post('/api/send-message', async (req, res) => {
  const { channelId, message } = req.body;
  
  try {
    const channel = await client.channels.fetch(channelId);
    if (!channel) return res.status(404).json({ error: 'Kanal bulunamadı' });
    
    await channel.send(message);
    res.json({ success: true, message: 'Mesaj gönderildi!' });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

6. Veritabanı Entegrasyonu

Eğer botunuzda "Otomatik Rol" veya "Hoşgeldin Kanalı" gibi ayarlar varsa, bunları Discord mesajlarıyla ayarlamak yerine Dashboard üzerinden seçtirmek çok daha pratiktir. Bu ayarları MongoDB veya PostgreSQL gibi bir veritabanında saklayabilirsiniz.

// Sunucu ayarlarını veritabanından çekme örneği
app.get('/api/settings/:guildId', async (req, res) => {
  const settings = await Database.getSettings(req.params.guildId);
  res.json(settings);
});

Sonuç olarak; bir Discord bot dashboard'u geliştirmek, hem backend (API tasarımı) hem de frontend (kullanıcı arayüzü) becerilerinizi inanılmaz derecede geliştirecek eksiksiz bir Full-Stack projesidir.