Gereksinimler ve Ön Hazırlık

Bu projeye başlamak için herhangi bir sunucu kurulumuna ihtiyacınız yoktur. Sadece modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve bir metin editörü (VS Code önerilir) yeterlidir. Projenin temel taşları şunlardır:

• HTML5: Uygulamanın iskeletini oluşturmak için.
• CSS3: Arayüzün şık görünmesi için.
• JavaScript (ES6+): Veri çekme ve mantıksal işlemler için.
• Ücretsiz Döviz API'si: Veri kaynağı olarak ExchangeRate-API veya Frankfurter API gibi ücretsiz servisler kullanılabilir.

Adım 1: HTML Arayüzünü Oluşturma

Uygulamanın ilk adımı, kullanıcının döviz seçimi yapabileceği ve sonuçları görebileceği basit bir arayüz hazırlamaktır. Aşağıdaki kod bloğu, temel bir seçim kutusu ve sonuç gösterim alanı içerir.

  
Döviz Takip Paneli
  
    USD - Amerikan Doları
    EUR - Euro
    TRY - Türk Lirası
  
  
Kurlar yükleniyor...

Bu HTML yapısı, kullanıcının temel para birimini seçmesini sağlar. id nitelikleri, JavaScript tarafında bu elemanlara erişmemizi kolaylaştıracaktır.

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

Tarayıcı üzerinden dış kaynaklı verileri almak için fetch fonksiyonunu kullanırız. Bu fonksiyon, asenkron bir yapıya sahiptir ve bir Promise döndürür. Aşağıdaki kod, bir API'ye istek göndererek güncel kurları nasıl alacağınızı gösterir.

async function getExchangeRates(base) {
  const url = `https://api.exchangerate-api.com/v4/latest/${base}`;
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error("Veri alınamadı!");
    const data = await response.json();
    return data.rates;
  } catch (error) {
    console.error("Hata:", error);
  }
}

Bu fonksiyon, async/await yapısını kullanarak kodun okunabilirliğini artırır. try-catch bloğu ise olası bağlantı hatalarını yönetmemizi sağlar.

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

Verileri aldıktan sonra, bu verileri HTML içine yerleştirmemiz gerekir. JavaScript'in innerHTML özelliğini kullanarak dinamik olarak tablo oluşturabiliriz.

function updateUI(rates) {
  const resultDiv = document.getElementById('result');
  let html = '';
  
  for (const [currency, rate] of Object.entries(rates)) {
    html += ``;
  }
  
  html += '
Birim
Kur
${currency}
${rate.toFixed(2)}
';
  resultDiv.innerHTML = html;
}

Burada Object.entries() metodunu kullanarak döviz nesnesini döngüye alıyoruz ve her bir birim için bir tablo satırı oluşturuyoruz. toFixed(2) metodu ise sayıları virgülden sonra iki basamakla sınırlayarak temiz bir görünüm sağlar.

Adım 4: Kullanıcı Etkileşimi ve Dinamik Güncelleme

Kullanıcı seçim kutusunu değiştirdiğinde verilerin otomatik güncellenmesini sağlamak için addEventListener yöntemini kullanırız. Bu, kullanıcı deneyimi açısından kritiktir.

const selectElement = document.getElementById('baseCurrency');

selectElement.addEventListener('change', async (event) => {
  const base = event.target.value;
  const rates = await getExchangeRates(base);
  updateUI(rates);
});

Bu kod, "change" olayını dinler. Kullanıcı yeni bir para birimi seçtiği anda, ilgili birime ait güncel veriler tekrar çekilir ve ekran güncellenir.

Adım 5: Güvenlik ve Performans Optimizasyonu

İstemci tabanlı uygulamalarda güvenlik her zaman ön plandadır. API anahtarlarınızı asla istemci tarafında açıkta bırakmayın. Ayrıca, XSS (Cross-Site Scripting) saldırılarına karşı verileri doğrudan değil, güvenli bir şekilde DOM'a ekleyin.

Kritik Uyarı: API anahtarlarını tarayıcı kodunda saklamak, anahtarın herkes tarafından görülmesine neden olur. Üretim ortamında (production) bu tür işlemleri bir arka uç (Node.js vb.) üzerinden yapmanız veya kısıtlı API anahtarları kullanmanız önerilir.

Aşağıdaki tablo, farklı veri çekme yöntemlerinin karşılaştırmasını göstermektedir:

Sıkça Sorulan Sorular

API'den gelen veri boşsa ne yapmalıyım?

Veri çekme fonksiyonunda bir kontrol mekanizması kurarak, eğer veri gelmezse kullanıcıya "Veri şu an erişilemez" gibi bir hata mesajı göstermelisiniz.

Uygulamayı nasıl daha hızlı hale getirebilirim?

LocalStorage kullanarak verileri tarayıcı hafızasında saklayabilir ve her seferinde API'ye istek göndermek yerine belirli aralıklarla (örneğin 10 dakikada bir) güncelleme yapabilirsiniz.

Neden Axios kullanmadık?

Axios harici bir kütüphanedir. Basit projelerde tarayıcının yerleşik fetch özelliği yeterli olduğu için ek bağımlılık yüklemekten kaçındık.

Döviz kurları neden anlık değişmiyor?

Ücretsiz API'ler genellikle verileri belirli bir gecikme ile (örneğin 1 saatlik periyotlarla) günceller. Gerçek zamanlı (real-time) veri için ücretli API servislerine ihtiyaç duyulabilir.

Mobil cihazlarda çalışır mı?

Evet, yazdığımız kod tamamen responsive (duyarlı) tasarıma uygun HTML/CSS ile desteklendiği sürece tüm mobil cihazlarda sorunsuz çalışacaktır.

Yasal Uyarı: Bu uygulama sadece eğitim amaçlıdır. Finansal veriler gecikmeli olabilir ve yatırım kararları için kesinlikle kullanılmamalıdır. Yatırım tavsiyesi için lisanslı finansal danışmanlara başvurunuz.

Uygulamayı Yayına Alma (Deployment) Süreci

Geliştirdiğiniz döviz kuru takip uygulamasını yerel bilgisayarınızdan çıkarıp internete açmak, projenizin görünürlüğü için kritik bir adımdır. Günümüzde statik web siteleri için en hızlı ve güvenilir yöntemlerden biri GitHub Pages kullanmaktır.

GitHub Pages ile Ücretsiz Barındırma

1. Proje dosyalarınızı bir GitHub deposuna (repository) yükleyin.
2. Deponun "Settings" sekmesine gidin.
3. "Pages" menüsüne tıklayın ve "Source" kısmından "main" dalını seçin.
4. Birkaç dakika içinde uygulamanız kullaniciadi.github.io/proje-adi adresinde yayına girecektir.

Önemli Not: Eğer API anahtarınız (API Key) varsa, bunu asla GitHub'a yüklemeyin. API anahtarınızı gizlemek için bir backend proxy sunucusu kullanmanız veya API sağlayıcınızın sunduğu "domain kısıtlama" özelliğini aktif etmeniz güvenlik açısından şarttır.

Uygulamayı İleri Seviyeye Taşıyacak İpuçları

Uygulamanızın kullanıcı deneyimini artırmak için sadece döviz verilerini göstermekle kalmayıp, verileri görselleştirebilir veya geçmişe dönük analizler sunabilirsiniz. İşte projenizi bir üst seviyeye taşıyacak teknik öneriler:

Chart.js ile Veri Görselleştirme

Kullanıcıların seçilen para biriminin son 7 günlük değişimini görmesi, uygulamanızı profesyonel bir finansal araca dönüştürür. Chart.js kütüphanesini kullanarak basit bir çizgi grafik oluşturabilirsiniz.

// Örnek: Chart.js ile grafik oluşturma yapısı
const ctx = document.getElementById('kurGrafigi').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Pzt', 'Sal', 'Çar', 'Per', 'Cum'],
        datasets: [{
            label: 'USD/TRY Değişimi',
            data: [32.1, 32.2, 32.15, 32.3, 32.4],
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    }
});

Hata Ayıklama ve Loglama Stratejileri

Canlı bir uygulamada API yanıtlarının kesilmesi veya internet bağlantısının kopması gibi durumlarla karşılaşabilirsiniz. Bu tür hataları yönetmek için try-catch bloklarını genişletmeli ve kullanıcıya anlamlı hata mesajları göstermelisiniz.

Pro İpucu: Kullanıcıya "İnternet bağlantınız kesildi, tekrar deneniyor..." gibi geri bildirimler sunmak, uygulamanın profesyonellik algısını ciddi oranda artırır.

Hataları takip etmek için şu basit yapıyı kullanabilirsiniz:

async function veriCek() {
    try {
        const response = await fetch(API_URL);
        if (!response.ok) throw new Error('Sunucu hatası: ' + response.status);
        const data = await response.json();
        guncelleUI(data);
    } catch (error) {
        console.error('Veri çekme hatası:', error);
        document.getElementById('hata-kutusu').innerText = "Veriler şu an güncellenemiyor, lütfen daha sonra tekrar deneyin.";
    }
}

Sonuç

Bu rehberde, JavaScript kullanarak nasıl dinamik bir döviz kuru takip uygulaması yapacağınızı adım adım öğrendiniz. Fetch API ile veri çekmeyi, DOM manipülasyonu ile bu verileri ekrana yansıtmayı ve kullanıcı etkileşimlerini yönetmeyi kavradınız. Bir sonraki adım olarak, bu uygulamaya LocalStorage ekleyerek son seçilen para birimini hafızada tutmayı veya CSS kütüphaneleri (Tailwind CSS gibi) kullanarak arayüzü daha modern bir hale getirmeyi deneyebilirsiniz. Yazılım geliştirme sürecinde pratik yapmak, teorik bilgiyi kalıcı hale getirmenin en iyi yoludur.