Membuat Aplikasi Android Jadwal Waktu Sholat dan Imsak Menggunakan Intel XDK
Ridwan Fajar 23 Mei 2016
Cross-platform development merupakan salah satu teknologi dimana aplikasi untuk perangkat telepon pintar dapat dikembangkan menggunakan satu kumpulan teknologi dan dapat dihasilkan menjadi aplikasi untuk banyak platform dengan kode program yang sama. Beberapa teknologi yang biasa digunakan untuk cross-platform development adalah teknologi web dan sebuah library Java yang bernama Cordova yang dirilis oleh Apache Foundation. Teknologi web yang biasa digunakan antara lain HTML, CSS, dan Javascript. Kemudian untuk pengemasan aplikasi tersebut akan dibantu oleh Apache Cordova. Aplikasi yang biasa dikembangkan menggunakan alat - alat ini biasa disebut dengan hybrid apps.
Banyak vendor yang mulai menawarkan perkakas dengan sejumlah keunggulannya untuk membangun aplikasi hybrid. Intel merilis sebuah perkakas yang disebut dengan Intel XDK sejak 2013. Intel XDK tidak hanya menyediakan berbagai template untuk membangun aplikasi hybrid, Intel XDK pun memiliki integrated development environment sendiri yang dilengkapi oleh ui designer, kumpulan emulator berbagai smarpthone dan tablet yang menggunakan prosesor intel, cloud testing tool, debugging tool, building tool, dan publishing tool. Template yang disediakan ada beberapa pilihan yang dapat digunakan, antara lain AppFramework UI, jQuery Mobile, Ratchet, dan Ionic Framework.
Menjelang bulan Ramadhan, CodePolitan akan mengajak Anda untuk membuat sebuah aplikasi jadwal shalat yang dapat digunakan di smartphone Android. Untuk keperluan tutorial ini, kita hanya akan menggunakan wilayah Bandung saja. Penggunaan deteksi lokasi menggunakan smartphone akan dibahas di tutorial lainnya.
Setelah mengikuti tutorial ini, Kamu diharapkan dapat membuat aplikasi Android dengan idemu sendiri terkait Ramadhan yang nantinya bisa Kamu ikut sertakan pada kompetisi Indonesia Ramadhan Challenge. Kamu juga dapat belajar lebih dalam lagi terkait membuat aplikasi Android berbasis HTML5 dengan Intel XDK di academy Android HTML5 dengan Intel XDK.
Peralatan yang Diperlukan
Untuk mengikuti tutorial ini Anda memerlukan beberapa alat sebagai berikut:- Intel XDK
- Dokumentasi App Framework UI
- Dokumentasi jQuery
- Koneksi Internet yang cukup, silahkan cari koneksi wi-fi di kampus atau kantor dimana Anda bekerja
- Sebuah device Android
- Informasi jadwal shalat dari http://muslimsalat.com. Informasi yang akan diambil adalah informasi jadwal shalat hari ini dan bulan ini.
[caption id="attachment_9732" align="alignnone" width="700"]
Anda harus mendaftarkan diri ke Intel Developer untuk menggunakan fitur Intel XDK lainnya[/caption]
Memulai Proyek Jadwal Shalat dengan Intel XDK
Anda dapat memasang Intel XDK dengan mencari file installer di bundelan Intel XDK yang sudah Anda download. Anda tinggal mengikuti alur instalasi seperti dimana menaruh file - file hasil instalasi dan mencari folder yang akan menjadi tempat proyek Anda. Begitu selesai melakukan instalasi, Anda dapat membuka Intel XDK dan voilla, Anda harus melakukan login terlebih dahulu, apabila terkoneksi dengan internet. Hal ini dilakukan agar Anda dapat menggunakan beberapa fitur Intel XDK seperti build tools dan cloud testing tools. Sesudah Anda melakukan login Anda dapat mulai membuat proyek aplikasi mobile.Untuk membuat proyek baru, Anda dapat menekan tombol "Start A New Project" yang berada di bawah kiri halaman depan proyek. Anda dapat memilih beberapa template yang terdiri dari blank, layout and user interface, dan games. Kita akan menggunakan side menu app yang berada di layout and user interface. Kemudian pilih template tersebut dan tekan tombol "Continue". Setelah itu akan muncul form dimana Anda akan diminta untuk menentukan lokasi tempat penyimpanan proyek. Simpanlah di tempat yang Anda inginkan, dan kita akan menamai aplikasi ini dengan nama my_shalat.
[caption id="attachment_9733" align="alignnone" width="700"]
Halaman awal Intel XDK[/caption]
[caption id="attachment_9734" align="alignnone" width="700"]
Memilih template aplikasi di Intel XDK, pilih "Side Menu"[/caption]
[caption id="attachment_9735" align="alignnone" width="700"]
Menunggu template disiapkan sebelum coding[/caption]
Setelah membuat proyek, Anda akan melihat sebuah text editor yang cantik, dan ternyata aplikasi tersebut adalah Bracket yang telah ditanamkan di Intel XDK. Anda akan melihat sebuah potongan kode awal side menu apps dan Anda dapat langsung menjalankan emulator untuk melihat preview aplikasi dari kode program tersebut. Anda dapat mencoba menggunakan berbagai emulator yang telah disediakan oleh Intel XDK. Berikut adalah kode awalan dari side menu apps:
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>App Framework Kitchen Sink</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="lib/appframework/icons.css" />
<link rel="stylesheet" type="text/css" href="lib/appframework/af.ui.css" />
<script type="text/javascript" charset="utf-8" src="lib/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/fastclick.min.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/appframework/appframework.ui.min.js"></script>
<script src='cordova.js'></script>
</head>
<body>
<div id="splashscreen" class='ui-loader heavy'>
App Framework
<br>
<br>
<span class='ui-icon ui-icon-loading spin'></span>
<h1>Starting app</h1>
</div>
<div class="view splitview">
<header>
<a class="menuButton" data-left-menu="left" data-transition="cover" style="float:right"></a>
<h1>Title</h1>
</header>
<div class="pages">
<div class="panel" id="main" data-title="Main" data-selected="true">
This is main page
</div>
<div class="panel" id="page2" data-title="Page 2">
This is Page 2
</div>
</div>
<nav id="left">
<div class="view active">
<header>
<h1>Left</h1>
</header>
<div class="pages">
<div class="panel active" id="navPage1" data-title="Foobar">
<ul class="list">
<li><a href="#main" onclick="$.afui.clearHistory()">Main Page</a></li>
<li><a href="#page2" onclick="$.afui.clearHistory()">Page Two</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
[caption id="attachment_9736" align="alignnone" width="363"]
Struktur proyek di Intel XDK[/caption]
[caption id="attachment_9737" align="alignnone" width="700"]
Kode awal aplikasi di Text Editor Bracket yang terintegrasi dengan Intel XDK[/caption]
[caption id="attachment_9738" align="alignnone" width="700"]
Menjalankan aplikasi dengan emulator ASUS Zenfone yang disedikan oleh Intel XDK[/caption]
Membuat Halaman Jadwal Shalat Hari Ini
Salah satu achievment terbesar kita saat ini adalah bagaimana memulai tahap coding untuk membuat aplikasi hybrid menggunakan Intel XDK. Di aplikasi yang akan kita bangun ini, akan kita awali dengan membuat sebuah halaman utama yang berisi informasi jadwal shalat hari ini. Pertama yang Anda harus lakukan adalah mengubah isi dari side menu dengan kode berikut yang akan menampilkan empat menu yaitu Harian, Bulanan, Info Lainya, dan Tentang:Kemudian tambahkan juga sebuah panel baru dibawah div dengan class pages dan beri id main. Jangan lupa beri data-title "Hari Ini" agar dapat muncul di header bar saat melihat halaman jadwal shalat hari ini. Di dalam panel tersebut terdapat sebuah card yang akan muncul sebagai kotak saat melihat informasi jadwal shalat hari ini. Kemudian dengan menggunakan unordered list, kita tampilkan informasi waktu imsak, shubuh, syuruk, dzuhur, ashar, maghrib, dan isya. Berikut adalah kode untuk halaman jadwal shalat hari ini:// .............................................. ADA KODE SEBELUMNYA<nav id="left"> <div class="view active"> <header> <h1>My Shalat</h1> </header> <div class="pages"> <div class="panel active" id="navPage1" data-title="Foobar"> <ul class="list"> <li><a id="harian-btn" href="#main" onclick="$.afui.clearHistory()">Harian</a></li> <li><a id="bulanan-btn" href="#page2" onclick="$.afui.clearHistory()">Bulanan</a></li> <li><a id="info-lainnya-btn" href="#page3" onclick="$.afui.clearHistory()">Info Lainnya</a></li> <li><a href="#page4" onclick="$.afui.clearHistory()">Tentang</a></li> </ul> </div> </div> </div> </nav> </div></body>
</html>
// .............................................. ADA KODE SEBELUMNYA
<div class="pages">
<div class="panel" id="main" data-title="Hari Ini" data-selected="true">
<div class="card" style="margin-top:20px;">
<h1>Jadwal Shalat</h1>
<hr/>
<ul style="list-style-type:none;margin-top:5px;">
<li>
<p style="font-size:20px;"><b>Imsak</b> 04.15</p>
</li>
<li>
<p style="font-size:20px;"><b>Subuh</b> <span id="main-subuh">...</span></p>
</li>
<li>
<p style="font-size:20px;"><b>Syuruk</b> <span id="main-syuruk">...</span></p>
</li>
<li>
<p style="font-size:20px;"><b>Dzuhur</b> <span id="main-dzuhur">...</span></p>
</li>
<li>
<p style="font-size:20px;"><b>Ashar</b> <span id="main-ashar">...</span></p>
</li>
<li>
<p style="font-size:20px;"><b>Maghrib</b> <span id="main-maghrib">...</span></p>
</li>
<li>
<p style="font-size:20px;"><b>Isya</b> <span id="main-isya">...</span></p>
</li>
</ul>
</div>
</div>
// .............................................. ADA KODE SETELAH INI
Belum berhenti sampai disini, kode diatas masih berupa rangka kosong yang belum dapat menampilkan informasi shalat dari API muslimsalat.com. Kita harus menambahkan kode Javascript untuk mengolah informasi dari API yang didapatkan melalui HTTP Request yang dimiliki oleh jQuery. Sekarang Anda harus membuat sebuah file dengan nama apps.jsdi folder www/lib. Selain itu Anda juga membutuhkan sebuah library Javascript yang dipergunakan untuk menghitung waktu agar lebih mudah, yaitu Moment.js. Anda dapat mengunduhnya di http://momentjs.com/, kemudian tempatkan Moment.js di folder www/lib di dalam folder proyek my_shalat.
Sekarang Anda dapat mulai menulis kode Javascript berikut di dalam file apps.js:
var base_url = "http://muslimsalat.com/bandung/";
$(document).ready(function(){
load_jadwal_harian();
$('#harian-btn').bind('tap', function(){
console.log('harian diklik...');
load_jadwal_harian();
});
});
function load_jadwal_harian()
{
var raw_date = new Date();
var month = raw_date.getMonth()+1;
var today_date = raw_date.getUTCFullYear()+'-'+month+'-'+raw_date.getUTCDate();
setTimeout(function(){
var results = $.getJSON(base_url+today_date+'/daily.json').success(function(){
var imsak_time = moment(today_date + " " + results.responseJSON.items[0].fajr).subtract(10, 'minutes').format('H:m');
$('#main-imsak').html(imsak_time + " am");
$('#main-subuh').html(results.responseJSON.items[0].fajr);
$('#main-syuruk').html(results.responseJSON.items[0].shurooq);
$('#main-dzuhur').html(results.responseJSON.items[0].dhuhr);
$('#main-ashar').html(results.responseJSON.items[0].asr);
$('#main-maghrib').html(results.responseJSON.items[0].maghrib);
$('#main-isya').html(results.responseJSON.items[0].isha);
});
}, 1000);
}
Anda dapat melihat bahwa untuk menampilkan jadwal shalat hari ini, function jadwal_harian() akan dieksekusi saat aplikasi pertama kali dimuat dan ketika kita mengklik tombol "Harian" di side menu. Tombol "Harian" diikatkan dengan event yang bernama tap, yaitu event ketika pengguna menekan tombol di touchscreen device miliknya. Jadwal shalat hari ini akan diambil melalui URL http://muslimsalat.com/bandung/daily.json, kemudian akan diambil menggunakan $.getJSON(). Kemudian hasil pengambilan API akan ditampung di method success() dan dimulailah pengambilan informasi setiap jadwal shalat dan ditampilkan ke masing - masing elemen yang akan menampilkan waktu shalat. Untuk waktu imsak, digunakan Moment.js yang akan membantu pengurangan waktu 10 menit dari waktu subuh untuk penentuan waktu imsak. Berikut adalah tampilan aplikasi ketika dilihat dari emulator:
[caption id="attachment_9739" align="alignnone" width="700"]
Melihat halaman jadwal shalat hari ini di emulator[/caption]
[caption id="attachment_9740" align="alignnone" width="700"]
Melihat side menu yang muncul ketika menekan tombol menu yang ada di pojok kanan[/caption]
Membuat Halaman Jadwal Shalat Bulan Ini'
Hampir sama dengan halaman jadwal shalat hari ini. Halaman jadwal shalat bulan ini akan menampilkan jadwal shalat pada tanggal tertentu. Sebelum memasuki halaman tersebut, Anda akan dihadapkan pada daftar hari di bulan ini. Ketika Anda menekan tombol "Bulanan" pada side menu, Anda akan melihat sebuah list view yang merupakan daftar tanggal yang tersedia di bulan saat ini. Kemudian Anda dapat menekan tanggal manapun dan melihat jadwal shalat pada bulan tersebut. Daftar tanggal di bulan saat ini akan direpresentasikan menggunakan unordered list dengan id daftar-tanggal. Sedangkan halaman detail jadwal shalat pada tanggal tertentu hampir sama dengan kode HTML jadwal shalat hari ini, hanya saja setiap id yang memiliki awalan main- diganti menjadi monthly-. Berikut adalah kode HTML untuk daftar tanggal yang tersedia di bulan ini dan halaman detail jadwal shalat pada tanggal tersebut (silahkan edit file index.html sebelumnya):Seperti biasa, kode diatas hanya baru untuk tampilan saja, kita membutuhkan kode Javascript untuk menampilkan list view hari di bulan ini, dan menampilkan jadwal shalat sesuai hari yang dipilih. Berikut adalah kode Javascript yang akan digunakan di halaman jadwal shalat bulan ini (silahkan edit apps.js sebelumnya):// .............................................. ADA KODE SEBELUMNYA<div class="panel" id="page2" data-title="Bulan Ini"> <ul id="daftar-tanggal" class="list"> <li>Now Loading...</li> </ul> </div> <div class="panel" id="page5" data-title="My Shalat"> <div class="card" style="margin-top:20px;"> <h1>Jadwal Shalat</h1> <hr/> <ul style="list-style-type:none;margin-top:5px;"> <li> <p style="font-size:20px;"><b>Imsak</b> 04.15</p> </li> <li> <p style="font-size:20px;"><b>Subuh</b> <span id="monthly-subuh">...</span></p> </li> <li> <p style="font-size:20px;"><b>Syuruk</b> <span id="monthly-syuruk">...</span></p> </li> <li> <p style="font-size:20px;"><b>Dzuhur</b> <span id="monthly-dzuhur">...</span></p> </li> <li> <p style="font-size:20px;"><b>Ashar</b> <span id="monthly-ashar">...</span></p> </li> <li> <p style="font-size:20px;"><b>Maghrib</b> <span id="monthly-maghrib">...</span></p> </li> <li> <p style="font-size:20px;"><b>Isya</b> <span id="monthly-isya">...</span></p> </li> </ul> </div> </div>
// .............................................. ADA KODE SETELAH INI
$(document).ready(function(){
// ............................ ADA KODE SEBELUM INI
$('#bulanan-btn').bind('tap', function(){
console.log('bulanan diklik...');
setTimeout(function(){
var results = $.getJSON(base_url+'monthly.json').success(function(){
json_data = results.responseJSON.items;
// load daftar hari di bulan tertentu
var elem = "";
$('#daftar-tanggal').html('');
for (var i = 0; i < json_data.length; i++)
{
var item = json_data[i];
elem = '<li><a id="jadwal_shalat_'+i+'" data-jadwal="'+item.date_for+'" href="#page5">'+item.date_for+'</a></li>';
$('#daftar-tanggal').append(elem);
}
// memasang event lihat jadwal pada daftar hari di bulan tertentu
for (var i = 0; i < json_data.length; i++)
{
var item = json_data[i];
$('#jadwal_shalat_'+i.toString()).bind('tap', function(){
console.log('jadwal shalat diklik...');
load_jadwal(this);
});
}
elem = null;
});
}, 1000);
});
});
// ............................ ADA KODE SEBELUM INI
function load_jadwal(elem)
{
var req_date = $(elem).attr('data-jadwal');
setTimeout(function(){
$.afui.setTitle(req_date);
var results = $.getJSON(base_url+req_date+'/daily.json').success(function(){
var imsak_time = moment(req_date + " " + results.responseJSON.items[0].fajr).subtract(10, 'minutes').format('H:m');
$('#monthly-imsak').html(imsak_time + " am");
$('#monthly-subuh').html(results.responseJSON.items[0].fajr);
$('#monthly-syuruk').html(results.responseJSON.items[0].shurooq);
$('#monthly-dzuhur').html(results.responseJSON.items[0].dhuhr);
$('#monthly-ashar').html(results.responseJSON.items[0].asr);
$('#monthly-maghrib').html(results.responseJSON.items[0].maghrib);
$('#monthly-isya').html(results.responseJSON.items[0].isha);
});
}, 1000);
}
Saat kita menekan tombol "Bulanan" di side menu, aplikasi akan mengambil resource dari URL http://muslimsalat.com/monthly.json dan akan menerima sebuah JSON yang berisi jadwal shalat yang tersedia di bulan ini selama beberapa hari kedepan. Kemudian tanggal - tanggal tersebut diparsing dan disusun menjadi sebuah elemen li yang akan disimpan di elemen daftar-tanggal. Jangan lupa setelah menyusun daftar tanggal, kita harus mengikatkan setiap elemen pada sebuah event yang akan melakukan pengambilan jadwal shalat pada tanggal yang dipilih.
Function load_jadwal() tidak berbeda jauh dengan function load_jadwal_harian(). Di dalam function load_jadwal() terdapat pengambilan resource dari URL http://muslimsalat.com/tanggal_yang_diinginkan/monthly.json. Kemudian terdapat juga sebuah kode $.afui.setTitle() yang akan mengatur teks di header bar menjadi tanggal yang dipilih saat mengunjungi halaman jadwal shalat bulan ini. Berikut adalah hasil preview aplikasi dari kode diatas:
[caption id="attachment_9742" align="alignnone" width="700"]
daftar tanggal yang tersedia di bulan ini[/caption]
[caption id="attachment_9741" align="alignnone" width="700"]
jadwal shalat di tanggal tertentu[/caption]
Membuat Halaman Info Lainnya
Untuk halaman info lainnya, kita tetap memanfaatkan informasi yang sama seperti dari halaman jadwal hari ini. Hanya saja data yang kita ambil adalah data cuaca hari ini. Berikut adalah komponen dari halaman info lainnya yang memperlihatkan lokasi, suhu dan tekanan udara, arah kiblat, dan metode penentuan waktu shalat:Sedangkan kode dibawah ini adalah kode Javascript untuk menampilkan data cuaca dan info tambahan di halaman info lainnya:// .............................................. ADA KODE SEBELUMNYA<div class="panel" id="page3" data-title="Info Lainnya"> <ul class="list"> <li> <h3>Lokasi</h3> <p id="other-info-location">-</p> </li> <li> <h3>Suhu Udara</h3> <p id="other-info-temperature">-</p> </li> <li> <h3>Tekanan Udara</h3> <p id="other-info-pressure">-</p> </li> <li> <h3>Arah Kiblat</h3> <p id="other-info-qibla">-</p> </li> <li> <h3>Metode Penentuan Waktu Shalat</h3> <p id="other-info-prayer-method-name">-</p> </li> </ul> </div>
// .............................................. ADA KODE SETELAH INI
$(document).ready(function(){
// ......................................... ADA KODE SEBELUM INI
$('#info-lainnya-btn').bind('tap', function(){
console.log('info lainnya diklik...');
var raw_date = new Date();
var month = raw_date.getMonth()+1;
var today_date = raw_date.getUTCFullYear()+'-'+month+'-'+raw_date.getUTCDate();
var results = $.getJSON(base_url+today_date+'/daily.json').success(function(){
$('#other-info-temperature').html(results.responseJSON.today_weather.temperature + " derajat celsius");
$('#other-info-pressure').html(results.responseJSON.today_weather.pressure + " cmHg");
$('#other-info-qibla').html(results.responseJSON.qibla_direction + " derajat dari utara");
$('#other-info-location').html( results.responseJSON.query + ", " + results.responseJSON.state + ", " + results.responseJSON.country + " (" + results.responseJSON.latitude + ", " + results.responseJSON.longitude + ")");
$('#other-info-prayer-method-name').html(results.responseJSON.prayer_method_name);
});
});
});
Berikut adalah preview dari halaman info lainnya di emulator:
[caption id="attachment_9743" align="alignnone" width="700"]
melihat info cuaca dan info shalat lainnya[/caption]
Membuat Halaman Tentang Aplikasi
Untuk halaman Tentang, tidak diperlukan kode Javascript karena kita hanya melihat teks statis yang berisi informasi tentang aplikasi. Di halaman tersebut terdapat informasi siapa pengembangnya dan dengan apa aplikasi tersebut dibangun.Berikut adalah preview aplikasi dari halaman Tentang di emulator:// .............................................. ADA KODE SEBELUMNYA<div class="panel" id="page4" data-title="Tentang"> <h2>My Shalat</h2> <hr/> <p>My Shalat adalah sebuah aplikasi yang didedikasikan bagi pembaca CodePolitan untuk memulai membuat aplikasi mobile berbasis HTML5.</p> <p>My Shalat dikembangkan menggunakan App Framework UI dengan bantuan Intel XDK. API jadwal shalat yang digunakan berasal dari http://muslimsalat.com</p> </div> </div>
// .............................................. ADA KODE SETELAH INI
[caption id="attachment_9744" align="alignnone" width="700"]
melihat halaman tentang aplikasi yang dibuat[/caption]
Melakukan Pengujian Aplikasi di Smartphone
Pengujian aplikasi di Intel XDK tentu saja membutuhkan device terkait, dalam hal ini Android. Android yang Anda butuhkan minimal mempunyai sistem operasi Jelly Bean. Untuk melakukan pengujian sebelum memasang aplikasi dalam bentuk apk. Anda harus memasang sebuah aplikasi yang bernama AppPreview. Anda dapat memasangnya dari Google Play. Setiap proyek aplikasi yang kita buat di Intel XDK akan diunggah ke cloud dan dapat dilihat di AppPreview. Tentu saja kita dapat menjalankan aplikasi tersebut namun masih berupa WebView. untuk melihat langsung bagaimana hasilnya dalam bentuk apk, Anda harus melakukan proses build aplikasi menggunakan building tools.Tidak hanya melakukan pengujian di dalam AppPreview, Anda pun dapat menggunakan profiling dan remote debugging tool yang disediakan Intel XDK. Praktisnya, aplikasi Anda akan di-build menggunakan cloud building tools milik Intel XDK dan hasilnya akan diunduh kembali untuk kemudian dipasang di device yang terhubung dengan laptop. Ketika melakukan profiling Anda dapat merekam penggunaan aplikasi Anda selama beberapa menit, kemudian setelah perekaman dihentikan, maka akan muncul penggunaan resource dari device Anda seperti penggunaan CPU, RAM, dan GPU.
[caption id="attachment_9745" align="alignnone" width="700"]
Memulai profiling aplikasi di device yang terhubung dengan laptop di Intel XDK[/caption]
[caption id="attachment_9746" align="alignnone" width="700"]
Menunggu proses persiapan profiling aplikasi di Intel XDK[/caption]
[caption id="attachment_9747" align="alignnone" width="700"]
profiling aplikasi sudah siap dan tinggal tekan tombol record untuk merekam segala penggunaan resource di device[/caption]
[caption id="attachment_9748" align="alignnone" width="700"]
melihat hasil profiling aplikasi dari device yang terhubung ke laptop[/caption]
Sedangkan ketika Anda menggunakan debugging tools, Anda dapat dengan mudah melihat bagaimana informasi yang lalu lalang ketika terjadi proses HTTP request, Anda pun dapat melihat secara live bagaimana aplikasi yang Anda gunakan muncul di layar komputer dan Anda pun dapat mengendalikan aplikasi dari layar komputer. Mirip dengan cara penggunaan team viewer. Anda pun dapat melihat kode error yang muncul di bagian console secara real time sehingga Anda dapat mencari masalah dan kode program error saat melakukan debugging secara live.
[caption id="attachment_9749" align="alignnone" width="700"]
Memulai remote debugging di device asli[/caption]
[caption id="attachment_9750" align="alignnone" width="700"]
Melihat halaman jadwal shalat dari remote debugger[/caption]
[caption id="attachment_9751" align="alignnone" width="700"]
mencoba side menu dari remote debugger dan side menu di device asli pun ikut bergerak[/caption]
[caption id="attachment_9752" align="alignnone" width="700"]
melihat aliran paket data ketika membuka halaman daftar jadwal shalat di bulan ini[/caption]
Melakukan Pengemasan Aplikasi untuk Android
Untuk melakukan pengemasan aplikasi, Intel XDK mengharuskan Anda untuk membuat sebuah developer certificate yang akan dijadikan pengenal bahwa aplikasi yang akan Anda build adalah asli buatan Anda. Kemudian Anda harus menyertakan certificate tersebut pada aplikasi Anda. Kemudian pilih menu Build untuk memilih platform mana sajakah yang akan Anda tuju untuk aplikasi my_shalat. Untuk saat ini kita pilih Android saja, ketika memilih Anda diminta untuk memasukkan passphrase yang merupakan password untuk developer certificate yang Anda miliki.[caption id="attachment_9754" align="alignnone" width="700"]
Form untuk membuat developer certificate yang akan dipergunakan untuk proses build aplikasi[/caption]
[caption id="attachment_9753" align="alignnone" width="700"]
menunggu proses unlocking developer certificate[/caption]
[caption id="attachment_9755" align="alignnone" width="700"]
unlocking developer certificate berhasil[/caption]
Setelah selesai mencentang Android pada halaman Build, sekarang tinggal menekan tombol "Start Build" dan menunggu hasilnya. Begitu proses building selesai, Anda dapat melihat log untuk memastikan apakah ada masalah pada proses building aplikasi. Kemudian Anda dapat mengunduh apk yang sudah dibuatkan oleh Intel XDK dan kita akan mengujinya di device Android langsung. Berikut adalah hasil instalasi my_shalat di device Android dengan sistem operasi Jelly Bean:
[caption id="attachment_9756" align="alignnone" width="700"]
Memulai proses build aplikasi dengan menekan tombol "Start Build"[/caption]
[caption id="attachment_9757" align="alignnone" width="439"]
Proses build selesai, Anda dapat mengunduh aplikasi, mengirimkan link download aplikasi, ataupun membagikan aplikasi yang telah Anda kerjakan di sosial media[/caption]
[caption id="attachment_9758" align="alignnone" width="700"]
melihat log hasil proses build aplikasi[/caption]
[caption id="attachment_9759" align="alignnone" width="307"]
Sekarang mari kita download aplikasi yang telah dibuat[/caption]
Memasang Aplikasi Hasil Build di Device Asli
Berikut adalah screenshot untuk pemasangan aplikasi di perangkat Android dengan sistem operasi Jelly Bean:[caption id="attachment_9772" align="alignnone" width="420"]
Mengkopi installer hasil build ke device[/caption]
[caption id="attachment_9773" align="alignnone" width="420"]
Memasang aplikasi dengan package installer[/caption]
[caption id="attachment_9774" align="alignnone" width="420"]
Melihat permission yang dibutuhkan sebelum instalasi[/caption]
[caption id="attachment_9775" align="alignnone" width="420"]
Menungggu proses instalasi[/caption]
[caption id="attachment_9776" align="alignnone" width="420"]
Aplikasi sudah terpasang dan siap digunakan[/caption]
[caption id="attachment_9777" align="alignnone" width="420"]
Aplikasi sudah terpasang di halaman menu[/caption]
Berikut adalah screenshot smartphone yang sudah terpasang dengan aplikasi My Shalat:
[caption id="attachment_9763" align="alignnone" width="420"]
Melihat halaman jadwal shalat di smartphone berbasis Android Jellybean[/caption]
[caption id="attachment_9764" align="alignnone" width="420"]
Melihat halaman jadwal shalat bulan ini di smartphone berbasis Android Jellybean[/caption]
[caption id="attachment_9765" align="alignnone" width="420"]
Melihat halaman jadwal shalat shalat bulan di smartphone berbasis Android Jellybean[/caption]
[caption id="attachment_9766" align="alignnone" width="420"]
Melihat halaman info lainnya di smartphone berbasis Android Jellybean[/caption]
[caption id="attachment_9767" align="alignnone" width="420"]
Melihat halaman tentang di smartphone berbasis Android Jellybean[/caption]
[caption id="attachment_9768" align="alignnone" width="420"]
Melihat side menu di smartphone berbasis Android Jellybean[/caption]
[caption id="attachment_9778" align="alignnone" width="525"]
Memasang aplikasi My Shalat di Redmi Note 3[/caption]
[caption id="attachment_9779" align="alignnone" width="525"]
Memasang aplikasi My Shalat di Mi4i[/caption]
Penutup
Di dalam tutorial ini tentu saja masih banyak kekurangan, diantaranya belum adanya dukungan untuk menentukan lokasi dimana kita berada, atau melakukan deteksi lokasi dimana saat ini kita berada. Hal tersebut akan membantu bagi seseorang yang bepergian untuk mendapatkan waktu shalat yang lebih sesuai. Selain itu dengan memanfaatkan beberapa API yang ada pada Cordova, kita dapat membuat sebuah Alarm yang dapat memberitahu pengguna untuk lebih sigap ketika waktu shalat tiba.Tidak hanya itu di tutorial ini pun belum dibahas bagaimana melakukan publishing aplikasi yang telah kita bangun sebelumnya. Di kesempatan berikutnya akan dibahas bagaimana kita mempublish aplikasi Intel XDK di Google Play. Untuk menambah koleksi Anda, berikut adalah beberapa referensi yang bisa Anda manfaatkan untuk belajar lebih jauh bagaimana mengembangkan aplikasi hybrid menggunakan Intel XDK:
- Intel Developer Zone
- Intel App Framework Guide
- Intel App Framework API
- Intel XDK Documentation
- Intel XDK Getting Started
(rfs)