Aplikasi Cordova dengan Bootstrap

Artikel kali ini akan menjelaskan cara membuat sebuah aplikasi sederhana menggunakan API Cordova. Hasil yang ingin dicapai dengan aplikasi ini adalah:

  • Aplikasi menampilkan halaman web HTML yang dijalankan secara lokal di dalam perangkat mobile (bukan mengakses halaman web dari server web luar)
  • Untuk memperindah tampilan digunakan UI framework JQuery dan Bootstrap
  • Aplikasi menampilkan komponen menu dan tab dari Bootstrap

Untuk dapat membangun aplikasi Cordova, pastikan komputer kerja Anda telah dipersiapkan dengan API Cordova dan software yang dibutuhkan lainnya. Untuk mempersiapkan perangkat pengembangan Cordova, silakan membaca artikel “Memulai Cordova” yang dibuat penulis sebelumnya.

 

Catatan:

  • Pada artikel ini platform yang digunakan hanya Android, sehingga semua penjelasan yang diuraikan mengacu pada platform tersebut.
  • Kode program dari contoh aplikasi telah disertakan bersama artikel ini sehingga Anda bisa menggunakannya sambil membaca penjelasan agar lebih mudah memahaminya.

Membuat projek baru

  1. Buat sebuah folder kerja untuk projek Cordova. Pada contoh ini folder tersebut diletakkan pada folder ..\Cordova\workshop. Anda bebas menentukan nama dan lokasi folder tersebut.
  2. Buka sebuah command shell dan masuk ke dalam folder kerja di atas. Pada contoh ini akan dibuat sebuah projek bernama animalkingdom.
  3. Jalankan perintah berikut ini:

Setelah projek berhasil dibuat, file-file projek tersebut akan disimpan di dalam folder ..\Cordova\workshop\ animalkingdom. Silakan menuju folder tersebut dan melihat folder-folder dan file-file apa saja yang sudah terbentuk.

  1. Tambahkan dukungan untuk platform Android. Silakan masuk ke flder ..\Cordova\workshop\ animalkingdom dan jalankan perintah:

  1. Tambahkan plugin dasar. Silakan masuk ke flder ..\Cordova\workshop\animalkingdom dan jalankan perintah:

  1. Sesuaikan versi API Android yang terinstal pada komputer kerja dengan versi target yang akan dibuat.

Buka file project.properties di dalam folder ..\workshop\animalkingdom\platforms\android. Ubah versi API pada bagian target dengan yang sesuai.

Buka file AndroidManifest.xml di dalam folder ..\workshop\animalkingdom\platforms\ android. Ubah versi API pada bagian android:targetSdkVersion dengan yang sesuai.

Mempersiapkan JQuery

JQuery dibutuhkan untuk digunakan bersama-sama Bootstrap. Versi JQuery yang digunakan pada contoh program ini adalah jquery-1.11.3. Dianjurkan untuk tidak menggunakan jQuery 2.x karena terbatasnya versi browser yang didukung oleh versi tersebut.

  1. Silakan mengunduh JQuery dari situs beralamat:

https://jquery.com/download/

  1. Silakan menyalin file jquery-1.11.3.js ke dalam folder ..\animalkingdom\www\js.

Mempersiapkan Bootstrap

Pada contoh ini framework Bootstrap akan digunakan untuk memperindah tampilan antar muka (User Interface= UI). Bootstrap adalah UI framework yang sangat popular dan cukup mudah digunakan. Versi Bootstrap yang digunakan pada contoh program ini adalah 3.3.4, namun demikian tidak ada batasan untuk menggunakan versi yang lebih baru.

  1. Silakan mengunduh JQuery dari situs beralamat:

http://getbootstrap.com/

  1. Silakan menyalin file min.js ke dalam folder ..\animalkingdom\www\js.
  2. Silakan menyalin semua file bootstrap*.css ke dalam folder ..\animalkingdom\www\css.

 

Mengedit file html

  1. Buka file index.html yang ada di dalam folder ..\animalkingdom\www. Hapus semua skrip HTML yang asli dang anti dengan skrip yang baru berikut ini.

  1. Buat sebuah file HTML baru bernama animals.html di dalam folder www yang sama. Salin skrip HTML berikut ini ke dalamnya.

 

Mempersiapkan file-file gambar

File-file gambar ada di dalam folder ..\animalkingdom\www\img.

Mempersiapkan file icon

Sebuah icon baru telah dipersiapkan untuk menggantikan icon standar dari aplikasi Cordova.

  1. Siapkan sebuah gambar dengan format PNG dan berukuran 96 x 96
  2. Pada folder projek aplikasi Cordova, silakan masuk ke sub-folder ..\platforms\android\res. Di situ akan dijumpai beberapa folder drawable dan drawable-xxx seperti pada gambar berikut ini.
  3. Hapus semua folder drawable-xxx dan tinggalkan sebuah folder bernama drawable. Dengan dihapusnya folder-folder drawable-xxx maka perangkat mobile selalu akan mencari gambar icon di dalam folder drawable.

cordova-dgn-bootstrap01

  1. Di dalam folder drawable terdapat file bernama png. File inilah yang dapat diganti dengan gambar lain supaya icon aplikasi berubah sesuai dengan gambar yang diinginkan. Silakan mengambil gambar icon yang baru dan salin ke dalam folder ini dengan nama file yang sama (hapus file icon.png yang asli). Pastikan resolusinya sama dengan gambar yang asli.

 

Menjalankan aplikasi

  1. Sambungkan kabel data dari komputer ke perangkat Android. Pastikan perangkat Android terdeteksi oleh komputer.
  2. Masuk ke dalam folder ..\Cordova\workshop\animalkingdom dan jalankan perintah:

Beberapa tampilan aplikasi diperlihatkan pada gambar di bawah ini.

cordova-dgn-bootstrap02

cordova-dgn-bootstrap03

 

end-of-doc

Leave a Reply

Your email address will not be published. Required fields are marked *