<a href="https://cordova.apache.org/" target="_blank">Apache Cordova</a> (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 <a href="https://www.codepolitan.com/tag/css/" target="_blank">CSS3</a>, <a href="https://www.codepolitan.com/tag/html5/" target="_blank">HTML5</a> dan <a href="https://www.codepolitan.com/tag/javascript/" target="_blank">JavaScript</a> daripada menggunakan API yang spesifik untuk masing-masing platform seperti <a href="https://www.codepolitan.com/tag/java/" target="_blank">Java</a> untuk <a href="https://www.codepolitan.com/tag/android/" target="_blank">Android</a>, 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: <a href="https://www.codepolitan.com/aplikasi-android-ios-windows-phone-html-css-javascript-you-can-do-it/" target="_blank">Aplikasi Android, iOS & Windows Phone Hanya dengan HTML, CSS & Javascript</a>.

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).
<h2>Install Cordova</h2>
Apache Cordova diinstal menggunakan Node Package Manager (NPM), . Maka dari itu terlebih dahulu kita install <a href="https://www.codepolitan.com/tag/nodejs" target="_blank">Node JS</a>. Kalo di komputermu belum terinstall NodeJS, silakan install terlebih dahulu dengan mengikuti panduan instalasi NodeJS pada tutorial <a href="https://www.codepolitan.com/tutorial/cara-install-nodejs/" target="_blank">Cara Install NodeJS</a>. Kalo sudah, buka aplikasi terminal atau command prompt lalu ketikkan perintah berikut:

<code>npm install -g cordova</code>

Instalasi membutuhkan koneksi internet. Tunggu proses instalasi dan bila telah selesai, tes hasil instalasi dengan perintah berikut:

<code>cordova -v</code>

Bila muncul nomor versi, itu artinya Kamu sudah berhasil menginstal Cordova!
<h2>Install Java Development Kit (JDK)</h2>
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:

<code>javac -version</code>

Kalo belum terinstal, ikuti langkah-langkah berikut untuk menginstal JDK:
<ol>
 	<li>Unduh Java SE JDK (Standard Edition) dari website Oracle: <a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target="_blank">http://www.oracle.com/technetwork/java/javase/downloads/index.html</a>. 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.<img class="size-full wp-image-9175" src="https://www.codepolitan.com/wp-content/uploads/2016/04/jdk-download.png" alt="download file installer JDK" width="579" height="590" /></li>
 	<li>Mulai instalasi JDK. Pastikan Kamu mengingat dimana folder JDK ini tersimpan karena akan kita daftarkan pada PATH di Windows.</li>
 	<li>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..</li>
 	<li>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.</li>
 	<li>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.</li>
 	<li>Klik tombol OK lagi untuk menutup jendela Environment Variable.</li>
 	<li>Sekarang tes hasil instalasi. Buka jendela terminal atau cmd baru lalu ketik perintah
<code>javac -version</code>
Kalo muncul nomor versi, itu tandanya JDK sudah siap digunakan.</li>
</ol>
<h2>Install Ant</h2>
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:
<ol>
 	<li>Pada halaman <a href="http://ant.apache.org/bindownload.cgi" target="_blank">http://ant.apache.org/bindownload.cgi</a>, unduh versi terbaru Ant yang berekstensi .zip seperti apache-ant-1.9.7-bin.zip.</li>
 	<li>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.</li>
 	<li>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..</li>
 	<li>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.</li>
 	<li>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.</li>
 	<li>Klik tombol OK lagi untuk menutup jendela Environment Variable.</li>
 	<li>Sekarang tes hasil instalasi. Buka jendela terminal atau cmd baru lalu ketik perintah
<code>ant -version</code>
Kalo muncul nomor versi, itu tandanya JDK sudah siap digunakan.</li>
</ol>
<h2>Install Android SDK Tools</h2>
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:
<ol>
 	<li>Buka halaman <a href="http://developer.android.com/sdk/index.html" target="_blank">http://developer.android.com/sdk/index.html</a> 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.</li>
 	<li>Jalankan installer. Ikuti langkah-langkah instalasi, dan catat path dimana Kamu menginstal.</li>
 	<li>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..</li>
 	<li>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.</li>
 	<li>Klik tombol OK lagi untuk menutup jendela Environment Variable.</li>
 	<li>Tes hasil instalasi dengan memanggil perintah pada jendela baru cmd:
<code>adb version</code>
Perintah ini akan menampilkan nomor versi Android Debug Bridge.</li>
 	<li>Langkah terakhir adalah menginstall versi SDK yang dibutuhkan oleh Cordova. Panggil perintah <code>android</code> 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.</li>
</ol>
<h2>Membuat Halaman HTML Pertama</h2>
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:

<code>cordova create firstApp com.codepolitan.firstapp FirstApp</code>

Perintah <code>cordova create</code> 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 <code>hooks</code>, <code>platforms</code>, <code>plugins</code>, dan <code>www,</code> serta satu file config.xml. Aplikasi HTML kita disimpan di folder <code>www</code>. 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:

<code>cordova platform add browser</code>

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:

<code>cordova run browser</code>

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 <a href="https://www.codepolitan.com/tag/bootstrap/" target="_blank">Bootstrap</a> dan <a href="http://foundation.zurb.com/" target="_blank">Foundation</a>.

[caption id="attachment_9177" align="alignnone" width="466"]<img class="wp-image-9177 size-full" src="https://www.codepolitan.com/wp-content/uploads/2016/04/cordova-device-ready.png" alt="cordova-device-ready" width="466" height="603" /> Aplikasi berjalan dengan baik melalui emulator browser cordova[/caption]

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 <code><h1>Apache Cordova</h1></code> dengan <code><h1>Selamat Datang!</h1></code> atau apapun yang Kamu inginkan, lalu lihat hasilnya.
<h2>Build Aplikasi Android</h2>
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:

<code>cordova platform add android</code>

Kemudian jalankan perintah berikut untuk membuild:

<code>cordova build android</code>

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

[caption id="attachment_9179" align="alignnone" width="393"]<img class="wp-image-9179 size-large" src="https://www.codepolitan.com/wp-content/uploads/2016/04/hasil-sample-aplikasi-android-hybrid-393x700.jpg" alt="hasil-sample-aplikasi-android-hybrid" width="393" height="700" /> Contoh hasil aplikasi Android dengan Cordova setelah build dan install[/caption]


### CodePolitan Developer School

Saat ini CodePolitan mengadakan [program pelatihan belajar coding intensif](https://school.codepolitan.com/) merupakan **Solusi belajar pemrograman** Basic Android yang berorientasi pada **kebutuhan industri** selama satu minggu secara tatap muka dengan **bimbingan mentor berpengalaman** yang dilengkapi dengan **fasilitas asrama** selama belajar.

**Benefit** apa yang bisa kamu dapatkan dari **CodePolitan Developer School**?

* **Belajar Intensif** selama seminggu dan dibimbing **mentor berpengalaman**
* **Program Karantina** untuk mendapatkan hasil yang maksimal
* **Kurikulum** belajar disusun sesuai dengan **kebutuhan industri**
* Modul belajar dari **Google Android Developer Fundamentals**
* **Konsultasi Belajar** dengan mentor setelah program
* Mendapatkan **kemampuan basic** sebagai pondasi menjadi Android Developer

Yuk gabung dengan [CodePolitan Developer School](https://school.codepolitan.com/) buat aplikasi Androidmu dalam 1 minggu dan mulai karirmu sebagai Android Developer dengan mendapatkan semua manfaat di atas :)

---

Referensi:
<a href="https://cordova.apache.org/" target="_blank">https://cordova.apache.org/</a>
<a href="https://en.wikipedia.org/wiki/Apache_Cordova" target="_blank">https://en.wikipedia.org/wiki/Apache_Cordova</a>
<a href="https://evothings.com/doc/build/cordova-guide.html" target="_blank">https://evothings.com/doc/build/cordova-guide.html</a>

Membuat Aplikasi Android Berbasis HTML5 dengan Cordova

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Membuat Aplikasi Android Berbasis HTML5 dengan Cordova

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Micro Python, Bahasa Python untuk Pemrograman Mikrokontroller

CodeIgniter PHP Framework Sekarang Punya Rumah Baru

Ikuti Giveaway dari CoderTalk dan Menangkan 6 Hadiah Menarik

Membuat Website Statis Gratis dengan Memanfaatkan Github Pages

Cara Install Node.js

Digital Input Output pada Arduino