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 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 kirimkan file biner toko yang ditandatangani dengan Capgo Builder Tidak perlu Mac untuk iOS.

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

Peralatan & 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 Builder
• Untuk pembangunan cloud Android: Sistem operasi apa saja
• Penyimpanan: 10GB ruang penyimpanan gratis untuk dependensi dan artefak pembangunan
• RAM: 8GB minimum

Biaya:

• Ekspor Base44: Builder plan 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 Pro: $20/bulan (opsional tetapi direkomendasikan)

Peralatan Software Wajib:

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

Mengapa Mengubah Aplikasi Base44 Anda ke Mobile?

• Jangkauan yang lebih luas: 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 Toko: Publikasikan di Google Play dan Apple App Store
• Iterasi yang lebih cepat: Pasangkan Capgo Live Updates dengan Capgo Builder untuk perbaikan layer web tanpa harus membangun biner native setiap kali

Langkah 1: Eksport Proyek Anda Base44

Base44 memungkinkan Anda untuk mengexport code setelah Anda berada di Rencana Pembangun atau tingkat 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 menu atas
3. Otorisasi Pembangun Base44 dan buat atau hubungkan sebuah repositori
4. Sinkronkan aplikasi Anda code dengan GitHub secara otomatis (sinkronisasi dua arah pada rencana yang didukung)

Lihat Dokumen integrasi GitHub Base44 untuk informasi lebih lanjut.

Pilihan B: Unduh sebagai ZIP

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

Buka Project 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 yang disukai 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)

Tombol 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 ke dist/.

Konfigurasi Vite untuk Mobile

Tanyakan Cursor:

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

Atur ulang 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 Build Produksi

npm run build

Pastikan ada dist/ folder yang 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 perubahan ios/ dan folder ke git. android/ Langkah 5: Konfigurasi Capgo

Step 5: Configure Capacitor

Pertimbangkan menambahkan 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

dini sehingga Anda dapat mengirimkan pembaruan OTA setelah peluncuran. Lihat @capgo/capacitor-updater __CAPGO_KEEP_0__ Live Updates docs Capgo Live Updates docs.

Setiap kali Anda mengubah aplikasi web:

__CAPGO_KEEP_0__ sinkronisasi lengkap untuk aplikasi Base44

npm run build
npx cap sync

Step 7: Build Store-Ready Binaries with Capgo Builder (Recommended)

Simulator testing is optional. For TestFlight, internal testing, and store submission, use Pembuat Capgo untuk mengompilasi dan menandatangani biner native di cloud.

Mengapa Pembuat Capgo untuk aplikasi Base44?

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

Konfigurasi Pembuat 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 kredit tanda tangan sekali. Lihat Pengelolaan Kredensial dan Buat iOS dari Windows.

Minta build 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 build mengalir 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 Lokal di Xcode atau Android Studio

Jika Anda memiliki Mac atau ingin tes emulator sebelum build 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 membutuhkan file biner rilis yang ditandatangani.

Langkah 9: Tambahkan Fitur Asli

Meningkatkan 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

Pertimbangan Backend Base44

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

• API panggilan menggunakan HTTPS
• Auth redirect berfungsi di dalam WebView (uji login di perangkat nyata)
• Tautan dalam mendalam dikonfigurasi jika Anda menggunakan aliran tautan ajaib atau OAuth

If Anda kemudian beralih ke backend Base44, rencanakan untuk mengganti base44.entities.* dan panggilan terkait SDK dengan API milik Anda sendiri — layer UI React biasanya tetap utuh.

Pengaturan Umum Masalah

Layar putih pada peluncuran

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

Error build di Capgo Builder

• Mengirimkan commit ke git sebelum meminta bangun awan ios/ Jalankan secara lokal agar aset web dikopi ke proyek native android/ Plugin baru __CAPGO_KEEP_0__ memerlukan bangun native yang segar
• Tidak tersedia di Base44 npx cap sync __CAPGO_KEEP_0__ export dan download ZIP memerlukan
• New Capacitor plugins require a fresh native build

Upgrade di Base44 atau salin file secara manual dari view __CAPGO_KEEP_0__ di tingkat yang lebih rendah

GitHub export and ZIP download require the Anda telah mengexport aplikasi React yang dihasilkan AI Base44, membungkusnya dengan __CAPGO_KEEP_0__, dan memiliki jalur yang jelas untuk membuat biner iOS dan Android yang ditandatangani melalui. Upgrade in Base44 or copy files manually from the Code view on lower tiers.

and

You exported a Base44 AI-generated React app, wrapped it with Capacitor, and have a clear path to signed iOS and Android binaries through Pembuat Capgo — tanpa menjaga sebuah peternakan Xcode lokal.

Langkah-Langkah Selanjutnya

• Pembaharuan Hidup CapgoShip perbaikan UI dan copy tanpa menunggu tinjauan toko.
• Pembuat CapgoAutomatisasi pembuatan rilis di CI
• Pemberitahuan PushTambahkan @capacitor/push-notifications dan bangun ulang dengan Pembuat Capgo
• Referensi yang terkait: Lovable ke mobile · Buat aplikasi mobile dengan Bolt baru

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

Sumber Daya

• Dokumentasi Base44
• Integrasi Base44 dengan GitHub
• Dokumentasi Capacitor
• Capgo — Live Updates untuk Aplikasi __CAPGO_KEEP_1__
• Capgo — Live Updates for Capacitor Apps

Keep going from Base44 to Native Mobile Apps with Capacitor

Base44 ke Aplikasi Mobile Asli dengan __CAPGO_KEEP_0__ Lanjutkan pembangunan aplikasi mobile Anda dengan Capacitor untuk merencanakan pekerjaan plugin native, 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 Native untuk alur kerja produk di Capgo Pembangunan Native, dan Membangun iOS dari Windows untuk membuat iOS cloud tanpa Mac.