Base44 ke Aplikasi Mobile Asli dengan Capacitor

Pendahuluan

Base44 adalah pembuat aplikasi berbasis AI yang menghasilkan aplikasi React penuh dari prompt. Anda dapat mengirimkan produk yang berfungsi di browser dengan cepat — tapi apa jika Anda inginnya di iOS dan Android? Dalam tutorial ini, kami menunjukkan cara mengexport proyek Base44 Anda dan mengubahnya menjadi aplikasi mobile asli dengan Capacitor, kemudian kirimkan file biner yang telah ditandatangani ke Capgo Pembangun — tidak diperlukan Mac untuk iOS.

Setelah membaca panduan ini, aplikasi Base44 Anda dapat berjalan secara native di iOS dan Android dengan akses ke fitur perangkat seperti kamera, penyimpanan, dan notifikasi push.

Prasyarat & Perkiraan Waktu

Waktu yang Diperlukan: 2-4 jam untuk pengaturan pertama kali

Spesifikasi Sistem:

• Untuk pembangunan cloud iOS: Sistem Operasi apa saja (Windows, Mac, atau Linux) dengan Capgo Pembangun
• Untuk pembangunan cloud Android: Sistem Operasi apa saja
• Penyimpanan : 10GB ruang gratis untuk dependensi dan artefak pembangunan
• RAM : 8GB minimum

Biaya:

• Ekspor Base44: Rencana Pembangun atau lebih tinggi (untuk GitHub ekspor dan download ZIP)
• App Store iOS: $99/tahun (Akun Pengembang Apple)
• Play Store Android: $25 sekali bayar (Google Play Developer)
• Cursor ProBiaya bulanan: $20 (opsional tetapi disarankan)

Peralatan yang Diperlukan:

• Node.js 18+
• Sebuah code editor seperti Cursor

Mengapa Mengubah Aplikasi Base44 Anda ke Mobile?

• Jangkauan yang Diperluas: Bertemu pengguna di tempat mereka mengharapkan ikon aplikasi asli, bukan tab browser
• Fitur Asli: Kamera, GPS, biometrik, dan penyimpanan offline melalui Capacitor plugin
• Distribusi Aplikasi App Store: Publikasikan di Google Play dan App Store Apple
• Iterasi yang lebih cepat: Pasangkan Capgo Perbarui Hidup dengan Capgo Pembangun untuk perbaikan layer web tanpa harus membangun biner native setiap kali

Langkah 1: Eksport Proyek Base44 Anda

Base44 memungkinkan Anda untuk mengexport code setelah Anda berada di Rencana Pembangun atau lebih tinggi. Anda memiliki dua pilihan utama.

Pilihan A: Eksport ke GitHub (Dianjurkan)

1. Buka aplikasi Anda di editor Base44
2. Klik ikon GitHub di bar atas
3. Otorisasi Pembangun Base44 dan buat atau hubungkan sebuah repositori
4. Base44 sinkronkan aplikasi code ke GitHub secara otomatis (sinkron dua arah pada rencana yang didukung)

Lihat Dokumen integrasi Base44 GitHub untuk detailnya.

Pilihan B: Unduh sebagai ZIP

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

Buka Proyek di Cursor

1. Kunjungi cursor.sh dan instal Cursor
2. Kloning repositori GitHub Anda (Git: Clone dari palet perintah) atau buka folder ZIP yang diekstrak dengan File > Buka Folder

Untuk alur kerja AI yang terbaik, aktifkan model favorit Anda dan izinkan eksekusi perintah di pengaturan Cursor — konfigurasi yang sama yang dijelaskan dalam panduan Lovable ke mobile.

Langkah 2: Atur Lingkungan Pengembangan Anda

Base44 mengexport proyek React standar. Pasang dependensi dan pastikan server dev berjalan.

Menggunakan Cursor AI (Dianjurkan)

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

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

Pengaturan Manual

cd your-base44-project
npm install
npm run dev

Aplikasi Base44 Anda harus memuat di http://localhost:5173 (Vite) atau port yang ditampilkan di terminal.

Langkah 3: Siapkan Bangunan Produksi

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

Konfigurasi Vite untuk Mobile

Tanyakan Cursor:

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

Atau update 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 Bangunan Produksi

npm run build

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

Langkah 4: Tambahkan Capacitor ke Projek Base44 Anda

Menggunakan Cursor AI (Dianjurkan)

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

Pemasangan 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 apa yang ada di 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 menambahkan @capgo/capacitor-updater dini sehingga Anda dapat mengirimkan pembaruan OTA setelah peluncuran. Lihat Capgo Dokumen Pembaruan Langsung.

Langkah 6: Bangun dan Sinkronisasi

Setiap kali Anda mengubah aplikasi web:

npm run build
npx cap sync

Langkah 7: Bangun File Binari yang Siap Dipasarkan dengan Pembangun Capgo (Dianjurkan)

Pengujian simulator tidak wajib. Untuk pengujian TestFlight, pengujian internal, dan pengiriman ke toko, gunakan Pembangun Capgo untuk mengompilasi dan menandatangani file binari native di cloud.

Mengapa Pembangun Capgo untuk aplikasi Base44?

• Tidak perlu Mac untuk iOS — bangun dari Windows atau Linux
• Sama CLI yang dapat dijalankan oleh agen AI Anda — sesuai dengan alur kerja vibe-coding dari Base44 → GitHub → Cursor
• Menggabungkan dengan Update Langsung — perbaiki UI dan salin secara nirkabel; bangun native hanya ketika plugin atau izin berubah

Set up Pembangun Capgo

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 kunci autentikasi sekali saja. Lihat Manajemen Kunci dan Buat iOS dari Windows.

Minta bangun awan

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

Bangun log mengalir di terminal Anda. Dengan App Store Connect yang dikonfigurasi, bangun iOS dapat mengunggah ke TestFlight secara otomatis.

Unggah bundle web Anda untuk pembaruan OTA:

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

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

Jika Anda memiliki Mac atau ingin tes emulator sebelum bangun awan:

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

Gunakan IDE lokal untuk debugging sehari-hari. Gunakan Capgo Builder ketika Anda memerlukan file biner rilis yang ditandatangani.

Langkah 9: Tambahkan Fitur Asli

Perluas aplikasi Base44 Anda dengan kemampuan perangkat:

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

Tanyakan Cursor untuk menghubungkan Share, Kamera, atau Push ke komponen React Anda. Setelah menambahkan plugin, jalankan Capgo Pembangun bangun sebelum pengiriman ke toko.

Langkah 10: Optimalisasi untuk Produksi

Ikon Aplikasi dan Layar Splash

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

Konsiderasi Backend Base44

Aplikasi Base44 yang diekspor mungkin memanggil backend yang dihosting Base44 dan SDK. Biasanya berfungsi di Capacitor selama:

• API panggilan menggunakan HTTPS
• Auth redirects berfungsi di dalam WebView (uji login pada perangkat nyata)
• Tautan dalam mendalam dikonfigurasi jika Anda menggunakan aliran magic-link atau OAuth

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

Mengatasi Masalah Umum

Layar putih pada peluncuran

• Konfirmasi base: './' ditetapkan di konfigurasi Vite
• Jalankan npm run build dan pastikan bahwa dist/index.html menggunakan aset dengan jalur relatif
• Jalankan npx cap sync setelah setiap pembangunan web

Error pembangunan dalam Capgo Pembangun

• Commit ios/ dan android/ sebelum meminta pembangunan awan, simpan ke git
• Jalankan npx cap sync secara lokal sehingga aset web dikopi ke proyek native
• Plugin baru Capacitor memerlukan pembangunan native yang segar

Ekspor tidak tersedia di Base44

GitHub ekspor dan download ZIP memerlukan rencana Pembangun atau lebih tinggi Upgrade di Base44 atau salin file secara manual dari tampilan __CAPGO_KEEP_0__ pada tingkat yang lebih rendahUpgrade di Base44 atau salin file secara manual dari tampilan Code pada tingkat yang lebih rendah

Kesimpulan

Anda telah mengekspor aplikasi React yang dihasilkan AI Base44, melapisi dengan Capacitor, dan memiliki jalur yang jelas untuk mendapatkan file biner iOS dan Android yang telah ditandatangani melalui Capacitor Builder Capgo Builder — tanpa perlu menjaga sebuah peternakan Xcode lokal.

Langkah-Langkah Selanjutnya

• Capgo Live Updates: Kirimkan perbaikan UI dan teks tanpa harus menunggu ulasan toko.
• Capgo Builder: Otomatisasi proses pembuatan rilis di CI.
• Pemberitahuan Push: Tambahkan @capacitor/push-notifications dan rebuild dengan Capgo Builder
• Petunjuk terkait: Lovable ke mobile · Bolt.new ke mobile

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

Sumber daya

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

Lanjutkan dari Base44 ke Aplikasi Mobile Native dengan Capacitor

Jika Anda menggunakan Base44 untuk Aplikasi Mobile Asli dengan Capacitor untuk merencanakan pekerjaan plugin asli, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo, Capgo Pembangunan Asli untuk alur kerja produk di Capgo Pembangunan Asli, dan Membangun iOS dari Windows untuk membuat iOS cloud tanpa Mac.