Base44 ke Aplikasi Mobile Asli dengan 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 inginnya di iOS dan Android? Dalam tutorial ini, kami menunjukkan cara mengexport proyek Base44 Anda dan mengubahnya menjadi aplikasi mobile asli dengan Capacitorlalu kirimkan file biner yang telah ditandatangani ke Capgo Pembangun tidak diperlukan Mac untuk iOS.

Prasyarat & Perkiraan Waktu

Waktu yang Diperlukan

: 2-4 jam untuk pengaturan pertama kaliSpesifikasi Sistem

Untuk pembangunan cloud iOS:

: Sistem Operasi apa saja (Windows, Mac, atau Linux) dengan __CAPGO_KEEP_0__ Pembangun: Any OS (Windows, Mac, or Linux) with Capgo Builder
: Sistem Operasi apa sajaSetelah menyelesaikan panduan ini, aplikasi Base44 Anda dapat berjalan secara native di iOS dan Android dengan akses ke fitur perangkat seperti kamera, penyimpanan, dan notifikasi push.
Penyimpanan: 10 GB ruang gratis untuk dependensi dan artefak pembangunan
RAM: 8 GB minimum

Biaya:

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

Peralatan Wajib:

Node.js 18+
Sebuah code editor seperti Cursor

Mengapa Mengubah Aplikasi Base44 Anda ke Mobile?

Jangkauan yang Lebih Luas: Temui pengguna di tempat mereka mengharapkan ikon aplikasi asli, bukan tab browser
Fitur Asli: Kamera, GPS, biometrik, dan penyimpanan offline melalui Capacitor plugin
Penyebaran Aplikasi App Store: Publikasikan di Google Play dan App Store Apple
Fase iterasi yang lebih cepat: Pasangkan Capgo Perbarui Langsung dengan Capgo Pembangun 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 Paket Pembangun atau tingkat yang lebih tinggi. Anda memiliki dua pilihan utama.

Pilihan A: Eksport ke GitHub (Dianjurkan)

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

Lihat Integrasi dokumentasi GitHub Base44 untuk detailnya.

Pilihan B: Unduh sebagai ZIP

Klik Code pada bar atas untuk membuka browser file
Klik Export proyek sebagai ZIP di pojok kanan atas tampilan code
Ekstrak arsip di komputer Anda

Buka Proyek di Cursor

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

Mulai Cursor

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 Menjadi mobile yang disukai.

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 atau Ctrl+K 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 berjalan lokal

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

Langkah 3: Siapkan Pembangunan Produksi

Capacitor memerlukan aset web statis. Aplikasi React Base44 biasanya menggunakan Vite dan menghasilkan output 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 secara 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

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

Output Build Base44

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

Capacitor inisialisasi untuk aplikasi Base44

Commitkan ios/ dan android/ folder-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

Perluas pertimbangan @capgo/capacitor-updater sebelumnya sehingga Anda dapat mengirimkan pembaruan OTA setelah peluncuran. Lihat Capgo Dokumen Pembaruan Langsung.

Langkah 6: Bangun dan Sinkronkan

Setiap kali Anda mengubah aplikasi web:

npm run build
npx cap sync

Capacitor sinkronisasi selesai untuk aplikasi Base44

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

Tes simulator tidak wajib. Untuk 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 seperti CLI yang dapat dijalankan oleh agen AI Anda — sesuai dengan alur kerja coding vibe dari Base44 → GitHub → Cursor
Berpasangan dengan Update Langsung — perbaiki UI dan salin teks secara online; 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 dan.

Bangun iOS dari Windows

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

Minta bangun awan

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

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

Unggah bundle web Anda untuk pembaruan OTA:

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

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

Xcode opening a Base44 Capacitor project

Xcode membuka proyek Base44 __CAPGO_KEEP_0__ Pakai IDE lokal untuk debugging sehari-hari. Gunakan Capgo Builder untuk 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 Bagikan, Kamera, atau Push ke komponen React Anda. Setelah menambahkan plugin, jalankan Pembangun Capgo Baru bangun sebelum pengiriman ke toko.

Fitur asli yang ditambahkan ke aplikasi Base44 Capacitor

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 memanggil HTTPS
Auth redirect bekerja di dalam WebView (tes login pada perangkat nyata)
Tautan dalam mendalam telah 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 — lapisan UI React biasanya tetap berjalan

Mengatasi Masalah Umum

Layar putih pada peluncuran

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

Error build di Capgo Builder

Commit ios/ dan android/ dan mengirim ke git sebelum meminta build cloud
Jalankan npx cap sync sehingga aset web dikopi ke proyek native
Plugin Capacitor baru memerlukan build native yang segar

Tidak tersedia export di Base44

Export GitHub dan download ZIP memerlukan Rencana Builder atau lebih tinggi. Naikkan ke Rencana Builder di Base44 atau kopi file secara manual dari tampilan Code pada tingkat yang lebih rendah.

Kesimpulan

Kamu telah mengexport aplikasi React yang dihasilkan AI Base44, membungkusnya dengan Capacitor, dan memiliki jalur yang jelas untuk mendapatkan file biner iOS dan Android yang telah ditandatangani melalui Capacitor Builder Capgo Builder Langkah Selanjutnya

__CAPGO_KEEP_0__ Live Updates

Capgo Live Updates__CAPGO_KEEP_0__ Builder
Capgo BuilderPemberitahuan Push
: Tambahkandan membangun ulang dengan __CAPGO_KEEP_0__ Builder @capacitor/push-notifications Capgo
Petunjuk terkait: Jadikan aplikasi Base44 menjadi mobile · Buat aplikasi mobile dengan Bolt.new

Pendaftaran gratis untuk Capgo Untuk mengaktifkan Live Updates dan pembangunan native cloud.

Sumber daya

Teruskan dari Base44 ke Aplikasi Mobile Native dengan Capacitor

Jika Anda menggunakan Base44 to Native Mobile Apps with Capacitor untuk merencanakan kerja plugin native, hubungkannya dengan Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo Capgo Build Natives untuk alur kerja produk di Capgo Build Natives, dan Membangun iOS dari Windows untuk membuat build iOS di cloud tanpa Mac.