Belajar Capacitorjs - Anatomi Proyek & capacitor.config.ts

#Pendahuluan

Setelah di episode 2 kita berhasil menjalankan aplikasi pertama di simulator iOS dan emulator Android, pada episode ini kita membedah struktur project dan file konfigurasi utama. Memahami anatomi project adalah kunci untuk kustomisasi yang tepat — dari mengubah appId hingga mengonfigurasi plugin per-platform.

Mengapa penting? Karena capacitor.config.ts adalah pusat kendali seluruh project Capacitor. Setiap keputusan konfigurasi — web directory, server settings, plugin options — ditentukan di sini. Kesalahan konfigurasi adalah penyebab umum build gagal.

#Struktur Folder Project

Setelah npx cap add ios dan npx cap add android, struktur project kalian akan seperti ini:

Struktur folder Capacitor

my-app/
├── ios/                    ← Xcode project (commit ke git)
│   ├── App/
│   │   ├── App/
│   │   │   ├── AppDelegate.swift
│   │   │   ├── Info.plist
│   │   │   └── Assets.xcassets
│   │   └── App.xcodeproj
│   └── Pods/               ← CocoaPods (legacy)
├── android/                ← Android/Gradle project (commit ke git)
│   ├── app/
│   │   ├── src/main/
│   │   │   ├── AndroidManifest.xml
│   │   │   ├── java/...
│   │   │   └── res/
│   │   └── build.gradle
│   └── build.gradle
├── src/                    ← Kode web kalian
├── dist/                   ← Output build web
├── capacitor.config.ts     ← Konfigurasi utama
└── package.json

#Folder `ios/`

Berisi Xcode project lengkap: AppDelegate.swift adalah entry point native iOS, Info.plist berisi metadata dan permission, Assets.xcassets berisi icon dan splash screen. Folder ini di-commit ke git agar perubahan native tidak hilang.

#Folder `android/`

Berisi Gradle project: AndroidManifest.xml berisi permission dan metadata, MainActivity.java adalah entry point native Android, build.gradle berisi dependency dan konfigurasi build.

#Mengapa Di-Commit ke Git?

Karena Capacitor memperlakukan native project sebagai source code. Jika kalian mengedit Info.plist untuk menambah permission kamera, perubahan itu harus persisten. Jika native project di-generate ulang (seperti Cordova), perubahan native akan hilang setiap rebuild.

#capacitor.config.ts

File konfigurasi utama Capacitor. Capacitor 8 mendukung TypeScript 7 untuk config typing:

capacitor.config.ts

import type { CapacitorConfig } from '@capacitor/cli';
 
const config: CapacitorConfig = {
  appId: 'com.example.mycapacitorapp',
  appName: 'My Capacitor App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      backgroundColor: '#ffffff',
      androidScaleType: 'CENTER_CROP',
      showSpinner: true,
    },
  },
};
 
export default config;

#Opsi Utama Config

Opsi	Tipe	Deskripsi
`appId`	`string`	Application ID unik (reverse domain). Diubah → app dianggap baru oleh store.
`appName`	`string`	Nama tampilan di home screen dan store.
`webDir`	`string`	Folder output build web. Harus sesuai dengan framework kalian.
`server.androidScheme`	`string`	Skema URL untuk Android (`https` direkomendasikan).
`plugins`	`object`	Konfigurasi per-plugin (override default per-plugin).

#Konfigurasi Server

Server config menentukan bagaimana WebView memuat konten:

Server config

const config: CapacitorConfig = {
  // ...
  server: {
    androidScheme: 'https',
    // Untuk development (live reload), uncomment:
    // url: 'http://192.168.1.100:5173',
    // cleartext: true,
  },
};

androidScheme: 'https' membuat WebView menggunakan skema HTTPS untuk konten lokal, yang menghindari masalah CORS dan mixed content di Android.

#Konfigurasi Plugin

Setiap plugin bisa dikonfigurasi di level config:

Plugin config

const config: CapacitorConfig = {
  // ...
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
    },
    PushNotifications: {
      presentationOptions: ['badge', 'sound', 'alert'],
    },
  },
};

#Customize Icon dan Splash Screen

#iOS

Buka ios/App/App/Assets.xcassets di Xcode. Ganti AppIcon dengan icon berbagai ukuran. Untuk splash screen, edit LaunchStoryboard.storyboard di Interface Builder.

#Android

Letakkan icon di android/app/src/main/res/mipmap-* dalam berbagai densitas (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi). Splash screen dikonfigurasi via @capacitor/splash-screen plugin.

Note

Untuk pengelolaan icon yang lebih mudah, gunakan tool seperti capacitor-assets yang bisa generate semua ukuran dari satu file PNG. Kita bahas detail ini di episode 11.

#Memahami App ID

appId (atau applicationId di Android) adalah identitas unik aplikasi:

Format reverse domain: com.company.appname.
Diubah → store menganggapnya sebagai aplikasi baru.
iOS dan Android menggunakan appId yang sama untuk mempermudah manajemen.

Contoh appId

appId: 'com.acme.tasks',      // benar
appId: 'com.acme.tasks-app',  // juga benar
appId: 'tasks',                // salah — harus reverse domain

#Penutup

Pada episode 3 ini, kalian telah memahami:

Struktur folder ios/ dan android/ serta mengapa di-commit ke git.
capacitor.config.ts adalah pusat konfigurasi project.
Opsi utama: appId, appName, webDir, server, plugins.
App ID harus reverse domain dan persisten.

Di episode 4 selanjutnya, kita akan membahas development workflow dan live reload — bagaimana npx cap copy vs sync bekerja, cara setup live reload sehingga perubahan kode langsung terlihat di perangkat, dan workflow hot-reload yang nyaman. Sampai jumpa!