Mobile development adalah proses membuat aplikasi yang jalan di perangkat mobile, yaitu smartphone dan tablet. Aplikasinya dipasang di HP (biasanya dari App Store atau Play Store), punya ikon sendiri, dan bisa memakai kamera, notifikasi, dan penyimpanan HP. Di track ini kita membuat aplikasi pelanggan Laundry Bu Rini: daftar pesanan, detail tiap order, lalu nanti notifikasi "Siap diambil", mode offline, scan nota dengan kamera, dan link yang langsung membuka satu order. Bayangin Bu Rini mau memasang papan status yang sama di dua kota yang aturan papannya beda, sebut saja kota iOS dan kota Android. Dia bisa menyewa tukang lokal di tiap kota, mengirim satu desain ke tukang lokal yang mengecat dengan cat setempat, membawa cat dan cetakan sendiri supaya hasilnya identik di mana pun, atau mencetak poster lalu menempelnya di bingkai. Empat cara itu adalah empat pendekatan mobile development.
🧪 Tebakan cepat: Aplikasi Laundry Bu Rini bisa dibuat dengan React Native atau dengan Capacitor, dua-duanya ditulis pakai JavaScript. Di salah satunya, baris "#12 Pak Darto" di layar adalah elemen HTML. Yang mana? Jawabannya ada di bagian "Siapa yang menggambar layar".
Dua platform yang kamu targetkan
Hampir semua HP di dunia menjalankan salah satu dari dua sistem operasi:
| Platform | Pembuat | Indonesia | Dunia |
|---|---|---|---|
| Android | 79,16% | 69,17% | |
| iOS | Apple | 20,79% | 30,81% |
Angkanya dari StatCounter, September 2026. StatCounter menghitung page view dari browser HP, bukan jumlah HP yang terjual, jadi anggap ini gambaran kasar, dan selalu sebut sumber dan bulannya kalau mengutip angka seperti ini.
- Windows Phone sudah mati. Microsoft menghentikan dukungan Windows 10 Mobile, versi terakhirnya, pada 10 Desember 2019. Gak ada lagi yang membuat aplikasi untuknya.
- HarmonyOS buatan Huawei. Sejak HarmonyOS NEXT (Oktober 2024, mulai di China) dia gak lagi menjalankan aplikasi Android, jadi butuh aplikasi khusus. Di luar China pemakainya masih sangat sedikit.
Jadi untuk aplikasi Bu Rini, targetnya dua: Android dan iOS.
Siapa yang menggambar layar
Semua pendekatan bisa menampilkan baris order yang sama. Bedanya ada di bahasa yang kamu tulis dan siapa yang menggambar baris itu di layar HP. Versi di tabel ini dicek di situs resminya pada Oktober 2026.
| Pendekatan | Ditulis dengan | Baris #12 di kodenya | Yang menggambar layar | Versi terbaru |
|---|---|---|---|---|
| Native iOS | Swift + SwiftUI | Text("#12 Pak Darto") |
view bawaan iOS | Swift 6.4, lewat Xcode 27 |
| Native Android | Kotlin + Jetpack Compose | Text("#12 Pak Darto") |
toolkit UI Android | Kotlin 2.4.21, Compose BOM 2026.09.00 |
| React Native | JavaScript/TypeScript + React | <Text>#12 Pak Darto</Text> |
view native iOS dan Android | React Native 0.87 |
| Flutter | Dart | Text('#12 Pak Darto') |
engine Flutter sendiri (Impeller), piksel demi piksel | Flutter 3.47.7, Dart 3.13 |
| Kotlin Multiplatform | Kotlin | logika dibagi, UI bisa native per platform | UI native, atau Compose Multiplatform yang menggambar sendiri | Compose Multiplatform 1.12.1 |
| Capacitor | HTML, CSS, JS | <li>#12 Pak Darto</li> |
WebView, browser kecil di dalam aplikasi | Capacitor 8.5.3 |
| PWA | HTML, CSS, JS | <li>#12 Pak Darto</li> |
browser HP itu sendiri | standar web, tanpa versi |
- Native artinya ditulis dengan bahasa resmi tiap platform. Hasilnya paling dekat dengan HP-nya, tapi aplikasi Bu Rini jadi dua kode: satu Swift untuk iOS, satu Kotlin untuk Android.
- Cross-platform artinya satu kode untuk dua platform. React Native mengubah
<Text>jadi view native saat aplikasi berjalan:UITextViewdi iOS,TextViewdi Android (tabel di dokumentasi React Native). Flutter gak memakai view bawaan sama sekali, dia menggambar tiap pikselnya sendiri, jadi hasilnya identik di kedua platform. - Hybrid artinya aplikasi web yang dibungkus jadi aplikasi. Capacitor menaruh halamanmu di WebView (WKWebView di iOS, Android System WebView di Android), dan plugin-nya membuka akses ke kamera atau notifikasi.
- PWA (Progressive Web App) adalah website yang bisa "dipasang" ke layar utama dari browser, tanpa store.
Jadi di Capacitor, baris "#12 Pak Darto" adalah elemen <li> di dalam WebView. Di React Native, dia view native. Itu jawaban tebakannya: dua-duanya JavaScript, tapi cuma Capacitor yang isinya halaman web.
Bekal web developer
Kalau kamu sudah bisa HTML, CSS, JavaScript, dan React, sebagian besar ilmumu langsung terpakai di React Native:
- Tetap sama: JavaScript/TypeScript, komponen dan state React,
fetchke API, cara berpikir tentang data. - Berubah: gak ada tag HTML (
<div>jadi<View>, teks wajib di<Text>), gak ada file CSS (style ditulis sebagai object JavaScript), dan navigasi antarlayar bukan lewat URL di address bar. - Baru sama sekali: aplikasi dipasang dan di-update lewat store, ada izin (permission) untuk kamera dan lokasi, dan aplikasi harus tetap berguna saat sinyal hilang.
Karena itu track ini memakai React Native, lewat Expo. Di pelajaran berikutnya kita bandingkan pendekatan-pendekatan ini dengan kebutuhan nyata aplikasi Bu Rini.
⚠️ Jebakan yang sering ketemu
- Mengira React Native itu WebView. Bukan. Yang memakai WebView adalah Capacitor dan PWA. React Native menghasilkan view native.
- "Tulis sekali, jalan di mana-mana" tanpa beda sedikit pun. Satu kode tetap ketemu perbedaan platform: tombol back Android, gaya header iOS, cara minta izin kamera. Siapkan waktu untuk mengetes di dua platform.
- Mengira PWA sama dengan aplikasi di store. PWA dipasang dari browser. Kalau Bu Rini harus muncul di App Store, PWA saja gak cukup.
- Mengutip pangsa pasar tanpa sumber dan tanggal. Angka seperti "Android 79%" berubah tiap bulan dan beda per cara hitung. Tulis sumbernya dan bulannya.
TL;DR: Mobile development adalah proses membuat aplikasi yang jalan di smartphone dan tablet. Platform utamanya dua: Android dan iOS (StatCounter, September 2026: Indonesia 79,16% Android, 20,79% iOS). Windows Phone sudah dihentikan sejak 2019, HarmonyOS NEXT berdiri sendiri dan dipakai terutama di China. Native (Swift + SwiftUI, Kotlin + Jetpack Compose) berarti dua kode yang digambar platformnya sendiri. React Native memakai satu kode JavaScript yang jadi view native, Flutter menggambar pikselnya sendiri, Kotlin Multiplatform berbagi logika. Capacitor dan PWA menjalankan halaman web, di WebView atau di browser. Web developer paling cepat masuk lewat React Native atau Capacitor.
