React ile DigitalOcean API’sinden Veriler Nasıl Görüntülenir?

Dijital altyapı yönetimi, günümüzün bulut tabanlı uygulamaları için kritik öneme sahiptir. DigitalOcean, geliştiricilere basit ve güçlü bir bulut platformu sunarken, React ise modern ve etkileşimli kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kütüphanesidir. Bu rehberde, DigitalOcean API’sinden veri çekerek bu verileri bir React uygulamasında nasıl görüntüleyeceğinizi adım adım öğreneceksiniz. Kendi özel izleme panellerinizi, yönetim arayüzlerinizi veya otomasyon araçlarınızı oluşturmak için bu yetenekleri kullanarak DigitalOcean kaynaklarınızı daha verimli yönetebilirsiniz.

DigitalOcean API’ye Erişim ve Kimlik Doğrulama

DigitalOcean API’si, droplet’lar, veritabanları, depolama birimleri ve diğer kaynaklar hakkında bilgi almanızı ve bu kaynaklar üzerinde çeşitli işlemler yapmanızı sağlar. API’ye erişmek için bir kişisel erişim belirteci (Personal Access Token – PAT) oluşturmanız gerekmektedir. Bu belirteç, API isteklerinizin kimliğini doğrulamak için kullanılır ve DigitalOcean hesabınızdaki kaynaklara erişim yetkisi verir.

Kişisel Erişim Belirteci (PAT) Oluşturma

1. DigitalOcean kontrol panelinize giriş yapın.
2. Sol menüden “API” bölümüne gidin.
3. “Tokens/Keys” sekmesi altında “Generate New Token” butonuna tıklayın.
4. Belirtecinize açıklayıcı bir isim verin (örn: “ReactUygulamaErisimi”).
5. Erişim izinlerini belirleyin. Veri görüntülemek için genellikle “Read” erişimi yeterlidir. Eğer uygulama üzerinden değişiklik yapmak isterseniz “Write” erişimini de verebilirsiniz. Ancak, her zaman en az yetki prensibini uygulayın.
6. “Generate Token” butonuna tıklayın.
7. Oluşturulan belirteci kopyalayın. Bu belirteci bir daha göremeyeceğiniz için güvenli bir yere kaydettiğinizden emin olun.

API Anahtarı Güvenliği: Neden Doğrudan React Uygulamanızda Kullanmamalısınız?

Bu kısım kritik öneme sahiptir: DigitalOcean API belirtecinizi (veya herhangi bir hassas API anahtarını) doğrudan istemci tarafı (client-side) React kodunuzda ASLA kullanmamalısınız. Bunun temel nedenleri şunlardır:

• Güvenlik Açığı: Tarayıcıya gönderilen herhangi bir kod, kullanıcı tarafından görüntülenebilir. API anahtarınız doğrudan kodunuzda yer alırsa, kötü niyetli kişiler bu anahtarı kolayca ele geçirebilir ve DigitalOcean hesabınızdaki kaynaklara tam erişim sağlayabilir.
• Yetkisiz Erişim: Anahtar ele geçirildiğinde, saldırganlar hesabınızda pahalı işlemler yapabilir, verilerinizi silebilir veya değiştirebilir.

Bu nedenle, API isteklerini güvenli bir şekilde yapmak için bir arka uç (backend) proxy sunucusu kullanmanız şiddetle tavsiye edilir. React uygulamanız, API belirtecini gizli tutan bu arka uç sunucusuna istek gönderir ve arka uç sunucusu da DigitalOcean API’si ile iletişim kurar. Bu rehberde, bu güvenli yaklaşımı benimseyeceğiz.

React Uygulamasını Hazırlama

Öncelikle, yeni bir React projesi oluşturalım. Bunun için Vite veya Create React App kullanabilirsiniz. Bu örnekte Vite’ı tercih edeceğiz, zira daha hızlı bir kurulum ve geliştirme deneyimi sunar.

Yeni bir Vite projesi oluşturma
npm create vite@latest digitalocean-react-app -- --template react

Proje dizinine gitme
cd digitalocean-react-app

Bağımlılıkları yükleme
npm install

Şimdi, DigitalOcean API’sinden veri çekecek ve bu verileri gösterecek temel bir bileşen oluşturalım. Bunun için src/App.jsx dosyasını düzenleyeceğiz.

DigitalOcean Verilerini Çekme ve Yönetme (Proxy Kullanarak)

Daha önce belirttiğimiz gibi, API anahtarımızı güvende tutmak için bir arka uç proxy sunucusu kullanacağız. Bu örnekte, basit bir Node.js/Express sunucusunun nasıl bir proxy görevi görebileceğine dair konsepti açıklayacağız. Gerçek bir projede bu proxy’yi ayrı bir sunucuda veya Next.js API Routes gibi bir sunucusuz fonksiyonda barındırabilirsiniz.

Proxy Sunucusu Konsepti (Node.js/Express ile Örnek)

Arka uç proxy’niz, DigitalOcean API anahtarınızı bir ortam değişkeni olarak saklayacak ve React uygulamanızdan gelen isteği DigitalOcean API’sine iletecektir. Aşağıda, basit bir Express sunucusunun nasıl görünebileceğine dair bir örnek bulunmaktadır:

// server.js (veya api/droplets.js eğer Next.js API Routes kullanıyorsanız)

const express = require('express');
const cors = require('cors');
const fetch = require('node-fetch'); // node-fetch npm paketini yüklemeniz gerekebilir
require('dotenv').config(); // Ortam değişkenlerini yüklemek için

const app = express();
const PORT = process.env.PORT || 3001;

// React uygulamanızın proxy'ye erişebilmesi için CORS ayarları
app.use(cors({ origin: 'http://localhost:5173' })); // React uygulamanızın çalıştığı port

app.get('/api/digitalocean/droplets', async (req, res) => {
    const DO_API_TOKEN = process.env.DO_API_TOKEN; // .env dosyasından çekilir

    if (!DO_API_TOKEN) {
        return res.status(500).json({ error: 'DigitalOcean API token not configured.' });
    }

    try {
        const response = await fetch('https://api.digitalocean.com/v2/droplets', {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': Bearer ${DO_API_TOKEN}
            }
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.message || 'Failed to fetch DigitalOcean droplets.');
        }

        const data = await response.json();
        res.json(data);
    } catch (error) {
        console.error('Error fetching droplets:', error);
        res.status(500).json({ error: error.message });
    }
});

app.listen(PORT, () => {
    console.log(Proxy server running on port ${PORT});
});

Bu örnekte, DO_API_TOKEN değişkenini bir .env dosyasına yerleştirmeniz gerekecektir:

.env dosyası
DO_API_TOKEN=sizin_digitalocean_api_anahtarınız

Bu proxy sunucusu, React uygulamanızdan gelen isteği alır, kendi gizli API anahtarını kullanarak DigitalOcean API’sine gerçek isteği yapar ve DigitalOcean’dan aldığı yanıtı React uygulamanıza geri gönderir.

React Uygulamasında Veri Çekme

Şimdi React uygulamanızda bu proxy’den nasıl veri çekeceğinizi görelim. src/App.jsx dosyanızı aşağıdaki gibi güncelleyin:

import { useState, useEffect } from 'react';
import './App.css'; // Temel stil dosyası

function App() {
  const [droplets, setDroplets] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchDroplets = async () => {
      try {
        // Kendi proxy sunucunuzun URL'sini kullanın
        // Eğer React ve proxy aynı sunucuda farklı portlarda çalışıyorsa, tam URL belirtin
        // Örn: http://localhost:3001/api/digitalocean/droplets
        // Eğer proxy, React uygulamasının çalıştığı sunucunun /api altında hizmet veriyorsa
        // "/api/digitalocean/droplets" gibi göreceli bir yol kullanabilirsiniz.
        const response = await fetch('http://localhost:3001/api/digitalocean/droplets'); 
        
        if (!response.ok) {
          throw new Error(HTTP error! status: ${response.status});
        }
        const data = await response.json();
        setDroplets(data.droplets); // DigitalOcean API'si droplet'ları 'droplets' anahtarı altında döndürür
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchDroplets();
  }, []); // Boş bağımlılık dizisi, bileşen mount edildiğinde bir kez çalışmasını sağlar

  if (loading) {
    return 
Droplet'lar yükleniyor...
;
  }

  if (error) {
    return 
Hata: {error}
;
  }

  return (
    

      
DigitalOcean Droplet Listesi
      {droplets.length === 0 ? (
        
Hiç droplet bulunamadı.
      ) : (
        

          {droplets.map(droplet => (
            

              
{droplet.name}
              
ID: {droplet.id}
              
Bölge: {droplet.region.name} ({droplet.region.slug})
              
Durum: status status-${droplet.status}}>{droplet.status}
              
IP Adresi: {droplet.networks.v4.length > 0 ? droplet.networks.v4[0].ip_address : 'N/A'}
              
Boyut: {droplet.size.slug}
            
          ))}
        
      )}
    
  );
}

export default App;

Temel CSS Stilleri (src/App.css)

Yukarıdaki bileşenin daha iyi görünmesi için basit CSS stilleri ekleyebiliriz:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f7f6;
  color: #333;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #007bff;
  text-align: center;
  margin-bottom: 30px;
}

.droplet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.droplet-card {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease-in-out;
}

.droplet-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.droplet-card h3 {
  color: #0056b3;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.3em;
}

.droplet-card p {
  margin: 5px 0;
  font-size: 0.95em;
}

.droplet-card strong {
  color: #555;
}

.status {
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85em;
}

.status-active {
  background-color: #d4edda;
  color: #155724;
}

.status-off {
  background-color: #f8d7da;
  color: #721c24;
}

.status-archive {
  background-color: #ffeeba;
  color: #856404;
}

.error {
  color: #dc3545;
  font-weight: bold;
  text-align: center;
}

Verileri React Bileşenlerinde Görüntüleme

Yukarıdaki App.jsx bileşeni, DigitalOcean droplet’larını listeleyen ve temel bilgilerini (isim, ID, bölge, durum, IP adresi, boyut) gösteren bir arayüz sağlar.

• useState: droplets verilerini, yükleme durumunu (loading) ve olası hataları (error) yönetmek için kullanılmıştır.
• useEffect: Bileşen ilk kez render edildiğinde fetchDroplets fonksiyonunu bir kez çalıştırmak için kullanılır. Bu, API isteğinin sadece bir kez yapılmasını sağlar.
• Koşullu Render Etme:
  • loading durumu true iken “Yükleniyor…” mesajı gösterilir.
  • error durumu null değilse, hata mesajı gösterilir.
  • Veriler başarıyla çekildiğinde, droplets dizisi üzerinde map fonksiyonu ile döngü oluşturularak her bir droplet için bir kart (droplet-card) render edilir.
  • droplet.networks.v4[0].ip_address ile droplet’ın birincil IPv4 adresi alınır.
  • Durum (status) için farklı renklerde stil uygulamak amacıyla dinamik sınıf adları (status-active, status-off vb.) kullanılmıştır.

Uygulamanızı çalıştırmak için önce proxy sunucunuzu (eğer ayrı bir süreçse) ve ardından React uygulamanızı başlatmanız gerekir:

Proxy sunucusunu başlatma (örneğin: node server.js)
node server.js

React uygulamasını başlatma
npm run dev

Tarayıcınızda http://localhost:5173 adresine giderek DigitalOcean droplet’larınızın listelendiğini görebilirsiniz.

Sonuç ve Sıkça Sorulan Sorular

Bu rehberde, DigitalOcean API’sinden droplet verilerini güvenli bir şekilde nasıl çekeceğinizi ve bunları bir React uygulamasında nasıl görüntüleyeceğinizi öğrendiniz. API anahtarlarının istemci tarafında asla saklanmaması gerektiği ilkesine bağlı kalarak, bir arka uç proxy sunucusu aracılığıyla güvenli bir iletişim yöntemi kullandık. Bu yaklaşım, sadece DigitalOcean API’si için değil, hassas veriler içeren diğer tüm API entegrasyonları için de en iyi uygulamadır.

Bu temel üzerine inşa ederek, DigitalOcean API’sinin sunduğu diğer uç noktaları keşfedebilir, droplet’ları yönetmek, yeni kaynaklar oluşturmak veya mevcut kaynakları izlemek için daha karmaşık React uygulamaları geliştirebilirsiniz.

Sıkça Sorulan Sorular (SSS)

1. API anahtarımı neden doğrudan React koduma koymamalıyım?
API anahtarınız doğrudan React kodunuzda yer alırsa, web tarayıcınız aracılığıyla son kullanıcıya açık hale gelir. Bu durum, kötü niyetli kişilerin anahtarınızı ele geçirerek DigitalOcean hesabınızdaki kaynaklara yetkisiz erişim sağlamasına ve potansiyel olarak maliyetli veya zararlı işlemler yapmasına olanak tanır. Güvenlik için bir arka uç proxy sunucusu kullanmak en iyi uygulamadır.

2. Hangi DigitalOcean API uç noktalarını kullanabilirim?
DigitalOcean API’si, droplet’lar, hacimler (volumes), veritabanları, CDN’ler, yük dengeleyiciler (load balancers), alan adları (domains) ve daha fazlası dahil olmak üzere birçok farklı kaynak için uç noktalar sunar. Tam listeyi ve detaylı dökümantasyonu DigitalOcean API referansında bulabilirsiniz: DigitalOcean API Reference

3. Veri çekme hatalarını nasıl yönetirim?
try…catch blokları kullanarak API isteklerinizdeki ağ hatalarını veya sunucu yanıt hatalarını yakalayabilirsiniz. useState ile bir error durumu tanımlayarak, hata mesajını kullanıcıya gösterebilirsiniz. Yanıtın response.ok özelliğini kontrol etmek, HTTP durum kodunun başarılı olup olmadığını anlamak için iyi bir yöntemdir.

4. Verileri otomatik olarak nasıl güncelleyebilirim (polling)?
Verileri belirli aralıklarla otomatik olarak güncellemek (polling) için useEffect içinde setInterval kullanabilirsiniz. Örneğin, her 30 saniyede bir droplet listesini yeniden çekmek için:

useEffect(() => {
    const fetchDroplets = async () => { / yukarıdaki fetchDroplets kodu / };
    fetchDroplets(); // İlk yüklemede çalıştır

    const intervalId = setInterval(fetchDroplets, 30000); // Her 30 saniyede bir tekrarla

    return () => clearInterval(intervalId); // Bileşen unmount edildiğinde interval'i temizle
}, []);

Daha gelişmiş senaryolar için WebSockets veya sunucu tarafı olaylar (Server-Sent Events – SSE) gibi teknolojileri düşünebilirsiniz.

5. Bu yaklaşımı diğer API’ler için de kullanabilir miyim?
Evet, kesinlikle! API anahtarı güvenliğini sağlamak için bir arka uç proxy sunucusu kullanma prensibi, hassas kimlik doğrulama bilgileri gerektiren hemen hemen tüm üçüncü taraf API’leri için geçerlidir. Amazon Web Services (AWS), Google Cloud Platform (GCP), Stripe, Twilio gibi birçok hizmetin API’leri benzer güvenlik önlemleri gerektirir.