Çözüldü OpenWeather API ile veri çekme

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

533388

Hectopat
Katılım
27 Mart 2022
Mesajlar
4.360
Makaleler
2
Çözümler
54
Merhaba, bugün openweather API ile bir hava durumu uygulaması yaptım. Bazı anlamadığım yerler oldu, sorularıma cevap verirseniz mutlu olurum.

1-API keyi paylaşsam bir sıkıntı olur mu? Normalde key yazan yerde const ile daha önce tanımladığım API keyi var.
2-if(e.keyCode == '13') bu kodun anlamı klavyeden basılan tuşun ASCII değerini mi alması?
3- Güneşli, sisli gibi değerleri çekemiyorum, undefined diyor. Galiba JSON datasındaki değeri yanlış alıyorum.

Kodlar:

JavaScript:
const url = "https://api.openweathermap.org/data/2.5/";

const setQuery = (e) => {
 if(e.keyCode == '13')
 {
 getResult(searchBar.value);
 searchBar.value = "";
 }
}

const getResult = (cityName) => {
 let query = `${url}weather?q=${cityName}&appid=${key}&units=metric&lang=tr`;
 fetch(query)
 .then(data => {
 return data.json();
 })
 .then(response => {
 document.querySelector(".minmax").textContent = `${response.main.temp_min}°C / ${response.main.temp_max}°C`;
 document.querySelector(".city").textContent = `${response.name}`;
 document.querySelector(".temp").textContent = `${response.main.temp}°C`;
 document.querySelector(".desc").textContent = `${response.description}`;
 })
}

const searchBar = document.querySelector("#searchBar");

searchBar.addEventListener("keypress",setQuery);
 
Çözüm
Yukarıda dediğim gibi submit Event'i içerisinde e.preventDefault() yapmanız gerek sanırım, form elementi varsayılan olarak bulunduğunuz siteye get eventi yapmak üzere tasarlanmış, burada bunu istemediğimiz için e.preventDefault() ile varsayılan davranışı engelliyoruz, bu metot birçok diğer eventte de kullanılabilen bir metottur.

Ama o zaman tüm get isteklerini ve yönlendirmeleri durduruyor.

Ama bu sanirim Client tarafi kodun. Openweather API istek kismini Client'da degil, serverda yapman lazim.

Aslında PHP'deki gibi bir constant tanımlıyoruz sanki burada.

Ama bu sanirim Client tarafi kodun. Openweather API istek kismini Client'da degil, serverda yapman lazim.

Anladığım kadarıyla env dosyası bizim bir backend projede çalışırken dbname, username, userpassword gibi dB ile bağlantı kurmamızı sağlayan şeyleri tutuyor, doğru mudur?
@Zurnadürüm

Ya da API keylerimiz olura onları tutuyor?

Bu arada az önce description kısmını da helletim. Kodumu weather[0] olarak değiştirdim.
API key paylaşmayın, ücretsizde olsa size ait bir key, başkası bu kodu kullanacaksa kendi keyini kendisi oluşturabilir, çünkü ücretsiz keyde olsa o keyin bir limiti var, OpenWeather'in sitesine göre günde 1000 isteğe kadar ücretsizmiş, başkasının size ait keyi kullanabilmesi bu sınıra ulaşmanıza da sebep olur.

keyCode kullanarak enter tuşuna basılıp basılmadığını kontrol etmek yerine şehir girilen kısmı bir form elementi içerisine alabilirsiniz. Böylece odak bu formun içerisindeki bir boxda, bu durumda şehir ismi yazma kısmında iken entera basıldığında formun onsubmit eventi tetiklenir, bu event tetiklendiğinde istek atan bir kod yazmanız daha doğru bir çözüm olacaktır.
 
API key paylaşmayın, ücretsizde olsa size ait bir key, başkası bu kodu kullanacaksa kendi keyini kendisi oluşturabilir, çünkü ücretsiz keyde olsa o keyin bir limiti var, openweather'in sitesine göre günde 1000 isteğe kadar ücretsizmiş, başkasının size ait keyi kullanabilmesi bu sınıra ulaşmanıza da sebep olur.

Ben de paylaşmamayı düşünüyordum, teşekkür ederim.

Keycode kullanmak yerine şehir girilen kısmı bir form elementi içerisine alabilirsiniz. Böylece odak bu formun içerisindeki bir boxda iken entera basıldığında formun onsubmit Event'i tetiklenir, bu Event tetiklendiğinde istek atan bir kod yazmanız daha doğru bir çözüm olacaktır.

böyle olur mu?
 
Evet bunun gibi bir şeyden bahsediyorum, bu event tetiklendiğinde input text elementini bulup şehir ismini alırsınız. Ancak yanlış hatırlamıyorsam onsubmit elementinde otomatik olarak siteye bir istek gönderme durumu oluyordu, istenmeyen bir durum çünkü siz siteye istek atmayacaksınız direkt OpenWeather API'a istek atacaksınız, bunu da Event.preventDefault() ile çözmeniz gerek.
 
API keyi paylaşsam bir sıkıntı olur mu? Normalde key yazan yerde const ile daha önce tanımladığım API keyi var.
Auth tokenleri hic bir zaman kodunuzun icerisine gomulu bir sekilde eklemeyiniz! Onun yerine dotenv kullanin ve token yerine dotenv degerinden verileri alin.
2-if(e.keyCode == '13') bu kodun anlamı klavyeden basılan tuşun ASCII değerini mi alması?
Form elementi kullanin + formda onSubmit handler kullanin. Boylece klavye kodlariyla ugrasmaniza gerek kalmaz.
 
İstek attığın API'nin döndüğü cevaba bağlı olarak yukarıdaki şekilde alman gerek sanırım.

Olmadı maalesef ki.

Form elementi kullanin + formda onSubmit handler kullanin. Boylece klavye kodlariyla ugrasmaniza gerek kalmaz.

Yaptım ama her tuşa basışımda ilk önce harf harf aldığı için Console'de get hatası alıyorum.

Auth tokenleri hiçbir zaman kodunuzun icerisine gomulu bir sekilde eklemeyiniz! Onun yerine dotenv kullanin ve token yerine dotenv degerinden verileri alin.

Bir tutorial var mı?
 
Peki bunun hakkında bir fikriniz var mı?
OpenWeather API'ın kendi sitesinde örnek bir JSON response bulunuyor. Orada da göründüğü üzere description weather objesi altında bulunuyor.

JSON:
{
  "coord": {
    "lon": 10.99,
    "lat": 44.34
  },
  "weather": [
    {
      "id": 501,
      "main": "Rain",
      "description": "moderate rain",
      "icon": "10d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 298.48,
    "feels_like": 298.74,
    "temp_min": 297.56,
    "temp_max": 300.05,
    "pressure": 1015,
    "humidity": 64,
    "sea_level": 1015,
    "grnd_level": 933
  },
  "visibility": 10000,
  "wind": {
    "speed": 0.62,
    "deg": 349,
    "gust": 1.18
  },
  "rain": {
    "1h": 3.16
  },
  "clouds": {
    "all": 100
  },
  "dt": 1661870592,
  "sys": {
    "type": 2,
    "id": 2075663,
    "country": "IT",
    "sunrise": 1661834187,
    "sunset": 1661882248
  },
  "timezone": 7200,
  "id": 3163858,
  "name": "Zocca",
  "cod": 200
}
Yaptım ama her tuşa basışımda ilk önce harf harf aldığı için Console'de get hatası alıyorum.
Yukarıda dediğim gibi submit eventi içerisinde e.preventDefault() yapmanız gerek sanırım, form elementi varsayılan olarak bulunduğunuz siteye get eventi yapmak üzere tasarlanmış, burada bunu istemediğimiz için e.preventDefault() ile varsayılan davranışı engelliyoruz, bu metot birçok diğer eventte de kullanılabilen bir metottur.

 

Geri
Yukarı