Javascript İle Dinamik Hava Durumu Uygulaması Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projenize başlamadan önce bilgisayarınızda modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve bir kod editörü (VS Code önerilir) bulunmalıdır. JavaScript projeleri için herhangi bir derleme aracına ihtiyaç duymadan, doğrudan tarayıcı konsolunu ve basit bir HTML dosyası yapısını kullanacağız.

• API Anahtarı: OpenWeatherMap veya benzeri bir hava durumu servisinden ücretsiz bir API anahtarı almanız gerekmektedir.
• Temel Bilgi: Fetch API kullanımı, async/await sözdizimi ve JSON veri yapısı hakkında temel düzeyde bilgi sahibi olmanız süreci hızlandıracaktır.
• Tarayıcı Konsolu: Geliştirici araçlarını (F12) kullanarak ağ trafiğini ve hataları izlemek, hata ayıklama (debug) sürecinin en önemli parçasıdır.

Proje Yapısını Kurma ve HTML İskeleti

İlk adım olarak, verilerin görüntüleneceği basit bir HTML yapısı oluşturmalıyız. Bu yapı, kullanıcının şehir ismi girebileceği bir giriş alanı ve sonuçların yansıtılacağı bir kapsayıcıdan oluşur.

  
  Hava Durumunu Getir
  

Yukarıdaki kod bloğu, uygulamanın görsel arayüzünü temsil eder. id değerleri, JavaScript tarafında bu elementlere erişmemizi sağlayacak anahtarlardır. Bu yapı, uygulamanın temel etkileşim noktalarını tanımlar.

Fetch API ile Asenkron Veri Çekme

JavaScript'te sunucudan veri çekmek için fetch() fonksiyonu kullanılır. Bu fonksiyon, bir Promise döndürür ve asenkron (eşzamansız) çalışır. Aşağıdaki kod örneği, belirli bir şehir için hava durumu verisini nasıl çekeceğinizi gösterir.

async function fetchWeatherData(city) {
  const apiKey = 'SİZİN_API_ANAHTARINIZ';
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('Şehir bulunamadı.');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Hata:', error);
    return null;
  }
}

Burada async/await kullanarak kodun okunabilirliğini artırdık. try-catch bloğu, ağ hatalarını veya geçersiz şehir girişlerini yönetmek için kritik öneme sahiptir. units=metric parametresi, sıcaklığın Celsius cinsinden gelmesini sağlar.

DOM Manipülasyonu ile Veriyi Ekrana Yazdırma

Veriyi çektikten sonra, bu veriyi HTML içerisine dinamik olarak yerleştirmemiz gerekir. Bu işlem için innerHTML veya textContent özelliklerini kullanabiliriz.

function updateUI(data) {
  const resultDiv = document.getElementById('result');
  if (data) {
    resultDiv.innerHTML = `
      


${data.name}
      
Sıcaklık: ${data.main.temp}°C
      
Durum: ${data.weather[0].description}
    `;
  } else {
    resultDiv.innerHTML = '
Veri alınamadı.
';
  }
}

Bu fonksiyon, API'den gelen JSON nesnesini alır ve içerisindeki main.temp gibi değerleri ayrıştırarak kullanıcıya okunabilir bir HTML çıktısı sunar. Güvenlik açısından, kullanıcıdan gelen veriyi doğrudan innerHTML içine koyarken XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olunmalı; eğer veri kullanıcı tarafından giriliyorsa textContent tercih edilmelidir.

Hava Durumu Servislerinin Karşılaştırılması

Uygulamanız için doğru API'yi seçmek, projenin başarısını ve maliyetini doğrudan etkiler. Aşağıdaki tablo, yaygın kullanılan servislerin kısa bir karşılaştırmasını sunar.

Güvenlik ve Hata Ayıklama İpuçları

Bir web uygulamasında API anahtarlarını doğrudan istemci tarafında (client-side) açıkça paylaşmak, anahtarınızın çalınmasına neden olabilir. Üretim ortamında (production), bu istekleri bir backend sunucusu üzerinden yönlendirmeniz en güvenli yöntemdir.

Kritik Uyarı: API anahtarlarınızı asla GitHub gibi herkese açık platformlarda paylaşmayın. Uygulamanızı yayına alırken anahtarlarınızı ortam değişkenleri (environment variables) ile saklayın ve API isteklerini sunucu tarafında (Node.js vb.) yönetmeye çalışın.

Hata ayıklarken tarayıcının "Network" sekmesini kullanarak API'ye giden istekleri ve dönen yanıt kodlarını (200, 404, 401) kontrol etmeyi unutmayın. 401 hatası genellikle hatalı bir API anahtarına işaret eder.

Sıkça Sorulan Sorular

API anahtarımı nasıl gizleyebilirim?

İstemci tarafında çalışan JavaScript kodlarında anahtarı tamamen gizlemek imkansızdır. En güvenli yol, isteği kendi backend sunucunuza yapıp, API anahtarını sunucuda ekleyerek dış servise yönlendirmektir.

Neden "404 Not Found" hatası alıyorum?

Bu hata genellikle yanlış şehir adı girildiğinde veya API URL'sindeki parametrelerin hatalı yapılandırılmasında oluşur. Konsolunuzdaki URL'yi kopyalayıp tarayıcıda doğrudan açarak yanıtı inceleyin.

Hava durumu verisi neden güncel değil?

Ücretsiz API planları genellikle veriyi 10-30 dakika aralıklarla günceller. Ayrıca tarayıcı önbelleği (cache) bazen eski veriyi gösterebilir; isteklerinize cache: 'no-cache' parametresini ekleyerek bunu aşabilirsiniz.

Celsius yerine Fahrenheit nasıl alırım?

API isteğinizdeki units=metric parametresini units=imperial olarak değiştirmeniz yeterlidir.

Uygulamayı nasıl daha şık hale getirebilirim?

CSS kullanarak hava durumu ikonları ekleyebilir, sıcaklığa göre arka plan rengini değiştiren (örneğin soğuk havalarda mavi, sıcak havalarda turuncu) dinamik stiller yazabilirsiniz.

Geolocation API ile Otomatik Konum Algılama

Kullanıcının şehir ismini manuel olarak girmesini beklemek yerine, tarayıcının sunduğu Geolocation API kullanarak kullanıcının mevcut koordinatlarını alabilir ve bu koordinatları hava durumu servisine gönderebilirsiniz. Bu, kullanıcı deneyimini (UX) önemli ölçüde iyileştiren bir yöntemdir.

Aşağıdaki kod bloğu, tarayıcıdan izin alarak enlem ve boylam bilgilerini nasıl çekeceğinizi gösterir:

function kullaniciKonumunuAl() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      const lat = position.coords.latitude;
      const lon = position.coords.longitude;
      // Bu koordinatları kullanarak API isteği yapın
      getHavaDurumuByCoords(lat, lon);
    }, (error) => {
      console.error("Konum alınamadı: ", error.message);
    });
  } else {
    alert("Tarayıcınız konum servislerini desteklemiyor.");
  }
}

Uygulama Performansını Optimize Etme

Hava durumu uygulamaları genellikle sık veri güncellenmesi gerektiren projelerdir. Ancak, her saniye API isteği göndermek hem kota limitlerinizi doldurur hem de uygulamanızın yavaşlamasına neden olur. Performansı artırmak için şu stratejileri uygulayabilirsiniz:

• Debouncing: Kullanıcı arama kutusuna yazı yazarken her harfte istek göndermek yerine, yazmayı bıraktıktan 500ms sonra istek gönderin.
• Caching (Önbellekleme): Alınan verileri localStorage üzerinde saklayarak, aynı şehir için kısa süreli tekrarlayan istekleri engelleyin.
• Lazy Loading: Hava durumu ikonlarını veya arka plan görsellerini, veri başarıyla geldikten sonra yükleyin.

Aşağıdaki örnekte, basit bir localStorage kontrolü ile verinin tazeliğini nasıl koruyabileceğinizi görebilirsiniz:

function veriyiKaydet(sehir, data) {
  const cacheData = {
    timestamp: Date.now(),
    payload: data
  };
  localStorage.setItem(sehir, JSON.stringify(cacheData));
}

function veriyiGetir(sehir) {
  const cached = localStorage.getItem(sehir);
  if (cached) {
    const { timestamp, payload } = JSON.parse(cached);
    // 10 dakika (600.000ms) içerisinde ise önbelleği kullan
    if (Date.now() - timestamp < 600000) {
      return payload;
    }
  }
  return null;
}

Uygulamayı Yayına Alma (Deployment)

Uygulamanızı yerel bilgisayarınızdan çıkarıp internete açmak için modern ve ücretsiz servisleri kullanabilirsiniz. Vercel, Netlify veya GitHub Pages, statik dosyalarınızı (HTML, CSS, JS) barındırmak için en ideal platformlardır.

İpucu: Uygulamanızı yayına almadan önce .env dosyalarınızın GitHub gibi halka açık platformlara yüklenmediğinden emin olun. API anahtarlarınızı gizlemek için sunucu taraflı bir proxy kullanabilir veya platformların sağladığı "Environment Variables" ayarlarını kullanabilirsiniz.

Sonuç

JavaScript ile dinamik bir hava durumu uygulaması yapmak, hem API etkileşimlerini hem de DOM manipülasyonunu pekiştiren harika bir projedir. Bu rehberde öğrendiğiniz Fetch API kullanımı ve hata yönetimi, gelecekte geliştireceğiniz daha karmaşık uygulamaların temelini oluşturacaktır. Bir sonraki adım olarak, kullanıcının konumunu tarayıcıdan otomatik alan navigator.geolocation API'sini entegre etmeyi deneyebilirsiniz. Başarılar dilerim!

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Uygulamanızın üretim ortamındaki güvenliğinden ve API kullanımıyla ilgili maliyetlerden geliştirici sorumludur. Üçüncü taraf servislerin kullanım koşullarını mutlaka okuyun.