Base44 zu nativen Mobilanwendungen mit Capacitor

Einführung

Base44 ist eine durch KI angetriebene App-Bauanlage, die vollständige React-Anwendungen aus Anfragen generiert. Sie können ein funktionierendes Produkt im Browser schnell ausliefern — aber was, wenn Sie es auf iOS und Android haben möchten? In diesem Tutorial zeigen wir Ihnen, wie Sie Ihr Base44-Projekt exportieren und es in native Mobilanwendungen umwandeln mit Capacitor, dann mit Capgo Builder signierte Ladenprogramme liefern — kein Mac erforderlich für iOS.

Am Ende dieses Leitfadens läuft Ihr Base44-App nativ auf iOS und Android mit Zugriff auf Gerätefeatures wie Kamera, Speicher und Push-Benachrichtigungen.

Voraussetzungen & Zeitabschätzung

Erforderliche Zeit: 2-4 Stunden für die erste Einrichtung

Systemanforderungen:

• Für iOS-Cloud-Builds: Jeder Betriebssystem (Windows, Mac oder Linux) mit Capgo-Builder
• Für Android-Cloud-Builds: Jeder Betriebssystem
• Speicherplatz: 10 GB freier Speicherplatz für Abhängigkeiten und Build-Artikel
• RAM: 8 GB Mindestspeicher

Kosten:

• Base44-Export: Bauplan oder höher (für GitHub-Export und ZIP-Download)
• iOS App Store: 99 €/Jahr (Apple-Entwicklerkonto)
• Android Play Store: 25 € einmalig (Google Play-Entwicklerkonto)
• Cursor Pro: 20 €/Monat (optional aber empfohlen)

Erforderliche Software:

• Node.js 18+
• Eine code-Editor wie Mauszeiger

Wozu wandeln Sie Ihre Base44-App in eine mobile App um?

• Erweiterter ZugriffTreffen Sie sich mit Benutzern an Orten, an denen sie eine native App ikone erwarten, nicht eine Browser-Tabelle
• Native-FunktionenKamera, GPS, Biometrie und Offline-Speicherung über Capacitor-Plugins
• Vertrieb im App StoreVeröffentlichen Sie auf Google Play und dem Apple App Store
• Schnellere IterationPaaren Sie Capgo Live Updates mit Capgo Builder für Web-Schichten-Änderungen ohne jedes Mal native Binärdateien neu zu bauen

Schritt 1: Exportieren Sie Ihr Base44-Projekt

Base44 ermöglicht Ihnen, code einmal zu exportieren, wenn Sie auf der Plattform sind Bauplan oder höher. Sie haben zwei Hauptoptionen.

Option A: Exportieren Sie nach GitHub (Empfohlen)

1. Öffnen Sie Ihre App im Base44-Editor
2. Klicken Sie auf den GitHub Symbol in der oberen Leiste
3. Zustimmen Base44-Bauer und erstellen oder verbinden Sie ein Repository
4. Base44 synchronisiert Ihre App code zu GitHub automatisch (Zwei-Wege-Synchronisierung bei unterstützten Plänen)

Siehe Base44 GitHub-Integration-Dokumentation für Details.

Option B: Als ZIP herunterladen

1. Klicken Code in der oberen Leiste klicken, um den Dateibrowser zu öffnen
2. Klicken Projekt als ZIP exportieren in der oberen rechten Ecke des code-Bereichs
3. Das Archiv auf Ihrem Computer entpacken

Projekt in Cursor öffnen

1. Besuchen cursor.sh und installieren Sie Cursor
2. Klonen Sie Ihr GitHub-Repository (Git: Clone aus dem Befehlsfenster) oder öffnen Sie das extrahierte ZIP-Verzeichnis mit Datei > Ordner öffnen

Für den besten Workflow mit AI-Unterstützung aktivieren Sie Ihre bevorzugte Modell und erlauben Sie die Ausführung von Befehlen in den Cursor-Einstellungen — die gleiche Konfiguration wird in unserem Lovable zu mobilen Leitfaden.

Schritt 2: Einrichten Sie Ihr Entwicklungsumfeld

Base44 exportiert ein Standard-React-Projekt. Installieren Sie die Abhängigkeiten und bestätigen Sie, dass der Entwicklungs-Server funktioniert.

Mit Cursor AI (Empfohlen)

Drücken Sie Command+K (Mac) oder Ctrl+K (Windows) und fragen:

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

Manuelle Einrichtung

cd your-base44-project
npm install
npm run dev

Ihre Base44-Anwendung sollte bei http://localhost:5173 (Vite) oder dem Port, der im Terminal angezeigt wird.

Schritt 3: Vorbereitung der Produktionsversion

Capacitor benötigt statische Web-Assets. Base44-React-Anwendungen verwenden typischerweise Vite und geben auf dist/.

Vite für Mobilgeräte konfigurieren

Ask Cursor:

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

Oder aktualisieren vite.config.ts manuell:

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

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

Testen Sie die Produktionsversion

npm run build

Überprüfen Sie ein dist/ Ordner existiert mit index.html und verknüpften Assets.

Schritt 4: Fügen Sie Capacitor Ihrem Base44-Projekt hinzu.

Mit Cursor AI (Empfohlen)

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

Manuelle Installation

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

Kommitieren Sie ios/ und android/ Ordner zu Git. Capgo-Builder kompiliert, was in diesen Verzeichnissen ist.

Schritt 5: Konfigurieren Sie Capacitor

Aktualisieren 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

Überlegen Sie, ob Sie @capgo/capacitor-updater frühzeitig aktualisieren möchten, um nach dem Launch OTA-Updates bereitstellen zu können. Siehe Capgo Live-Updates-Dokumentation.

Schritt 6: Erstellen und Synchronisieren

Jedes Mal, wenn Sie die Web-Anwendung ändern:

npm run build
npx cap sync

Schritt 7: Erstellen Sie Ladenbereite Binärdateien mit Capgo Builder (Empfohlen)

Simulator-Tests sind optional. Für TestFlight, interne Tests und die Einreichung bei einem Laden verwenden Sie Capgo Builder um native Binärdateien im Cloud zu kompilieren und zu signieren.

Why Capgo Builder für Base44-Anwendungen?

• Kein Mac erforderlich für iOS — bauen Sie von Windows oder Linux aus
• Das gleiche CLI kann Ihre AI-Agentur ausführen — passt sich Vibe-Coding-Workflows von Base44 → GitHub → Cursor an
• Paart sich mit Live-Updates — korrigieren Sie UI und kopieren Sie die Inhalte im Echtzeit; bauen Sie native nur neu, wenn Plugins oder Berechtigungen geändert werden

Konfigurieren Sie den 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

Speichern Sie die Signierungsanmeldeinformationen einmal. Weitere Informationen finden Sie unter Verwalten von Anmeldeinformationen und Erstellen Sie iOS von Windows aus.

Bitten Sie einen Cloud-Build an

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

Build-Protokolle streamen in Ihrem Terminal. Mit App Store Connect konfiguriert, können iOS-Builds automatisch auf TestFlight hochgeladen werden.

Laden Sie Ihr Web-Bundle für OTA-Updates hoch:

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

Schritt 8: Optional — Testen Sie lokal in Xcode oder Android Studio

Wenn Sie einen Mac haben oder vor Cloud-Builds Emulatortests durchführen möchten:

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

Verwenden Sie lokale IDEs für den alltäglichen Debugging. Verwenden Capgo Builder wenn Sie signierte Release-Binaries benötigen.

Schritt 9: Fügen Sie native Funktionen hinzu

Erweitern Sie Ihre Base44-App mit Gerätefunktionen:

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

Bitten Sie Cursor, Share, Camera oder Push in Ihre React-Komponenten einzubinden. Nachdem Sie Plugins hinzugefügt haben, führen Sie einen neuen Capgo Builder Bevor der App-Store-Upload erfolgt.

Schritt 10: Optimierung für die Produktion

App-Ikone und Splash-Screens

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

Überlegungen für die Base44-Hintergrundanwendung

Exportierte Base44-Anwendungen können die Base44-gehostete Hintergrundanwendung und SDK aufrufen. Das funktioniert in der Regel in Capacitor solange:

• API-Aufrufe verwenden HTTPS
• Auth-Redirects funktionieren innerhalb des WebView (Testen Sie das Login auf einem echten Gerät)
• Deep-Links sind konfiguriert, wenn Sie Magic-Link- oder OAuth-Flüsse verwenden

Wenn Sie später von Base44s Hintergrundanwendung migrieren, planen Sie, "und verwandte __CAPGO_KEEP_0__-Aufrufe" durch Ihre eigenen __CAPGO_KEEP_1__ zu ersetzen – die React-UI-Schicht wird in der Regel übernommen. base44.entities.* and related SDK calls with your own API — the React UI layer typically carries over.

Schulung bei häufigen Problemen

Weißer Bildschirm beim Starten

• Bestätigen base: './' wird in der Vite-Konfiguration festgelegt
• Ausführen npm run build und überprüfen Sie, dass dist/index.html lädt Assets mit relativen Pfaden
• Ausführen npx cap sync nach jedem Web-Build

Fehler beim Bauen in Capgo Builder

• Commit ios/ und android/ vor dem Anfordern eines Cloud-Builds auf Git pushen
• Ausführen npx cap sync lokale Ausführung, damit Web-Assets in native Projekte kopiert werden
• Neue Capacitor-Plugins erfordern einen frischen native Build

Export nicht verfügbar in Base44

GitHub-Export und ZIP-Download erfordern den Builder-Plan oder höher. Upgrade in Base44 oder Dateien manuell von der Code-Ansicht auf niedrigeren Ebenen kopieren.

Zusammenfassung

Sie haben ein Base44 AI-generiertes React-App exportiert, es mit Capacitor umhüllt und haben einen klaren Weg zu signierten iOS- und Android-Binären durch Capgo Builder — ohne eine lokale Xcode-Farm zu unterhalten.

Nächste Schritte

• Capgo Live Updates: Schiffe UI- und Kopie-Fixes ohne auf die Store-Bewertung zu warten
• Capgo Builder: Automatisiere Release-Builds in CI
• Push-Benachrichtigungen: Füge hinzu @capacitor/push-notifications und baue mit Capgo Builder neu
• Zugehörige Anleitungen: Lieblingsanwendungen auf Mobilgeräten · Bolt.new auf Mobilgeräte

Registriere dich für ein kostenloses Capgo Konto um Live Updates und cloudbasierte Builds zu aktivieren.

Ressourcen

• Base44-Dokumentation
• Base44 GitHub-Integration
• Capacitor-Dokumentation
• Capgo-Native Builds
• Capgo — Live Updates für Capacitor-Apps

Mit Capacitor weitermachen von Base44 zu nativen mobilen Apps.

Wenn Sie __CAPGO_KEEP_0__ verwenden Base44 zu nativen mobilen Apps mit Capacitor um __CAPGO_KEEP_0__-Arbeiten für native Plugins zu planen, verbinden Sie es mit Capgo-Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, Capgo Native Builds für den Produktworkflow in Capgo Native Builds, und iOS von Windows aus bauen für cloudbasierte iOS-Builds ohne Mac.