Belajar Capacitorjs - Project Pertama: Web App → Mobile App

#Pendahuluan

Setelah di episode 1 kita memahami arsitektur Capacitor — WebView, bridge, dan plugin layer — pada episode ini kita langsung terjun ke praktik: menambahkan Capacitor ke aplikasi web React dan menjalankannya di perangkat mobile. Ini adalah momen "aha" pertama di mana kode web kalian berjalan sebagai aplikasi native.

Mengapa langsung praktik? Karena memahami workflow project pertama akan membentuk pola kerja kalian sepanjang series. Kalian akan belajar perintah inti (npx cap init, npx cap add, npx cap run) dan memahami apa yang terjadi di balik setiap command.

#Menyiapkan Project Web

Kita mulai dengan aplikasi React sederhana. Jika sudah punya project, lewati langkah ini:

Buat project React baru

npx create-vite@latest my-capacitor-app --template react-ts
cd my-capacitor-app
npm install
npm run build

Pastikan npm run build menghasilkan folder dist/ — ini adalah output static yang akan dijalankan di WebView nanti.

#Menambahkan Capacitor

#Instalasi Package

Install Capacitor core dan CLI

npm install @capacitor/core @capacitor/cli

Dua package ini sudah cukup untuk memulai:

@capacitor/cli — command-line tool untuk mengelola project.
@capacitor/core — runtime bridge yang menghubungkan web ↔ native.

#Inisialisasi Project

Inisialisasi Capacitor

npx cap init "My Capacitor App" "com.example.mycapacitorapp" --web-dir dist

Parameter:

"My Capacitor App" — nama aplikasi (ditampilkan di home screen).
"com.example.mycapacitorapp" — application ID unik (format reverse domain).
--web-dir dist — folder output build web (Vite default: dist, CRA: build).

Perintah ini membuat capacitor.config.ts di root project.

#Menambahkan Platform

Tambah platform iOS dan Android

npx cap add ios
npx cap add android

Setiap perintah npx cap add membuat folder ios/ atau android/ dengan project native lengkap. Folder ini di-commit ke git — ingat filosofi Capacitor: native project adalah source code.

#Perintah Inti Capacitor

#Sync: Menyinkronkan Web ke Native

Sync web build ke native project

npx cap sync

npx cap sync melakukan tiga hal sekaligus:

Update dependency native (jika ada plugin baru).
Copy file dari folder build web (dist/) ke folder native.
Update plugin registries.

Untuk develop, npx cap copy lebih cepat karena hanya menyalin file tanpa update dependency.

#Run: Menjalankan di Perangkat

Jalankan di simulator/emulator

npx cap run ios
npx cap run android

npx cap run membuka IDE native (Xcode untuk iOS, Android Studio untuk Android) dan menjalankan aplikasi di simulator/emulator yang aktif.

Tip

Untuk pertama kali, buka project native di IDE dulu (npx cap open ios atau npx cap open android) agar bisa konfigurasi signing & emulator secara visual. Setelah nyaman, pakai command line untuk workflow harian.

#Workflow Lengkap: Build → Sync → Run

Rangkuman workflow untuk menjalankan aplikasi:

Workflow lengkap pertama kali

npm run build
npx cap sync
npx cap run ios      # atau npx cap run android

Urutan ini penting: build web dulu, lalu sync ke native, baru run. Jika lupa build, WebView akan menampilkan versi lama atau error.

#Deploy Pertama ke Simulator iOS

Pastikan macOS dan Xcode sudah terinstall (episode 0):

Deploy ke iOS Simulator

npm run build
npx cap sync ios
npx cap run ios --target "iPhone 15"

Aplikasi React kalian akan muncul di iOS Simulator sebagai aplikasi native. Kalian bisa menyentuh tombol, navigasi, dan berinteraksi persis seperti di browser — tetapi sekarang berjalan di WKWebView di dalam shell native iOS.

#Deploy Pertama ke Emulator Android

Deploy ke Android Emulator

npm run build
npx cap sync android
npx cap run android

Pastikan emulator Android sudah aktif dari Android Studio. Aplikasi akan terinstall dan terbuka di emulator.

#Penutup

Di episode 2 ini, kalian telah:

Menginstall Capacitor core dan CLI ke project React.
Menjalankan npx cap init untuk inisialisasi project.
Menambahkan platform iOS dan Android dengan npx cap add.
Menyinkronkan web build ke native dengan npx cap sync.
Menjalankan aplikasi pertama di simulator iOS dan emulator Android.

Inti yang harus dibawa pulang:

npm run build → npx cap sync → npx cap run adalah workflow dasar.
Folder ios/ dan android/ adalah source code, bukan artifact.
--web-dir harus sesuai dengan output build framework kalian.

Di episode 3 selanjutnya kita akan membahas anatomi project dan capacitor.config.ts — struktur folder, konfigurasi TypeScript, server config, dan bagaimana setiap pengaturan mempengaruhi kedua platform. Sampai jumpa!