Aplikasi Perkiraan Cuaca Sederhana Memanfaatkan Weather Underground API dan Geolocation API HTML5

Beberapa saat yang lalu melalui twitter saya mendapat informasi tentang website yang memberikan layanan cuaca yang lengkap dgn API yang cukup mudah yaitu Weather Underground. Layanan dan API mendukung geolookup, forecast, history, webcams/radar/satellite thumbnail, dan lain lain!. Sayangnya untuk kelengkapan tersebut tidak semua layanan diberikan secara gratis. Tetapi hal ini tidak membuat penulis patah semangat untuk mencobanya! hehehe.

Ok, langsung saja kita buat web app! . Penulis menggunakan Javascript untuk membangun aplikasi ini, untuk dukungan bahasa pemrograman yang lain bisa dilihat di dokumentasi Weather Underground API. Cara kerja aplikasi ini secara garis besar seperti ini, javascript mengambil data lokasi user dengan menggunakan Geolocation API yang merupakan fitur HTML5 kemudian data lokasi user ini digunakan sebagai data query untuk mengambil data-data prakiraan cuaca. Sederhana bukan?! .

Penulis menggunakan web editor online jsfiddle yang cukup fleksibel karena tinggal edit dan run! sehingga bisa diketahui langsung hasilnya dan jsfiddle support version control yang sederhana. Untuk keperluan debugging, melihat keluaran console.log() bisa digunakan Developer Tools dari Google Chrome atau Firebug untuk Firefox.

Perlu diketahui bahwa tidak semua browser mendukung Geolocation API sehingga untuk mengecek apakah browser mendukung fitur ini atau tidak, bisa digunakan library javascript seperti Modernizr. Berikut kode untuk melacak lokasi memakai Geolocation API HTML5  melalui javascript.

1
2
3
4
5
6
7
8
9
10
11

function cuacaku() {
    /** Modernizr is small javascript library that detects the availability
     *  of native implementations for next-generation web technologies
     *  such as HTML5 and CSS3
     */
    if (Modernizr.geolocation) {
        navigator.geolocation.getCurrentPosition(get_weather, handle_errors);
    } else {
        alert("Geolocation Not Supported! ");
    }
}

Jika browser mendukung fitur geolocation maka fungsi get_weather akan di eksekusi.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function get_weather(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    wu_query = latitude + ',' + longitude;
 
    //weather underground request URL format
    wu_url = wu_base_url + '/' + wu_api_key + '/' + wu_features + '/q/' + wu_query + '.json';
    console.log('URL Query: ' + wu_url);
 
    $.ajax({
        url: wu_url,
        dataType: "jsonp",
        success: function(parsed_json) {
            console.log(parsed_json);
 
            var location = parsed_json['location']['city'];
            var wuurl = parsed_json['location']['wuiurl'];
            var wu = parsed_json['forecast']['simpleforecast']['forecastday'][0];
            var wu_icon_url = wu['icon_url'];
            var wu_icon_alt = wu['icon'];
            var wu_high_temp = wu['high']['celsius'];
            var wu_low_temp = wu['low']['celsius'];
 
            $('#location').html('<a href="' + wuurl + '" target="_blank">' + location + '</a>');
            $('#weather_icon').attr('alt', wu_icon_alt);
            $('#weather_icon').attr('src', wu_icon_url);
            $('#temp').html(wu_low_temp + ' &amp;degC - ' + wu_high_temp + ' &amp;degC');
        }
    });
}

format request URL untuk mengambil data-data cuaca menurut dokumentasi Weather API adalah seperti ini

http://api.wunderground.com/api/KEY/FEATURE/[FEATURE…]/q/QUERY.FORMAT

dan hasil keluaran query berformat json atau jsonp. Dengan menggunakan jQuery data-data suhu, lokasi, cuaca akan lebih mudah dipilah-pilah  dan ditampilkan.

Perlu diingat jika menggunakan Geolocation API dan browser memang mendukung maka akan muncul notifikasi sharing lokasi seperti pada gambar dibawah ini (Google Chrome 14 di Linux). Aplikasi ini akan berjalan sebagaimana mestinya jika user mengklik tombol “allow”! .

Kode sumber aplikasi ini bisa dilihat di http://jsfiddle.net/junwatu/kvPA2.