Javascript İle Dinamik Bir Etkileşimli Kripto Para Takip Aracı Nasıl Yapılır?

Giriş

JavaScript ile dinamik bir etkileşimli kripto para takip aracı yapmak, modern web geliştirme becerilerinizi sergilemek için harika bir projedir. Bu rehberde, gerçek zamanlı verileri API (Uygulama Programlama Arayüzü) üzerinden çekerek, kullanıcıya güncel fiyat bilgilerini sunan profesyonel bir arayüz tasarlamayı öğreneceksiniz. Bu proje, özellikle asenkron programlama ve DOM (Belge Nesne Modeli) manipülasyonu konularında pratik yapmak isteyen geliştiriciler için tasarlanmıştır.

Bu makale boyunca, bir kripto para takip aracının temel mimarisini oluşturacak, verileri nasıl güvenli bir şekilde işleyeceğinizi ve kullanıcı deneyimini nasıl iyileştireceğinizi adım adım göreceksiniz. 2026 standartlarına uygun olarak modern ES6+ sözdizimi ve en iyi uygulama yöntemlerini kullanacağız.

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce bilgisayarınızda modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve temel bir kod editörü (VS Code önerilir) bulunmalıdır. Herhangi bir sunucu kurulumuna gerek duymadan, tarayıcı konsolu ve yerel HTML dosyalarınızla çalışabilirsiniz.

• Temel HTML5 ve CSS bilgisi.
• JavaScript'te Fetch API ve Async/Await yapısına aşinalık.
• Ücretsiz bir kripto veri sağlayıcısı (Örneğin: CoinGecko Public API).

Adım 1: Temel HTML Yapısını Oluşturma

Dinamik verilerin görüntüleneceği bir kapsayıcıya ihtiyacımız var. Aşağıdaki kod bloğu, fiyatların listeleneceği tablo yapısını temsil eder.

    


Canlı Kripto Takip Paneli
    

        

            

                
Sembol
                
Fiyat (USD)
            
        
        

    

Bu yapı, JavaScript tarafında hedef alacağımız crypto-body kimliğine (ID) sahip bir tbody öğesi içerir. Bu sayede veriler dinamik olarak buraya enjekte edilecektir.

Adım 2: JavaScript ile Veri Çekme (Fetch API)

Verileri dış bir kaynaktan almak için JavaScript'in fetch metodunu kullanacağız. Bu işlem asenkron olduğu için async/await yapısı kodun okunabilirliğini artırır.

async function fetchCryptoData() {
    try {
        const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum&vs_currencies=usd');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error("Veri çekme hatası:", error);
    }
}

Burada try-catch bloğu kullanarak ağ hatalarını yakalıyoruz. Bu, uygulamanın çökmesini engeller ve hata ayıklama sürecini kolaylaştırır.

Adım 3: DOM Manipülasyonu ile Verileri Gösterme

Çekilen verileri HTML tablosuna dönüştürmek için innerHTML veya createElement yöntemlerini kullanabiliriz. Aşağıdaki örnek, veriyi tablo satırlarına dönüştürür.

function renderTable(data) {
    const tableBody = document.getElementById('crypto-body');
    tableBody.innerHTML = ''; // Önceki veriyi temizle
    
    for (const coin in data) {
        const row = `
            ${coin.toUpperCase()}
            $${data[coin].usd}
        `;
        tableBody.innerHTML += row;
    }
}

Bu fonksiyon, her çağrıldığında tabloyu günceller. innerHTML += kullanımı basit olsa da, çok büyük veri setlerinde performans için appendChild yöntemi tercih edilmelidir.

Adım 4: Otomatik Güncelleme Mekanizması

Kullanıcının sayfayı yenilemesine gerek kalmadan verilerin güncellenmesi için setInterval kullanacağız.

async function updateDashboard() {
    const data = await fetchCryptoData();
    if (data) {
        renderTable(data);
    }
}

// Her 30 saniyede bir güncelle
setInterval(updateDashboard, 30000);
updateDashboard(); // İlk yükleme

Bu kod bloğu, uygulamanın sürekli canlı kalmasını sağlar. 30 saniyelik süre, API sınırlarını aşmamak için makul bir aralıktır.

Yöntem Karşılaştırma Tablosu

Adım 5: Güvenlik ve Hata Yönetimi

Dışarıdan gelen verileri doğrudan HTML'e basmak XSS (Siteler Arası Betik) saldırılarına kapı açabilir. Kullanıcı girdisi alıyorsanız mutlaka temizleme (sanitization) yapmalısınız.

Kritik Uyarı: API anahtarlarınızı asla istemci tarafındaki (client-side) JavaScript kodlarında açıkça paylaşmayın. Eğer API'niz anahtar gerektiriyorsa, bu işlemi bir backend proxy üzerinden gerçekleştirin.

Adım 6: Kullanıcı Deneyimini İyileştirme

Veriler yüklenirken bir "Yükleniyor..." göstergesi eklemek, uygulamanın profesyonel görünmesini sağlar. Aşağıdaki kod, veri çekme süreci boyunca kullanıcıya bilgi verir.

const loader = document.getElementById('loader');
async function loadDataWithUI() {
    loader.style.display = 'block';
    const data = await fetchCryptoData();
    renderTable(data);
    loader.style.display = 'none';
}

Bu yaklaşım, uygulamanın yanıt vermediği algısını ortadan kaldırır.

Sıkça Sorulan Sorular

API limitlerine takılırsam ne yapmalıyım?

Ücretsiz API'ler genellikle dakikada belirli bir istek sınırı koyar. setInterval süresini artırarak veya önbellekleme (caching) yöntemlerini kullanarak bu sorunu aşabilirsiniz.

Neden sadece bir tane veri geliyor?

API uç noktanızın (endpoint) doğru parametreleri aldığından emin olun. URL yapısını kontrol ederek birden fazla kripto para birimi talep ettiğinizi doğrulayın.

Veriler neden "undefined" görünüyor?

API'den dönen JSON yapısını console.log(data) ile inceleyin. Nesne yapısı beklediğinizden farklı olabilir.

Bu araç mobil cihazlarda çalışır mı?

Evet, JavaScript tarayıcı tabanlı olduğu için duyarlı (responsive) bir CSS tasarımı ile mobil cihazlarda kusursuz çalışır.

Daha fazla kripto para nasıl eklerim?

API URL'sindeki ids kısmına virgülle ayırarak yeni coin isimlerini eklemeniz yeterlidir.

Finans Sorumluluk Reddi: Bu proje sadece yazılım eğitimi amaçlıdır. İçerilen veriler gerçek zamanlı kripto para piyasası bilgilerini yansıtabilir ancak bu bir yatırım aracı değildir. Alım-satım kararları kişisel sorumluluğunuzdadır ve finansal tavsiye içermez.

Kod Güvenliği Sorumluluk Reddi: Bu rehberdeki kodlar temel işlevsellik içindir. Üretim ortamına (production) taşımadan önce güvenlik açıklarını (XSS, CORS, API Rate Limiting) mutlaka gözden geçirin.

Performans Optimizasyonu ve Veri Önbellekleme

Uygulamanızın performansını artırmak ve API sağlayıcınızın hız limitlerine takılmamak için tarayıcı tabanlı önbellekleme (caching) stratejileri uygulamanız kritiktir. Özellikle sık güncellenen verilerde, her seferinde ağ isteği göndermek yerine localStorage veya sessionStorage kullanarak verileri geçici olarak saklayabilirsiniz.

Aşağıdaki örnekte, verilerin en son ne zaman çekildiğini kontrol ederek, belirli bir süre geçmeden tekrar API isteği atılmasını engelleyen bir mantık kuruyoruz:

function getCachedData(key, ttl) {
    const cached = localStorage.getItem(key);
    if (!cached) return null;

    const parsed = JSON.parse(cached);
    const now = new Date().getTime();

    if (now - parsed.timestamp > ttl) {
        localStorage.removeItem(key);
        return null;
    }
    return parsed.data;
}

function saveToCache(key, data) {
    const cacheObject = {
        timestamp: new Date().getTime(),
        data: data
    };
    localStorage.setItem(key, JSON.stringify(cacheObject));
}

Bu yöntemle, kullanıcı sayfayı yenilediğinde veya kısa aralıklarla sekmeler arasında geçiş yaptığında, uygulamanız gereksiz ağ trafiği oluşturmaz ve çok daha hızlı tepki verir.

İleri Seviye Hata Ayıklama ve İzleme

Canlı bir uygulamada ağ isteklerinin başarısız olması kaçınılmazdır. Kullanıcıya "Bir hata oluştu" demek yerine, hatanın kaynağını tespit etmek ve kullanıcıyı bilgilendirmek için try-catch bloklarını daha kapsamlı kullanmalısınız. Ayrıca, ağ kesintileri durumunda kullanıcıya görsel bir geri bildirim sağlamak, uygulamanızın profesyonellik seviyesini artırır.

Aşağıdaki kod parçası, API isteği sırasında oluşabilecek farklı hata türlerini yönetmenize yardımcı olur:

async function fetchCryptoData(url) {
    try {
        const response = await fetch(url);
        
        if (!response.ok) {
            if (response.status === 429) {
                throw new Error("API limitine ulaşıldı, lütfen bekleyin.");
            }
            throw new Error(`HTTP hatası: ${response.status}`);
        }
        
        return await response.json();
    } catch (error) {
        console.error("Veri çekme hatası:", error);
        displayErrorMessage(error.message);
        return null;
    }
}

function displayErrorMessage(message) {
    const errorContainer = document.getElementById('error-box');
    errorContainer.textContent = message;
    errorContainer.style.display = 'block';
    
    setTimeout(() => {
        errorContainer.style.display = 'none';
    }, 5000);
}

Bu yapı, uygulamanızın beklenmedik durumlarda çökmesini engeller ve kullanıcının neyin yanlış gittiğini anlamasını sağlayarak daha stabil bir deneyim sunar.

Deployment Sürecinde Dikkat Edilmesi Gerekenler

Projenizi canlıya alırken (deployment), API anahtarlarınızı asla istemci tarafındaki (client-side) JavaScript dosyalarında açıkça paylaşmayın. Eğer özel bir API anahtarı kullanıyorsanız, bir "Backend Proxy" katmanı oluşturarak anahtarı sunucu tarafında gizli tutmanız güvenlik açısından zorunludur. Ücretsiz barındırma hizmetleri (Vercel, Netlify, GitHub Pages) kullanırken, ortam değişkenlerini (environment variables) yapılandırmayı unutmayın.

Sonuç

JavaScript kullanarak kendi kripto para takip aracınızı başarıyla oluşturdunuz. Bu süreçte asenkron veri yönetimi, DOM manipülasyonu ve kullanıcı deneyimi optimizasyonu gibi önemli yetkinlikler kazandınız. Bir sonraki adım olarak, bu projeye bir "Arama Çubuğu" ekleyerek kullanıcıların istedikleri kripto parayı listeye dahil etmelerini sağlayabilir veya CSS ile karanlık mod (dark mode) desteği ekleyerek arayüzü daha modern hale getirebilirsiniz.