Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce bilgisayarınızda Node.js ve bir paket yöneticisinin (npm veya yarn) yüklü olması gerekir. Ayrıca, hava durumu verilerini çekebilmek için ücretsiz bir API anahtarına (API Key) ihtiyacınız olacak. OpenWeatherMap üzerinden ücretsiz bir hesap oluşturarak API anahtarınızı alabilirsiniz.

• Node.js: v18 veya üzeri bir sürüm önerilir.
• React: Vite kullanarak hızlı bir kurulum yapabilirsiniz.
• API Servisi: OpenWeatherMap API (Ücretsiz katman yeterlidir).
• Tarayıcı: Geolocation API desteği olan modern bir tarayıcı (Chrome, Firefox, Edge).

Projenizi başlatmak için terminalinizde şu komutu çalıştırın:

npm create vite@latest hava-durumu-uygulamasi -- --template react
cd hava-durumu-uygulamasi
npm install
npm run dev

Bu komutlar, projenizin iskeletini oluşturacak ve yerel geliştirme sunucunuzu ayağa kaldıracaktır. Ardından, proje dizininde axios kütüphanesini kurarak API isteklerini daha yönetilebilir hale getirebilirsiniz: npm install axios.

Geolocation API ile Kullanıcı Konumunu Alma

Geolocation API, tarayıcı üzerinde çalışan ve kullanıcının coğrafi konumuna (enlem ve boylam) erişmemizi sağlayan yerleşik bir JavaScript arayüzüdür. React içerisinde bu veriyi yönetmek için useState ve useEffect kancalarını (hooks) kullanacağız.

Aşağıdaki kod bloğu, bileşen yüklendiğinde kullanıcının konumunu talep eder ve durumu günceller:

import { useState, useEffect } from 'react';

const useKonum = () => {
  const [konum, setKonum] = useState({ lat: null, lon: null });

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          setKonum({
            lat: position.coords.latitude,
            lon: position.coords.longitude
          });
        },
        (error) => console.error("Konum alınamadı:", error)
      );
    }
  }, []);

  return konum;
};

Bu kod, tarayıcının navigator.geolocation özelliğini kontrol eder. Eğer kullanıcı izin verirse, enlem ve boylam değerlerini state içerisine kaydeder. Kullanıcı izni reddederse veya bir hata oluşursa, hata yönetimi bloğu devreye girer.

Hava Durumu Verilerini API Üzerinden Çekme

Konum bilgilerini elde ettikten sonra, bu verileri kullanarak hava durumu servisine istek göndermeliyiz. Burada axios kullanarak asenkron bir veri çekme işlemi gerçekleştireceğiz. API anahtarınızı kod içerisine doğrudan gömmek yerine, .env dosyası kullanmak güvenlik açısından kritik bir öneme sahiptir.

API çağrısını yöneten örnek fonksiyonumuz şu şekildedir:

import axios from 'axios';

const havaDurumunuGetir = async (lat, lon) => {
  const API_KEY = import.meta.env.VITE_API_KEY;
  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric&lang=tr`;
  
  try {
    const response = await axios.get(url);
    return response.data;
  } catch (error) {
    throw new Error("Hava durumu verisi alınırken hata oluştu.");
  }
};

Bu fonksiyon, API'den gelen veriyi işler. units=metric parametresi sıcaklığın Celsius cinsinden gelmesini sağlar. lang=tr parametresi ise hava durumu açıklamalarının Türkçe olarak dönmesini sağlar.

Veri Yönetimi ve State Yapısı

Uygulamanın durumu (loading, success, error) kullanıcı deneyimi için çok önemlidir. Kullanıcı konum izni verene kadar bir yükleme ekranı göstermek, veriler geldiğinde ise hava durumu detaylarını listelemek gerekir.

State yönetimini useState ile şu şekilde kurabilirsiniz:

const [havaDurumu, setHavaDurumu] = useState(null);
const [yukleniyor, setYukleniyor] = useState(true);
const [hata, setHata] = useState(null);

Bileşenlerin Birleştirilmesi ve Görselleştirme

Tüm parçaları bir araya getirerek ana bileşenimizi oluşturalım. Bu aşamada, useEffect içerisinde konum alındıktan sonra hava durumu verisini çeken bir akış kurgulayacağız.

import { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(async (pos) => {
      const { latitude, longitude } = pos.coords;
      const result = await havaDurumunuGetir(latitude, longitude);
      setData(result);
    });
  }, []);

  if (!data) return 
Konum izni bekleniyor veya yükleniyor...
;

  return (
    

      
{data.name} Hava Durumu
      
Sıcaklık: {data.main.temp}°C
      
Durum: {data.weather[0].description}
    
  );
}

Kritik Güvenlik Uyarısı: API anahtarınızı asla istemci tarafındaki (frontend) kodlarınızda açıkça paylaşmayın. GitHub gibi platformlara yüklerken .env dosyanızı .gitignore içerisine eklemeyi unutmayın. Üretim ortamında (production), API isteklerini bir backend sunucusu (proxy) üzerinden yapmak, anahtarınızın çalınmasını engeller.

Sıkça Sorulan Sorular

Geolocation API neden bazen çalışmaz?

Kullanıcı tarayıcı üzerinden konum iznini reddetmiş olabilir veya uygulamanız HTTPS üzerinden yayınlanmıyor olabilir. Modern tarayıcılar, konum servislerini güvenlik gerekçesiyle sadece HTTPS protokolünde çalıştırır.

API anahtarımı nasıl gizlerim?

React projenizde .env dosyası kullanarak VITE_ ön ekiyle başlayan değişkenler tanımlayın. Ancak unutmayın, bunlar tarayıcıda yine de görünebilir. Gerçek bir üretim uygulamasında, API isteğini kendi Node.js sunucunuz üzerinden yönlendirmeniz en güvenli yöntemdir.

Neden Axios kullanmalıyım?

Axios, fetch API'sine göre daha kolay hata yönetimi sunar, otomatik JSON dönüşümü yapar ve istekleri iptal etme (cancellation) gibi gelişmiş özelliklere sahiptir.

Hava durumu verisi güncel mi?

OpenWeatherMap API, ücretsiz katmanda verileri belirli aralıklarla günceller. Çok sık istek atmak (rate limiting) hesabınızın geçici olarak engellenmesine yol açabilir.

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

Tailwind CSS veya Styled Components kullanarak CSS yapılandırması yapabilir, hava durumuna göre arka plan resimlerini dinamik olarak değiştirebilirsiniz.

Uygulamanın Performansını Optimize Etme ve Hata Ayıklama

Geliştirdiğiniz hava durumu uygulamasının kullanıcı deneyimini artırmak için sadece çalışması yeterli değildir; aynı zamanda hızlı ve hatasız tepki vermesi gerekir. Özellikle Geolocation API gibi asenkron işlemler, ağ gecikmelerine veya kullanıcı izin reddi gibi durumlara karşı hassastır.

Hata Ayıklama (Debugging) Stratejileri

Uygulamanızda karşılaşılabilecek en yaygın hatalar; API anahtarının geçersiz olması, kullanıcının konum iznini reddetmesi veya ağ bağlantısının kopmasıdır. Bu durumları yönetmek için try-catch bloklarını ve useEffect içindeki temizleme (cleanup) fonksiyonlarını etkin kullanmalısınız.

useEffect(() => {
  const fetchWeather = async () => {
    try {
      setLoading(true);
      const data = await getWeather(lat, lon);
      setWeatherData(data);
    } catch (err) {
      setError("Veri alınırken bir hata oluştu: " + err.message);
    } finally {
      setLoading(false);
    }
  };

  if (lat && lon) fetchWeather();
}, [lat, lon]);

Performans İpuçları

Uygulamanızın performansını artırmak için şu yöntemleri uygulayabilirsiniz:

• Memoization: useMemo ve useCallback kullanarak gereksiz bileşen render'larını engelleyin.
• Caching: Kullanıcının konumunu ve hava durumu verisini localStorage üzerinde kısa süreliğine saklayarak her sayfa yenilemesinde API isteği atılmasının önüne geçin.
• Debouncing: Eğer bir arama kutusu eklerseniz, kullanıcının her tuş vuruşunda değil, yazmayı bıraktığı anda API isteği gitmesini sağlayın.

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

Uygulamanız hazır olduğunda, onu dünya ile paylaşmak için modern bulut platformlarını kullanabilirsiniz. React uygulamaları için Vercel veya Netlify, sundukları Environment Variables (Çevre Değişkenleri) desteği sayesinde API anahtarınızı kodun içinde açık etmeden güvenle saklamanıza olanak tanır.

Çevre Değişkenlerini Yapılandırma

Yerel geliştirme ortamınızda .env dosyasında tuttuğunuz anahtarları, canlı ortamda şu şekilde tanımlamalısınız:

1. Projenizin kök dizininde .env.local dosyası oluşturun: REACT_APP_WEATHER_API_KEY=sizin_anahtariniz
2. Kod içinde bu anahtarı şu şekilde çağırın: process.env.REACT_APP_WEATHER_API_KEY
3. Deployment platformunuzun (Vercel/Netlify) panelindeki "Environment Variables" sekmesine giderek aynı anahtar-değer çiftini buraya ekleyin.

İpucu: .env dosyanızı asla GitHub gibi herkese açık repolara yüklemeyin. .gitignore dosyanıza .env* eklediğinizden emin olun.

Test Süreçleri

Uygulamanızı yayına almadan önce şu senaryoları mutlaka test edin:

• Konum İzni Reddedildiğinde: Uygulama kullanıcıya nazik bir uyarı gösteriyor mu?
• Hatalı API Anahtarı: API 401 veya 403 hatası döndürdüğünde uygulama çöküyor mu yoksa kullanıcıyı bilgilendiriyor mu?
• Mobil Uyumluluk: Konum izni modalı mobil cihazlarda düzgün görünüyor mu?

Sonuç

React ile Geolocation API kullanarak anlık hava durumu uygulaması yapmak, hem tarayıcı yeteneklerini hem de API entegrasyonlarını anlamak için mükemmel bir projedir. Bu rehberde, kullanıcının konumunu almayı, API üzerinden veri çekmeyi ve bu veriyi güvenli bir şekilde yönetmeyi öğrendiniz. Bir sonraki adım olarak, uygulamaya "şehir arama" özelliği ekleyebilir veya kullanıcıya 5 günlük hava tahmini sunan bir grafik bileşeni entegre edebilirsiniz. Kodunuzu her zaman modüler tutmaya ve hata yönetimine özen göstermeye devam edin.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. API anahtarlarının güvenliği ve veri gizliliği tamamen geliştiricinin sorumluluğundadır. Uygulamanızı yayına almadan önce güvenlik denetimlerini yapmayı ihmal etmeyin.