Tutorial Membuat Aplikasi Android Untuk Pemula Menggunakan Intel XDK

[gambar ilustrasi: pixabay]

Android kini sangat populer baik di kalangan pengguna maupun developer. Nah, bagi pembaca yang ingin mulai belajar membuat aplikasi Android, tutorial membuat aplikasi Android untuk pemula ini bisa dijadikan bahan pembelajaran awal.

Pada tutorial ini, kita akan membuat aplikasi Android sederhana pembaca RSS sehingga nantinya kita bisa membaca artikel online dari melalui aplikasi Android. Pembuatan aplikasinya dilakukan tanpa koding menggunakan tool pembuatan aplikasi Intel XDK.

Pertama-tama, unduh Intel XDK terlebih dahulu di halaman ini: software.intel.com.

Aplikasi yang akan dibuat pada artikel ini tampilannya akan seperti berikut ini nantinya:

Untuk membantumu dalam mengikuti tutorial di artikel ini, berikut adalah video proses pembuatan aplikasinya:

Dan untuk source code aplikasinya bisa diunduh di link ini.

Untuk memulai membuat aplikasi RSS sederhana ini, buka Intel XDK dan buat proyek baru. Pada menu Project silahkan pilih New Project kemudian pilih template blank Standard HTML5 dan jangan lupa untuk mecentang boks Use App Designer seperti gambar di bawah ini.

Setelah itu klik tombol Continue dan berikan nama proyek yang dibuat. Pada contoh ini saya beri nama proyeknya TeknoJurnalFeed. Silahkan beri nama proyek sesuai keinginan.

Setelah itu silahkan pilih Twitter Bootstrap 3 sebagai framework untuk menghasilkan tampilan UI yang baik. Sekarang kita akan membuat tampilan aplikasi sesuai gambar pada awal artikel ini. Yang dibutuhkan untuk tampilan seperti gambar tersebut adalah komponen Header dan List View.

Di tab Controls dalam toolbox bagian Layout, cari komponen Header dan kemudian klik dan seret ke tampilan utama aplikasi. Pada bagian Properties Header, beri nama label Header sesuai keinginan pada kolom Title. Lihat gambar di bawah ini untuk jelasnya:

Kita juga bisa mendesain komponen Header dengan warna yang berbeda sesuai keinginan atau bisa juga kita tambahkan gambar latar pada Header yang sudah dibuat.

Setelah membuat Header, kali ini cari komponen Column di pada bagian Layout. Kemudian klik dan sereta komponennya ke bawah komponen Header yang sudah dibuat. Setelah Column terpasang, tambahkan komponen List View di dalam Column tersebut. Hasilnya akan seperti gambar di bawah ini:

Setelah membuat tampilan, sekarang kita akan membuat koneksi (data binding) ke RSS situs TeknoJurnal untuk kemudian ditampilkan di aplikasi kita. Intel XDK memudahkan kita dalam pembuatan data binding yaitu dengan cara memilih menu Web Services yang ada di bawah struktur proyek di bagian kiri Intel XDK, kemudian pilih Explore Services dan terakhir pilih RSS Reader > Request.

Setelah memilih RSS Reader, maka akan muncul tampilan untuk memasukan URL situs webnya. Pada contoh ini saya masukkan URL http://teknojurnal.com/feed/

Tekan tombol Try It, ini bertujuan untuk menguji apakah URL yang sudah kita masukkan berfungsi dan memberikan respon data. Jika berhasil maka pada bagian Response Body akan menghasilkan data dari situs TeknoJurnal seperti di bawah ini:

Pada aplikasi pembaca RSS sederhana yang sedang kita buat ini, kita hanya membutuhkan data berupa judul artikel, tautan artikel, dan penulis artikelnya. Centang boks pemilihan data sesuai yang diinginkan.

Setelah itu silahkan berikan nama untuk data binding-nya. Isi nama sesuai keinginan, jika tidak diisi maka secara otomatis akan diberi nama RSS Request. Lalu tekan tombol Create Data Binding seperti gambar di bawah ini:

Setelah melakukan proses pembuatan data binding maka akan muncul tampilan seperti di bawah ini. Silahkan pilih Use In App Designer. Ini memudahkan kita mengaplikasikan data binding yang sudah dibuat menggunakan tampilan desainer.

Setelah membuat data binding sekarang tahapan akhir adalah memodifikasi tampilan aplikasi agar dapat menampilkan data binding dari situs Teknojurnal.

Pada komponen List View yang telah kita buat sebelumnya, hapus dua item di List View-nya dengan mengklik kanan masing-masing item dan pilih Delete sehingga tersisa satu item yang akan kita modifikasi untuk menampilkan data.

Pada bagian Properties di List View, isi kolom-kolomnya seperti di bawah ini:

Pada bagian Service Method teradapat item yang mewakilkan data yang dihasilkan ketika kita membuat data binding. Ketika kita memilih Service Method, kita akan disodorkan untuk memilih framework Angular JS atau Backbone. Pada aplikasi ini silahkan pilih framework Angular JS. Ini akan berguna jika kita akan memodifikasi aplikasi kita lebih lanjut menggunakan Angular JS.

Sekarang, kita isi kolom Label, heading, dan href di bagian Properties dari List View aplikasi kita. Pada kolom Label kita isi dengan nama penulis, pada kolom heading kita isi dengan judul artikel, dan pada kolom href kita isi dengan tautan ke artikel.

Setelah mengikuti konfigurasi di atas, klik menu Emulate di bagian atas Intel XDK untuk melihat hasil dari aplikasi yang sudah dibuat. Jika pembaca ingin menginstal aplikasi yang dibuat di ponsel Android atau iPhone, build aplikasinya dengan memilih menu Build.

Cukup mudah kan membuat aplikasi menggunakan Intel XDK? Sekarang kamu bisa bereksperimen lebih lanjut untuk membuat aplikasinya menjadi lebih bagus lagi seperti mengubah tampilan aplikasi atau lainnya.

* Artikel ini adalah hasil kerja sama dengan Intel Developer Zone.