Pemrograman Mobile dengan Intel XDK

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 :

...

$.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:

Buat inputan kota & negara sebagai combobox (elemen <select>), sehingga pengguna tidak perlu mengetik
Lebih canggih lagi kalau Anda bisa mengimplementasikan inputan menggunakan select2 autocomplete
Tampilkan informasi lain (kelembaban, dsb.)
Tampilkan beberapa kota sekaligus
Tampilkan perkiraan cuaca beberapa hari ke depan (lihat dokumentasi OpenWeatherMap)
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.

1. Download promise-x.x.x.min.js dari https://github.com/jakearchibald/es6-promise

2. Masukkan file promise-x-x-.min.js ke dalam project Anda di direktori www/js/

3. Download pouchdb-x.x.x.min.js dari https://github.com/daleharvey/pouchdb/releases

4. Masukkan file pouchdb-x.x.x.min.js ke dalam project Anda di direktori www/js/

5. Tambahkan reference ke promise dan PouchDB di index.html : (sesuaikan versinya ya)

<script src="js/promise-0.1.1.min.js"></script><script src="js/pouchdb-2.0.1.min.js"></script>

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

$(document).ready(function() {

});

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

...

$(document).ready(function () {
if ($.ui.useOSThemes && (!$.os.ios||$.os.ios7))
$("#afui").removeClass("ios");
});
</script>
<script src="js/promise-0.1.1.min.js"></script>
<script src="js/pouchdb-2.0.1.min.js"></script>
<script src="js/app.js"></script>
...

7. Edit file www/js/app.js, dan tambahkan code untuk bootstrap PouchDB, sesuai nama aplikasi Anda, misalnya:

$(document).ready(function() {
statusDb = new PouchDB('status');
});

Coming soon: lanjutan tutorial PouchDB bagian 2...

Referensi: Dokumentasi PouchDB

Pemrograman Mobile dengan Intel XDK

Thursday, March 27, 2014

Tutorial JSON via HTTP - Prakiraan Cuaca

Tutorial PouchDB (bagian 1)

Apa itu PouchDB dan Fungsinya?