Ihre liebliche App auf iOS und Android mit Capacitor umwandeln

Einleitung

liebenswürdig ist ein AI-App-Builder, der Anfragen in Minuten in funktionierende React-Apps umwandelt. Sie können schnell im Browser liefern — aber was, wenn Sie Ihre App auf dem App Store und Google Play haben möchten und sie auf dem Homescreen sitzen soll wie jede andere native App?

Dieses Leitfaden führt durch den gesamten Weg: Export aus liebenswürdig, die Web-App mit Capacitorerstellen Sie signierte iOS- und Android-Binärdateien im Cloud mit Capgo Builder (kein Mac erforderlich), fügen Sie eine echte native Funktion hinzu und drücken Sie eine Layout-Korrektur über die Luft mit Capgo Live Updates.

Wir verwenden Cursor durchgehend — seine AI kann die meisten Terminal-Befehle für Sie ausführen, wenn Sie sie manuell eingeben möchten.

Zeitbedarf: ca. 1–2 Stunden zum ersten Mal, hauptsächlich Einrichtung des Kontos und Warten auf Cloud-Builds.

Am Ende hast du:

• 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-Interner Test)
• Eine funktionierende Kamerafunktion, die nur eine native App anbieten kann.
• Live-Updates konfiguriert, so dass UI- und CSS-Fixes ohne Store-Überprüfung verschickt werden.

Voraussetzungen

Kosten (nur für die öffentliche Veröffentlichung):

Optional (nur lokaler Simulator):

Sie können beide überspringen. Der Hauptweg in dieser Anleitung baut im Cloud und installiert auf echten Geräten ohne sie.

Eine kurze Anmerkung zu Lovable und Frameworks

Bevor Sie code berühren, wissen Sie, dass die Art der Web-App, die Lovable generiert, die mobile Verpackung beeinflusst.

Für eine lange Zeit war Lovable's Standard eine React + Vite-Einseitige-Anwendung (SPA). Als von Mai 2026, brandneue Lovable-Apps können TanStack mit serverseitiger Rendering (SSR) beginnen by default. SSR is great for the web, but Capacitor wraps a eine statische Ausgabe — ein Ordner mit HTML, CSS und JavaScript mit einem index.html an seiner Spitze —, die innerhalb der App auf dem Gerät verschickt wird.

An SSR app expects a server to render pages on each request. There is no server inside a phone, so for Capacitor you want statistische, client-seitig gerenderte Ausgabe.

Was tun:

• Von vorneherein: Lovable für eine eine einzelne-Seiten-Anwendung (SPA) oder um SSR zu umgehen, damit Sie eine statische erhalten dist/ Ordner.
• Bereits auf TanStack Start (SSR): Konfigurieren Sie es, um vorher zu rendern oder eine statische SPA auszugeben. Die einzige harte Anforderung ist ein statischer Build-Ordner, der enthält index.html.
• Legacy Next.js Lovable Projekte: Verwenden Sie static export — der Output geht zu out/ anstatt dist/.

Unabhängig vom Framework, das Sie verwenden, zeigen Sie Capacitor auf den Ordner. webDir Für eine Vite-SPA ist der Ordner dist.

Schritt 1 — Exportieren Sie Ihre Lovable-Anwendung in GitHub

Lovable hält Ihre code in seinem Editor, bis Sie GitHub verbinden.

1. Öffnen Sie Ihr Lovable-Projekt im Browser
2. Klicken Sie Aktualisieren (oben rechts) falls erforderlich, dann öffnen Sie Git in der linken Menüzeile
3. Wählen Sie GitHubLovable autorisieren und Ihren Account verknüpfen
4. Lovable erstellt ein Repository und drückt Ihre App automatisch

✅ Erfolg: Besuchen github.com/YOUR-USERNAME/your-app zeigt Ihnen Ihr App-code.

Schritt 2 — Cursor und Projekt einrichten

Bevor wir mit Ihrem code lokal arbeiten können, benötigen Sie einen code Editor. Wir empfehlen Cursor, einen künstlich-intelligenzen-betriebenen Editor, der Befehle für Sie im Terminal ausführen kann.

Cursor herunterladen und installieren

1. Besuchen Sie cursor.sh und laden Sie die Version für Ihr Betriebssystem herunter
2. Installieren Sie Cursor, indem Sie dem Installations-Assistenten folgen
3. Öffnen Sie Cursor, nachdem Sie ihn installiert haben

Konfigurieren Sie Cursor für die AI-Entwicklung

Konfigurieren Sie Cursor, um die beste Erfahrung zu erzielen, bevor Sie beginnen:

1. Kaufe eine Cursor-Planung — 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 sowie die Ausführung von Befehlen
2. Öffnen Sie die Cursor-Einstellungen mit der Taste Command+, (Mac) oder Ctrl+, (Windows)

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

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

5. Befehlsausführung zulassen — Aktivieren Sie Mauszeichen, um Befehle für Sie auszuführen:

Klonen Sie Ihr Repository in Mauszeichen

1. In Mauszeichen drücken Sie Shift+Command+P (Mac) oder Shift+Ctrl+P (Windows) um das Befehlsfenster zu öffnen
2. Typen Sie "clone" und wählen Sie Git: Clone
3. Fügen Sie Ihre GitHub-Repository-URL ein: https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Wählen Sie einen Ordner, in dem Sie das Projekt speichern möchten

5. Cursor wird Ihr Projekt klonen und öffnen

Schritt 3 — Abhängigkeiten installieren und lokal ausführen

Methode 1: Mit Cursor AI (Empfohlen)

1. Öffnen Sie die AI-Taste von Cursor, indem Sie Command+K (Mac) oder Ctrl+K (Windows)
2. Geben Sie die folgende Befehl ein:

Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server

Die AI erkennt automatisch Ihr Betriebssystem, installiert Node.js, führt npm install, und startet den Entwicklungs-Server mit npm run dev.

Methode 2: Manuelle Installation

Öffnen Sie das Terminal in Cursor, indem Sie 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:

1. Herunterladen Sie das 24 LTS Installationsprogramm von nodejs.org
2. Das Installationsprogramm ausführen
3. Ö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: Deine App öffnet sich im Browser und die Benutzeroberfläche funktioniert.

Schritt 4 — Vorbereitung der statischen Produktionsversion

Capacitor benötigt eine Produktionsversion, bevor du native Plattformen hinzufügst.

React + Vite (die meisten lieblichen Apps)

Methode 1: Verwendung von Cursor AI (Empfohlen)

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

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

Methode 2: Manuelle Konfiguration

Bestätigen vite.config.ts verwendet eine relative Basis, so dass die Assets innerhalb des nativen WebView geladen werden:

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

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

Entwickeln und überprüfen:

npm run build

Sie sollten ein Verzeichnis mit dist/ im Wurzelordner sehen. index.html Lovable.dev-Statistikexport erfolgreich

Wenn Ihr Repository Next.js verwendet, fragt Cursor:

Oder folgen Sie

Add a static export script to package.json and configure next.config.js for mobile export with Capacitor

Konvertieren Sie Ihre Next.js-Anwendung in eine mobile Anwendung den vollständigen Setup, dann verwenden Sie next.config anstelle von __CAPGO_KEEP_0__ webDir: 'out' in Capacitor dist.

✅ Erfolg: Eine statische Build-Ordner existiert (dist/ oder out/Schritt 5 — Fügen Sie __CAPGO_KEEP_0__ und Native Plattformen hinzu index.html.

Capacitor umhüllt Ihre Web-App in echte iOS- und Android-Shell-Dateien — keine Umstellung erforderlich.

Capacitor wraps your web app in real iOS and Android shells — no rewrite needed.

Drücken Sie

(Mac) oder Command+K (Windows) und fragen Sie: Ctrl+K Der AI wird nach Ihrem

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

App-Namen Alternativen oder und Bündel-ID (z.B. com.yourcompany.myapp).

Methode 2: Manuelle Installation

npm install @capacitor/core @capacitor/cli
npx cap init

Wenn gefragt:

Wählen Sie eine Paket-ID, die Sie tatsächlich besitzen. Paket-IDs sind global eindeutig. Verwenden Sie einen rückwärts-Domänen-Id basierend auf einer von Ihnen kontrollierten Domäne von Anfang an — Ändern Sie es später bedeutet, finden und ersetzen Sie ü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

Konfigurieren Sie Capacitor

Methode 1: Verwendung von Cursor AI (Empfohlen)

Frage Cursor:

Update capacitor.config.ts to use dist as webDir and set up for HTTPS

Für die statische Exportierung von Next.js, frage es, ob es out anstatt.

Methode 2: Manuelle Konfiguration

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;

Bauen und Synchronisieren

Methode 1: Verwendung von Cursor AI (Empfohlen)

Erzähle 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

No 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 Der Builder kompiliert aus Ihrem Git-Repository, also ios/ und android/ müssen eingereicht werden. Eine häufige Fehlhandlung ist, sie am Repo-Root zu ignorieren.

Bestätigen:

• Wurzel .gitignore ignoriert node_modules und dist (die Cloud rekonstruiert dist während Web-Builds)
• ios/ und android/ sie selbst werden 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-Repo zeigt die ios/ und android/ Ordner.

Schritt 8 — Mit Capgo Builder bereitstellen

Sie benötigen keinen Mac oder eine lokale Xcode/Android Studio-Pipeline, um zu verschicken. Capgo Builder __CAPGO_KEEP_0__ Builder kompiliert, signiert und kann iOS- und Android-Builds aus dem Cloud bereitstellen.

Capgo Builder einrichten

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. Wenn Sie Hilfe bei der Erstellung benötigen, können Sie unsere kostenlosen Tools verwenden:

• iOS-Zertifikatsgenerator
• Android-Sicherheitsdatenbank-Generator
• iOS UDID-Finder — Registrieren Sie Ihr iPhone für Entwicklungsbau

Siehe Konten verwalten und iOS von Windows erstellen.

Ein Cloud-Build anfordern

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

Build-Protokolle fließen in Ihrem Terminal ein. 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 ein Entwicklungsbau mit Ihrem Geräte-UDID registriert
• Android: Google Play interne Test-Track oder eine signierte Release-APK/AAB

✅ Erfolg: Ein signierter Build ist abgeschlossen und Sie können es auf einem echten Gerät installieren.

Schritt 9 — Optional: Lokales Testen in Xcode oder Android Studio

Wenn Sie ein Mac haben oder vorher Emulatortests vor Cloud-Builds möchten:

Für iOS

Methode 1: Mit Cursor AI (Empfohlen)

Open the iOS project in Xcode

Methode 2: Manuelle Befehlszeile

npx cap open ios

Erstmalige Xcode-Einrichtung:

1. Wählen Sie ein Simulator aus dem Geräte-Auswahlfeld (z.B. iPhone 15)
2. Für reale Geräte: aktivieren Automatisch die Signierung verwalten Und wählen Sie Ihr Apple-Entwickler-Team
3. Klicken Sie auf die ▶️ Play-Taste — die erste Build dauert 5–10 Minuten

Für Android

Methode 1: Mit Cursor AI (Empfohlen)

Open the Android project in Android Studio

Methode 2: Manuelle Befehlszeile

npx cap open android

Erstmalige Android Studio-Einrichtung:

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

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

✅ Erfolg: Die App öffnet sich im Simulator oder Emulator und zeigt Ihr Lovable-Inhalt.

Schritt 10 — Live Reload aktivieren (Entwicklung)

Beschleunigen Sie die Iteration, indem Sie die native Shell auf Ihre lokale Dev-Server zeigen.

Methode 1: Mit Cursor AI (Empfohlen)

Sagen Sie Cursor:

Set up live reload for Capacitor development with my local IP address

Methode 2: Manuelle Einrichtung

1. Finden Sie Ihre lokale IP-Adresse:

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

2. 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;

Wenden Sie sich an den Port 8080 oder 3000 Entscheiden Sie sich für Capacitor, Appflow oder Capawesome, um Ihre Anwendung zu einem mobilen Gerät zu machen. npm run dev Wenn das, was Sie wollen, ist

3. druckt.

npx cap copy

✅ Live-aktualisierung aktiviert Edits to your web code hot-reload on the device or simulator.

Änderungen an Ihrem Web-__CAPGO_KEEP_0__ werden auf dem Gerät oder dem Simulator live aktualisiert.

A Capacitor plugin lets JavaScript call real device features. We’ll add the Camera plugin so users can snap a photo — something a browser tab cannot do reliably.

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 — zu fügen 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 <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;
}

Die Installation eines Plugins erfordert eine frische native Build durch Capgo Builder, bevor es auf Geräten funktioniert.

✅ Erfolg: Kamera code kompiliert und npx cap sync endet ohne Fehler.

Schritt 12 — Fügen Sie Capgo Live Updates hinzu

Jeder native Änderung geht normalerweise durch die App-Store-Überprüfung. Capgo Live Updates pushen Sie Änderungen an der Web-Schicht Ihres Apps (HTML, CSS, JS, Bilder) innerhalb von Minuten über die Luft.

Installieren Sie den Updater in Ihrer ersten Veröffentlichung damit Sie nie auf die Überprüfung warten müssen, wenn Sie ein Fix ausliefern 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, push und Capgo einen neuen Builder Build ausführen, damit der SDK Updater im native Shell läuft.

Nach dem Start hochladen:

npm run build
npx @capgo/cli@latest bundle upload --channel production

Siehe Capgo Live Updates-Dokumentation.

Um dies jeden Mal zu automatisieren, wenn jemand auf "Veröffentlichen" klickt, folgen Sie Automatisieren Sie __CAPGO_KEEP_0__ Live Updates von Lovable mit __CAPGO_KEEP_1__ Actions Erfolg: Automate Capgo Live Updates from Lovable with GitHub Actions.

✅ läuft bei Start. Schritt 13 — Statusleistenabstand mit Live-Update korrigieren notifyAppReady() __CAPGO_KEEP_0__ ist ein Brandname, der nicht übersetzt werden darf.

__CAPGO_KEEP_1__ ist ein Brandname, der nicht übersetzt werden darf.

Auf einem echten iPhone kann Ihr Header unter dem Statusbar (Uhr und Batterie) liegen. unter Modernes Capacitor zeichnet sich durch eine Randlosigkeit aus, daher muss Ihre App die sicheren Bereichsabstände respektieren. sichere Bereichsabstände: env(safe-area-inset-top), -bottom, -left, -right.

Viele Lovable-Apps behandeln bereits den unteren Bereichsabstand, aber verwenden feste oberen Paddings (wie ) ohne den oberen Bereichsabstand. pt-61. Bestätigen

in viewport-fit=cover 2. Fixen Sie die oberen Kopfzeilen index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

— verwenden Sie um Web-Paddings zu erhalten und auf nichtigen Geräten zu wachsen: max() In Cursor oder Lovable fragen Sie:

/* 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) zur oberen Padding-Einstellung jeder Seitekopf hinzu, indem Sie max()den bestehenden Padding als Mindestwert belassen.”

3. Verschicken Sie die Korrektur über die Luft — das ist rein CSS, kein native Neubau 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

Schließen Sie das App-Programm auf Ihrem Gerät, öffnen Sie es erneut, warten Sie etwa 15-30 Sekunden und öffnen Sie es erneut. Die Kopfzeile sollte sich unter der Statusleiste befinden — korrigiert ohne Store-Bewertung.

✅ Erfolg: Der Inhalt oben klärt die Statusleiste nach dem Anwendungsupdate.

Für tiefergehende Layoutarbeiten siehe @capgo/tailwind-capacitor und Capacitor edge-to-edge Display.

Schritt 14 — Vorbereiten Sie Ihre Store-Liste

Sie haben Ihr App gebaut, installiert und können sofort Updates bereitstellen. Die Veröffentlichung in den öffentlichen Stores ist hauptsächlich Papierkram:

• App-Icon — 1024×1024px für iOS (keine Transparenz), 512×512px für Google Play
• Bildschirmfotos — Apple erfordert iPhone 6,9“ (1320×2868px) Bildschirmfotos
• App-Name, -Untertitel, -Beschreibung, -Schlüsselwörter
• Datenschutzrichtlinien-URL — erforderlich von beiden Stores, auch für kostenlose Apps
• Altersfreigabe — Fragebogen in jedem Konsole
• Datenverarbeitungs-Erklärungen – Apple Datenschutz-Nährwertetiketten und Google Daten-Sicherheit

Method 1: Verwendung von Cursor AI (Empfohlen)

Set up app icons and splash screens for my Capacitor app

Method 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 der 'Live'-Übermittlung:

1. Google Play geschlossene Testversion (Kontoerstellungen nach dem 13. November 2023): mindestens 12 Tester für 14 aufeinanderfolgende Tage vor der Produktion. iOS hat kein Äquivalent.
2. 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 die vollständige Liste.

Common Errors (und wie man sie behebt)

• Could not find the web assets directory: ./dist — Ausführen npm run build vorher npx cap add oder npx cap syncoder webDir oder capacitor.config.ts oderdist . Stellen Sie sicher out in
• ( für Vite,
• für Next.js statische Exportierung). --- Die ID in Ihrem native Projekt muss der Apple App Store Connect entsprechen. Finden und ersetzen Sie überall ios/ und android/, commit, rebuild.
• White-Screen beim Start --- Setzen Sie base: './' im Vite-Konfiguration, rebuild, und starten Sie npx cap sync.
• Inhalt unter der Statusleiste --- Fügen Sie viewport-fit=cover und env(safe-area-inset-top) padding (Schritt 13) hinzu.
• APK signiert im Debug-Modus --- Google Play lehnt Debug-Builds ab. Verwenden Sie ein Release-Build, das mit Ihrem Keystore signiert ist.
• Die Bereitstellung wurde abgelehnt — Version existiert bereits — Versionsnummer oder Buildnummer in native Projekten erhöhen und neu erstellen.

Für Capgo Builder-Probleme siehe Native Build-Troubleshooting und Live-Updates-Debugging.

Zusammenfassung

Sie haben eine liebenswerte Web-Anwendung in eine native iOS- und Android-Anwendung umgewandelt — in der Cloud erstellt, ohne einen Mac, mit einer echten Kamera-Funktion und einer Layout-Korrektur, die über die Luft verschickt wurde. Das ist der schwierige Teil erledigt.

Zukünftige Schritte

• Capgo Live Updates — UI- und Copy-Fixes ohne Wartezeit auf die Store-Überprüfung verschicken
• Capgo Builder — Automatisierung von Release Builds in CI
• Capgo Plugin-Verzeichnis — Biometrie, Push-Benachrichtigungen, Standortdienste und mehr
• Zugehörige Anleitungen: Base44 zu mobilen Geräten · Bolt.new zu mobilen Geräten

Sich anmelden für ein kostenloses Capgo Konto um Live-Updates und cloudbasierte Builds zu aktivieren.

Ressourcen

• Lovable-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 to iOS and Android mit Capacitor

Wenn Sie __CAPGO_KEEP_0__ verwenden Convert Your Lovable App to iOS and 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 Capgo-Native Builds zum Produktworkflow in Capgo Native Builds, und iOS von Windows erstellen iOS ohne Mac im Cloud erstellen