Kalau kamu sudah bisa membuat halaman web dengan HTML, CSS, dan JavaScript, kamu bisa memakai keterampilan yang sama untuk membuat aplikasi Android. Dengan Apache Cordova, halaman tersebut dikemas menjadi aplikasi yang bisa dipasang di HP. Jika aplikasi membutuhkan fitur perangkat seperti kamera, kamu dapat menambahkan plugin yang sesuai.
Dalam tutorial ini, kita akan membuat aplikasi checklist pesanan. Pengguna bisa mengetik nama pesanan, menambahkannya ke daftar, lalu mengetuk pesanan untuk menandainya selesai. Datanya tersimpan secara lokal sehingga daftar tetap tersedia setelah aplikasi ditutup dan dibuka kembali. Contoh ini tidak membutuhkan server, akun pengguna, atau izin kamera.
Bagaimana Apache Cordova menjalankan HTML di Android?
Bayangkan aplikasi Cordova sebagai aplikasi Android yang memiliki layar untuk menampilkan konten web. Layar itu disebut WebView. HTML menentukan isi layar, CSS mengatur tampilannya, dan JavaScript menangani tindakan pengguna. File aplikasi dapat disertakan langsung dalam paket instalasi, sehingga halaman utama tidak perlu diunduh dari situs setiap kali aplikasi dibuka.
Cordova cocok untuk aplikasi dengan banyak formulir, katalog, checklist, atau alur administrasi. Jika fitur utamanya bergantung pada grafis berat, pemrosesan kamera berkelanjutan, atau integrasi perangkat yang sangat khusus, uji bagian tersebut di HP sejak awal. Antarmuka yang lancar di browser laptop belum tentu terasa sama pada perangkat sasaran.
1. Siapkan versi alat yang cocok
Tutorial ini menggunakan Cordova CLI 13 dan cordova-android 15.1.0. Tidak perlu menyamakan nomor kedua paket. Perintah cordova --version menunjukkan versi CLI, sedangkan cordova platform ls menunjukkan platform yang terpasang pada proyek.
| Komponen | Yang digunakan dalam tutorial |
|---|---|
| Node.js dan npm | Gunakan Node.js 24.x beserta npm. Node menjalankan alat pengembangan di komputer, bukan di HP pengguna. |
| Java Development Kit | JDK 17. Instal JDK lengkap agar perintah javac tersedia. |
| Android SDK Platform | Android 16, API 36. Ini adalah platform SDK yang dipakai untuk build, bukan berarti setiap HP pengguna harus memakai Android 16. |
| Android SDK Build-Tools | Gunakan seri 36.0.x, misalnya 36.0.0. |
| Gradle | Untuk setup yang seragam, gunakan Gradle 8.14.2. Instalasi Gradle di komputer membantu menyiapkan wrapper; setelah itu build proyek menggunakan Gradle Wrapper. |
Jika kamu datang dari tutorial Cordova lama, jangan menyalin konfigurasi JDK 8 atau 11, Gradle 7.3, dan Apache Ant ke proyek ini. Kebutuhan alat mengikuti versi cordova-android. Lihat matriks kompatibilitas Android dari Apache Cordova jika proyekmu memakai versi lain.
2. Instal Android SDK dan atur lokasi alat
Instal Android Studio, lalu buka SDK Manager. Pada tab SDK Platforms, pilih Android 16/API 36. Pada tab SDK Tools, pasang Android SDK Platform-Tools, Android SDK Command-line Tools (latest), dan Build-Tools 36.0.x. Aktifkan Show Package Details jika perlu memilih versi Build-Tools. Jika ingin memakai emulator, instal Android Emulator dan buat perangkat virtual melalui Device Manager.
Catat lokasi yang tertulis pada Android SDK Location. Gunakan alamat ini untuk variabel ANDROID_HOME. Android menandai variabel lama ANDROID_SDK_ROOT sebagai deprecated; jika variabel lama masih dipakai oleh proyek lain, jangan sampai nilainya menunjuk ke SDK yang berbeda. Lihat panduan variabel lingkungan Android.
Pengaturan Windows
- Buka Edit environment variables for your account.
- Atur
JAVA_HOMEke folder instalasi JDK 17, bukan ke folderbin. - Atur
ANDROID_HOMEke lokasi SDK yang ditampilkan Android Studio. Contoh:C:\Users\NamaAnda\AppData\Local\Android\Sdk. - Tambahkan
%JAVA_HOME%\bin,%ANDROID_HOME%\platform-tools,%ANDROID_HOME%\cmdline-tools\latest\bin, dan folderbininstalasi Gradle kePath. Tambahkan%ANDROID_HOME%\emulatorjika memakai emulator. - Tutup dan buka kembali terminal agar pengaturan baru terbaca.
Pengaturan macOS
Jika memakai Zsh, contoh berikut dapat dimasukkan ke ~/.zshrc. Sesuaikan lokasi SDK apabila berbeda. Baris Java mengasumsikan JDK 17 sudah terpasang dan terdaftar di macOS.
export JAVA_HOME=$(/usr/libexec/java_home -v 17)
export ANDROID_HOME="$HOME/Library/Android/sdk"
export PATH="$JAVA_HOME/bin:$ANDROID_HOME/platform-tools:$ANDROID_HOME/cmdline-tools/latest/bin:$ANDROID_HOME/emulator:$PATH"Jika Gradle dipasang secara manual, tambahkan folder bin Gradle ke PATH. Buka terminal baru atau jalankan source ~/.zshrc. Di Linux prinsipnya sama, tetapi gunakan lokasi SDK sebenarnya dan file konfigurasi shell yang kamu pakai.
Periksa hasil instalasi
node --version
npm --version
java -version
javac -version
gradle --version
adb versionPastikan Java dan compiler sama-sama menggunakan JDK 17. Jika adb tidak ditemukan, periksa apakah Platform-Tools sudah terpasang dan apakah PATH menunjuk ke SDK yang benar. Setelah semua alat dikenali, instal CLI:
npm install -g cordova@13
cordova --version3. Buat proyek Cordova dan tambahkan Android
Dari folder kerja yang kamu pilih, jalankan perintah berikut:
cordova create catatan-pesanan com.example.catatanpesanan "Catatan Pesanan"
cd catatan-pesanan
cordova platform add android@15.1.0
cordova platform ls
cordova requirements androidcatatan-pesanan adalah folder proyek, com.example.catatanpesanan adalah ID aplikasi contoh, dan Catatan Pesanan adalah nama yang akan dilihat pengguna. Untuk produk yang akan diterbitkan, pilih ID milik organisasimu sejak awal.
Periksa hasil cordova requirements android sebelum melanjutkan. Jika yang belum terdeteksi adalah Android SDK, misalnya, perbaiki SDK atau lokasinya terlebih dahulu. Menginstal ulang seluruh alat biasanya tidak diperlukan.
www/: tempat menyimpan HTML, CSS, JavaScript, dan aset aplikasi.config.xml: pengaturan aplikasi, termasuk identitas, nama, dan preferensi platform.package.jsondan file lock: mencatat dependensi agar proyek bisa dipasang kembali.platforms/android/: proyek Android yang disiapkan Cordova. Jangan menjadikannya tempat utama untuk mengedit HTML atau JavaScript karena perubahan dapat tertimpa saat build.
4. Buat aplikasi checklist pesanan
Kita akan mengubah tiga file di dalam www/. Tombol baru aktif setelah Cordova mengirim peristiwa deviceready. Ini juga menunjukkan kapan aplikasi boleh mulai memanggil API plugin apabila kelak diperlukan.
File www/index.html
Ganti isi file dengan halaman berikut. Referensi cordova.js tetap diperlukan; Cordova menyediakannya saat aplikasi disiapkan untuk platform Android.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self';">
<title>Catatan Pesanan</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
Catatan Pesanan
<form id="form">
<input id="nama" maxlength="100" required
placeholder="Contoh: Cetak 10 undangan">
<button id="tambah" disabled>Tambah pesanan</button>
</form>
Ketuk pesanan untuk mengubah statusnya.
[removed][removed]
[removed][removed]
</body>
</html>File www/css/index.css
body {
margin: 0;
font: 16px/1.5 system-ui, sans-serif;
color: #182c30;
background: #f3f7f6;
}
main { max-width: 36rem; margin: auto; padding: 2rem 1rem; }
form { display: grid; gap: .6rem; }
input, button { font: inherit; padding: .7rem; }
button { color: #fff; background: #086b65; border: 0; border-radius: .4rem; }
button:disabled { opacity: .5; }
li { margin-bottom: .5rem; }
li button[aria-pressed="true"] { background: #465655; }File www/js/index.js
document.addEventListener("deviceready", function () {
const form = document.querySelector("#form");
const input = document.querySelector("#nama");
const daftar = document.querySelector("#daftar");
const kunci = "pesanan-v1";
const pesanan = JSON.parse(localStorage.getItem(kunci) || "[]");
function tampilkan() {
daftar.replaceChildren();
pesanan.forEach(function (item) {
const baris = document.createElement("li");
const tombol = document.createElement("button");
tombol.type = "button";
tombol.textContent = (item.selesai ? "Selesai: " : "Aktif: ") + item.nama;
tombol.setAttribute("aria-pressed", String(item.selesai));
tombol.addEventListener("click", function () {
item.selesai = !item.selesai;
simpan();
});
baris.appendChild(tombol);
daftar.appendChild(baris);
});
}
function simpan() {
localStorage.setItem(kunci, JSON.stringify(pesanan));
tampilkan();
}
form.addEventListener("submit", function (event) {
event.preventDefault();
const nama = input.value.trim();
if (!nama) return;
pesanan.push({ nama: nama, selesai: false });
simpan();
form.reset();
input.focus();
});
document.querySelector("#tambah").disabled = false;
tampilkan();
});Contoh ini memakai localStorage untuk data latihan. Pesanan hanya tersimpan pada instalasi itu dan dapat hilang jika data aplikasi dihapus. Untuk pesanan pelanggan sungguhan yang harus dibagikan ke beberapa perangkat atau dipulihkan setelah HP rusak, tambahkan penyimpanan dan pencadangan yang sesuai.
5. Build APK dan uji aplikasi di HP atau emulator
Jalankan perintah berikut dari folder yang berisi config.xml:
cordova build android --debugJika build berhasil, terminal akan menampilkan lokasi APK debug. Build pertama dapat memerlukan internet untuk mengunduh dependensi Gradle. Untuk memasang dan menjalankan aplikasi pada HP, aktifkan USB debugging, sambungkan kabel data, lalu setujui otorisasi debugging pada perangkat.
adb devices
cordova run android --devicePada keluaran adb devices, status HP seharusnya device. Jika tertulis unauthorized, buka kunci layar HP dan periksa permintaan otorisasi. Untuk emulator, buat dan jalankan perangkat virtual melalui Android Studio, lalu gunakan cordova emulate android.
Cara memeriksa hasil: tambahkan “Cetak 10 undangan”, ketuk sampai statusnya menjadi “Selesai”, lalu tutup dan buka kembali aplikasi. Pesanan dan statusnya seharusnya tetap terlihat. Coba juga membuka keyboard dan menggulir daftar. Pengujian ini mencakup masukan pengguna, penyimpanan, dan tata letak yang tidak terlihat hanya dari pesan “build berhasil”.
6. Kapan perlu menambahkan plugin Cordova?
Checklist tadi tidak memerlukan plugin. Jika berikutnya pengguna perlu memotret bukti serah terima pesanan, barulah pertimbangkan plugin kamera. Contoh perintah instalasinya:
cordova plugin add cordova-plugin-camera
cordova plugin lsMemasang plugin belum membuat tombol kamera berfungsi. Kamu tetap perlu menulis pemanggilan API setelah deviceready, menangani pembatalan atau penolakan izin, dan mengujinya di HP. Sebelum memilih plugin, periksa versi cordova-android yang didukung serta izin yang diminta. Uji kembali setelah memperbarui platform, terutama untuk plugin yang menyentuh kamera, mikrofon, atau penyimpanan.
7. Bedakan APK pengujian dan AAB untuk rilis
APK debug cocok untuk memasang dan menguji aplikasi langsung di perangkat. Android App Bundle (AAB) adalah format distribusi; file AAB tidak dipasang langsung dengan cara yang sama seperti APK.
Untuk membuat bundle rilis dari proyek:
cordova build android --release -- --packageType=bundlePerintah tersebut memilih jenis build dan paket. Untuk mengunggahnya ke Google Play, siapkan penandatanganan rilis dengan upload key yang sesuai, periksa ID aplikasi dan kode versi, lalu ikuti persyaratan target API yang berlaku saat pengajuan. Simpan keystore dengan aman dan jangan memasukkan kata sandinya ke repositori. Rujuk panduan build dan penandatanganan Cordova Android untuk konfigurasi rilis.
Masalah yang sering muncul saat mengikuti tutorial Cordova
Java sudah terpasang, tetapi versi yang terbaca salah
Bandingkan hasil java -version, javac -version, dan gradle --version. Komputer bisa memiliki beberapa JDK. Jika Gradle masih menggunakan JDK lama, periksa JAVA_HOME serta urutan PATH, lalu buka terminal baru.
Build meminta Android SDK atau Build-Tools yang belum ditemukan
Periksa dua hal secara terpisah: apakah ANDROID_HOME menunjuk ke lokasi yang benar, dan apakah API 36 serta Build-Tools seri 36.0.x memang terinstal di lokasi itu. Android Studio terpasang belum tentu berarti semua paket SDK yang diperlukan sudah diunduh.
Tampilan tidak berubah setelah HTML atau CSS diedit
Pastikan yang diedit adalah www/index.html atau www/css/index.css pada akar proyek. Jalankan kembali cordova run android --device untuk menyiapkan, membangun, dan memasang versi baru. Jangan menyimpan perubahan utama di salinan file dalam platforms/android.
Tombol Tambah tetap nonaktif saat halaman dibuka di browser
Pada contoh ini, tombol menunggu deviceready. Membuka file HTML langsung dari komputer tidak menjalankan lingkungan Cordova Android. Gunakan emulator atau HP untuk memeriksa perilaku aplikasi yang sebenarnya.
Bagaimana jika kamu memperbarui proyek Cordova lama?
Sebelum mengganti versi platform, catat hasil cordova platform ls dan cordova plugin ls. Simpan proyek dalam kontrol versi dan periksa apakah pernah ada perubahan manual di platforms/android. Pindahkan perubahan yang masih diperlukan ke konfigurasi, plugin, atau sumber yang dapat dibuat ulang sebelum menghapus platform lama.
Setelah itu, perbarui proyek pada salinan atau branch terpisah. Uji instalasi baru sekaligus pembaruan dari versi aplikasi sebelumnya. Untuk aplikasi formulir, periksa keyboard, tombol kembali, dan posisi konten terhadap status bar. Untuk aplikasi kamera, periksa alur ketika izin diberikan maupun ditolak. Catatan rilis Cordova Android 15.1.0 menjelaskan mengapa bagian-bagian tersebut penting diuji.
Jika checklist pesanan sudah berjalan, pengembangan berikutnya bisa dimulai dari kebutuhan kecil yang terukur: filter pesanan aktif, pencarian berdasarkan nama, atau ekspor daftar. Pertahankan ID aplikasi dan data percobaan yang sama saat menguji pembaruan agar kamu bisa melihat apakah perubahan baru tetap menjaga pesanan yang sudah tersimpan.
