Çö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.
Bir tutorial var mı?

Ama bu sanirim Client tarafi kodun. Openweather API istek kismini Client'da degil, serverda yapman lazim.
 
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.
 
Son düzenleme:
Çözüm
@Zurnadürüm kodları hallettim yakında githuba yğkleyeceğim, ayrıca dotenv yi frontend üzerinde kullanamaz mıyım?
dotenv'i frontendde kullanmanız demek buna erişecek olan kullanıcının API keye de erişmesi demek, kullanıcının API keye erişimini engellemenizin tek yolu bu işi bir sunucu-istemci bağlantısı haline getirmeniz. Şuan yazdığınız kod yalnızca frontend, API keyi saklamak istiyorsanız bir backend oluşturup frontendden gelen hava durumu isteğini backend üzerinde bulunan API key ile OpenWeather API'a göndereceksiniz, aldığınız cevabı da frontende göndereceksiniz.
 
Dotenv'i frontendde kullanmanız demek buna erişecek olan kullanıcının API keye de erişmesi demek, kullanıcının API keye erişimini engellemenizin tek yolu bu işi bir sunucu-istemci bağlantısı haline getirmeniz. Şu an yazdığınız kod yalnızca frontend, API keyi saklamak istiyorsanız bir backend oluşturup frontendden gelen hava durumu isteğini backend üzerinde bulunan API key ile openweather API'a göndereceksiniz, aldığınız cevabı da frontende göndereceksiniz.

Ben de zaten Node.js öğreniyordum daha iyi anlarım, ileride.
 

Geri
Yukarı