Einführung
Geliebt ist ein AI-App-Baukasten, der Anfragen in Minuten in funktionierende React-Apps umwandelt. Sie können schnell im Browser ausliefern — aber was, wenn Sie Ihre App auf dem App Store und Google Play haben möchten, wo sie auf dem Homescreen sitzt wie jede andere native App?
Dieses Leitfaden führt durch den gesamten Weg: Export aus Geliebt, das Web-App mit Capacitorumwickeln, Capgo Builder mit dem Sie signierte iOS- und Android-Binärdateien im Cloud mit (kein Mac erforderlich) erstellen, eine echte native Funktion hinzufügen und eine Layout-Korrektur über die Luft mit Capgo Live Updates.
Wir verwenden Cursor durchgängig — seine KI kann die meisten Terminal-Befehle für Sie ausführen, wenn Sie sie manuell eingeben möchten.
Zeitaufwand: ca. 1–2 Stunden zum ersten Mal, hauptsächlich Einrichtung des Kontos und Warten auf Cloud-Builds.
Am Ende haben Sie:
- Eine native iOS- und Android-App, die aus der Cloud erstellt wurde — kein Xcode oder Android Studio im Hauptpfad
- Die App läuft auf einem echten Gerät (TestFlight, direkte Installation oder Play-internal-Testen)
- Eine funktionierende Kamerafunktion, die nur eine native App bieten kann
- Live Updates konfiguriert, damit UI- und CSS-Fixes ohne Store-Überprüfung verschickt werden
Voraussetzungen
| Anforderung | Details |
|---|---|
| Eine Computer | Mac, Windows oder Linux — Cloud-Builds funktionieren von jedem Betriebssystem |
| Eine code Editor | Cursor (empfohlen) oder VS Code |
| Node.js | 24 LTS (zuletzt — herunterladen von nodejs.org) |
| Git | Um Ihren Lovable-Repo von GitHub zu klonen |
| Capgo Konto | Kostenloser Registrierungsprozess — Cloud-Builds und Live-Updates |
Kosten (nur für die öffentliche Veröffentlichung):
| Artikel | Kosten |
|---|---|
| Apple-Entwicklerprogramm | 99 $/Jahr |
| Google Play Console | 25 $/Einmalzahlung |
| Cursor Pro | 20 $/Monat (optional, aber empfohlen für die Ausführung von AI-Befehlen) |
| Capgo | Freit tariff verfügbar; Bezahlpläne für die Produktionsgröße |
Optional (nur lokaler Simulator):
| Werkzeug | Warum |
|---|---|
| Xcode (~15 GB, nur macOS) | iOS-Simulator auf Ihrem Mac |
| Android Studio (~1 GB + SDKs) | Android-Emulator |
Sie können beide auslassen. Der Hauptweg in dieser Anleitung baut im Cloud und installiert auf echten Geräten ohne sie.
Ein schneller Hinweis zu liebenswerten Frameworks
Bevor Sie code berühren, wissen Sie, dass die Art der Web-App, die Lovable generiert, beeinflusst die mobilen Verpackung.
Länger als man denken mag, war die Standard-App von Lovable eine React + Vite Single-Page-App (SPA). Ab Mai 2026 können brandneue Lovable-Apps standardmäßig TanStack Start mit serverseitiger Rendering (SSR) verwenden . SSR ist großartig für die Webentwicklung, aber Capacitor umhüllt eine static build — ein Ordner mit HTML, CSS und JavaScript mit einem index.html an seiner Spitze —, der innerhalb der App auf dem Gerät verschickt wird.
Eine SSR-App erwartet, dass eine Server-Seite Seiten auf jeder Anfrage renderet. Es gibt keinen Server in einem Telefon, also wünscht man sich für Capacitor stattdessen static, client-seitig gerenderte Ausgabe.
Was tun:
- Neu anfangen: Fragen Sie Lovable nach einer Eine einzelne-Seite-Anwendung (SPA) oder um SSR zu überspringen, damit Sie eine statische
dist/Ordner. - Bereits auf TanStack Start (SSR): Konfigurieren Sie es, um vorher zu rendern oder eine statische SPA auszugeben. Der einzige harte Anforderung ist ein statischer Build-Ordner, der enthält
index.html. - Legacy Next.js Lovable-Projekte: Verwenden Sie statische Ausgabe — Ausgabe geht in
out/anstattdist/.
Egal, welches Framework Sie verwenden, zeigen Sie auf Capacitor webDir in diesem Ordner. Für eine Vite-SPA ist dieser Ordner dist.
Schritt 1 — Exportieren Sie Ihre geliebte App in GitHub
Lovable hält Ihre code in seinem Editor, bis Sie GitHub verbinden.
- Öffnen Sie Ihr Lovable-Projekt im Browser
- Klicken Sie Aktualisieren Wenn nötig, klicken Sie auf (oben rechts), dann öffnen Sie Git in der linken Menüleiste
- Wählen Sie GitHub autorisieren Sie Lovable und verbinden Sie Ihr Konto
- Lovable erstellt einen Repository und pusht Ihr App automatisch




✅ Erfolg: Besuchen Sie github.com/YOUR-USERNAME/your-app zeigt Ihr App’s code.
Schritt 2 — Setzen Sie Cursor und klonen Sie Ihr Projekt
Bevor wir mit Ihrem code lokal arbeiten können, benötigen Sie einen code Editor. Wir empfehlen Cursoreine AI-gestützte Editor, die Terminal-Befehle für Sie ausführen kann.
Download und Installieren Cursor
- Besuchen Sie cursor.sh und laden Sie die Version für Ihr Betriebssystem herunter
- Installieren Sie Cursor, indem Sie dem Installation-Assistenten folgen
- Öffnen Sie Cursor, nachdem Sie ihn installiert haben

Konfigurieren Sie Cursor für die AI-Entwicklung
Konfigurieren Sie Cursor, bevor Sie beginnen, für den besten Erfahrung
- Kaufe eine Cursor-Plan — Während Cursor eine kostenlose Ebene bietet, bietet ein Pro-Plan (20 $/Monat) Ihnen unbeschränkte AI-Vervollständigungen, Zugriff auf Claude und GPT-4 und Befehlsausführung
- Offene Cursor-Einstellungen durch
Command+,(Mac) oderCtrl+,(Windows)

- KI-Modelle aktivieren — Stellen Sie sicher, dass KI-Funktionen aktiviert sind:

- Wählen Sie Ihr bevorzugtes Modell — Wählen Sie Claude oder GPT-4 für die besten Ergebnisse:

- Befehlsausführung zulassen — Deaktivieren Sie die Mauszeiger, um Befehle für Sie auszuführen:

Klonen Sie Ihren Repository in Cursor
- In Cursor drücken Sie
Shift+Command+P(Mac) oderShift+Ctrl+P(Windows) um das Befehlsfenster zu öffnen - Tippen Sie „clone“ und wählen Sie Git: Klonen“
- Fügen Sie Ihre GitHub Repository-URL ein:
https://github.com/YOUR-USERNAME/your-lovable-app.git - Wählen Sie einen Ordner, in dem Sie das Projekt speichern möchten

- Cursor wird Ihr Projekt klonen und öffnen

Schritt 3 — Installieren Sie Abhängigkeiten und lokal ausführen
Methode 1: Verwendung von Cursor AI (Empfohlen)
- Öffnen Sie die AI-Taste von Cursor, indem Sie
Command+K(Mac) oderCtrl+K(Windows) - Tippen Sie die folgende Anweisung ein:
Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server
Die AI wird automatisch Ihren Betriebssystem erkennen, Node.js installieren, npm installund den Entwicklungs-Server mit npm run dev.

Homebrew installieren
Methode 2: Manuelle Installation Shift+Command+T (Mac) oder Shift+Ctrl+T (Windows), dann:
Für macOS:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
cd your-lovable-app
npm install
npm run dev
Für Windows:
- Laden Sie den 24 LTS Installer von nodejs.org
- Führen Sie den Installer aus
- Öffnen Sie ein Terminal und führen Sie aus:
cd your-lovable-app
npm install
npm run dev

Lovable-Anwendungen laufen typischerweise auf http://localhost:8080 oder http://localhost:5173 — verwenden Sie die Adresse, die Ihr Terminal ausgibt.
Drücken Sie Ctrl + C um die Entwicklungs-Server zu beenden, wenn Sie bereit sind, fortzufahren.
✅ Erfolg: Ihre App öffnet sich im Browser mit funktionierender Benutzeroberfläche.
Schritt 4 — Vorbereitung der statischen Produktionsversion
Capacitor benötigt eine Produktionsversion, bevor Sie native Plattformen hinzufügen.
React + Vite (die meisten liebenswerten Apps)
Methode 1: Verwendung von Cursor AI (Empfohlen)
Drücken Sie Command+K (Mac) oder Ctrl+K (Windows) und fragen:
Configure vite.config for Capacitor mobile deployment with base './' and production build to dist
Methode 2: Manuelle Konfiguration
Bestätigen vite.config.ts Es verwendet eine relative Basis, sodass Assets innerhalb der nativen WebView geladen werden:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: './',
build: {
outDir: 'dist',
},
})
Erstellen und überprüfen:
npm run build
Sie sollten ein dist/ Ordner mit index.html am Wurzelort finden.

Legacy Next.js Lovable Projekte
Wenn Ihr Repository Next.js verwendet, fragen Sie Cursor:
Add a static export script to package.json and configure next.config.js for mobile export with Capacitor
Oder folgen Ihre nächste Next.js App auf Mobilgeräte umstellen für die vollständige next.config Konfiguration, dann verwenden Sie webDir: 'out' in Capacitor anstatt dist.
✅ Erfolg: Ein statisches Build-Verzeichnis existiert (dist/ oder out/) mit index.html.
Schritt 5 — Fügen Sie Capacitor und Native-Plattformen hinzu
Capacitor hüllt Ihre Web-App in echte iOS- und Android-Shell-Dateien ein — keine Umstellung erforderlich.
Methode 1: Verwendung von Cursor AI (Empfohlen)
Drücken Sie Command+K (Mac) oder Ctrl+K (Windows) und fragen Sie:
Install Capacitor CLI, initialize it for my app with webDir dist, and add iOS and Android platforms
Die AI wird nach Ihrem App-Namen und Bundle-ID (z.B. com.yourcompany.myapp).

Methode 2: Manuelle Installation
npm install @capacitor/core @capacitor/cli
npx cap init
Wenn Sie aufgefordert werden:
| Aufforderung | Beispiel | Hinweise |
|---|---|---|
| App-Name | Mein lieblicher App | Unter dem App-Icon angezeigt |
| App-Paket-ID | com.yourcompany.myapp | Rückwärts-Domänen-Stil — nach dem Veröffentlichung im Store nicht ändern |
| Web-Assets-Verzeichnis | dist |
Benutzen out für die statische Exportierung von Next.js |
Wählen Sie eine Paket-ID, die Sie tatsächlich besitzen. Bundle-IDs sind weltweit einzigartig. Verwenden Sie eine rückwärts gelesene Domänen-ID auf der Grundlage einer von Ihnen kontrollierten Domäne von Anfang an — Änderungen später bedeuten Find-and-Replace über ios/ und android/ und
npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Capacitor Plattformen hinzugefügt
Konfigurieren Sie __CAPGO_KEEP_0__
Methode 1: Verwendung von Cursor AI (Empfohlen)
Update capacitor.config.ts to use dist as webDir and set up for HTTPS
Befragen Sie Cursor: out Für Next.js-Static-Export, fragen Sie es, es zu verwenden
anstatt.
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.yourcompany.myapp',
appName: 'My Lovable App',
webDir: 'dist',
server: {
androidScheme: 'https',
},
};
export default config;
Methode 2: Manuelle Konfiguration
Bauen und Synchronisieren
Erzählen Sie Cursor:
Build the production web app and sync it with Capacitor platforms
Methode 2: Manuelle Befehle
npm run build
npx cap sync

Ihr Projekt sieht jetzt so aus:
your-lovable-app/
├── android/ ← native Android project
├── ios/ ← native iOS project
├── dist/ ← built web app (or out/ for Next.js)
├── src/ ← your Lovable app code
├── capacitor.config.ts
└── package.json
Keine CocoaPods erforderlich. Capacitor 8 verwendet den Swift Package Manager für iOS-Abhängigkeiten automatisch.
✅ Erfolg: ios/ und android/ Ordner erscheinen und der Terminal zeigt Sync finished.
Schritt 6 — Überprüfen Sie Ihr .gitignore
Capgo Builder kompiliert aus Ihrem Git-Repository, also ios/ und android/ muss im Repository übernommen werden. Ein häufiger Fehler ist das Ignorieren von ihnen am Repo-Root.
Bestätigen:
- Root
.gitignoreignoriertnode_modulesunddist(während der Cloud wieder aufgebaut wirddistwährend Web-Aufrüstungen) ios/undandroid/sind nicht ignoriert
✅ Erfolg: git status zeigt ios/ und android/ bereit zum Commit (nicht ignoriert).
Schritt 7 — Commit und Push
git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push
✅ Erfolg: Ihr GitHub-Repository zeigt die ios/ und android/ Ordner.
Schritt 8 — Erstellung von Store-Bereit-Dateien mit Capgo-Builder
Sie benötigen keinen Mac oder eine lokale Xcode/Android Studio-Pipeline, um zu liefern. Capgo-Builder kompilet, signiert und kann iOS- und Android-Builds aus der Cloud einreichen.
Konfiguriere 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
Speichere die Signierungsdaten einmal ab. Wenn Sie Hilfe bei der Erstellung benötigen, nutzen Sie unsere kostenlose Tools:
- iOS-Zertifikatsgenerator
- Android-Keystore-Generator
- iOS-UDID-Finder — registrieren Sie Ihr iPhone für Entwicklungsbau
Weitere Informationen Zugriff auf die Anmeldedaten und Erstelle iOS von Windows.
Anfrage für einen Cloud-Bau
npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.myapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.myapp --platform android --build-mode release
Buildprotokolle streamen in Ihrem Terminal. Mit App Store Connect konfiguriert, können iOS-Builds automatisch auf TestFlight hochgeladen werden.
Installieren Sie auf einem echten Gerät:
- iOS: TestFlight (empfohlen) oder eine Entwicklungsversion mit Ihrem Geräte-UDID registriert
- Android: Google Play interne Testspur oder eine signierte Release-APK/AAB
✅ Erfolg: Ein signierter Build ist abgeschlossen und Sie können ihn auf einem echten Gerät installieren.
Schritt 9 — Optional: Lokal testen in Xcode oder Android Studio
Wenn Sie einen Mac haben oder vorher Emulator-Tests in der Cloud bevorzugen:
Für iOS
Methode 1: Mit Cursor AI (Empfohlen)
Open the iOS project in Xcode
Methode 2: Manueller Befehl
npx cap open ios

Erste Xcode-Einrichtung:
- Wählen Sie ein Simulator aus dem Geräte-Auswahlfeld (z. B. iPhone 15)
- Für echte Geräte: Aktivieren Sie Automatisch die Signierung verwalten und wählen Sie Ihr Apple-Entwickler-Team
- Klicken Sie auf die ▶️ Play-Taste — erste Build dauert 5–10 Minuten

Für Android
Methode 1: Verwendung von Cursor AI (Empfohlen)
Open the Android project in Android Studio
Methode 2: Manueller Befehl
npx cap open android

Erste Einrichtung von Android Studio:
- Installieren Sie fehlende SDK-Pakete, wenn angefordert
- Erstellen Sie einen Emulator im Gerätemanager (z.B. Pixel 6, API 33+)
- Klicken Sie auf den grünen ▶️-Button — erste Build dauert 5–15 Minuten

Verwenden Sie lokale IDEs für den täglichen Debugging. Verwenden Sie Capgo-Builder wenn Sie signierte Release-Dateien benötigen.
✅ Erfolg: App öffnet sich im Simulator oder Emulator und zeigt Ihr Lovable-Inhalt.
Schritt 10 — Live Reload (Entwicklung) aktivieren
Erhöhen Sie die Iterationsgeschwindigkeit, indem Sie die native Shell auf Ihren lokalen Entwicklungs-Server zeigen.
Methode 1: Verwendung von Cursor AI (Empfohlen)
Sagen Sie Cursor:
Set up live reload for Capacitor development with my local IP address
Methode 2: Manuelle Einrichtung
- Finden Sie Ihre lokale IP-Adresse:
# macOS
ipconfig getifaddr en0
# Windows
ipconfig
- Aktualisieren
capacitor.config.ts:
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.yourcompany.myapp',
appName: 'My Lovable App',
webDir: 'dist',
server: {
url: 'http://YOUR_IP_ADDRESS:5173',
cleartext: true,
},
};
export default config;
Verwenden Sie Port 8080 oder 3000 wenn das ist, was npm run dev druckt.
- Anwendung von Änderungen:
npx cap copy

✅ Erfolg: Änderungen an Ihrem Web code werden auf dem Gerät oder Simulator mit Hot-Reload aktualisiert.
Schritt 11 — Hinzufügen einer nativen Funktion: Die Kamera
Ein Capacitor-Plugin ermöglicht es JavaScript, auf echte Gerätefunktionen zuzugreifen. Wir fügen das Camera-Plugin hinzu, damit Benutzer ein Foto machen können — etwas, das ein Browserfenster nicht zuverlässig kann.
Methode 1: Verwendung von Cursor AI (Empfohlen)
Sagen Sie Cursor:
Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo
Methode 2: Manuelle Installation
npm install @capacitor/camera
npx cap sync
iOS — fügen Sie hinzu ios/App/App/Info.plist innerhalb der obersten Ebene <dict>:
<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>
Android — fügen Sie innerhalb hinein <manifest> in android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.CAMERA" />
import { Camera, CameraResultType } from '@capacitor/camera';
async function takePhoto() {
const photo = await Camera.getPhoto({
quality: 90,
resultType: CameraResultType.Uri,
});
return photo.webPath;
}

Ein Plugin hinzufügen erfordert ein frisches natives Build durch Capgo Builder bevor es auf Geräten funktioniert.
✅ Erfolg: Camera code kompiliert und npx cap sync endet ohne Fehler.
Schritt 12 — Capgo Live Updates hinzufügen
Jede native Änderung geht normalerweise durch die App-Store-Überprüfung. Capgo Live Updates schiebt Änderungen an Ihrer App’s Web-Schicht (HTML, CSS, JS, Bilder) über die Luft in Minuten.
Installieren Sie den Updater in Ihrer ersten Version damit Sie nie auf eine Überprüfung warten müssen, wenn Sie ein Fix bereitstellen müssen.
npm install @capgo/capacitor-updater
npx cap sync
Hinzufügen zu capacitor.config.ts:
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.yourcompany.myapp',
appName: 'My Lovable App',
webDir: 'dist',
plugins: {
CapacitorUpdater: {
autoUpdate: true,
},
},
};
export default config;
Initialisieren Sie in Ihrer App-Einstieg (z.B. src/main.tsx):
import { CapacitorUpdater } from '@capgo/capacitor-updater';
void CapacitorUpdater.notifyAppReady();
Commit, pushen und einen neuen Capgo Builder-Build ausführen, damit der Updater SDK im nativen Shell ist.
Web-Bundles nach dem Launch hochladen:
npm run build
npx @capgo/cli@latest bundle upload --channel production
Siehe Capgo Live-Updates-Dokumentation.
✅ Erfolg: Updater-Plugin ist installiert und notifyAppReady() läuft bei Start.
Schritt 13 — Statusleistenabstand mit Live-Update korrigieren
On einem echten iPhone liegt Ihr Header möglicherweise unter den Statusleisten (Uhr und Batterie). Moderne Capacitor zeichnet sich durch eine Randlosigkeit aus, daher muss Ihr App die safe Area-Einrückungen: env(safe-area-inset-top), -bottom, -left, -right.
respektieren. Viele Lovable-Apps behandeln bereits die untere Einrückung, verwenden aber feste oberen Abstände (wie pt-6) ohne die obere Einrückung.
1. Bestätigen viewport-fit=cover in index.html:
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
2. Fixen Sie die oberen Header — verwenden Sie max() um Web-Abstände beizubehalten und auf nicht-gerandeten Geräten zu wachsen:
/* Before */
padding-top: 1.5rem;
/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));
In Cursor oder Lovable fragen Sie:
Die App-Inhalte laufen unter der Statusleiste oben auf dem Mobilgerät. Fügen Sie
env(safe-area-inset-top)dem oberen Padding jeder Seitekopf hinzu, indem Siemax(), wobei der bestehende Padding als Mindestwert bleibt.
3. Verschicken Sie die Reparatur über die Luft — dies ist rein CSS, kein natives Neubauen erforderlich:
git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production
Zwingen Sie das Gerät, das App zu schließen, öffnen Sie es erneut, warten Sie ~15–30 Sekunden und öffnen Sie es erneut. Der Kopf sollte unter der Statusleiste sitzen — repariert ohne Store-Bewertung.
✅ Erfolg: Der Inhalt oben klärt die Statusleiste nach dem Anwendung von OTA-Bundle.
Für tiefergehende Layoutarbeiten siehe @capgo/tailwind-capacitor und Capacitor edge-to-edge Display.
Schritt 14 — Vorbereitung Ihres Ladenangebots
Ihr App ist gebaut, installierbar und Sie können sofort Updates bereitstellen. Die Veröffentlichung in den öffentlichen Stores ist hauptsächlich Papierkram:
- Ladenicon — 1024×1024px für iOS (keine Transparenz), 512×512px für Google Play
- Screenshots — Apple erfordert iPhone 6.9“ (1320×2868px) Screenshots
- Ladenname, Untertitel, Beschreibung, Schlüsselwörter
- URL der Datenschutzrichtlinie — erforderlich durch beide Stores, auch für kostenlose Apps
- Altersfreigabe — Fragebogen in jedem Konsole
- Datenerfassungsmitteilungen — Datenschutz-Informationen von Apple und Sicherheitsdaten von Google
Methode 1: Verwendung von Cursor AI (Empfohlen)
Set up app icons and splash screens for my Capacitor app
Methode 2: Manuelle Einrichtung
npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

Was bleibt vor "live":
- Google Play geschlossene Testphase (Kontoerstellungen nach dem 13. November 2023): mindestens 12 Tester für 14 aufeinanderfolgende Tage vor der Produktionserreichung. iOS hat kein Äquivalent.
- Für die Überprüfung einreichen — Apple ~3–5 Tage, Google ~3–7 Tage nachdem die Testanforderungen erfüllt sind.
Siehe unser Leitfaden für die erste App-Überprüfung für das vollständige Checklisten.
Häufige Fehler (und wie man sie behebt)
Could not find the web assets directory: ./dist— Ausführen Sienpm run buildvorhernpx cap addodernpx cap syncStellen Sie sicher, dasswebDirsichcapacitor.config.tsmit Ihrem Framework-Ausgabe (distfür Vite,outfür Next.js-Static-Export)- “Diese App-ID … ist nicht verfügbar” — Bundle-IDs sind global eindeutig. Wählen Sie einen umkehrbaren Domänen-Id, den Sie kontrollieren.
- iOS-Build fehlt nach dem Ändern der Bundle-ID — Die ID in Ihrem native Projekt muss der von Apple App Store Connect übereinstimmen. Find-and-replace überall,
ios/undandroid/, commit, rebuild. - Weißer Bildschirm bei der Startphase — Set
base: './'in der Vite-Konfiguration, rebuild, und startenpx cap sync. - Inhalt unter der Statusleiste — Füge
viewport-fit=coverundenv(safe-area-inset-top)Paddings (Schritt 13) hinzu. - APK signiert im Debug-Modus — Google Play lehnt Debug-Builds ab. Verwende einen Release-Build, der mit deinem Keystore signiert ist.
- Deployment wurde abgelehnt — Version existiert bereits — Versionsnummer in native Projekten erhöhen und neu erstellen.
Für Capgo Builder-Probleme siehe Native Build-Fehlerbehebung und Live-Updates-Debugging.
Schlussfolgerung
Sie haben eine webbasierte Anwendung in eine native iOS- und Android-Anwendung umgewandelt — in der Cloud erstellt, ohne einen Mac, mit einer echten Kamerafunktion und einer Layoutkorrektur, die über die Luft geschickt wurde. Das ist der schwierige Teil erledigt.
Zukünftige Schritte
- Capgo Live-Updates — UI- und Copy-Fixes ohne Wartezeit auf Store-Review verschicken
- Capgo Builder — Automatisierung von Release-Builds in CI
- Capgo Plugin-Verzeichnis — Biometrie, Push-Benachrichtigungen, Standortortung und mehr
- Zugehörige Anleitungen: Base44 zu Mobilgeräten · Bolt.new zu Mobilgeräten
Registrieren Sie sich für ein kostenloses Capgo-Konto um Live-Updates und cloudbasierte Builds zu aktivieren.
Ressourcen
- Liebenswerte Dokumentation
- Capacitor-Dokumentation
- Capgo-Native Builds
- Capgo — Live Updates für Capacitor-Apps
- iOS von Windows erstellen
- Next.js-Statikexport für mobile
Weitermachen von Convert Your Lovable App zu iOS und Android mit Capacitor
Wenn Sie __CAPGO_KEEP_0__ verwenden Convert Your Lovable App zu iOS und Android mit Capacitor um native Plugin-Arbeit 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 für die native Builds in Capgo für das Produktworkflow in Capgo Native Builds, und iOS von Windows aus bauen für Cloud iOS Builds ohne Mac