Base44 zu native mobile Apps 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 schnell im Browser 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 nativen Mobilanwendungen mit __CAPGO_KEEP_0__ umwandeln können. Capacitor, dann werden die signierten Speicherdateien mit Capgo Builder — kein Mac erforderlich für iOS.

Mit Ende dieses Leitfadens läuft Ihre Base44-App nativ auf iOS und Android mit Zugriff auf Gerätefeatures wie Kamera, Speicher und Pushbenachrichtigungen.

Voraussetzungen & Zeitabschätzung

Zeit erforderlich: 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
Speicher10 GB kostenlose Speicherplatz für Abhängigkeiten und Build-Artikel
RAMMindestens 8 GB

Kosten:

Base44-ExportDer Builder-Plan oder höher (für GitHub-Export und ZIP-Download)
iOS App Store99 $/Jahr (Apple-Entwicklerkonto)
Android Play Store25 $ einmalig (Google Play-Entwicklerkonto)
Cursor Pro: 20 €/Monat (optional, aber empfohlen)

Benötigte Software:

Node.js 18+
Ein code-Editor wie Cursor

Wie Sie Ihre Base44-App auf Mobilgeräte umwandeln können

Erweiterter Zugriff: Treffen Sie Nutzer dort, wo sie eine native App ikone erwarten, nicht einen Browser-Fenster
Nativfunktionen: Kamera, GPS, Biometrie und Offline-Speicherung durch Capacitor-Plugins
Vertrieb im App Store: Veröffentlichen Sie auf Google Play und dem Apple App Store
Schnellere Iteration: Paare Capgo Live Updates mit Capgo Builder für web-schichtbehebungen ohne jedes Mal native Binärdateien neu zu bauen

Schritt 1: Exportieren Sie Ihr Base44-Projekt

Base44 ermöglicht Ihnen das Exportieren von code sobald Sie sich auf den Builder-Plan oder höher befinden. Sie haben zwei Hauptoptionen

Option A: Exportieren Sie zu GitHub (Empfohlen)

Öffnen Sie Ihre App im Base44-Editor
Klicken Sie auf den GitHub Symbol in der oberen Leiste
Autorisieren Base44 Builder und erstelle oder verbinde einen Repository
Base44 synchronisiert deine App code automatisch mit GitHub (Zwei-Wege-Synchronisierung bei unterstützten Tarifen)

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

Option B: Als ZIP herunterladen

Klicken Code in der oberen Leiste, um den Dateibrowser zu öffnen
Klicken Projekt als ZIP exportieren in der oberen rechten Ecke der code Ansicht
Entpacken Sie das Archiv auf Ihrem Computer

Öffnen Sie das Projekt in Cursor

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

Starten Sie Cursor

Für den besten AI-gestützten Workflow aktivieren Sie Ihre bevorzugte Modell und erlauben Sie die Befehlsausführung in den Cursor-Einstellungen — die gleiche Konfiguration wird in unserem Lieblingsleitfaden zu mobilen Anwendungen beschrieben.

Schritt 2: Konfiguriere Deine Entwicklungsumgebung

Base44 exportiert ein Standardprojekt für React. Installiere Abhängigkeiten und bestätige, dass der Entwicklungs-Server funktioniert.

Verwende Cursor AI (Empfohlen)

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

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

Manuelle Konfiguration

cd your-base44-project
npm install
npm run dev

Ihre Base44-Anwendung läuft lokal

Ihre Base44-Anwendung sollte bei http://localhost:5173 (Vite) oder dem im Terminal angezeigten Port aufrufen.

Schritt 3: Vorbereite die Produktionsversion

Capacitor benötigt statische Web-Assets. Base44-Apps für React verwenden typischerweise Vite und geben die Ausgabe aus. dist/.

Für Vite konfigurieren Sie die Mobile

Frage Cursor:

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

Oder aktualisieren Sie 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, ob ein dist/ Ordner mit index.html und gebündelten Assets existiert.

Ausgabe von Base44

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

Verwenden Sie 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

Capacitor Initialisierung für eine Base44-Anwendung

Commiten Sie ios/ und android/ Ordner zu Git. Capgo Builder kompiliert, was sich in diesen Verzeichnissen befindet.

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, @capgo/capacitor-updater frühzeitig, damit Sie nach dem Launch OTA-Updates bereitstellen 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

Capacitor Synchronisierung abgeschlossen für eine Base44-Anwendung

Schritt 7: Erstellen Sie binäre Store-Ready-Dateien mit Capgo-Builder (Empfohlen)

Simulator-Tests sind optional. Für TestFlight, interne Tests und die Einreichung in den Store verwenden Sie Capgo-Builder __CAPGO_KEEP_0__-Builder zum Kompilieren und Signieren von nativen Binärdateien im Cloud.

Warum Capgo-Builder für Base44-Anwendungen?

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

Einrichten Sie 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

Sparen Sie die Signaturanmeldeinformationen einmal. Siehe Verwalten Sie Anmeldeinformationen und Erstellen Sie iOS von Windows.

Anfordern Sie einen Cloud-Bau

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

Die Build-Protokolle streamen in Ihrem Terminal. Mit der Konfiguration von App Store Connect können iOS-Builds automatisch auf TestFlight hochladen.

Hochladen Sie Ihr Web-Bundle für OTA-Updates:

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

Xcode öffnet ein Basisprojekt Capacitor

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

Schritt 9: Hinzufügen von Native-Funktionen

Erweitern Sie Ihre Base44-Anwendung 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 Ein neues

Hinzufügen von Native-Funktionen zu einer Base44-Capacitor-Anwendung

Schritt 10: Optimieren für die Produktion

App-Icons 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

Hinweise zur Backend-Implementierung von Base44

Exportierte Base44-Anwendungen können Base44s gehosteten Backend und SDK aufrufen. Das funktioniert in der Regel in Capacitor solange:

API-Aufrufe verwenden HTTPS
Auth-Redirects funktionieren innerhalb der WebView (Test-Login auf einem realen Gerät)
Tiefenlinks sind konfiguriert, wenn Sie die Magic-Link- oder OAuth-Flüsse verwenden

Plan Sie, wenn Sie später von Base44s Backend migrieren, __CAPGO_KEEP_0__-Aufrufe durch Ihre eigenen __CAPGO_KEEP_1__-Aufrufe zu ersetzen – die React-UI-Schicht wird typischerweise übernommen base44.entities.* and related SDK calls with your own API — the React UI layer typically carries over.

Weißer Bildschirm bei der Startphase

Bestätigen

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

Fehler beim Build in Capgo Builder

Commit ios/ und android/ vor dem Anfordern eines Cloud-Builds in Git einlagern
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öherUpgrade in Base44 oder Dateien manuell von der Code-Ansicht auf niedrigeren Ebenen kopieren

Zusammenfassung

Sie haben eine Basis44-Chatbot-App erstellt, die mit Capacitor umschlossen ist, und haben einen klaren Weg zu signierten iOS- und Android-Binärdateien. Capgo Builder — ohne eine lokale Xcode-Farm zu unterhalten.

Nächste Schritte

Capgo Live Updates: Schiffe UI- und Kopie-Fixes ohne auf die Store-Überprüfung zu warten.
Capgo Builder: Automatisiere Release-Builds in CI.
Push-Nachrichten: Fügen Sie hinzu und mit __CAPGO_KEEP_0__ Builder neu erstellen. @capacitor/push-notifications Capgo Builder
Zugehörige Anleitungen: Lieblingsanwendung für Mobilgeräte · Bolt.new für Mobilgeräte

Registrieren Sie sich für ein kostenloses Capgo Konto um Live-Updates und cloudbasierte Builds zu aktivieren.

Ressourcen

Fortsetzen Sie von Base44 zu Native-Mobilanwendungen mit Capacitor

Wenn Sie __CAPGO_KEEP_0__ verwenden Base44 to Native Mobile Apps with Capacitor um native Plugin-Arbeiten zu planen, verbinden Sie es mit Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor-Plugins von Capgo für die Implementierungsdetails in Capacitor-Plugins von Capgo Capgo-Native-Builds für den Produktworkflow in Capgo-Native-Builds iOS von Windows aus bauen für Cloud-iOS-Builds ohne Mac

Base44 zu nativen Mobilanwendungen mit Capacitor