Base44 ke Aplikasi Mobile Asli dengan Capacitor

Introduction

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

Dengan akhir dari panduan ini, aplikasi Base44 Anda berjalan secara asli di iOS dan Android dengan akses ke fitur perangkat seperti kamera, penyimpanan, dan notifikasi push.

Prasyarat & Estimasi Waktu

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

Spesifikasi Sistem:

• For iOS cloud builds: Apa saja OS (Windows, Mac, atau Linux) dengan Capgo Builder
• For Android cloud builds: Apa saja OS
• Penggunaan Penyimpanan: 10GB ruang penyimpanan gratis untuk dependensi dan artefak pembangunan
• Penggunaan RAM: 8GB minimum

Biaya:

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

Peralatan Perangkat Lunak 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-fitur asli: Kamera, GPS, biometrik, dan penyimpanan offline melalui plugin Capacitor
• Penyebaran Aplikasi App Store: Publikasikan di Google Play dan App Store Apple
• Iterasi yang Lebih Cepat: Pasang Capgo Live Updates dengan Capgo Builder untuk memperbaiki 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 Builder plan atau lebih tinggi. Anda memiliki dua pilihan utama.

Pilihan A: Eksport ke GitHub (Dianjurkan)

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

Lihat integrasikan dokumentasi Base44 GitHub untuk informasi lebih lanjut.

Option B: Unduh sebagai ZIP

1. Klik Code di bilah atas untuk membuka browser file
2. Klik Eksport proyek sebagai ZIP di kanan atas dari 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 palette perintah) atau buka folder ZIP yang diekstrak dengan File > Buka Folder

Untuk alur kerja yang terbaik dengan bantuan AI, aktifkan model yang disukai dan izinkan eksekusi perintah di pengaturan Cursor — konfigurasi yang sama yang dijelaskan dalam panduan kami tentang membuat aplikasi yang disukai Lovable ke mobile guide.

Langkah 2: Atur Lingkungan Pengembangan Anda

Base44 mengexport proyek React standar. Pasang dependensi dan pastikan server pengembang bekerja.

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 dimuat di http://localhost:5173 (Vite) atau port yang ditampilkan di terminal.

Langkah 3: Siapkan Build Produksi

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

Konfigurasi Vite untuk Mobile

Tanya Cursor:

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

Atau update vite.config.ts manual:

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

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

Uji Coba Build Produksi

npm run build

Verifikasi bahwa dist/ folder ada dengan index.html dan aset yang dijadikan satu.

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/ folders to git. Capgo Builder compiles what is in those directories.

folder ke git. Pembangun Capacitor mengompilasi apa yang ada di direktori tersebut.

Langkah 5: Konfigurasi __CAPGO_KEEP_0__ 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

Perbarui @capgo/capacitor-updater Perlu mempertimbangkan untuk menambahkan __CAPGO_KEEP_0__ secara dini sehingga Anda dapat mengirimkan pembaruan OTA setelah peluncuran. Lihat Capgo Perbarui Hidup Dokumen.

Langkah 6: Bangun dan Sinkronkan

Setiap kali Anda mengubah aplikasi web:

npm run build
npx cap sync

Langkah 7: Bangun Binari Siap Toko dengan Capgo Pembangun (Dianjurkan)

Pengujian simulator tidak wajib. Untuk TestFlight, pengujian internal, dan pengiriman ke toko, gunakan Capgo Pembangun context

Why Capgo Builder for Base44 apps?

• __CAPGO_KEEP_0__ Pembangun Nativ __CAPGO_KEEP_0__ Pembangun Nativ
• CLI Pembangun Nativ untuk Aplikasi Base44 Anda — menggambarkan alur kerja coding dari Base44 → GitHub → Cursor
• Pairs with Live Updates — memperbaiki UI dan menyalin konten secara daring; membangun native hanya ketika plugin atau izin berubah

Set up 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 kunci autentikasi sekali. Lihat Manajemen Kunci Autentikasi dan Bangun 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

Log bangun mengalir di terminal Anda. Dengan App Store Connect yang terkonfigurasi, 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: Optional — Uji Lokal di Xcode atau Android Studio

Jika Anda memiliki Mac atau ingin melakukan pengujian emulator sebelum membangun di cloud:

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

Pakai IDE lokal untuk debugging sehari-hari. Gunakan Capgo Pembangun ketika Anda membutuhkan file biner rilis yang ditandatangani.

Langkah 9: Tambahkan Fitur Nativ

Perluas aplikasi Base44 Anda dengan kemampuan perangkat:

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

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

Langkah 10: Optimalisasi untuk Produksi

App Icons 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 dengan baik di Capacitor selama:

• API menggunakan HTTPS
• Autentikasi meredirect bekerja di dalam WebView (uji login di perangkat nyata)
• Tautan dalam mendalam dikonfigurasi jika Anda menggunakan aliran magic-link atau OAuth

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

Pengaturan Masalah Umum

Layar Putih pada Peluncuran

• Konfirmasi base: './' diatur dalam konfigurasi Vite
• Jalankan npm run build dan pastikan bahwa dist/index.html mengisi asset dengan jalur relatif
• Jalankan npx cap sync setelah setiap build web

Error build di Capgo Builder

• Commit ios/ dan android/ context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `dan` (Dan).
• sebelum meminta build cloud npx cap sync Jalankan
• New Capacitor plugins require a fresh native build

Export tidak tersedia di Base44

Tidak ada GitHub export dan download ZIP yang tersedia pada tingkat Builder yang lebih rendah Perlu naikkan ke tingkat Builder atau lebih tinggiUpgrade di Base44 atau salin file secara manual dari Code pada tingkat yang lebih rendah

Kesimpulan

Anda telah mengexport aplikasi React yang dihasilkan AI Base44, membungkusnya dengan Capacitor, dan memiliki jalur yang jelas untuk mendapatkan aplikasi iOS dan Android yang telah ditandatangani melalui Capacitor Builder Capgo Live Updates Tanpa perlu menjaga sebuah farm Xcode lokal

Langkah Selanjutnya

• Capgo Live UpdatesShip perbaikan UI dan copy tanpa harus menunggu ulasan toko
• Capgo Builder: Otomatisasi rilis build di CI
• Notifikasi Push: Tambah @capacitor/push-notifications dan rebuild dengan Capgo Builder
• Petunjuk terkait: Membuat aplikasi yang disukai menjadi mobile · Buat aplikasi baru menjadi mobile

Daftar untuk akun Capgo gratis untuk mengaktifkan Live Updates dan build natively di cloud.

Sumber daya

• Dokumentasi Base44
• Integrasi Base44 dengan GitHub
• Capacitor Dokumentasi
• Capgo Pembangunan Nativ
• Capgo — Perbarui Hidup untuk Aplikasi Capacitor

Teruskan dari Base44 ke Aplikasi Mobile Nativ dengan Capacitor

Jika Anda menggunakan Base44 ke Aplikasi Mobile Nativ dengan Capacitor untuk merencanakan pekerjaan plugin nativ, 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 Nativ untuk alur kerja produk di Capgo Pembangunan Nativ, dan Bangun iOS dari Windows untuk pembangunan iOS di cloud tanpa Mac.