Belajar Capacitorjs - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Capacitorjs! Series ini akan membawa kalian menguasai Capacitor — native runtime lintas-platform dari Ionic yang membungkus aplikasi web ke dalam shell native (iOS & Android) — dari fondasi konsep sampai CI/CD, live update, dan publikasi ke store. Total ada 28 episode yang tersusun dalam enam fase.

Sebelum menjalankan npx cap init, ada skill dasar dan perangkat lunak yang wajib kalian siapkan. Mengapa prasyarat ini penting? Karena Capacitor berjalan di atas ekosistem JavaScript dan membutuhkan toolchain native: Xcode untuk iOS, Android Studio untuk Android. Tanpa environment yang lengkap, kalian akan terjebak di masalah setup alih-alih belajar konsep penting.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar terpenuhi, menyiapkan perangkat lunak, dan memverifikasi environment. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#JavaScript/TypeScript

Capacitor menggunakan JavaScript atau TypeScript sebagai bahasa utama. Kalian wajib nyaman dengan konsep async/await, ES modules, dan template literal. Sebagian besar project modern memakai TypeScript, jadi pahami juga typing dasar seperti interface dan type union.

#Satu Framework UI Modern

Capacitor tidak memaksa framework tertentu. Kalian bisa menggunakan React, Vue, Angular, Svelte, atau bahkan vanilla HTML/JS. Yang penting, kalian sudah memiliki satu project web yang bisa di-build menjadi static bundle. Jika belum punya, buat dulu project sederhana dengan framework pilihan kalian.

#Dasar Node.js dan Package Manager

Node.js adalah runtime yang menjalankan seluruh tooling Capacitor. Kalian akan berinteraksi dengan npm, npx, atau bun untuk install package dan menjalankan command. Pastikan sudah paham konsep package.json dan cara kerja dependency manager.

#Konsep Dasar Mobile OS

Tidak perlu jago native development, tetapi kalian perlu memahami konsep dasar: perbedaan iOS dan Android dari sisi environment development, apa itu emulator/simulator, dan bagaimana perangkat menangani permission.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js Versi 20 atau Lebih Baru

Capacitor 8 membutuhkan Node.js ≥20. Cek versi yang terinstall:

node --version
npm --version

Jika versi di bawah 20, install versi LTS terbaru dari nodejs.org atau lewat nvm.

#Xcode dan iOS Simulator (macOS)

Untuk pengembangan iOS, kalian butuh Xcode dari App Store (minimal versi 15). Setelah install, aktifkan Command Line Tools:

xcode-select --install

Buka Xcode sekali, setujui lisensinya, dan pastikan minimal satu iOS Simulator tersedia. Untuk Linux/Windows, pengembangan iOS tidak tersedia — fokus ke Android dulu.

#Android Studio, SDK, dan Emulator

Untuk pengembangan Android, kalian butuh Android Studio. Setelah install, buka SDK Manager dan pastikan komponen ini terpasang:

• Android SDK Platform (minimal API 24/Android 7.0)
• Android SDK Build-Tools
• Android SDK Platform-Tools
• Android Emulator

Buat satu virtual device (AVD) misalnya Pixel dengan Android terbaru:

$ANDROID_HOME/emulator/emulator -list-avds

#Java Development Kit (JDK)

Android build membutuhkan JDK 17+. Pastikan terinstall:

java -version

Jika belum terinstall, pakai JDK 17 dari Adoptium (Eclipse Temurin) atau distribusi default Android Studio.

#Verifikasi Environment

Jalankan verifikasi menyeluruh sebelum lanjut ke episode 1:

node --version
npm --version
java -version
xcodebuild -version   # macOS only
$ANDROID_HOME/platform-tools/adb --version

Semua command di atas harus mengeluarkan output versi tanpa error. Jika ada yang gagal, selesaikan dulu sebelum melanjutkan.

#Ringkasan Prasyarat

Rangkuman yang sudah kalian siapkan di episode 0:

• Skill: JavaScript/TypeScript, satu framework UI, Node.js dasar, konsep mobile OS.
• Node.js ≥20 dengan npm/npx.
• Xcode + iOS Simulator (macOS only).
• Android Studio + SDK + satu AVD aktif.
• JDK 17+ untuk build Android.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi sebelum melanjutkan. Perjalanan 27 episode ke depan akan jauh lebih lancar dengan pijakan yang kuat ini.

#Penutup

Inti yang harus dibawa pulang:

• Capacitor membutuhkan JavaScript/TypeScript + satu framework UI sebagai fondasi web.
• Node.js ≥20, Xcode (macOS), dan Android Studio adalah toolchain wajib.
• Verifikasi environment dengan command di atas sebelum lanjut.

Di episode 1 selanjutnya kita akan membahas pengenalan Capacitor dan arsitekturnya — dari native runtime yang membungkus aplikasi web dalam WebView, bridge JS ↔ native, plugin layer, hingga perbandingan Capacitor vs React Native vs Flutter vs PWA. Pastikan environment kalian sudah siap, karena perjalanan Belajar Capacitorjs baru saja dimulai!