Belajar Capacitorjs - Plugin System & Core Plugins

#Pendahuluan

Setelah di episode 4 kita setup live reload dan workflow development yang nyaman, pada episode ini kita masuk ke jantung Capacitor: plugin system. Plugin adalah alasan utama Capacitor bisa mengakses hardware dan API native dari JavaScript. Memahami cara kerja plugin adalah kunci untuk memanfaatkan seluruh potensi platform.

Mengapa plugin penting? Karena WebView sendiri hanya menjalankan kode web biasa. Untuk mengakses kamera, GPS, notifikasi, dan hardware lainnya, kalian membutuhkan plugin yang menjembatani JavaScript ke native code.

#Bagaimana Plugin Bekerja

Setiap plugin Capacitor terdiri dari tiga lapisan:

1. JavaScript API — interface yang kalian import dan panggil dari kode web.
2. Bridge — menerjemahkan panggilan JS ke RPC ke native code.
3. Native Implementation — kode Swift (iOS) dan Kotlin (Android) yang berinteraksi dengan hardware.

Ketika kalian memanggil Camera.getPhoto(), bridge mengirim pesan ke kode native yang menjalankan kamera perangkat, lalu mengembalikan hasilnya ke JavaScript sebagai Promise.

#Plugin Resmi vs Komunitas

#Plugin Resmi (Capacitor Team)

Dikeluarkan dan dipelihara oleh Ionic/Capacitor team. Kualitas production-ready, dokumentasi lengkap, dan diuji di kedua platform. Beberapa contoh:

#Plugin Komunitas

Dikembangkan oleh komunitas, tersedia di npm dengan prefix @capacitor-community/. Contoh: @capacitor-community/firebase-analytics, @capacitor-community/barcode-scanner. Kualitas bervariasi — selalu cek jumlah install, maintenance terakhir, dan kompatibilitas versi.

npm search @capacitor
npm search @capacitor-community

#Menginstall dan Menggunakan Plugin

#Langkah Instalasi

npm install @capacitor/app @capacitor/haptics @capacitor/status-bar @capacitor/share @capacitor/screen-orientation
npx cap sync

Setelah install, npx cap sync mendaftarkan plugin ke kedua platform native.

#Menggunakan Plugin di Kode

import { App } from '@capacitor/app';
import { Haptics, ImpactStyle } from '@capacitor/haptics';
import { StatusBar, Style } from '@capacitor/status-bar';
 
// Dengarkan lifecycle app
App.addListener('appStateChange', ({ isActive }) => {
  console.log('App state changed. Is active:', isActive);
});
 
// Trigger haptic feedback
await Haptics.impact({ style: ImpactStyle.Medium });
 
// Ubah style status bar
await StatusBar.setStyle({ style: Style.Dark });

#Menggunakan Share Plugin

import { Share } from '@capacitor/share';
 
async function shareContent() {
  await Share.share({
    title: 'Lihat ini!',
    text: 'Artikel menarik tentang Capacitor',
    url: 'https://capacitorjs.com',
  });
}

#Menggunakan Screen Orientation

import { ScreenOrientation, OrientationLockTypes } from '@capacitor/screen-orientation';
 
// Lock ke portrait
await ScreenOrientation.lock({ orientation: OrientationLockTypes.PORTRAIT });
 
// Dapatkan orientasi saat ini
const orientation = await ScreenOrientation.orientation();
console.log('Current orientation:', orientation.type);

#Lifecycle Events dengan App Plugin

App plugin memberikan akses ke lifecycle events yang penting untuk aplikasi mobile:

import { App } from '@capacitor/app';
 
App.addListener('appStateChange', ({ isActive }) => {
  if (!isActive) {
    // App masuk background — simpan state, pause animasi
    saveApplicationState();
  } else {
    // App kembali ke foreground — refresh data
    refreshData();
  }
});
 
App.addListener('backButton', ({ canGoBack }) => {
  if (canGoBack) {
    window.history.back();
  } else {
    // Tampilkan dialog konfirmasi exit
    showExitDialog();
  }
});

#Mencari Plugin yang Tepat

Saat membutuhkan fitur native, langkah pertama adalah mengecek plugin resmi:

1. Buka capacitorjs.com/docs/plugins.
2. Cari di npm: npm search @capacitor atau npm search @capacitor-community.
3. Cek: jumlah weekly install, last publish date, GitHub issues, kompatibilitas versi Capacitor.

#Penutup

Pada episode 5 ini, kalian telah memahami:

• Plugin terdiri dari JS API → Bridge → Native Implementation.
• Plugin resmi dipelihara Ionic; komunitas tersedia di npm.
• Install plugin → npx cap sync → import di kode → panggil API.
• App plugin memberikan akses ke lifecycle events penting.

Di episode 6 selanjutnya, kita akan membahas Camera, Filesystem, dan Media — API untuk mengambil foto, membaca/menulis file di storage native, dan membangun fitur upload foto avatar end-to-end. Sampai jumpa!