Tutorial JSON via HTTP - Prakiraan Cuaca

Bila aplikasi mobile kita membutuhkan data dari Internet, kita akan mendapatkannya dari web service API tertentu. Biasanya data akan ditransfer dalam format JSON.

JSON adalah format berbasis JavaScript yang dikhususkan untuk transfer data saja (bukan code seperti JavaScript).

Contoh JSON sederhana seperti berikut:

{
  "type": "Person",
  "_id": "Person_hendy",
  "name": "Hendy Irawan",
  "age": 30
}

Ada banyak web service di Internet yang menyediakan data berformat JSON, termasuk Facebook. Salah satunya yang digunakan sebagai contoh di sini adalah OpenWeatherMap.org.

Agar tampilan JSON lebih rapi, sebelumnya silakan install dulu plugin JSONView for Chrome.

Untuk membuka contoh data JSON di browser Chrome coba kunjungi:
http://api.openweathermap.org/data/2.5/weather?q=Bandung,ID&units=metric

Perhatikan format URI-nya, mengandung nama kota dan kode negara.

Contoh outputnya sbb:

Yuk kita integrasikan data JSON tersebut ke aplikasi kita:

1. Bila project Anda belum memiliki file www/js/app.js, buat dengan isi sebagai berikut:

$(document).ready(function() {

});

Tambahkan reference ke file JavaScript tersebut di dalam index.html, sehingga jadinya sbb :

...

<script src="js/appframework.ui.min.js"></script>

<script src="js/app.js"></script>

<script>

    $.ui.autoLaunch = false;

...

2. Desain main page, sehingga index.html jadi seperti ini :

<div class="panel" title="Prakiraan Cuaca" data-nav="nav_0" id="main" selected="selected"
style="" data-appbuilder-object="page">

    <div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
        <label for="cityFld">Kota</label>
        <input type="text" style="float:left;" id="cityFld" placeholder="Kota" value="Bandung">
    </div>
    <div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
        <label for="countryCodeFld">Negara</label>
        <input type="text" style="float:left;" id="countryCodeFld" placeholder="Negara"
        value="ID">
    </div><a class="button" href="#" style="" data-appbuilder-object="button"
    data-transition="slide" id="weatherBtn">Cek Cuaca</a>
    <div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
        <label for="weatherFld">Cuaca</label>
        <input type="text" style="float:left;" id="weatherFld" placeholder="Cuaca" readonly="">
    </div>
    <div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
        <label for="tempFld">Suhu</label>
        <input type="text" style="float:left;" id="tempFld" placeholder="Suhu" readonly="">
    </div>
</div>

tampilan di design :

3. Edit file www/js/app.js. Kita tambahkan code yang langkah-langkah logicnya sbb:
a. Baca inputan kota dan negara
b. Ambil JSON-nya menggunakan method jQuery $.getJSON()
c. Tampilkan data JSON yang didapatkan ke kotak cuaca dan suhu

$(document).ready(function() {
    $('#weatherBtn').click(function() {
        var city = $('#cityFld').val();
        var countryCode = $('#countryCodeFld').val();
        $.getJSON('http://api.openweathermap.org/data/2.5/weather',
            {
                q: city + ',' + countryCode,
                units: 'metric'
            }, function(data) {
                console.debug('OpenWeatherMap data for ', city, countryCode, '>', data);
                $('#weatherFld').val( data.weather[0].description );
                $('#tempFld').val( data.main.temp_min + ' - ' + data.main.temp_max + ' °C');
            });
            
    });
});

Hasilnya seperti ini :

Bagaimana, cukup praktis kan ya? Selamat mencoba! :-)

Source code aplikasi Prakiraan Cuaca ini ada di GitHub.

Untuk memperkuat skill Anda, silakan latihan dengan mempercanggih aplikasi tersebut sbb:

1. Buat inputan kota & negara sebagai combobox (elemen <select>), sehingga pengguna tidak perlu mengetik
2. Lebih canggih lagi kalau Anda bisa mengimplementasikan inputan menggunakan select2 autocomplete
3. Tampilkan informasi lain (kelembaban, dsb.)
4. Tampilkan beberapa kota sekaligus
5. Tampilkan perkiraan cuaca beberapa hari ke depan (lihat dokumentasi OpenWeatherMap)
6. Simpan preferensi kota yang dipilih pengguna sehingga bila aplikasi dijalankan kembali, otomatis menggunakan kota yang sudah dipilih sebelumnya

Bila sudah cukup menguasai, Anda bisa mencoba membuat aplikasi yang menggunakan data JSON dari web service lain. Silakan cek ProgrammableWeb API Directory.

Perhatikan bahwa tidak semua API cocok untuk dapat Anda gunakan, pelajari dulu spesifikasi API tersebut, apakah menggunakan JSON, berbayar atau gratis, butuh registrasi atau tidak, tingkat kompleksitas API, dsb.