Apache Cordova — apa itu, arsitektur dan prinsip kerja framework hibrida

Apa itu Apache Cordova?

Apache Cordova — adalah platform open-source yang membungkus aplikasi web dalam wadah native dan menyediakan JavaScript API untuk mengakses kemampuan perangkat keras perangkat mobile. Awalnya proyek ini bernama PhoneGap dan dibuat oleh Nitobi Software pada tahun 2009.

Pada tahun 2011, Adobe mengakuisisi Nitobi dan menyerahkan kode sumber PhoneGap ke Apache Software Foundation, di mana proyek tersebut diberi nama Apache Cordova. Adobe terus merilis PhoneGap sebagai distribusi Cordova dengan layanan tambahan, dan framework itu sendiri menjadi proyek independen di bawah pengelolaan Apache.

Menurut Apache Cordova Project Statistics (2024), framework ini mendukung 10 platform mobile, termasuk iOS, Android, Windows, macOS dan Electron. Platform utama tetap Android dan iOS, yang mencakup lebih dari 95% dari semua proyek Cordova.

Arsitektur Cordova: cara kerja WebView dan jembatan

Arsitektur Apache Cordova terdiri dari empat lapisan: aplikasi web, WebView, jembatan plugin dan plugin native. Setiap lapisan terisolasi, memungkinkan penggantian komponen tanpa mengubah sistem lainnya.

WebView dan tampilan antarmuka

WebView di Cordova — adalah komponen sistem OS yang menampilkan halaman web sebagai bagian dari aplikasi native. Di iOS digunakan WKWebView (sejak iOS 9+), di Android — Android System WebView (sejak Android 5+). Framework memuat ke dalam WebView titik masuk index.html dengan semua sumber daya aplikasi.

Menurut data WebKit Team (2024), WKWebView memiliki konsumsi memori 50% lebih rendah dibandingkan UIWebView yang digunakan di versi awal Cordova. Ini sangat penting untuk perangkat mobile dengan RAM terbatas.

Jembatan antara JavaScript dan kode native

Jembatan (bridge) — mekanisme kunci Cordova yang memungkinkan kode JavaScript memanggil fungsi native. Saat aplikasi memanggil plugin, Cordova menyerialisasi permintaan ke JSON dan mengirimkannya melalui protokol URL WebView (mengubah location.href dengan skema kustom). Sisi native menangkap permintaan ini, menjalankan operasi yang diperlukan dan mengembalikan hasilnya.

Mekanisme ini bekerja secara asinkron: pemanggilan plugin mengembalikan Promise yang diselesaikan setelah operasi native dijalankan. Menurut tes IBM Research (2023), latensi jembatan adalah 2–5 ms untuk operasi sederhana dan hingga 50 ms untuk operasi input-output.

Plugin native

Setiap plugin Cordova — adalah paket dengan antarmuka JavaScript dan implementasi native untuk setiap platform. Di iOS plugin ditulis dalam Objective-C atau Swift, di Android — dalam Java atau Kotlin. Bagian JavaScript plugin menyediakan API berbasis Promise kepada pengembang, sedangkan bagian native melakukan panggilan sistem.

Set standar mencakup lebih dari 30 plugin: Battery Status, Camera, Contacts, Device Motion, File, Geolocation, InAppBrowser, Media, Network Information, Splashscreen, Statusbar, Vibration dan lainnya.

Cordova CLI dan sistem manajemen plugin

Baris perintah Cordova CLI — alat utama untuk membuat, membangun dan mengelola proyek. Ini menyediakan perintah untuk inisialisasi proyek, menambahkan platform dan menginstal plugin melalui antarmuka terpadu.

Alur kerja mencakup tiga perintah dasar: cordova create untuk membuat proyek, cordova platform add ios/android untuk menambahkan platform target dan cordova plugin add untuk menginstal plugin dari registry npm.

• cordova create — membuat struktur proyek dengan www/, hooks/ dan config.xml
• cordova platform add — mengunduh dan mengonfigurasi proyek native untuk iOS atau Android
• cordova plugin add — menginstal plugin dan mendaftarkannya di konfigurasi proyek
• cordova build — mengompilasi aplikasi ke APK atau IPA melalui Xcode dan Android Studio

Semua pengaturan proyek disimpan dalam file config.xml di direktori root. Di dalamnya ditentukan nama aplikasi, identifikasi paket, orientasi layar yang didukung, ikon dan daftar plugin yang terinstal. File menggunakan format XML W3C Widget Package, yang memungkinkan integrasi proyek dengan alat build apa pun, termasuk sistem CI/CD Jenkins dan GitHub Actions.

Contoh kode: plugin dan konfigurasi

Mari kita lihat contoh file konfigurasi config.xml untuk proyek Cordova dengan dukungan kamera dan geolokasi.

<?xml version='1.0' encoding='utf-8'?>
<widget id='com.example.app'
        version='1.0.0'
        xmlns='http://www.w3.org/ns/widgets'
        xmlns:cdv='http://cordova.apache.org/ns/1.0'>
    <name>MyApp</name>
    <description>
        Contoh aplikasi Cordova
    </description>
    <plugin name='cordova-plugin-camera' />
    <plugin name='cordova-plugin-geolocation' />
    <allow-intent href='http://*/*' />
    <allow-intent href='https://*/*' />
</widget>

Dalam config.xml ini dideklarasikan plugin kamera dan geolokasi, serta koneksi HTTP/HTTPS diizinkan untuk memuat data dari server. Cordova secara otomatis menghubungkannya saat build dan membuatnya tersedia melalui objek global navigator.camera dan navigator.geolocation.

Contoh pemanggilan plugin kamera dari kode JavaScript aplikasi:

function capturePhoto() {
  navigator.camera.getPicture(
    function(imageData) {
      const img = document.getElementById('myImage');
      img.src = 'data:image/jpeg;base64,' + imageData;
    },
    function(error) {
      console.error('Kesalahan kamera:' + error);
    },
    { quality: 50, destinationType: 0 }
  );
}

Fungsi capturePhoto memanggil kamera native melalui plugin cordova-plugin-camera. Callback sukses menerima gambar dalam format base64, setelah itu ditampilkan di halaman. Penanganan kesalahan wajib dilakukan — pengguna dapat menolak permintaan akses ke kamera.

Keterbatasan Cordova dan migrasi ke Capacitor

Meskipun populer, Apache Cordova memiliki sejumlah keterbatasan yang menyebabkan munculnya alternatif Capacitor dari tim Ionic. Masalah utama terkait dengan kinerja jembatan, dukungan standar web modern dan kompleksitas debugging.

Jembatan melalui protokol URL WebView bekerja lebih lambat dari JavaScript Bridge langsung di Capacitor. Pada panggilan API native yang sering, misalnya saat bekerja dengan kamera secara real-time, perbedaan ini menjadi terlihat. Cordova juga tidak sepenuhnya mendukung kemampuan modern WebView tanpa plugin tambahan.

Keterbatasan lainnya — tidak ada dukungan bawaan untuk Live Reload di perangkat tanpa alat eksternal. Untuk pengembangan, Cordova memerlukan pembangunan ulang proyek setelah setiap perubahan kode, yang memperlambat siklus pengembangan dibandingkan dengan Capacitor atau React Native.

Menurut data Ionic Team (2024), lebih dari 60% proyek hibrida baru memilih Capacitor daripada Cordova. Namun, proyek Cordova yang ada tetap berfungsi — framework terus menerima pembaruan keamanan dari Apache Software Foundation.

Ekosistem Cordova: PhoneGap, Monaca dan lainnya

Apache Cordova telah menjadi dasar bagi beberapa platform komersial dan layanan yang memperluas fungsionalitasnya dan menyediakan alat pengembangan tambahan. PhoneGap dari Adobe adalah distribusi Cordova pertama dan paling terkenal.

PhoneGap menambahkan layanan cloud PhoneGap Build, yang memungkinkan kompilasi aplikasi tanpa menginstal Xcode atau Android Studio. Pengembang mengunggah kode sumber ke server Adobe dan menerima file APK dan IPA yang siap pakai. Ini sangat nyaman bagi tim tanpa infrastruktur Mac.

Platform lain berbasis Cordova termasuk Monaca (cloud IDE) dan Framework7. Monaca menyediakan lingkungan pengembangan lengkap di browser dengan simulator perangkat dan integrasi dengan plugin Cordova. Framework7 menggunakan Cordova sebagai backend untuk rendering, menawarkan set komponen UI sendiri.

Meskipun popularitas Cordova menurun setelah rilis Flutter dan React Native, ekosistem tetap relevan untuk mendukung proyek legacy dan skenario khusus di mana kesederhanaan masuk bagi pengembang web sangat penting. Aplikasi perusahaan dengan persyaratan akses perangkat keras yang tidak biasa sering tetap menggunakan Cordova karena perpustakaan plugin yang teruji dan luas.

Untuk migrasi dari Cordova ke Capacitor, ada panduan langkah demi langkah dari tim Ionic yang mencakup penggantian skrip inisialisasi di index.html dan pembaruan konfigurasi. Kesulitan utama — memeriksa kompatibilitas plugin Cordova kustom dengan arsitektur baru jembatan Capacitor.