Proyek Cordova pertama kamu

Posted on Agu 01, 2026 by

Di pertemuan sebelumnya, kita sudah berhasil memasang Cordova. Kali ini kita akan menggunakan perintah CLI untuk membuat proyek baru.

1. Membuat Proyek Cordova

Buka terminal, masuk ke folder tempat kamu ingin menyimpan proyek, lalu jalankan perintah pembuatan:

cordova create hello com.foxdevelop.hello HelloWorldCode language: CSS (css)

Penjelasan parameter:

  1. hello : nama folder proyek
  2. com.example.hello : nama paket aplikasi (identitas unik Android, wajib diubah sebelum rilis)
  3. HelloWorld : nama aplikasi yang tampil di layar

Berikut contoh penerapan, kita buat folder di drive D lalu buat proyek di dalamnya.

C:\Users>d:

D:\>mkdir cordovademo

D:\>cd cordovademo

D:\cordovademo>cordova create hello com.foxdevelop.hello HelloWorld
Creating a new cordova project.Code language: CSS (css)

Setelah itu kamu bisa melihat folder cordovademo di drive D, di dalamnya ada subfolder bernama hello.

Lokasi kode sumber utama: hello/www/

Halaman masuk aplikasi: www/index.html

Jangan ubah file apa pun di folder platforms, semua file di dalamnya akan tertimpa saat proses kompilasi!

2. Masuk ke Proyek dan Tambahkan Platform

cd hello

Tambahkan platform target

# Platform Android (bisa digunakan di Windows)
cordova platform add android

# Platform iOS [TIDAK BISA DIKOMPILASI DI Windows! Hanya untuk komputer Mac]
# cordova platform add iosCode language: PHP (php)

Contoh catatan eksekusi perintah

D:\cordovademo>cd hello

D:\cordovademo\hello>cordova platform add android
Using cordova-fetch for cordova-android
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: com.foxdevelop.hello
        Name: HelloWorld
        Activity: MainActivity
        Android Target SDK: android-36
        Android Compile SDK: 36
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@15.1.0

D:\cordovademo\hello>cordova platform ls
Installed platforms:
  android 15.1.0
Available platforms:
  browser
  electronCode language: CSS (css)

3. Pemeriksaan Persyaratan Lingkungan (Penting)

cordova requirements

Perintah ini berfungsi untuk mengecek apakah lingkungan sistem sudah terpasang dengan benar, misalnya pemasangan JDK dan lain-lain.

D:\cordovademo\hello>cordova requirements
Android SDK is missing cmdline-tools directory.

Requirements check results for android:
Java JDK: installed 11.0.31
Android SDK: installed true
Android target: not installed
Command failed with exit code 1: avdmanager list target
'avdmanager' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
Gradle: not installed
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
Some of requirements check failedCode language: PHP (php)

Hasil pengecekan yang normal adalah seperti ini

Java JDK: installed
Android SDK: installed
Gradle: installed

Tapi di kasus saya, muncul tulisan Gradle: not installed

Jika kamu belum memasang JDK, silakan pasang terlebih dahulu. Panduan pemasangan JDK bisa kamu pelajari di materi lain.

Saya menggunakan JDK versi 11 di perangkat ini.

Pesan error yang muncul di komputer saya sebagai berikut

D:\cordovademo\hello>cordova build android
Checking Java JDK and Android SDK versions
ANDROID_HOME=undefined (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Android SDK is missing cmdline-tools directory.
Using Android SDK: D:\Sortware\ADB
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android StudioCode language: JavaScript (javascript)

Kamu perlu memasang Android Studio yang sudah menyertakan SDK.

Panduan pemasangan Android Studio bisa dilihat di tutorial lainnya.

Buka Android Studio, lalu buka menu atas: Tools → SDK Manager. Setelah itu catat lokasi SDK yang tertera.

Selanjutnya atur variabel lingkungan sistem

Nama variabel: ANDROID_HOME
Nilai variabel: C:\Users\xxxxx\AppData\Local\Android\Sdk

Selain membuat variabel baru, kamu juga harus menambahkan jalur ini ke Path sistem

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\cmdline-tools\latest\bin

Memasang alat command line di Android Studio

Buka Android Studio → Tools → SDK Manager

Pindah ke tab SDK Tools

Mengunduh paket biner Gradle

Unduh dari situs resmi: https://gradle.org/releases/

Ekstrak file ke jalur: C:\gradle\gradle-8.5

Gradle by Develocity | Releases

Pengaturan Variabel Lingkungan Sistem

Nama variabel: GRADLE_HOME
Nilai variabel: C:\gradle-8.7

Buat variabel sistem baru

Tambahkan ke dalam Path

Cek apakah pemasangan berhasil

Buka CMD

gradle -v

Uji ulang, jika muncul hasil seperti dibawah berarti konfigurasi sudah berhasil

D:\cordovademo\hello>cordova requirements

Requirements check results for android:
Java JDK: installed 11.0.31
Android SDK: installed true
Android target: not installed
No android targets (SDKs) installed!
Gradle: installed C:\gradle-8.7\bin\gradle.BAT
Some of requirements check failedCode language: CSS (css)

Masalah 2: Versi JDK

Saat saya menjalankan perintah cordova run android, muncul pesan error berikut

D:\cordovademo\hello>cordova run android
Checking Java JDK and Android SDK versions
ANDROID_HOME=C:\Users\maiwu\AppData\Local\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)

BUILD SUCCESSFUL in 1sCUTING [91ms]
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

[Incubating] Problems report is available at: file:///D:/cordovademo/hello/platforms/android/build/reports/problems/problems-report.html

FAILURE: Build failed with an exception.

* Where:
Build file 'D:\cordovademo\hello\platforms\android\app\build.gradle' line: 20

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin 'com.android.internal.application'.
   > Android Gradle plugin requires Java 17 to run. You are currently using Java 11.
      Your current JDK is located in C:\Program Files\Zulu\zulu-11
      You can try some of the following options:
       - changing the IDE settings.
       - changing the JAVA_HOME environment variable.
       - changing `org.gradle.java.home` in `gradle.properties`.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

For more on this, please refer to https://docs.gradle.org/8.14.2/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.

BUILD FAILED in 2s
Command failed with exit code 1: D:\cordovademo\hello\platforms\android\tools\gradlew.bat cdvBuildDebugCode language: JavaScript (javascript)

Saat ini saya menggunakan JDK11, namun AGP (Android Gradle Plugin) yang digunakan platform Cordova Android wajib menggunakan JDK17, sehingga proses kompilasi gagal.

Sebelumnya saya pakai Zulu JDK 11, jadi kali ini saya akan mengupgrade ke Zulu JDK 17

Silakan unduh di tautan ini Java 8, 11, 17, 21, 25 Download for Linux, Windows and macOS

File unduhan berformat msi, jalankan file tersebut. Centang opsi berikut agar penginstal dapat mengatur JAVA_HOME dan Path secara otomatis.

Buka CMD untuk mengecek versi Java

java -version

openjdk version "17.0.20" 2026-07-21 LTS
OpenJDK Runtime Environment Zulu17.68+17-CA (build 17.0.20+8-LTS)
OpenJDK 64-Bit Server VM Zulu17.68+17-CA (build 17.0.20+8-LTS, mixed mode, sharing)Code language: CSS (css)

Jika tampil hasil seperti di atas berarti pembaruan berhasil.

4. Membangun Aplikasi

# Kompilasi semua platform (saat ini hanya android)
cordova build

# Hanya kompilasi platform Android
cordova build android
Code language: PHP (php)

Setelah kompilasi sukses, lokasi file APK output:

hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk

Contoh catatan eksekusi

D:\cordovademo\hello>cordova build android
Checking Java JDK and Android SDK versions
ANDROID_HOME=C:\Users\maiwu\AppData\Local\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Using Android SDK: C:\Users\maiwu\AppData\Local\Android\Sdk

BUILD SUCCESSFUL in 9s
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

> Task :CordovaLib:compileDebugJavaWithJavac
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

[Incubating] Problems report is available at: file:///D:/cordovademo/hello/platforms/android/build/reports/problems/problems-report.html

BUILD SUCCESSFUL in 11s
50 actionable tasks: 50 executed
Built the following apk(s):
        D:\cordovademo\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apkCode language: JavaScript (javascript)

Kamu bisa menemukan file APK di direktori D:\cordovademo\hello\platforms\android\app\build\outputs\apk\debug\

5. Menjalankan dan Menguji Aplikasi

Cara 1: Jalankan di emulator Android

cordova emulate android

Cara 2: Uji di ponsel asli melalui kabel USB (aktifkan USB debugging)

cordova run android

Kami akan melakukan pengujian di ponsel asli, dan saya juga menyarankan kamu menggunakan perangkat sungguhan. Hubungkan hp Android dengan kabel data lalu aktifkan mode debugging.

Buka CMD di folder hello lalu jalankan perintah cordova run android

Setelah itu aplikasi akan terpasang ke ponsel

Layar halaman Cordova akan muncul di hp

6. Memasang Plugin

Mengakses fitur asli perangkat

Halaman web Cordova tidak bisa langsung mengakses kamera, bluetooth, file, notifikasi dan perangkat keras lainnya. Kamu wajib memasang plugin terlebih dahulu.

Contoh: Plugin kamera

cordova plugin add cordova-plugin-camera

Melihat daftar plugin yang sudah dipasang

cordova plugin ls

Pemanggilan API native dari JavaScript hanya bisa dilakukan setelah event deviceready terpicu. Jangan panggil plugin segera setelah halaman selesai dimuat!

Contoh kode dasar (www/js/index.js)

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    // Perangkat sudah siap, semua plugin Cordova bisa dipanggil
    console.log("Cordova selesai diinisialisasi");
}
Code language: JavaScript (javascript)

Catatan eksekusi

D:\cordovademo\hello>cordova plugin add cordova-plugin-camera
Installing "cordova-plugin-camera" for android
Subproject Path: CordovaLib
Subproject Path: app
Adding cordova-plugin-camera to package.json

D:\cordovademo\hello>cordova plugin ls
cordova-plugin-camera 8.0.0 "Camera"Code language: CSS (css)

Selanjutnya ubah kode index.html seperti dibawah untuk mencoba fungsi kamera

Sebelum itu, mari lihat struktur folder proyek yang sudah dibuat

D:\cordovademo\hello

Nantinya semua pengembangan kode akan dilakukan di folder www

Ubah isi index.html menjadi kode berikut

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Test</title>
    <script src="cordova.js"></script>
</head>
<body>
    <button id="btnTake">Ambil Foto</button>
    <br>
    <img id="imgPreview" style="width:220px;">

    <script>
        let cameraReady = false;

        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady() {
            console.log("deviceready terpanggil, Cordova siap digunakan");
            cameraReady = true;
        }

        // Gunakan addEventListener (onclick sering terjadi masalah urutan eksekusi, lebih disarankan)
        document.getElementById("btnTake").addEventListener("click", function(){
            if(!cameraReady){
                alert("Tunggu hingga Cordova selesai diinisialisasi!");
                return;
            }

            navigator.camera.getPicture(
                function(imageUri) {
                    console.log("Berhasil ambil foto: ", imageUri);
                    document.getElementById("imgPreview").src = imageUri;
                },
                function(error) {
                    alert("Gagal mengambil foto: " + error);
                },
                {
                    destinationType: 0, // Camera.DestinationType.FILE_URI = 0, pakai angka agar tidak error jika objek Camera belum terdefinisi
                    sourceType: 1,      // Camera.PictureSourceType.CAMERA = 1
                    quality: 80
                }
            );
        });
    </script>
</body>
</html>Code language: C# (cs)

Jalankan kembali perintah cordova run android

Aplikasi akan terbuka, kamu akan melihat sebuah tombol. Tekan tombol tersebut lalu kamera akan aktif dan kamu bisa mengambil foto.

* 7. Folder merges: Berkas khusus tiap platform

Secara bawaan semua platform menggunakan sumber daya di folder www.

Jika kamu ingin tampilan atau berkas berbeda antara Android dan iOS, gunakan folder merges:

merges/
├─android/
│  └─css/overrides.css  # Hanya aktif di platform Android
└─ios/
Code language: PHP (php)

Saat proses build, file di dalam merges akan menimpa file dengan nama yang sama di folder www.

* 8. Meningkatkan Versi Cordova

# Perbarui Cordova CLI secara global
npm update -g cordova

# Pasang versi tertentu
npm install -g cordova@12.0.0

# Perbarui versi platform Android di dalam proyek
cordova platform update android --save
Code language: PHP (php)

Daftar ringkasan perintah

#1 Buat proyek
cordova create testapp com.mytest.app TestApp
cd testapp

#2 Tambah platform Android
cordova platform add android

#3 Cek persyaratan lingkungan
cordova requirements

#4 Kompilasi paket debug
cordova build android

#5 Jalankan di perangkat asli
cordova run android
Code language: CSS (css)

Proyek Cordova pertama kamu

Posted in Tutorial Cordova

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *