Gereksinimler ve Ön Hazırlık
Projeye başlamadan önce geliştirme ortamınızın hazır olduğundan emin olmalısınız. Modern bir tarayıcı (Chrome, Firefox veya Edge) ve temel bir kod editörü (VS Code önerilir) yeterlidir. Ayrıca hava durumu verilerini çekmek için ücretsiz bir API anahtarına ihtiyacınız olacak.
- OpenWeatherMap API: Ücretsiz katmanı sayesinde hava durumu verilerine erişmemizi sağlar.
- Fetch API: JavaScript'in yerleşik, ağ istekleri yapmamızı sağlayan modern yöntemi.
- Async/Await: Asenkron işlemleri daha okunabilir hale getiren modern JavaScript sözdizimi.
Öncelikle OpenWeatherMap web sitesine giderek bir hesap oluşturun ve "API Keys" sekmesinden ücretsiz bir anahtar alın. Bu anahtar, verileri çekmek için "yetki belgeniz" işlevi görecektir.
HTML Yapısını Oluşturma
Widget'ımızın iskeletini oluşturmak için temiz bir HTML yapısına ihtiyacımız var. Bu yapı, verilerin dinamik olarak yerleşeceği kapsayıcıları içermelidir.
CSS ile Arayüzü Şekillendirme
Kullanıcı dostu bir widget için görsel hiyerarşi önemlidir. Basit bir CSS ile widget'ımızı odak noktası haline getirelim.
#weather-widget {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
border-radius: 10px;
text-align: center;
background: #f9f9f9;
}
#result { margin-top: 15px; font-weight: bold; }
Bu CSS kuralları, widget'ın kutu modelini düzenler, köşeleri yumuşatır ve sonuç metninin okunabilirliğini artırır.
JavaScript ile API Entegrasyonu
Şimdi en kritik kısma geldik: JavaScript kullanarak API'den veri çekme. Burada fetch fonksiyonunu kullanarak asenkron bir istek gerçekleştireceğiz.
const apiKey = 'BURAYA_API_ANAHTARINIZI_YAZIN';
const btn = document.getElementById('get-weather-btn');
btn.addEventListener('click', async () => {
const city = document.getElementById('city-input').value;
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=tr`;
try {
const response = await fetch(url);
const data = await response.json();
displayWeather(data);
} catch (error) {
console.error("Hata:", error);
}
});
Bu kod bloğu, kullanıcı butona bastığında girilen şehir ismini alır ve OpenWeatherMap'e bir istek gönderir. async/await yapısı, verinin gelmesini beklerken kodun akışını düzenli tutar.
Verileri DOM'a Yansıtma
API'den gelen JSON verisini ekrana yazdırmak için bir fonksiyon oluşturmamız gerekir. Bu fonksiyon, gelen veriyi işleyerek kullanıcıya anlamlı bir metin sunar.
function displayWeather(data) {
const resultDiv = document.getElementById('result');
if (data.cod === 200) {
resultDiv.innerHTML = `${data.name}: ${data.main.temp}°C, ${data.weather[0].description}`;
} else {
resultDiv.innerHTML = "Şehir bulunamadı.";
}
}
Bu fonksiyon, API'den dönen cod değerini kontrol ederek işlemin başarılı olup olmadığını denetler. Eğer başarılıysa, sıcaklık ve hava durumu açıklamasını ekrana basar.
Karşılaştırma: Veri Çekme Yöntemleri
Yöntem
Avantajı
Dezavantajı
Fetch API
Modern, yerleşik, promise tabanlı
Eski tarayıcı desteği yok
XMLHttpRequest
Her tarayıcıyla uyumlu
Karmaşık sözdizimi, eski
Axios Kütüphanesi
Otomatik JSON dönüşümü, kolay hata yönetimi
Harici dosya bağımlılığı
Kritik Güvenlik Uyarısı: API anahtarınızı asla istemci tarafındaki (frontend) kodlarda açıkça bırakmayın. Üretim ortamında (production), bu istekleri bir backend (Node.js vb.) üzerinden yaparak API anahtarınızı gizli tutmanız güvenlik açısından zorunludur. Aksi takdirde anahtarınız çalınabilir ve API kotanız kötü niyetli kişilerce tüketilebilir.
Sıkça Sorulan Sorular
API anahtarımı nasıl gizleyebilirim?
API anahtarınızı gizlemek için bir backend sunucusu kurmalı ve istekleri bu sunucu üzerinden yapmalısınız. İstemci sadece sizin sunucunuza istek gönderir, sunucunuz ise API ile konuşur.
Neden "Şehir bulunamadı" hatası alıyorum?
Şehir ismini yanlış yazmış olabilirsiniz veya API'nin desteklemediği bir dilde giriş yapıyor olabilirsiniz. Ayrıca API anahtarınızın aktifleşmesi bazen birkaç dakika sürebilir.
Widget'a ikon ekleyebilir miyim?
Evet, API'den dönen data.weather[0].icon değerini kullanarak OpenWeatherMap'in sağladığı ikon URL'lerini dinamik olarak bir img etiketi içerisine yerleştirebilirsiniz.
Neden Fetch kullanmalıyım?
Fetch, modern JavaScript standartlarının bir parçasıdır. Promise tabanlı yapısı sayesinde kodun okunabilirliğini artırır ve asenkron işlemleri yönetmeyi kolaylaştırır.
Hava durumu verileri ne kadar güncel?
Ücretsiz OpenWeatherMap planı, verileri genellikle 10-15 dakikalık aralıklarla günceller. Çok kritik, saniyelik veriler için ücretli planlara geçiş yapmanız gerekebilir.
İleri Seviye Optimizasyon: Performans ve Hata Yönetimi
Widget'ınızın kullanıcı deneyimini iyileştirmek için sadece veriyi çekmek yeterli değildir. Ağ trafiğini optimize etmek ve beklenmedik durumlarda uygulamanın çökmesini engellemek profesyonel bir yaklaşım gerektirir. Özellikle mobil cihazlarda veri tasarrufu sağlamak ve API limitlerinizi korumak için "Debounce" tekniğini kullanmalısınız.
Debounce Tekniği ile API İsteklerini Kısıtlama
Kullanıcı her tuşa bastığında API'ye istek göndermek, hem API kotanızı hızla tüketir hem de gereksiz ağ trafiği oluşturur. Bunun yerine, kullanıcı yazmayı bıraktıktan sonra belirli bir süre (örneğin 500ms) bekleyip isteği tetikleyen bir fonksiyon kullanmalıyız.
let timer;
const searchInput = document.getElementById('city-input');
searchInput.addEventListener('input', (e) => {
clearTimeout(timer);
timer = setTimeout(() => {
getWeatherData(e.target.value);
}, 500);
});
Hata Ayıklama ve Kullanıcı Geri Bildirimi
Ağ hataları veya API kaynaklı sorunlar her zaman mümkündür. Kullanıcıya sadece "hata oluştu" demek yerine, hatanın kaynağına göre anlamlı mesajlar göstermek uygulamanın kalitesini artırır. try-catch bloklarını kullanarak asenkron işlemlerinizi daha güvenli hale getirebilirsiniz.
Gelişmiş Hata Yönetimi Senaryosu
Aşağıdaki örnekte, HTTP hata kodlarını kontrol ederek kullanıcıya özel bildirimler sunan bir yapı yer almaktadır:
async function getWeatherData(city) {
try {
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`);
if (!response.ok) {
if (response.status === 404) throw new Error("Şehir bulunamadı.");
if (response.status === 401) throw new Error("API anahtarı geçersiz.");
throw new Error("Sunucu hatası, lütfen daha sonra deneyin.");
}
const data = await response.json();
updateUI(data);
} catch (error) {
displayErrorMessage(error.message);
}
}
function displayErrorMessage(message) {
const errorContainer = document.getElementById('error-box');
errorContainer.textContent = message;
errorContainer.style.display = 'block';
}
Deployment: Widget'ı Canlıya Alma
Geliştirdiğiniz widget'ı internete açmak için statik barındırma hizmetlerini (GitHub Pages, Netlify veya Vercel) kullanabilirsiniz. Ancak, API anahtarınızı asla doğrudan istemci tarafındaki (client-side) JavaScript dosyasında açık bir şekilde bırakmamalısınız. Eğer projeniz büyürse, bir "Backend Proxy" katmanı oluşturarak API anahtarınızı sunucu tarafında gizli tutmanız güvenlik açısından kritik bir zorunluluktur.
İpucu: Eğer sadece küçük bir kişisel proje geliştiriyorsanız, GitHub Pages üzerinden ücretsiz yayın yapabilirsiniz. Ancak profesyonel bir ürün hedefliyorsanız, mutlaka bir .env dosyası ve sunucu taraflı bir yapılandırma kullanın.
Sonuç
Bu rehberde, JavaScript kullanarak dinamik bir hava durumu widget'ı oluşturmanın temel adımlarını öğrendiniz. API istekleri, asenkron programlama ve DOM manipülasyonu, modern web geliştirmenin temel taşlarıdır. Bir sonraki adım olarak, widget'ınıza yerel saat bilgisini ekleyebilir veya kullanıcının konumunu (Geolocation API) otomatik olarak alarak hava durumunu otomatik gösteren bir özellik geliştirebilirsiniz. Yazılım dünyasında sürekli pratik yapmak, teorik bilgiyi kalıcı hale getirmenin tek yoludur.
Bu yazıya tepkinizi paylaşın:
İlgili Yazılar
Yorumlar (0)
Yorum Yaz