Skip to main content
belajar-membuat-aplikasi-android-html5-dengan-intel-xdk

Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK – Bagian 2

Pada tutorial sebelumnya di Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK – Bagian 1 saya sudah memberikan penjelasan singkat mengenai fungsi-fungsi dan cara menggunakan Intel XDK. Dalam tutorial kedua ini dengan judul Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK – Bagian 2, saya akan langsung menjelaskan bagaimana cara membuat aplikasi Android sederhana yang interaktif.

Untuk mengikuti tutorial ini, pastikan kalian sudah mengikuti 2 tutorial sebelumnya yang dapat kalian baca melalui tautan berikut.

Maaf, artikel ini sudah tidak relevan. Terhitung semenjak 30 Juni 2017 Intel XDK sudah berstatus depracated/stop support oleh Intel, sehingga menyebabkan Intel XDK sudah tidak bisa digunakan untuk melakukan pengembangan aplikasi mobile.

Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK – Bagian 2

Dalam tahap ini, saya akan menjelaskan bagaimana cara membuat aplikasi Android sederhana yang interaktif dengan beberapa komponen, seperti header, image (gambar), button, dan juga page. Langsung saja, berikut adalah caranya.

Membuat Project Baru

Pertama, silahkan kalian buat project baru Blank App HTML5 + Cordova dengan nama myApp kemudian simpan di mana saja. Dalam tutorial ini, saya akan simpan di D:\Documents\Intel XDK\{namaproject}.

belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 1.

Jika kalian mendapati tampilan seperti gambar di bawah ini (Select a Framework), kalian bisa pilih Twitter Bootstrap, kemudian klik Select.

belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 2.

Apabila proses membuat project baru sudah selesai, kalian akan masuk pada halaman workspace.

Membuat Header

Pada sub-menu Design, silahkan kalian drag n drop komponen header ke dalam page kalian. Lalu, isi Title pada tab Properties dengan judul aplikasi kalian. Sehingga akan seperti gambar di bawah ini.

belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 3.

Kalian juga bisa merubah warna background header kalian dengan men-klik kotak warna yang terdapat di tab Styles pada bagian sebelah kanan workspace kalian.

Baca juga:  Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK – Bagian 3

Memasukkan Gambar

Secara default, setiap kalian membuat project baru, akan terdapat beberapa gambar pilihan yang sudah disediakan. Tapi saya akan menjelaskan bagaimana cara menambahkan gambar yang berada di PC kalian ke dalam project Intel XDK. Caranya adalah sebagai berikut:

Pertama, silahkan drag n drop komponen image ke dalam page kalian, sehingga secara default menghasilkan seperti gambar di bawah ini.

belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 4.

Karena masih menggunakan gambar yang sudah disediakan ketika kalian membuat project baru, sekarang kita akan menambahkan gambar yang berada di PC kalian ke dalam project. Buka folder tempat kalian menyimpan project kalian menggunakan File Explorer, dalam tutorial ini berarti akan tersimpan di D:\Documents\Intel XDK\myApp. Buka folder www > images dan silahkan copy-kan gambar kalian ke dalam folder images tersebut. Jika sudah, kalian bisa kembali ke dalam workspace Intel XDK.

belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 5.

Jika sudah, silahkan ganti gambar default dengan cara klik drop down list Src pada tab Properties di bagian sebelah kanan workspace kalian, dan pilih sesuai dengan nama gambar yang tadi kalian pindahkan.

belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 6.

Membuat Button

Untuk membuat aplikasi yang interaktif, saya akan menjelaskan cara membuat button yang jika di-klik akan pindah ke halaman berikutnya. Tetapi sebelumnya, saya akan memberikan penjelasan terlebih dahulu bagaimana cara membuat button.

Sama seperti komponen lainnya, silahkan drag n drop komponen button ke dalam page kalian (letakkan di bawah komponen image yang telah dibuat sebelumnya). Sehingga akan seperti gambar di bawah ini.

belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 7.

Ubah Label text “Button” menjadi “Masuk“, lalu ubah Style button menjadi Primary, dan kalian bisa melakukan perubahan lainnya pada tab Properties.

belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 8.

Menambahkan Page

Untuk membuat aplikasi yang interaktif, selain menambahkan button, kita juga harus menambahkan sebuah page baru. Jadi, jika button di-klik, akan pindah ke halaman berikutnya. Untuk menambahkan Page baru, silahkan klik New Page, pada tab Pages.

Baca juga:  Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK – Bagian 4
belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 9.

Terdapat 2 pilihan page yang dapat dibuat. Untuk Sub Page, jika halaman utama sudah terdapat header, footer, dan sidebar, maka halaman baru tersebut akan menggunakan header, footer dan sidebar yang sama sesuai dengan halaman utama. Tetapi untuk Page, halaman tersebut akan berdiri sendiri. Itu artinya, tidak akan menggunakan header, footer, dan sidebar pada halaman utama. Untuk tutorial ini, saya akan menggunakan Sub Page.

belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 10.

Untuk halaman kedua ini, silahkan tambahkan button yang berlabel “Kembali”. Kalian juga bisa menambahkan tambahan lain untuk halaman ini. Silahkan kalian implementasikan penjelasan-penjelasan di atas.

belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 11.

Sebagai contoh, berikut adalah halaman kedua yang saya buat.

belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 12.

Membuat Navigasi Halaman

Setelah semua komponen dibuat, silahkan kembali ke halaman utama (#mainpage), dan klik 2 kali pada button “Masuk”. Lihat nama button tersebut pada tab di atas page utama kalian. Dalam tutorial ini, button tersebut bernama button .uib_w_3. Pada tab Interactivity di sebelah kanan bawah, silahkan set Action dari button tersebut untuk masuk ke halaman kedua. Silahkan kalian lihat kembali struktur halaman dari project yang kalian buat pada tab Pages.

belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 13.

Lakukan hal yang sama untuk button “Kembali”, agar diarahkan ke halaman pertama.

Cek Keberhasilan

Untuk mengecek keberhasilan dari aplikasi dan navigasi yang telah kalian buat, silahkan gunakan menu Simulate. Jika masih terdapat kesalahan dalam navigasi, pastikan kembali halaman yang dituju sudah sesuai dengan yang diinginkan. Kalian bisa menggunakan tab Pages untuk melihat struktur halaman dari project kalian.

Baca juga:  Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK – Bagian 1
belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 14.

Aplikasi yang telah kalian buat pun sudah selesai. Bagaimana menurut kalian, mudah bukan? Untuk tutorial selanjutnya, saya akan memberikan penjelasan bagaimana cara untuk melakukan testing langsung ke dalam perangkat Android kalian.

 

Jadi, itulah tutorial Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK – Bagian 2. Kalian bisa mengikuti tutorial selanjutnya dengan klik pada tombol yang ada di bawah ini. Jika kalian mengalami kesulitan, jangan sungkan untuk menanyakannya kepada kami melalui komentar di akhir artikel. Semoga artikel ini bermanfaat. Terima kasih.

 

 


Tertarik untuk bergabung bersama kami? Daftar jadi Penulis Tamu, sekarang! Klik disini.

Fadhlillah Ariefianto

Bukan coders, tapi suka coding. Bukan blogger, tapi suka blogging.

Leave a Reply