Belajar Capacitorjs - Kustomisasi Proyek Native

#Pendahuluan

Setelah di episode 12 kita menulis custom plugin Swift dan Kotlin, pada episode ini kita memahami cara mengkustomisasi proyek native secara langsung. Di Capacitor, native project bukan artifact yang di-generate ulang — ia adalah source code yang di-commit ke git. Kalian bisa (dan harus) mengedit file native langsung untuk kebutuhan spesifik.

Mengapa penting? Karena beberapa konfigurasi hanya bisa dilakukan di level native: permission声明 di Info.plist, Gradle dependencies untuk SDK pihak ketiga, dan AppDelegate/MainActivity extensions untuk lifecycle hooks native.

#iOS: Info.plist

#Permission声明

Setiap permission yang dibutuhkan aplikasi harus dideklarasikan di ios/App/App/Info.plist:

Info.plist - Permission declarations

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "...">
<plist version="1.0">
<dict>
    <!-- Kamera -->
    <key>NSCameraUsageDescription</key>
    <string>Aplikasi membutuhkan akses kamera untuk mengambil foto profil.</string>
 
    <!-- Lokasi -->
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>Aplikasi membutuhkan lokasi untuk menampilkan konten terdekat.</string>
 
    <!-- Push Notification -->
    <key>UIBackgroundModes</key>
    <array>
        <string>remote-notification</string>
    </array>
</dict>
</plist>

#AppDelegate Extension

Untuk menambahkan behavior native di lifecycle iOS, edit AppDelegate.swift:

AppDelegate.swift - Custom lifecycle

import Capacitor
import UserNotifications
 
@UIApplicationMain
class AppDelegate: CAPBridgingAppDelegate {
 
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        // Setup notification delegate
        UNUserNotificationCenter.current().delegate = self
 
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}
 
extension AppDelegate: UNUserNotificationCenterDelegate {
    func userNotificationCenter(
        _ center: UNUserNotificationCenter,
        willPresent notification: UNNotification,
        withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void
    ) {
        // Tampilkan notifikasi meskipun app di foreground
        completionHandler([.banner, .badge, .sound])
    }
}

#Xcode Build Settings

Beberapa konfigurasi hanya bisa diubah di Xcode:

Deployment Target: versi iOS minimum yang didukung.
Code Signing: provisioning profile dan signing certificate.
Push Notification Capability: aktivasi di tab Signing & Capabilities.
Associated Domains: untuk Universal Links.

#Android: AndroidManifest.xml

#Permission声明

AndroidManifest.xml - Permissions

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.mycapacitorapp">
 
    <!-- Internet -->
    <uses-permission android:name="android.permission.INTERNET" />
 
    <!-- Kamera -->
    <uses-permission android:name="android.permission.CAMERA" />
 
    <!-- Lokasi -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
 
    <!-- Push Notification -->
    <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />
</manifest>

#Application Tags

AndroidManifest.xml - Application config

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme">
 
    <!-- Deep Link -->
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="https"
              android:host="myapp.com"
              android:pathPrefix="/article" />
    </intent-filter>
</application>

#Gradle Dependencies

#build.gradle (Project)

android/build.gradle

buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.4.0'
    }
}

#build.gradle (App)

android/app/build.gradle

apply plugin: 'com.google.gms.google-services'
 
dependencies {
    // Firebase
    implementation 'com.google.firebase:firebase-analytics:22.0.0'
    implementation 'com.google.firebase:firebase-messaging:24.0.0'
 
    // Third-party SDK
    implementation 'com.stripe:stripe-android:20.0.0'
}

#Filosofi: Native Project sebagai Source of Truth

Perbedaan fundamental Capacitor vs Cordova:

Aspek	Capacitor	Cordova
Native project	Source code (di-commit)	Artifact (di-generate)
Edit native	Langsung edit file	Harus lewat config.xml
Hilang saat rebuild	Tidak	Ya
Tim native bisa kontribusi	Ya	Sulit

Implikasinya:

Edit Info.plist langsung di Xcode atau text editor.
Edit AndroidManifest.xml langsung.
Semua perubahan persisten di git.

Warning

Jangan edit file di node_modules/@capacitor/. Edit selalu di project native kalian sendiri (ios/App/ atau android/app/). File di node_modules akan ditimpa saat npm install.

#Praktik: Tambah Permission Kamera + Dependency Native

#iOS

Buka Info.plist, tambahkan NSCameraUsageDescription.
Buka Xcode → Signing & Capabilities → tambahkan Camera capability.
Test: jalankan app dan panggil Camera.getPhoto() — permission dialog muncul.

#Android

Tambahkan <uses-permission android:name="android.permission.CAMERA"/> di AndroidManifest.xml.
Tambahkan library barcode scanning di build.gradle jika diperlukan.
Test: jalankan di emulator dan panggil fungsi kamera.

#Penutup

Pada episode 13 ini, kalian telah memahami:

Info.plist (iOS) dan AndroidManifest.xml (Android) untuk permission声明.
AppDelegate dan MainActivity untuk lifecycle extension.
Gradle dependencies untuk SDK pihak ketiga.
Filosofi Capacitor: native project di-commit ke git, bukan di-generate.

Di episode 14 selanjutnya, kita akan membahas Swift Package Manager & Dependency Management — adopsi SPM sebagai package manager iOS di Capacitor 8, migrasi dari CocoaPods, dan cara menambah SDK iOS via SPM. Sampai jumpa!