Belajar Capacitorjs - Development Workflow & Live Reload

#Pendahuluan

Setelah di episode 3 kita memahami anatomi project dan capacitor.config.ts, pada episode ini kita fokus ke development workflow sehari-hari. Di dunia nyata, kalian tidak akan rebuild dan sync manual setiap kali mengedit kode. Live reload dan hot-reload adalah kunci produktivitas.

Mengapa workflow penting? Karena perbedaan kecil antara copy dan sync bisa menambah 30 detik di setiap siklus develop. Kalikan dengan ratusan iterasi per hari, itu waktu yang signifikan.

#copy vs sync: Perbedaan Kritis

Dua command yang sering tertukar:

npx cap copy          # cepat, untuk iterasi develop
npx cap sync          # lengkap, setelah perubahan dependency

Aturan praktis: gunakan copy saat development harian, gunakan sync saat menambah/menghapus plugin atau mengubah capacitor.config.ts.

#Workflow Dasar: Build → Copy → Run

Workflow standar tanpa live reload:

npm run build          # 1. Build web ke dist/
npx cap copy           # 2. Copy dist/ ke folder native
npx cap run ios        # 3. Jalankan di simulator

Setiap kali mengedit kode, kalian harus menjalankan tiga command ini. Ini lambat, tetapi membantu memahami alur data: kode web → build → copy → native project → WebView.

#Setup Live Reload

Live reload membuat WebView memuat konten dari dev server di host (komputer kalian), bukan dari file statis yang di-copy. Artinya, perubahan kode langsung terlihat tanpa rebuild.

#Langkah Setup

1. Jalankan dev server framework kalian:

npm run dev
# Vite default: http://localhost:5173

2. Update capacitor.config.ts dengan URL dev server:

const config: CapacitorConfig = {
  // ...
  server: {
    url: 'http://192.168.1.100:5173',
    cleartext: true,
    androidScheme: 'https',
  },
};

3. Jalankan dengan flag live-reload:

npx cap run ios --live-reload
npx cap run android --live-reload

Sekarang setiap kali kalian mengedit kode di VS Code, perubahan langsung muncul di simulator/emulator tanpa rebuild.

#Penting: Alamat IP, Bukan localhost

WebView berjalan di dalam perangkat virtual. Ia tidak bisa mengakses localhost komputer kalian. Kalian harus menggunakan IP address lokal komputer host:

# macOS
ipconfig getifaddr en0
 
# Linux
hostname -I
 
# Windows
ipconfig

Gunakan IP ini di server.url, bukan localhost.

#HTTPS untuk Live Reload

Beberapa fitur web (service worker, camera API) membutuhkan konteks HTTPS. Untuk live reload dengan HTTPS:

npx cap run ios --live-reload --https
npx cap run android --live-reload --https

Capacitor akan generate sertifikat self-signed. Di iOS Simulator, kalian perlu mempercayai sertifikat ini manual. Di Android, kalian perlu menambahkan network security config.

#Workflow Optimized untuk Development

Setelah live reload aktif, workflow harian menjadi:

1. Jalankan npm run dev di terminal pertama (dev server).
2. Jalankan npx cap run ios --live-reload di terminal kedua (sekali saja).
3. Edit kode di editor — perubahan langsung muncul di simulator.

Siklus develop yang sebelumnya membutuhkan 3 command setiap iterasi, sekarang hanya edit → save → lihat perubahan.

#Ketika Harus Sync Ulang

Kembali ke npx cap sync saat:

• Install atau remove plugin (npm install @capacitor/camera).
• Mengubah capacitor.config.ts secara signifikan.
• Update Capacitor version (npm update @capacitor/core).
• Pertama kali setelah clone repo baru.

npm install @capacitor/camera
npx cap sync

#Penutup

Pada episode 4 ini, kalian telah memahami:

• copy untuk development cepat, sync untuk perubahan dependency.
• Live reload menghilangkan siklus rebuild manual.
• IP address host, bukan localhost, di server.url.
• --https untuk fitur yang membutuhkan secure context.

Di episode 5 selanjutnya, kita akan membahas plugin system dan core plugins — bagaimana model API plugin bekerja, plugin resmi vs komunitas, dan integrasi lima core plugin ke aplikasi contoh. Sampai jumpa!