Base44 to Native Mobile Apps with Capacitor

Pendahuluan

Base44 adalah sebuah pembuat aplikasi yang dipimpin AI yang 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 nirkabel asli dengan Capacitor, then ship signed store binaries with Pembangun Capgo Tidak perlu 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.

Persyaratan & Estimasi Waktu

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

Spesifikasi Sistem:

• Untuk iOS cloud build: Sistem Operasi Apapun (Windows, Mac, atau Linux) dengan Capgo Builder
• Untuk Android cloud build: Any OS
• Penyimpanan: 10GB ruang penyimpanan gratis untuk dependensi dan artefak pembangunan
• RAM: 8 GB minimum

Biaya:

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

Peralatan yang Diperlukan:

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

Kenapa Mengubah Aplikasi Base44 Anda ke Mobile?

• Dapatkan jangkauan yang lebih luas: Bertemu pengguna di tempat mereka mengharapkan ikon aplikasi asli, bukan tab browser
• Fitur Lokal: Kamera, GPS, biometrik, dan penyimpanan offline melalui plugin Capacitor
• Distribusi Aplikasi Toko: Publikasikan di Google Play dan Apple App Store
• Iterasi yang lebih cepat: Pasangkan Capgo Live Update 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 Rencana Pembangun atau tingkat yang lebih tinggi. Anda memiliki dua pilihan utama.

Option A: Ekspor ke GitHub (Dianjurkan)

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

Lihat Dokumen integrasi Base44 GitHub untuk informasi lebih lanjut.

Option B: Unduh sebagai ZIP

1. Klik Code di baris atas untuk membuka browser file
2. Klik Export Proyek sebagai ZIP di kanan atas tampilan code
3. Ekstrak arsip di komputer Anda

Buka Proyek di Cursor

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

Untuk alur kerja yang paling baik dengan bantuan AI, aktifkan model yang disukai dan izinkan eksekusi perintah di pengaturan Cursor — konfigurasi yang sama yang dijelaskan dalam panduan Guide ke mobile yang disukai.

Langkah 2: Atur Lingkungan Pengembangan Anda

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

Menggunakan Cursor AI (Dianjurkan)

Press Command+K Tekan 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 nomor 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 dist/ folder ada dengan index.html dan aset yang dikompilasi.

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 folder ios/ dan android/ folder ke git. Pembangun Capgo 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

Perlu mempertimbangkan untuk menambahkan @capgo/capacitor-updater dini sehingga Anda bisa mengirimkan pembaruan OTA setelah peluncuran. Lihat Capgo Dokumentasi Live Update.

Langkah 6: Bangun dan Sinkronkan

Setiap kali Anda mengubah aplikasi web:

npm run build
npx cap sync

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

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

Mengapa Capgo Pembangun untuk aplikasi Base44?

• Tidak memerlukan Mac untuk iOS — dibangun dari Windows atau Linux
• Sama CLI yang agen AI dapat menjalankan — sesuai dengan alur kerja coding vibe dari Base44 → GitHub → Cursor
• Berpasangan dengan Live Update — perbaiki UI dan salin copy secara daring; bangun native hanya ketika plugin atau izin berubah

Atur Capgo Pembangun

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 tanda tangan sekali. Lihat Manajemen Kunci Tanda Tangan dan Bangun iOS dari Windows.

Minta bangun cloud

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 stream di terminal Anda. Dengan App Store Connect yang terkonfigurasi, build 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 Coba Lokal di Xcode atau Android Studio

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

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

Pakai IDE lokal untuk debugging sehari-hari. Pakai Pembangun Capgo when you need signed release binaries.

Langkah 9: Tambahkan Fitur Asli

Peningkatkan aplikasi Base44 Anda dengan kemampuan perangkat:

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

Kerjakan Cursor untuk menghubungkan Share, Camera, atau Push ke komponen React Anda. Setelah menambahkan plugin, jalankan ulang Pembangun Capgo bangun sebelum pengiriman aplikasi.

Langkah 10: Optimize 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

Icon Aplikasi dan Layar Splash

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

• Panggilan API menggunakan HTTPS
• Otorisasi mengarahkan bekerja di dalam WebView (tes login pada perangkat nyata)
• Auth redirect berfungsi di dalam WebView (uji login di perangkat nyata)

Deep link yang dikonfigurasi jika Anda menggunakan magic-link atau aliran OAuth base44.entities.* dan panggilan terkait SDK dengan API sendiri Anda — lapisan UI React biasanya tetap.

Mengatasi Masalah Umum

layar putih pada peluncuran

• Konfirmasi base: './' ditetapkan dalam konfigurasi Vite
• Jalankan npm run build dan periksa itu dist/index.html Memuat aset dengan jalur relatif
• Jalankan npx cap sync memuat asset dengan jalur relatif

Masalah kesalahan pembangunan di Capgo Pembangun

• Commit ios/ Commit android/ sebelum meminta pembangunan cloud
• Jalankan npx cap sync di lokasi sehingga aset web dicopy ke proyek native
• Plugin baru Capacitor memerlukan build native yang segar

Tidak tersedia ekspor di Base44

Ekspor GitHub dan download ZIP memerlukan Rencana Pembangun atau lebih tinggiNaikkan di Base44 atau salin file secara manual dari tampilan Code di 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 Capgo Pembangun tanpa harus menjaga peternakan Xcode lokal.

Next Steps

• Capgo Perbarui Hidup: Kirim perbaikan UI dan teks tanpa menunggu tinjauan toko
• Capgo Pembangun: Otomatisasi pembuatan rilis di CI
• Pemberitahuan Push: Tambah @capacitor/push-notifications dan buat ulang dengan Capgo Pembangun
• Guida terkait: : Mengubah menjadi mobile yang disukai · : Mengubah Bolt baru menjadi mobile

Daftar untuk akun Capgo gratis untuk mengaktifkan Perbarui Hidup dan pembuatan native cloud.

Sumber Daya

• Base44 Dokumentasi
• Integrasi Base44 GitHub
• Capacitor Dokumentasi
• Capgo Pembangunan Nativ
• Capgo — Update Langsung 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 natif, 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 Natively untuk alur kerja produk di Capgo Pembangunan Natively, dan Bangun iOS dari Windows untuk pembangunan iOS di awan tanpa Mac.