Dari Base44 ke Native Mobile Apps dengan Capacitor

Pendahuluan

Base44 adalah app builder berbasis AI yang menghasilkan aplikasi React lengkap dari prompt. Anda bisa merilis produk yang berfungsi di browser dengan cepat — tapi bagaimana jika Anda ingin menjalankannya di iOS dan Android? Dalam tutorial ini, kami menunjukkan cara mengekspor proyek Base44 Anda dan mengubahnya menjadi aplikasi mobile native dengan Capacitor, lalu rilis binary store yang ditandatangani dengan Builder Capgo — tidak perlu Mac untuk iOS.

Versi singkat: halaman Halaman Base44 ke iOS dan Android merangkum seluruh alur dalam satu layar: export, Capacitor, cloud builds 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, penyimpanan, dan notifikasi push.

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 artefak build
RAM: minimal 8GB

Biaya:

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

Software yang Dibutuhkan:

Node.js 18+
Editor code seperti Cursor

Mengapa mengubah aplikasi Base44 Anda menjadi mobile?

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

Langkah 1: Ekspor Proyek Base44 Anda

Base44 memungkinkan Anda mengekspor code setelah Anda berada di paket Builder atau lebih tinggi. Anda punya dua opsi utama.

Opsi A: Ekspor ke GitHub (Direkomendasikan)

Buka aplikasi Anda di editor Base44
Klik GitHub ikon di bilah atas
Otorisasi Base44 Builder dan buat atau hubungkan repositori
Base44 menyinkronkan aplikasi Anda code ke GitHub secara otomatis (sinkronisasi dua arah di paket yang didukung)

Lihat Dokumentasi integrasi GitHub Base44 detailnya.

Opsi B: Unduh sebagai ZIP

Klik Code di bilah atas untuk membuka penjelajah file
Klik Ekspor proyek sebagai ZIP di pojok kanan atas tampilan code
Ekstrak arsip di komputer Anda

Buka Proyek di Cursor

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

Jalankan Cursor

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.

Langkah 2: Siapkan Lingkungan Pengembangan Anda

Base44 mengekspor proyek React standar. Instal dependensi dan pastikan dev server berjalan.

Menggunakan Cursor AI (Direkomendasikan)

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

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 berjalan secara lokal

Aplikasi Base44 Anda seharusnya terbuka 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 mengoutput 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',
  },
})

Uji Production Build

npm run build

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

Output build Base44

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

inisialisasi Capacitor untuk aplikasi Base44

Commit ios/ dan android/ folder ke git. Capgo Builder mengompilasi apa yang ada di direktori tersebut.

Langkah 5: Konfigurasi Capacitor

Update 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 segera agar Anda dapat mengirim update OTA setelah peluncuran. Lihat Dokumentasi Capgo Live Updates.

Langkah 6: Build dan Sync

Setiap kali Anda mengubah web app:

npm run build
npx cap sync

Sinkronisasi Capacitor selesai untuk aplikasi Base44

Langkah 7: Bangun Binari Siap Store dengan Capgo Builder (Disarankan)

Pengujian simulator bersifat opsional. Untuk TestFlight, pengujian internal, dan pengiriman ke store, gunakan Builder Capgo untuk mengompilasi dan menandatangani binari native di cloud.

Mengapa Capgo Builder untuk aplikasi Base44?

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

Setup 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 kredensial signing sekali saja. Lihat Kelola Kredensial dan Build iOS dari Windows.

Ajukan 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 tampil streaming 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 — Tes Lokal di Xcode atau Android Studio

Jika Anda memiliki Mac atau ingin pengujian emulator sebelum cloud build:

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

Xcode membuka proyek Base44 Capacitor

Gunakan IDE lokal untuk debugging sehari-hari. Gunakan Builder Capgo saat Anda butuh binary release yang sudah ditandatangani.

Langkah 9: Tambahkan Fitur Native

Perkuat 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 menambahkan plugin, jalankan Builder Capgo build baru sebelum submit ke store.

Fitur native ditambahkan ke aplikasi Base44 Capacitor

Langkah 10: Optimalkan untuk Produksi

App Icon 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 hosted Base44 dan SDK. Itu biasanya berfungsi di Capacitor selama:

Panggilan API menggunakan HTTPS
Redirect auth berfungsi di dalam WebView (uji login di perangkat asli)
Deep links dikonfigurasi jika Anda menggunakan alur magic-link atau OAuth

Jika Anda kemudian bermigrasi dari backend Base44, rencanakan untuk mengganti base44.entities.* dan panggilan SDK terkait dengan API Anda sendiri — lapisan UI React biasanya tetap berlaku.

Pemecahan Masalah Umum

Layar putih saat launch

Konfirmasi base: './' diatur di config Vite
Jalankan npm run build dan periksa bahwa dist/index.html memuat aset dengan path relatif
Jalankan npx cap sync setiap kali web build selesai

Error build di Capgo Builder

Commit ios/ dan android/ ke git sebelum meminta cloud build
Jalankan npx cap sync secara lokal agar web assets disalin ke proyek native
Plugin Capacitor baru memerlukan native build baru

Export tidak tersedia di Base44

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

Kesimpulan

Anda telah mengekspor aplikasi React yang dibuat AI di Base44, membungkusnya dengan Capacitor, dan memiliki jalur yang jelas menuju biner iOS dan Android yang ditandatangani melalui Builder Capgo — tanpa perlu memelihara farm Xcode lokal.

Langkah Berikutnya

Live Updates Capgo: Kirim perbaikan UI dan teks tanpa menunggu review store
Builder Capgo: Otomatiskan build rilis di CI
Notifikasi Push: 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 build.

Sumber Daya

Lanjutkan dari Base44 ke Aplikasi Mobile Native dengan Capacitor

Jika Anda menggunakan Dari 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 pada Capacitor Plugins oleh Capgo Capgo Native Build untuk alur kerja produk di Capgo Native Builds, dan Build iOS dari Windows untuk build iOS di cloud tanpa Mac.