Genel Yazılar

Hava Durumu API’si

3 yorum

Aşağıdaki linkten Hava Durumu API kaynağına ve aşağıdaki bilgilerle ilgili detaylara ulaşabilirsiniz:
http://openweathermap.org/api

Öncelikle bir API key almanız gerekiyor, yani bu API’yi kullanabilmek için karşı tarafın size özel oluşturduğu bir nevi şifre gibi birşey:
http://openweathermap.org/appid
Yukarıdaki adrese girdikten sonra buradaki “Sign up” linkinden kayıt oluşturacaksınız.
Kayıt oluşturunca hemen sonraki sayfada API Key bilgisi gelecek ekrana. Bu API Key bilgisini kaydedin…

Havadurumu bilgilerini sorgularken bu API key’i kullanacaksınız artık:
Örnek olarak benim API Key’im alttaki (PROD’a geçerken bunu kullanmayın kendinize bir API key alın lütfen):
25e585073d9232f10fa66afa76d62fda

Bu API Key’i de aşağıdaki linkteki gibi kullanıyorsunuz (test için hadi aşağıdaki linke tıklayıp JSON sonucu görebilirsiniz):
http://samples.openweathermap.org/data/2.5/forecast?q=istanbul&appid=25e585073d9232f10fa66afa76d62fda

Chrome’un Postman isimli bir eklentisi var, Api linklerini bu eklentiyi kurarak test edebilirsiniz. Bu eklentiyi ayrıca tavsiye ederim. Bir developer için “olmazsa olmaz”lardan. Yukarıdaki örnek linkteki “q” parametresini değiştirerek başka şehirlerin hava durumu bilgilerini de alabilirsiniz.

Aşağıdaki örnekte de koordinata göre bilgileri ile alma olayı var…
http://samples.openweathermap.org/data/2.5/weather?lat=41.111721&lon=29.022345&appid=25e585073d9232f10fa66afa76d62fda

Bu linkleri sayfanızda yada uygulamanızda nasıl mı kullanacaksınız?
JAVASCRIPT:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.getJSON( "http://api.openweathermap.org/data/2.5/forecast/city?q=istanbul&APPID=25e585073d9232f10fa66afa76d62fda", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "
<ul>
  <li id="&quot; + key + &quot;">" + val + "</li>
</ul>
" );
});

$( "", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});

Bu şekilde, gelen bilgileri alarak HTML tasarımında istediğiniz yerlere yerleştirebilirsiniz…

Ayrıca kişinin tarayıcısından konum bilgisini almak için de aşağıdaki yöntemi kullanabilirsiniz. Buradaki kod çalıştığında güvenlik gereği tarayıcı, kullanıcıya “İzin veriyormusun?” diye soracaktır.

1
<div id="demo">Bilgiler buraya gelecek.</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else {
        x.innerHTML = "Tarayıcınız Geolocation desteklemiyor.";
    }
}
function showPosition(position) {
    // Bu bölümde yukarıdaki ajax metodunu koordinata göre aşağıdaki bilgileri kullanarak çalıştırıp direct adamın konumuna göre hava durumunu alabilirsin
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

“Hava Durumu API’si” üzerine 3 düşünce

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir