Ubah Base44 ke Native Mobile Apps dengan Capacitor

Pendahuluan

Base44 adalah AI-powered app builder yang bisa generate aplikasi React lengkap dari prompt. Anda bisa merilis produk yang berjalan di browser dengan cepat — tapi bagaimana jika ingin di iOS dan Android? Di tutorial ini, kami tunjukkan cara export proyek Base44 Anda dan mengubahnya menjadi native mobile apps dengan Capacitor, lalu rilis biner store yang sudah ditandatangani dengan Capgo Builder — tidak butuh Mac untuk iOS.

Versi singkat: halaman Base44 ke iOS dan Android merangkum seluruh alur dalam satu layar: export, Capacitor, cloud build tanpa Mac, dan live updates.

Di akhir panduan ini, aplikasi Base44 Anda akan berjalan secara native di iOS dan Android dengan akses ke fitur perangkat seperti kamera, storage, dan push notifications.

Prasyarat & Estimasi Waktu

Waktu yang Dibutuhkan: 2-4 jam untuk setup pertama kali

Persyaratan Sistem:

• Untuk cloud build iOS: OS apa pun (Windows, Mac, atau Linux) dengan Capgo Builder
• Untuk cloud build Android: OS apa pun
• Penyimpanan: 10GB ruang gratis untuk dependensi dan build artifacts
• RAM: Minimal 8GB

Biaya:

• Ekspor Base44: Paket Builder atau lebih tinggi (untuk ekspor GitHub dan download ZIP)
• App Store iOS: $99/tahun (Akun Apple Developer)
• Play Store Android: $25 sekali bayar (Google Play Developer)
• Cursor Pro: $20/bulan (opsional tapi disarankan)

Software yang Dibutuhkan:

• Node.js 18+
• Editor code seperti Cursor

Mengapa Ubah App Base44 Anda ke Mobile?

• Jangkauan lebih luas: Temui pengguna di tempat mereka mengharapkan ikon app native, bukan tab browser
• Fitur Native: Kamera, GPS, biometrik, dan penyimpanan offline via plugin Capacitor
• Distribusi App Store: Publish di Google Play dan Apple App Store
• Iterasi lebih cepat: Padukan Capgo Live Updates dengan Capgo Builder untuk perbaikan web-layer tanpa perlu rebuild native binaries setiap saat

Langkah 1: Ekspor Proyek Base44 Anda

Base44 memungkinkan Anda mengekspor code setelah Anda menggunakan plan Builder atau lebih tinggi. Anda punya dua opsi utama.

Opsi A: Ekspor ke GitHub (Direkomendasikan)

1. Buka aplikasi Anda di editor Base44
2. Klik tombol GitHub ikon di bar atas
3. Otorisasi Base44 Builder dan buat atau hubungkan repositori
4. Base44 menyinkronkan code aplikasi Anda ke GitHub secara otomatis (sinkronisasi dua arah pada paket yang didukung)

Lihat Dokumentasi integrasi GitHub Base44 untuk detail selengkapnya.

Opsi B: Download sebagai ZIP

1. Klik Code di bar atas untuk membuka file browser
2. Klik Ekspor proyek sebagai ZIP di bagian kanan atas tampilan code
3. Ekstrak arsip di komputer Anda

Buka Proyek di Cursor

1. Kunjungi cursor.sh dan instal Cursor
2. Clone repo GitHub Anda (Git: Clone dari command palette) atau buka folder ZIP yang telah diekstrak dengan File > Buka Folder

Untuk workflow berbantuan AI terbaik, aktifkan model pilihan Anda dan izinkan eksekusi perintah di pengaturan Cursor — setup yang sama seperti yang dijelaskan di panduan Lovable ke mobile kami.

Langkah 2: Siapkan Lingkungan Pengembangan Anda

Base44 mengekspor proyek React standar. Install dependencies dan pastikan dev server berjalan lancar.

Menggunakan Cursor AI (Direkomendasikan)

Tekan Command+K (Mac) atau Ctrl+K (Windows) dan tanyakan:

Install Node.js if needed, install project dependencies, and start the dev server

Setup Manual

cd your-base44-project
npm install
npm run dev

Aplikasi Base44 Anda seharusnya dimuat di http://localhost:5173 (Vite) atau port yang muncul di terminal.

Langkah 3: Siapkan Production Build

Capacitor membutuhkan aset web statis. Aplikasi React Base44 biasanya menggunakan Vite dan output ke dist/.

Konfigurasi Vite untuk Mobile

Tanya Cursor:

Configure vite.config for Capacitor mobile deployment with base './' and production build to dist

Atau perbarui vite.config.ts secara manual:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
  },
})

Tes Production Build

npm run build

Verifikasi dist/ folder sudah ada dengan index.html dan aset yang sudah di-bundle.

Langkah 4: Tambahkan Capacitor ke Proyek Base44 Anda

Menggunakan Cursor AI (Direkomendasikan)

Install Capacitor CLI, initialize it for my Base44 app with webDir dist, and add iOS and Android platforms

Instalasi Manual

npm install -D @capacitor/cli
npm install @capacitor/core @capacitor/ios @capacitor/android

npx cap init "Your Base44 App" com.yourcompany.yourapp --web-dir dist
npx cap add ios
npx cap add android

Commit ios/ dan android/ folder ke git. Capgo Builder mengompilasi isi direktori tersebut.

Langkah 5: Konfigurasi Capacitor

Perbarui capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Base44 App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
}

export default config

Pertimbangkan untuk menambahkan @capgo/capacitor-updater lebih awal agar bisa kirim update OTA setelah rilis. Lihat Dokumentasi Capgo Live Updates.

Langkah 6: Build dan Sync

Setiap kali Anda mengubah web app:

npm run build
npx cap sync

Langkah 7: Build Binary Siap Store dengan Capgo Builder (Direkomendasikan)

Testing di simulator bersifat opsional. Untuk TestFlight, internal testing, dan submission ke store, gunakan Capgo Builder untuk compile dan sign native binary di cloud.

Mengapa pakai Capgo Builder untuk app Base44?

• Tidak butuh Mac untuk iOS — build dari Windows atau Linux
• CLI yang sama dengan yang dijalankan AI agent Anda — cocok untuk workflow vibe-coding dari Base44 → GitHub → Cursor
• Terintegrasi dengan Live Updates — perbaiki UI dan copy secara OTA; rebuild native hanya saat plugin atau permission berubah

Siapkan Capgo Builder

npx @capgo/cli@latest login
npx @capgo/cli@latest init
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build init --platform android

Simpan signing credentials sekali saja. Lihat Mengelola Kredensial dan Build iOS dari Windows.

Minta cloud build

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.yourapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.yourapp --platform android --build-mode release

Build logs mengalir di terminal Anda. Kalau App Store Connect sudah dikonfigurasi, build iOS bisa otomatis upload ke TestFlight.

Upload web bundle Anda untuk update OTA:

npx @capgo/cli@latest bundle upload --channel production

Langkah 8: Opsional — Uji lokal di Xcode atau Android Studio

Jika Anda menggunakan Mac atau ingin testing emulator sebelum cloud build:

npx cap open ios      # Xcode + iOS Simulator
npx cap open android  # Android Studio + emulator

Gunakan IDE lokal untuk debugging sehari-hari. Gunakan Capgo Builder saat Anda membutuhkan signed release binaries.

Langkah 9: Tambahkan Fitur Native

Tingkatkan aplikasi Base44 Anda dengan kemampuan perangkat:

npm install @capacitor/share @capacitor/camera @capacitor/push-notifications
npx cap sync

Minta Cursor untuk menghubungkan Share, Camera, atau Push ke komponen React Anda. Setelah menambah plugin, jalankan Capgo Builder build baru sebelum submit ke store.

Langkah 10: Optimasi untuk Produksi

Ikon App dan Splash Screen

npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

Pertimbangan Backend Base44

Aplikasi Base44 yang diekspor dapat memanggil backend terhosting Base44 dan SDK. Hal ini biasanya berfungsi di Capacitor selama:

• panggilan API menggunakan HTTPS
• redirect Auth berfungsi di dalam WebView (uji coba login di perangkat asli)
• Deep link dikonfigurasi jika menggunakan alur magic-link atau OAuth

Jika nantinya Anda migrasi dari backend Base44, rencanakan untuk mengganti base44.entities.* dan panggilan SDK terkait dengan API Anda sendiri — layer UI React biasanya tetap sama.

Mengatasi Masalah Umum

Layar putih saat startup

• Konfirmasi base: './' sudah diatur di konfigurasi Vite
• Jalankan npm run build dan pastikan bahwa dist/index.html memuat aset dengan path relatif
• Jalankan npx cap sync setelah setiap web build

Error build di Capgo Builder

• Commit ios/ dan android/ ke git sebelum request cloud build
• Jalankan npx cap sync secara lokal agar aset web disalin ke native project
• Plugin Capacitor baru butuh Native Build baru

Ekspor tidak tersedia di Base44

Ekspor GitHub dan download ZIP memerlukan paket Builder atau lebih tinggi. Upgrade di Base44 atau salin file secara manual dari tampilan Code pada tier yang lebih rendah.

Kesimpulan

Anda telah mengekspor aplikasi React buatan AI Base44, membungkusnya dengan Capacitor, dan punya jalur jelas menuju binary iOS dan Android yang sudah ditandatangani lewat Capgo Builder — tanpa perlu mengelola Xcode farm lokal.

Next Steps

• Capgo Live Updates: Deploy perbaikan UI dan copy tanpa menunggu review store
• Capgo Builder: Otomatisasi release build di CI
• Push Notifications: Tambahkan @capacitor/push-notifications dan rebuild dengan Capgo Builder
• Panduan terkait: Lovable ke mobile · Bolt.new ke mobile

Daftar akun Capgo gratis untuk mengaktifkan Live Updates dan cloud native builds.

Sumber Daya

• Dokumentasi Base44
• Integrasi GitHub Base44
• Dokumentasi Capacitor
• Capgo Native Build
• Capgo — Live Updates untuk Aplikasi Capacitor

Lanjutkan dari Base44 ke Native Mobile Apps dengan Capacitor

Jika Anda menggunakan Base44 ke Native Mobile Apps dengan Capacitor untuk merencanakan pekerjaan plugin native, hubungkan dengan Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo, Plugin Capacitor oleh Capgo untuk detail implementasi di Capacitor Plugins oleh Capgo, Capgo Native Build untuk alur kerja produk di Capgo Native Builds, dan Build iOS dari Windows untuk cloud iOS builds tanpa Mac.