Membuat Aplikasi Tizen Berbasis HTML5
Toni Haryanto 31 Agustus 2016
Salah satu keunggulan Tizen adalah ketersediaan Web API secara langsung untuk membuat aplikasi berbasis web. Seperti yang telah kita ketahui bahwa Tizen mendukung pengembangan aplikasi native menggunakan C/C++ dan aplikasi web dengan HTML5, CSS dan JavaScript. Pada tutorial Membuat Aplikasi Mobile Native Pertama di Tizen OS kita dapat melihat gambaran pembuatan aplikasi native pada Tizen menggunakan bahasa C. Mungkin bagi sebagian orang terutama yang belum pernah belajar bahasa C, akan cukup kesulitan saat pertama kali belajar. Sedangkan untuk teknologi HTML5 sudah lebih banyak orang yang belajar dan paham. Kalau Kamu sudah terbiasa dengan pemrograman web, tutorial kali ini akan sangat terasa akrab dan mudah.
Pada dasarnya Kamu bisa menggunakan framework JavaScript apapun untuk membuat aplikasi web seperti AngularJS, Backbone, VueJS, atau library JavaScript seperti jQuery dan jQuery Mobile. Kamu juga bisa menggunakan framework CSS seperti Bootstrap, Materialize dan Foundation, atau CSS buatanmu sendiri. Tapi pada tutorial ini, kita akan membuat aplikasi Tizen menggunakan Tizen Advanced UI Framework atau TAU. Framework ini didesain dengan tampilan seperti aplikasi native Tizen. Lebih lengkap tentang TAU dapat dilihat di https://developer.tizen.org/dev-guide/2.4/ bagian Web Application > Tizen Advanced UI Framework.
Bila Kamu baru mengenal Tizen kamu dapat membaca penjelasan tentang Tizen di artikel Mengenal Sistem Operasi Tizen. Dan untuk dapat mengikuti tutorial ini, Kamu harus menyiapkan terlebih dahulu perangkat pengembang aplikasi Tizen, yang mana panduan instalasinya dapat disimak pada tutorial Mengenal Perangkat Development untuk Membangun Aplikasi di Tizen OS.
Instalasi TAU di IDE
Untuk dapat menggunakan template project aplikasi web yang menggunakan framework TAU, kita harus menginstal terlebih dahulu package TAU di Tizen SDK. Buka Tizen Update Manager yang ada di folder instalasi Tizen. Kemudian buka tab All Package pada jendela Tizen Update Manager. Klik tombol Advanced di bagian sebelah kanan atas, sehingga muncul daftar package lain yang sebelumnya tersembunyi. Klik tombol Install pada package TAU (IDE) di dalam list 2.4 Mobile. Update manager akan mengunduh package tersebut, dan package lain yang menjadi dependensinya.
Mengenal Struktur Aplikasi
Contoh implementasi dari TAU dapat kita lihat di salah satu Online Sample yang dapat diunduh melalui Tizen IDE. Buka aplikasi Tizen IDE, lalu klik menu File > New > Tizen Web Project. Pilih tab Online Sample, lalu pilih template TAU UI Components. Klik tombol Download yang ada di sebelah kanan bagian deskripsi template. Tunggu hingga IDE selesai mengunduh. Kemudian klik tombol Finish.
Kita akan mendapatkan project yang berisi semua contoh implementasi komponen UI dari TAU. Bila kita perhatikan struktur file pada project web Tizen ini, sama seperti aplikasi web pada umumnya. Terdapat file index.html yang menjadi bagian utama dari aplikasi, disertai beberapa file pendukung lainnya.
Pada project, terdapat folder lib/ yang berisi library jQuery dan TAU. Pada project juga terdapat folder css/ tempat kita menyimpan asset CSS dan folder js/ tempat menyimpan asset JavaScript.
Menjalankan Aplikasi di Web Simulator
Kita dapat mencoba menjalankan aplikasi pada Tizen Emulator. Tapi khusus untuk aplikasi web, Tizen sudah menyediakan aplikasi khusus yaitu Tizen Web Simulator. Untuk dapat menjalankan Tizen Web Simulator, komputermu harus terinstall browser Google Chrome.Untuk menjalankan aplikasi pada Tizen Web Simulator, klik folder project di Project Explorer, lalu pilih menu Run > Run As > Tizen Web Application. Kamu juga dapat melakukan hal yang sama dengan mengklik ikon Run pada toolbar, lalu pilih menu Run As > Tizen Web Simulator Application. Maka Tizen Web Simulator akan muncul dan menampilkan aplikasimu.
Pada sample project ini kita dapat melihat semua komponen UI yang terdapat di TAU. Adapun source code dari setiap komponen terdapat di dalam folder components/ pada project. Kita lihat bahwa setiap halaman punya satu file html masing-masing. Adapun transisi antar halaman sudah ditangani oleh TAU.
Cara paling mudah untuk menggunakan komponen pada TAU adalah dengan merujuk pada sample project ini. Adapun untuk mendapatkan penjelasan lebih lengkap dari tiap komponennya, Kamu dapat langsung melihat ke panduannya di laman dev-guidenya di https://developer.tizen.org/dev-guide/2.4.
Debugging Aplikasi di Web Simulator
Tizen Web Simulator sudah menyediakan berbagai kebutuhan debugging dan testing aplikasi. Kita dapat mensimulasikan sensor akselerometer, pesan dan panggilan masuk, posisi GPS, jaringan, hingga status baterai. Dan karena aplikasi kita berbasis web, maka kita pun dapat melakukan debugging layaknya saat membangun aplikasi web pada umumnya menggunakan inspector bawaan webkit.
Membuat Aplikasi Pertama
Pada tutorial kali ini kita akan membuat aplikasi counter sederhana seperti pada tutorial native Tizen, dengan menambahkan beberapa fitur tambahan. Skenarionya adalah pengguna dapat membuat counter dengan judul apapun sesuai keinginan. Lalu pengguna dapat memulai menghitung sesuatu dengan penekan layar untuk meningkatkan angka counter. Setiap counter akan disimpan di dalam file untuk kemudian dapat dipanggil lagi dan dilanjutkan.Mendesain Tampilan
Langkah pertama adalah mendesain tampilan aplikasi. Kita akan membuat dua buah halaman. Halaman pertama adalah halaman counter yang menampilkan angka counter. Halaman kedua adalah halaman list counter apa saja yang sudah dibuat. Hasil akhir dari tampilan aplikasi dapat dilihat pada gambar berikut:
Pertama-tama buat sebuah project baru dengan mengklik menu File > New > Tizen Web Project. Kemudian pada tab Template, pilih template TAU SinglePage. Beri nama project lalu klik tombol Finish.
Buka file index.html lalu edit bagian konten body menjadi seperti berikut:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,user-scalable=no" /> <link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css"> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <title>Counter App</title> </head> <body> <div class="ui-page" id="main"> <div class="ui-header"> <h1>Counter</h1> <a href="#create-new" class="ui-header-btn ui-header-btn-right ui-header-btn-text"> LIST</a> </div> <!-- /header --> <div class="ui-content"> <div class="count-caption">Mobil Lewat</div> <div class="count-number">11</div> </div> <!-- /content --> </div> <!-- /page --> <script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script> <script src="./js/main.js"></script> </body> </html>
Selanjutnya buka file css/style.css kemudian tambahkan style berikut:
a {
text-decoration: none;
}
#main .ui-content {
text-align: center;
}
#main .ui-content .count-caption {
font-size: 30px;
color: white;
margin-top: 80px;
}
#main .ui-content .count-number {
font-size: 180px;
color: white;
}
.li-counter {
position: absolute;
top: 0;
right: 16px;
height: 100%;
line-height: 60px;
float: right;
text-align: right;
font-size: 16px;
}
Jalankan aplikasi di Web Simulator. Mestinya halaman akan muncul seperti gambar halaman pertama di atas.
Sekarang tambahkan lagi kode berikut tepat sebelum tag embed script tau.js:
<div class="ui-page" id="create-new"> <div class="ui-header"> <h1>Counter List</h1> <a href="#popup-new" data-inline="true" data-rel="popup" data-position-to="window" class="ui-header-btn ui-header-btn-right ui-header-btn-text">+ NEW</a> </div> <!-- /header --> <div class="ui-content"> <ul class="ui-listview"> <li id="sample" class="ui-li-static"> Mobil Lewat <span class="li-counter">11</span> </li> <li id="sample" class="ui-li-static"> Sarapan <span class="li-counter">23</span> </li> <li id="sample" class="ui-li-static"> Hari Kerja <span class="li-counter">212</span> </li> </ul> <div id="popup-new" class="ui-popup"> <div class="ui-popup-header">Create New Counter</div> <div class="ui-popup-content popup-content-padding"> <input type="text" placeholder="Counter name" id="countername" /> </div> <div class="ui-popup-footer ui-grid-col-2"> <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a> <a class="ui-btn" data-rel="back" data-inline="true" id=”addcounter”>Save</a> </div> </div> </div> <!-- /content --> </div> <!-- /page -->
Jalankan aplikasi, lalu coba tekan tombol List yang ada di kanan atas halaman aplikasi. Maka aplikasi akan berpindah ke halaman kedua. Di halaman kedua, klik lagi tombol +New di kanan atas halaman, maka aplikasi akan menampilkan popup berisi form untuk membuat counter baru.
Perhatikan bahwa setiap halaman pada aplikasi dibuat dari sebuah div dengan class ui-page. Sehingga berapa banyak pun halaman yang akan Kamu buat, Kamu cukup membuat elemen div dengan class ui-page.
Selain itu, perpindahan halaman dilakukan semudah membuat anchor dengan atribut href diarahkan ke id page yang dimaksud. Begitu pula dengan pembuatan popup. Perhatikan tambahan atribut lain pada anchor seperti data-inline dan data-rel harus disertakan pada elemen anchor.
Menambahkan Logika Program
Logika program dibangun dengan bahasa pemrograman JavaScript. Selain itu, kita juga dapat memanfaatkan Web API dari Tizen untuk melakukan operasi yang tidak dapat dilakukan oleh JavaScript pada umumnya seperti mengakses file sistem dan komponen perangkat seperti kamera dan sensor. Lebih lengkap tentang API apa saja yang bisa kita manfaatkan dalam membangun aplikasi web Tizen ini, dapat dilihat di laman https://developer.tizen.org/development/api-references/web-application.Menambahkan Library Zeptojs
Kita dapat menggunakan kode JavaScript native tanpa menggunakan library apapun. Kita juga dapat menggunakan library atau framework JavaScript seperti Angularjs dan jQuery untuk lebih memudahkan proses pembuatan aplikasi. Pada tutorial ini kita akan menggunakan library Zeptojs, library mirip jQuery tapi dengan ukuran file lebih kecil dan ramping dibanding jQuery. Untuk itu silakan download dulu Zeptojs dari websitenya http://zeptojs.com, kemudian simpan di dalam folder js/ pada project, dan embed script zeptojs ke dalam file index.html.<script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script> <script src="./js/zepto.min.js"></script> <script src="./js/main.js"></script>
Menambahkan Program JavaScript
Sekarang buka file js/main.js lalu tambahkan script berikut:var counter_id = ''; var counter = 0; var caption = "";Ketiga variabel di atas akan kita gunakan untuk menyimpan counter yang sedang aktif.
$('#addcounter').on('click', function(){
counter_id = makeid();
counter = 0;
caption = $('#countername').val();
$('ul.ui-listview').prepend('<li id="'+ counter_id +'" class="ui-li-static"><span class="li-caption">'+ caption +'</span><span class="li-counter">'+ counter +'</span></li>');
$('.count-caption').html(caption);
$('.count-number').html(counter);
$('#countername').val('');
$('#main .ui-content').show();
tau.changePage('main');
});
function makeid(){
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
for( var i=0; i < 5; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
Kode di atas berfungsi sebagai event listener untuk melakukan aksi ketika tombol Save pada saat menambah counter ditekan. Pertama-tama kita membuat id counter dari random string menggunakan fungsi makeid(). Kemudian kita menyimpan counter baru ke bagian atas list, menampilkan caption counter di halaman counter utama dan menampilkan halaman utama.
$('#main .ui-content').on('click', function(){
counter++;
$('.count-number').html(counter);
$('li#'+counter_id).children('.li-counter').html(counter);
});
Kode di atas berfungsi sebagai event listener pada saat area konten pada halaman tampilan counter utama ditekan. Angka pada counter akan bertambah setiap kali layar ditekan, begitu pula angka counter pada list yang terpilih.
$(document).on('click', '.ui-li-static', function(){
counter_id = $(this).attr('id');
counter = parseInt($(this).children('.li-counter').html());
$('.count-number').html(counter);
caption = $(this).children('.li-caption').html();
$('.count-caption').html(caption);
$('#main .ui-content').show();
tau.changePage('main');
});
Kode di atas kita buat untuk menangani event ketika pengguna memilih counter yang sudah ada di list counter. Kita mengganti caption dari nama counter aktif dan angkanya dengan nilai dari counter yang dipilih.
Sampai sini kita sudah dapat menjalankan aplikasi sesuai dengan skenario. Tapi bila aplikasi ditutup, semua counter yang sudah dibuat akan hilang. Oleh karena itu kita akan menyimpannya di penyimpanan local. Cara paling mudah adalah dengan menggunakan local storage bawaan HTML.
function saveCounterList() {
var mycontents = [];
$('.ui-li-static').each(function() {
mycontents.push({
counter_id : $(this).attr('id'),
caption : $(this).children('.li-caption').html(),
counter : $(this).children('.li-counter').html()
});
});
localStorage.setItem('content', JSON.stringify(mycontents));
}
Kode di atas adalah fungsi untuk menyimpan semua data yang sudah ada di list ke dalam local storage. Fungsi ini akan kita panggil ketika aplikasi hendak ditutup. Untuk itu tambahkan satu baris fungsi kode untuk memanggil fungsi ini sebelum baris kode untuk menutup aplikasi.
$( function () {
window.addEventListener( 'tizenhwkey', function( ev ) {
if( ev.keyName === "back" ) {
var activePopup = document.querySelector( '.ui-popup-active' ),
page = document.getElementsByClassName( 'ui-page-active' )[0],
pageid = page ? page.id : "";
if( pageid === "main" && !activePopup ) {
try {
// simpan data sebelum aplikasi ditutup
saveCounterList();
tizen.application.getCurrentApplication().exit();
} catch (ignore) {
}
} else {
window.history.back();
}
}
});
}());
Kita juga dapat memanggil fungsi saveCounterList() di event manapun pada aplikasi yang mungkin dapat dipanggil tanpa memberatkan aplikasi, atau membuat timer untuk menyimpan data setiap kurun waktu tertentu.
function loadCounterList() {
var content;
content = JSON.parse(localStorage.getItem('content'));
content.forEach(function(e){
counter_id = e.counter_id;
counter = e.counter;
caption = e.caption;
$('ul.ui-listview').prepend('<li id="'+ counter_id +'" class="ui-li-static"><span class="li-caption">'+ caption +'</span><span class="li-counter">'+ counter +'</span></li>');
$('.count-caption').html(caption);
$('.count-number').html(counter);
});
}
loadCounterList();
Kode fungsi di atas digunakan untuk memuat data yang sudah tersimpan sebelumnya ke dalam aplikasi pada saat aplikasi pertama kali dijalankan.
Terakhir, kita modifikasi konten pada file index.html agar aplikasi berjalan mulus. Pertama tambahkan kode inline style pada elemen counter utama agar saat pertama kali dijalankan, aplikasi tidak menampilkan counter yang tidak terdaftar.
<div class="ui-content" style=”display:none”> <div class="count-caption">Mobil Lewat</div> <div class="count-number">11</div> </div>
Terakhir hapus semua konten dummy untuk list counter, hanya counter yang terdaftar di local storage saja yang dimuat.