Cara Cepat Instan Membuat Aplikasi Android Berbasis HTML5 dengan Cordova

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 

 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).

Install Cordova

Apache Cordova diinstal menggunakan Node Package Manager (NPM), . Maka dari itu terlebih dahulu kita install Node JS. Kalo di komputermu belum terinstall NodeJS, silakan install terlebih dahulu dengan mengikuti panduan instalasi NodeJS pada tutorial Cara Install NodeJS. Kalo sudah, buka aplikasi terminal atau command prompt lalu ketikkan perintah berikut:

npm install -g cordova

Instalasi membutuhkan koneksi internet. Tunggu proses instalasi dan bila telah selesai, tes hasil instalasi dengan perintah berikut:

cordova -v

Bila muncul nomor versi, itu artinya Kamu sudah berhasil menginstal Cordova!

Install Java Development Kit (JDK)

Untuk export ke package Android, kita membutuhkan Android SDK. Android SDK juga membutuhkan Java Development Kit atau JDK. Untuk mengecek apakah JDK sudah terinstal di komputermu, ketikkan perintah berikut:

javac -version

Kalo belum terinstal, ikuti langkah-langkah berikut untuk menginstal JDK:

Unduh Java SE JDK (Standard Edition) dari website Oracle: http://www.oracle.com/technetwork/java/javase/downloads/index.html. Klik tombol Java SE Downloads untuk menampilkan daftar unduhan. Klik radio Accept License Agreement lalu klik tautan Windows x86 bila komputermu 32bit dan Windows x64 bila komputermu 64bit.

Mulai instalasi JDK. Pastikan Kamu mengingat dimana folder JDK ini tersimpan karena akan kita daftarkan pada PATH di Windows.

Setelah proses instalasi  selesai, update path dengan lokasi instalasi JDK agar JDK dapat dikenali di command line. Buka Control Panel, pilih System and Security, pilih System, pilih Advanced System Settings, akan muncul jendela System Properties. Pada tab Advanced klik tombol Environment Variables..

Pada jendela Environment Variables bagian list user variables, pilih variable PATH lalu klik tombol Edit. Pada bagian akhir Variable value, tambahkan path folder tempat JDK disimpan, dalam kasus di komputer saya pathnya adalah ;C:\Program Files\Java\jdk1.8.0_20\bin. Kita pisahkan path value sebelumnya dengan path baru JDK kita dengan titik koma. Klik tombol OK pada jendela Edit.

Selanjutnya buat variable dengan mengklik tombol New.., pada bagian Variable name isi dengan JAVA_HOME (kalo variabel ini sudah ada, maka pilih dan klik tombol Edit), lalu pada bagian Variable value isi path folder JDK seperti langkah sebelumnya dengan tanpa diakhiri folder \bin. Dalam kasus di komputer saya adalah ;C:\Program Files\Java\jdk1.8.0_20. Klik tombol OK.

Klik tombol OK lagi untuk menutup jendela Environment Variable.

Sekarang tes hasil instalasi. Buka jendela terminal atau cmd baru lalu ketik perintah javac -version Kalo muncul nomor versi, itu tandanya JDK sudah siap digunakan.

Install Ant

Apache Ant adalah library Java dan command line tool untuk mengatur proses pembangunan aplikasi Java. Ant sudah menyediakan beberapa task seperti proses kompilasi, assembling, testing dan menjalankan aplikasi Java. Ant ini nantinya akan digunakan oleh Cordova dan Android SDK untuk membangun aplikasi. Untuk proses instalasi Ant, ikuti langkah-langkah berikut:

Pada halaman http://ant.apache.org/bindownload.cgi, unduh versi terbaru Ant yang berekstensi .zip seperti apache-ant-1.9.7-bin.zip.

Ekstrak file .zip tersebut di tempat yang Kamu inginkan. Saya mengekstrak file tersebut di direktori D:\ sehingga pathnya menjadi D:\apache-ant-1.9.7.

Masukkan path folder Ant ke dalam variable PATH pada sistem Windows, seperti yang kita lakukan saat menambahkan path JDK pada step sebelumnya. Buka Control Panel, pilih System and Security, pilih System, pilih Advanced System Settings, akan muncul jendela System Properties. Pada tab Advanced klik tombol Environment Variables..

Pada jendela Environment Variables bagian list user variables, pilih variable PATH lalu klik tombol Edit. Pada bagian akhir Variable value, tambahkan path folder Ant, dalam kasus di komputer saya pathnya adalah ;D:\apache-ant-1.9.7\bin. Kita pisahkan path value sebelumnya dengan path baru Ant dengan titik koma. Klik tombol OK pada jendela Edit.

Selanjutnya buat variable dengan mengklik tombol New.., pada bagian Variable name isi dengan ANT_HOME (kalo variabel ini sudah ada, maka pilih dan klik tombol Edit), lalu pada bagian Variable value isi path folder Ant seperti langkah sebelumnya dengan tanpa diakhiri folder \bin. Dalam kasus di komputer saya adalah ;D:\apache-ant-1.9.7. Klik tombol OK.

Klik tombol OK lagi untuk menutup jendela Environment Variable.

Sekarang tes hasil instalasi. Buka jendela terminal atau cmd baru lalu ketik perintah ant -version Kalo muncul nomor versi, itu tandanya JDK sudah siap digunakan.

Install Android SDK Tools

Android SDK Tools digunakan oleh Cordova untuk membangun aplikasi Android. Kalo Kamu sudah pernah menginstall Android Studio, maka Kamu tinggal mencatat dimana letak folder instalasi Android SDKnya. Kalo belum, kita cukup mengunduh dan menginstal Android SDK Tools. Ikuti langkah-langkah berikut untuk menginstalnya:

Buka halaman http://developer.android.com/sdk/index.html dan pada bagian Download pilih yang Get just the command line tools only dan klik tautan download installer.exe, seperti installer_r24.4.1-windows.exe.

Jalankan installer. Ikuti langkah-langkah instalasi, dan catat path dimana Kamu menginstal.

Daftarkan path Android SDK pada variable PATH seperti pada step sebelumnya. Buka Control Panel, pilih System and Security, pilih System, pilih Advanced System Settings, akan muncul jendela System Properties. Pada tab Advanced klik tombol Environment Variables..

Pada jendela Environment Variables bagian list user variables, pilih variable PATH lalu klik tombol Edit. Pada bagian akhir Variable value, tambahkan path folder tools dan platform-tools Android SDK, dalam kasus di komputer saya path toolsnya adalah dan path platform-toolsnya adalah ;C:\Program Files (x86)\Android\android-sdk\platform-tools. Kita pisahkan antar path value dengan titik koma. Klik tombol OK pada jendela Edit.

Klik tombol OK lagi untuk menutup jendela Environment Variable.

Tes hasil instalasi dengan memanggil perintah pada jendela baru cmd: adb version Perintah ini akan menampilkan nomor versi Android Debug Bridge.

Langkah terakhir adalah menginstall versi SDK yang dibutuhkan oleh Cordova. Panggil perintah android pada command line untuk memunculkan jendela Android SDK Manager. Akan muncul daftar ceklis apa saja yang harus diinstal dan diupdate dari Android SDK. Saat pertama kali menjalankan Android SDK Manager ini, akan ada beberapa bagian yang secara default terceklis. Biarkan seperti itu lalu klik tombol Install n Packages.. Aplikasi akan mengunduh dan menginstal sejumlah SDK yang wajib diinstal. Saat tulisan ini dibuat versi Cordova terakhir adalah versi 6.1 dan dia memerlukan SDK Android 6.0. Kedepannya seiring perkembangan Cordova mungkin versi SDK yang diperlukan oleh Cordova juga akan meningkat. So Kamu tinggal menyesuaikan kebutuhan dengan menginstal SDK yang diperlukan seperti pada langkah di atas.

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 <h1>Apache Cordova</h1> dengan <h1>Selamat Datang!</h1> 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\apk\ dengan nama file android-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---

Referensi:https://cordova.apache.org/https://en.wikipedia.org/wiki/Apache_Cordova https://evothings.com/doc/build/cordova-guide.html