Apache Cordova (dulunya adalah PhoneGap) adalah framework pengembangan aplikasi mobile yang awalnya dibuat oleh perusahaan bernama Nitobi. Pada tahun 2011 kemudian Adobe System membeli perusahaan tersebut, dan menyerahkan pengembangan open sourcenya kepada Apache Software Foundation dengan nama baru Apache Cordova. Apache Cordova memungkinkan pengembang untuk membuat aplikasi mobile dengan menggunakan CSS3, HTML5 dan JavaScript daripada menggunakan API yang spesifik untuk masing-masing platform seperti Java untuk Android, Swift untuk iOS dan C# untuk Windows Phone. Dengan satu kode sumber yang sama, Apache Cordova dapat membungkus aplikasi agar dapat berjalan di banyak jenis device. Baca juga: Aplikasi Android, iOS & Windows Phone Hanya dengan HTML, CSS & Javascript.
Pada tutorial ini kita akan mencoba membuat aplikasi Android sederhana "Hello World" menggunakan HTML5 dan Cordova. Tujuan tutorial ini adalah memberikan gambaran bagaimana sebuah aplikasi web dapat dikonversi menjadi aplikasi Android, mulai dari cara instalasi Cordova beserta perangkat lain yang diperlukan seperti Java Development Kit (JDK), Apache Ant, dan Android SDK Tools (pada tutorial ini saya pandu untuk instalasi di sistem operasi Windows); membuat dan memodifikasi halaman HTML sederhana dan membuild ke dalam bentuk Android package installer (.apk).
Membuat Halaman HTML Pertama
Sekarang saatnya mencoba membuat aplikasi Android berbasis HTML5 dengan Cordova. Hahaha.. persiapannya seabreg ya, tapi worthed lah dengan hasil yang kita inginkan. Untuk membuat project pertama dengan Cordova, buka command line lalu ketikkan perintah seperti berikut:
cordova create firstApp com.codepolitan.firstapp FirstApp
Perintah cordova create berfungsi untuk membuat initial project cordova. Parameter pertama adalah nama path folder project, parameter kedua adalah indentifier aplikasi, dan parameter ketiga adalah nama aplikasi. Perintah ini akan membuatkan folder dengan nama firstApp yang berisi file-file configurasi untuk membangun aplikasi. Setidaknya ada 4 folder yang disiapkan, yakni folder hooks, platforms, plugins, dan www, serta satu file config.xml. Aplikasi HTML kita disimpan di folder www. Setelah membuat project, folder www sudah berisi contoh file html. Kamu bisa mengecek isinya atau membukanya melalui browser. Tapi bila kita membuka file html langsung di browser, akan ada beberapa aplikasi javascript yang tidak dapat berjalan, karena lingkungan kerja aplikasi berbeda dengan lingkungan kerja browser biasa.
Untuk dapat melihat hasil simulasi aplikasi kita dengan baik, kita harus membukanya melalui emulator. Pada jendela command line, masuk ke folder project lalu jalankan perintah berikut:
cordova platform add browser
Perintah di atas berfungsi untuk menambahkan library yang diperlukan untuk dapat berjalan di suatu platform, dalam kasus di atas adalah platform browser. Dibutuhkan koneksi internet untuk menginstal library tersebut. Setelah selesai, jalankan perintah berikut untuk menjalankan aplikasi pada browser:
cordova run browser
Perintah ini akan membuka browser dan menjalankan aplikasi dengan baik. Hingga titik ini Kamu bisa mulai mengembangkan aplikasi yang Kamu inginkan menggunakan HTML5, CSS dan JavaScript. Kamu dapat menggunakan JavaScript library seperti jQuery atau JavaScript framework seperti Ionic atau AngularJS. Kamu juga dapat membuat style sendiri atau menggunakan CSS framework seperti Bootstrap dan Foundation.Untuk keluar dari emulator, tekan tombol Ctrl + C pada keyboard. Kamu bisa sedikit bermain-main dengan kode html yang sudah ada, misalnya mengganti konten tag
Apache Cordova
dengan
Selamat Datang!
atau apapun yang Kamu inginkan, lalu lihat hasilnya.
Build Aplikasi Android
Sekarang kita akan membuild aplikasi web kita ke dalam bentuk file .apk yang nantinya bisa diinstalkan ke handphone Android. Pertama-tama kita tambahkan dulu library yang diperlukan untuk dapat membuild ke platform android. Jalankan perintah berikut untuk menambahkan platform:
cordova platform add android
Kemudian jalankan perintah berikut untuk membuild:
cordova build android
Setelah proses build selesai, Kamu dapat mengakses file .apk pada folder project firstApp\platforms\android\build\outputs\apkandroid-debug.apk. Kamu bisa mencoba menyalin file tersebut ke dalam handphone smartphone Android dan menginstalnya. Pastikan mode developer sudah diaktifkan di handphone Androidnya.
Demikian gambaran umum dan persiapan awal yang harus disiapkan untuk dapat membuat aplikasi Android menggunakan teknologi HTML5. Dengan begini programmer web seperti saya pun dapat membuat aplikasi Android dan bahkan aplikasi iOS dengan memanfaatkan skill programming webnya. :D
1 komentar:
Hadir gan ...
Posting Komentar