Membuat Aplikasi Android Berbasis Web (HTML5) dengan Cordova

Last Updated on July 26, 2019 by

Kebutuhan aplikasi yang meninggi membuat banyak orang berlomba-lomba untuk berkreasi membuatnya, terlebih kini berbagai aplikasi dan software pendukung yang ada semakin memudahkan pekerjaan ini. Salah satu caranya adalah membuat aplikasi Android berbasis web dengan Cordova.

Aplikasi bernama lengkap Apache Cordova yang dulunya dikenal sebagai PhoneGap ini memang memungkinkan pengguna untuk membuat aplikasi mobile berbasis CSS3, HTML5, dan JavaScript dibandingkan menggunakan API untuk masing-masing platform. Dengan kata lain, Apache Cordova mampu mengemas aplikasi agar bisa dijalankan di semua device dengan menggunakan satu kode sumber yang sama (mobile hybrid).

Di samping alasan di atas, Cardova memiliki satu alasan krusial mengapa menjadi pilihan banyak orang. Terkait spesifikasi perangkat penunjang (komputer/laptop) Anda, Cordova bisa diinstall dan dijalankan di perangkat dengan spesifikasi yang tak begitu tinggi.

Padahal, biasanya dibutuhkan perangkat high spec untuk dapat mengadopsi dan menggunakan aplikasi pengembangan mobile apps lain sejenisnya.

Membuat aplikasi Android berbasis web (HTML5) dengan Cordova mungkin akan sedikit sulit bagi Anda yang belum pernah membuat aplikasi Android sebelumnya. Tapi kali ini, kami akan memberikan tutorial sederhana yang bisa Anda ikuti dengan mudah. Ikuti langkah-langkah dan penjelasan di bawah ini.

Proses Installasi Aplikasi Cordova

Sebelum memulai tutorial pengoperasian Cordova, pastikan Anda telah menginstall aplikasi ini di perangkat komputer/ laptop Anda. Aplikasi ini menggunakan sistem Node Package Manager (NPM) agar dapat diinstall.

Oleh karenanya, Anda harus mengunduh aplikasi Node JS terlebih dahulu. Anda bisa mengunduh langsung pada situs website resminya. Ketika sudah selesai, buka aplikasi terminal perangkat Anda atau buka command prompt. Masukkan perintah berikut:

npm install -g cordova

Pastikan aplikasi Anda terhubung dengan internet. Tunggu proses hingga selesai. Berikan perintah sekali lagi untuk mengetes hasil instalasi dengan mengetikkan pattern berikut:

cordova –v

Perhatikan hasil yang muncul. Jika Anda mendapati nomor versi, hal tersebut menandakan proses instalasi Cordova yang Anda lakukan telah berhasil.

 

Proses Installasi Android SDK

Selanjutnya, Anda masih perlu menginstall Java Development Kit (JDK) sebelum melanjutkan langkah untuk membuat aplikasi Android berbasis web dengan menggunakan aplikasi Cordova.

Hal ini dikarenakan dalam proses export ke package Android nantinya, Anda akan memerlukan Android SDK. Sementara untuk menjalankan Android SDK dibutuhkan perangkat yang didukung oleh Java Development Kit alias JDK. Walau agak rumit alurnya, namun begitulah kenyataannya.

Anda tak bisa mengabaikan step ini begitu saja. Setelah menginstall JDK, Anda bisa mengetikkan baris perintah untuk mengecek apakah installer tersebut benar-benar sudah masuk dan bisa dioperasikan di perangkat Anda. Masukkan baris perintah berikut:

javac –version

Jika setelah dicek ternyata installer JDK Anda belum terpasang secara sempurna, Anda dapat mengikuti alur berikut untuk menginstalnya.

1. Unduh Java SE JDK (Standard Edition Java Development Kit) pada perangkat Anda. Untuk langkah cepatnya, unduh dari website Oracle. Atau langsung saja ketikkan alamat url berikut: http://www.oracle.com/technetwork/java/javase/downloads/index.html. Untuk menampilkan daftar unduhan, Anda bisa mengklik tombol Java SE Downloads. Selanjutnya, pilih radio Accept License Agreement. Lalu, klik tautan Windows x86 jika komputer Anda memiliki kapasitas 32 bit. Jika perangkat Anda berkapasitas sebesar 64 bit, Anda bisa mengklik tautan Windows x64.
2. Mulailah proses instalasi JDK di perangkat Anda. Pilih dan ingat-ingat di mana letak folder JDK tersebut Anda tempatkan. Ini penting karena nantinya folder ini akan dibutuhkan untuk proses pendaftaran pada PATH di Windows.
3. Tunggu beberapa saat hingga proses instalasi benar-benar selesai. Setelahnya, lakukan update path menggunakan lokasi instalasi JDK. Hal ini bertujuan agar nantinya JDK Anda ini dapat dikenali ketika berada di command line. Selanjutnya pilih Control Panel. Dari berbagai opsi yang muncul, pilih System and Security. Klik pada pilihan System. Klik pada Advanced System Settings. Anda akan mendapati jendela System Properties muncul di halaman perangkat Anda. Klik pilihan tombol Environment Variables pada tab Advanced.
4. Setelah mengklik jendela Environment Variables, terdapat beberapa bagian list dari user variables. Pilihlah variable PATH pada sekian opsi pilihan yang muncul. Tekan tombol Edit. Jangan lupa tambahkan path folder di mana JDK di simpan. Selanjutnya pisahkan path value yang telah ada sebelumnya (lama) dengan path JDK yang baru dengan membubuhkan tanda titik koma. Klik OK yang terdapat di jendela Edit.
5. Buatlah variabel baru dengan menekan tombol New. Tuliskan JAVA_HOME pada bagian variable name.
6. Tekan tombol OK sekali lagi untuk menutup jendela Environment Variable yang masih terbuka.
7. Kini saatnya tes hasil instalasi. Bukalah jendela terminal alias cmd baru. Masukkan perintah dengan mengetikkan pattern berikut:

javac –version

8. Jika nomor versi muncul di halaman Anda, hal itu mengindikasikan bahwa JDK Anda sudah siap untuk digunakan.

Proses Installasi Aplikasi Ant

Langkah selanjutnya untuk membuat aplikasi Android berbasis web dengan Cordova, Anda perlu menginstall aplikasi Ant terlebih dahulu. Ant, atau lengkapnya bernama Apache Ant ini, merupakan salah satu jenis library Java. Aplikasi ini juga memiliki fungsi sebagai command line tool guna mengatur segala proses pembangunan aplikasi berbasis Java untuk Android.

Ant telah sedemikian lengkapnya untuk menghandle berbagai jenis task, antara lain kompilasi, assembling, testing hingga menjalankan aplikasi Java. Nantinya, dukungan Ant ini sangat dibutuhkan selama proses pembangunan aplikasi bersama Cordova dan Android SDK. Untuk memulai proses instalasi Ant, perhatikan dengan teliti dan ikuti langkah-langkah berikut ini:

1. Buka web resmi Apache Ant atau ketikkan alamat url http://ant.apache.org/bindownload.cgi pada browser Anda. Unduh Ant dalam versi terbaru dengan ketentuan bereksistensi .zip seperti apache-ant-1.9.8-bin.zip.
2. Karena file yang Anda unduh masih berupa .zip, Anda wajib melakukan unzip terlebih dahulu agar file bisa dibaca. Ekstrak file tersebut lalu simpan pada direktori D. Dengan begitu, path file Anda berubah menjadi D:\apache-ant-1.9.7.
3. Langkah selanjutnya, masukkan path berisi folder Ant tersebut ke dalam variable PATH yang terdapat pada sistem Windows. Lakukan langkah yang sama dengan saat melakukan penambahan path JDK yang telah dibahas pada step sebelumnya.
4. Buka Control Panel. Pilihlah menu System and Security. Kemudian klik System. Pilihlah opsi Advanced Setting yang muncul pada halaman perangkat Anda. Anda akan mendapati kemunculan jendela System Properties. Klik tombol Environment Variables pada tab Advance tersebut.
5. Langkah selanjutnya, perhatikan bagian list user variables yang terdapat pada jendela Environment Variables, pilihlah variable PATH pada daftar list tersebut. Lalu tekan tombol Edit.
6. Tambahkan path folder Ant untuk menyimpan file Anda di bagian akhir Variable Value. Jangan lupa untuk memisahkan antara path value yang lama dengan path Ant yang baru dengan menyisipkan tanda titik koma. Klik tombol OK yang terletak di jendela Edit.
7. Buatlah variabel baru dengan mengklik tombol New. Isikan ANT_HOME dalam kolom Variable Name. Isilah bagian Variable value menggunakan folder path Ant seperti yang telah dibahas di langkah sebelumnya, yakni dengan tanpa diakhiri \bin. Selanjutnya klik tombol OK untuk melanjutkan.
8. Anda akan mendapati jendela Environment Variable muncul di layar komputer/ laptop Anda, klik tombol OK sekali lagi untuk menutupnya.
9. Kini saatnya untuk tes hasil tahapan instalasi yang telah Anda selesaikan ini. Caranya dengan buka jendela terminal ataupun CMD baru. Lalu, ketikkan perintah dengan pattern ant -version. Anda bisa memastikan instalasi Ant Anda berhasil jika nomor versi muncul di layar.

Proses Installasi Android SDK Tools

Nah, sebelum menginjak menu utama untuk membuat aplikasi Android berbasis web dengan menggunakan aplikasi Cordova, Anda perlu menginstall senjata pamungkas terlebih dahulu, yakni Android SDK Tools. Tools satu ini sangat penting dan bisa dikatakan sebagai jantung Cordova lantaran Android SDK Tools inilah yang nantinya akan digunakan oleh Cordova untuk membuild aplikasi Android.

Jika sebelumnya Anda sudah pernah menginstall Android Studio, Anda tak perlu repot-repot menginstall tools ini lagi. Yang perlu Anda lakukan hanyalah mencari dan mencatat letak folder instalasi Android SDK Tools tersebut. Sebaliknya, jika belum, perhatikan dan ikuti langkah-langkah berikut ini untuk menginstallnya:

1. Buka situs resmi Developer Android untuk dapat mengunduh tools yang Anda butuhkan. Atau, Anda bisa melakukannya dengan langsung mengetikkan alamat url berikut pada halaman pencarian browser Anda http://developer.android.com/sdk/index.html.
2. Cari menu Download. Pilihlah opsi Get just the command line tools only untuk mendapatkan tools Android SDK. Klik tautan Download berisi file installer.exe. anda akan mendapati file installer_r24.4.1-windows.exe.
3. Jalankan installer yang telah berhasil Anda unduh tersebut. Ikuti langkah-langkah instalasi sesuai prosedur yang diperlukan. Jangan lupa, sempatkan untuk mencatat letak path di mana Anda menginstall installer tersebut. Meski sepele, hal ini penting dilakukan untuk kemudahan Anda kedepannya.
4. Langkah selanjutnya, masukkan path berisi folder Android SDK Tools tersebut ke dalam variable PATH yang terdapat pada sistem Windows. Langkah yang sama dengan saat melakukan penambahan path Ant yang telah dibahas pada step sebelumnya.
5. Buka Control Panel. Pilihlah menu System and Security. Kemudian klik System. Pilihlah opsi Advanced Setting yang muncul pada halaman perangkat Anda. Anda akan mendapati kemunculan jendela System Properties. Klik tombol Environment Variables pada tab Advance tersebut.
6. Langkah selanjutnya, perhatikan bagian list user variables yang terdapat pada jendela Environment Variables, pilihlah variable PATH pada daftar list tersebut. Lalu tekan tombol Edit. Tambahkan path folder tools dan platform-tools Android SDK untuk menyimpan file Anda di bagian akhir Variable Value. Jangan lupa untuk memisahkan antara path value yang lama dengan path Ant yang baru dengan menyisipkan tanda titik koma. Klik tombol OK yang terletak di jendela Edit.
7. Klik sekali lagi tombol OK yang muncul untuk menutup jendela Environment Variable Anda.
8. Kini saatnya untuk tes hasil tahapan instalasi Android SDK Tools yang telah Anda selesaikan. Caranya mudah, buka jendela terminal ataupun cmd baru. Lalu, ketikkan perintah dengan pattern adb -version. Anda bisa memastikan instalasi Anda berhasil jika nomor versi Android Debug Bridge muncul di layar.
9. Nah, tahap akhir dalam proses penginstalan ini adalah memasang versi SDK yang dibutuhkan Cordova untuk menjalankan operasinya. Ketikkan perintah android di bagian command lain. Cara ini merupakan langkah untuk memunculkan jendela Android SDK Manager di layar perangkat Anda.
10. Selanjutnya, Anda akan mendapati kemunculan daftar ceklist mana saja yang wajib diinstall dan diupdate pada Android SDK tersebut. Pada kali pertama menjalankan Android SDK Manager, beberapa bagian telah terceklis secara default.
11. Anda tak perlu melakukan apa-apa untuk mengubahnya. Biarkan seperti apa adanya, lalu pilih tombol Install n Packages. Secara otomatis aplikasi akan mendownload sekaligus menginstall sejumlah SDK yang dibutuhkan.

 

Cara Membuat Aplikasi Android Berbasis Web (HTML) dengan Menggunakan Aplikasi Cordova

Akhirnya, kini Anda bisa benar-benar memulai cara membuat aplikasi Android berbasis web (HTML) dengan menggunakan aplikasi Cordova. Setelah melewati sekian tahap persiapan, akhirnya sampailah di pembahasan utama.

Meski membutuhkan banyak effort dan energi untuk segala persiapannya, semuanya penting dilakukan agar Anda bisa memulai membuat halaman HTML pertama menggunakan Cordova. Untuk melakukannya, buka command line dan masukkan perintah sebagai berikut:

cordova create firstApp com.codepolitan.firstapp FirstApp

Baris perintah cordova create tersebut berfungsi untuk membuat initial project cordova. Ada tiga jenis parameter dalam initial project ini. Pertama, nama path yang digunakan dalam folder project. Kedua, identifier aplikasi. Dan yang ketiga, nama aplikasi.

Baris perintah diatas akan membuatkan Anda folder menggunakan nama firstApp yang berisikan file konfigurasi untuk proses pembangunan aplikasi. Dalam proses ini, setidaknya Anda wajib mempersiapkan empat buah folder yang berbeda, masing-masing untuk folder hooks, platform, plugins dan www. Di samping itu Anda juga perlu menyiapkan satu buah file config.xml.

Aplikasi HTML yang tengah dikerjakan nantinya akan tersimpan dalam folder www. Nantinya ketika project yang dikerjakan telah selesai, folder www tersebut sudah terisi dengan contoh file html.

Untuk melihat hasil simulasi aplikasi Anda dengan baik, perlu penggunaan emulator dalam prosesnya. Masuklah ke folder project dengan menjalankan perintah pada jendela command line berisikan pattern berikut.

cordova platform add browser

Baris perintah yang diketikkan di atas berfungsi untuk menambahkan library yang diperlukan. Ini penting dan diperlukan agar aplikasi dapat berjalan pada suatu platform. Dalam kasus ini platform yang dimaksud adalah platform browser. Pastikan koneksi internet Anda aman selama menginstal library tersebut. Jika sudah selesai, ketikkan perintah berikut ini pada browser Anda.

cordova run browser

Dengan adanya perintah ini, browser akan bisa terbuka dan aplikasi bisa dijalankan dengan baik. Sampai di titik ini, Anda bisa memulai pengembanagan aplikasi menggunakan basis bahasa pemrogaraman yang Anda inginkan, seperti HTML5, CSS, dan JavaScript. Anda juga bebas untuk menentukan style sendiri maupun menggunakan CSS framework seperti Bootstrap atau Foundation.

Selanjutnya, Anda bisa keluar dari emulator dengan cara menekan tombol Ctrl + C pada keyboard.

Kini, Anda akan memasuki tahap membuat aplikasi Android berbasis web ke dalam file berbentuk .apk untuk selanjutnya diinstall ke smartphone. Tambahkan library yang dibutuhkan. Jalankan perintah berikut untuk menambah platform.

cordova platform add android

Sementara ketikkan perintah berikut untuk build:

cordova build android

Tunggu beberapa saat hingga proses build selesai. Setelahnya, Anda dapat mengakses file .apk pada folder project bernama firstApp\platforms\android\build\outputs\apk\ dan file yang bernama android-debug.apk. Salin nama file tersebut pada Android Anda dan cobalah untuk menginstallnya. Sebelumnya, pastikan terlebih dahulu bahwa mode developer sudah aktif di smartphone Anda.

Demikianlah uraian membuat aplikasi Android berbasis web (HTML) menggunakan aplikasi Cordova, dari proses awal persiapan runtut hingga dapat benar-benar membuat aplikasi Android dengan bahasa pemrograman HTML5. Diharapkan dengan adanya penjelasan ini, Anda pun bisa memulai membuat aplikasi Android sendiri. Semoga artikel ini bermanfaat. Selamat mencoba.
[application-about]

---

Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.