Convertissez votre application chérie en iOS et Android avec Capacitor

Introduction

Lovable est un éditeur d'applications AI qui transforme les prompts en applications React fonctionnelles en quelques minutes. Vous pouvez livrer dans le navigateur rapidement — mais qu'est-ce que vous faites si vous voulez que votre application soit sur l'App Store et Google Play, sur les écrans d'accueil comme toutes les autres applications natives ?

Cette guide vous guide tout au long du chemin : exportation depuis Lovable, enveloppement de l'application web avec Capacitorce guide vous guide tout au long du chemin : exportation depuis Lovable, enveloppement de l'application web avec Capgo Builder ce guide vous guide tout au long du chemin : exportation depuis Lovable, enveloppement de l'application web avec Capgo Live Updates.

ce guide vous guide tout au long du chemin : exportation depuis Lovable, enveloppement de l'application web avec Capacitor Nous utilisons le

Temps requis : environ 1–2 heures la première fois, principalement la configuration du compte et l'attente des builds cloud.

À la fin, vous obtiendrez :

• Une application native iOS et Android construite à partir du cloud — pas Xcode ou Android Studio sur la voie principale
• L'application fonctionnant sur un appareil réel (TestFlight, installation directe ou Play internal testing)
• Une fonctionnalité de caméra fonctionnelle qui ne peut être offerte que par une application native
• Mises à jour en direct configurées afin que les correctifs de l'interface utilisateur et du CSS soient expédiés sans examen de la boutique

Prérequis

Coûts (seulement pour publier publiquement) :

Facultatif (simulateur local uniquement) :

Vous pouvez passer outre les deux. La principale voie de cette guide construit dans le cloud et installe sur des appareils réels sans les émulateurs.

Une Note Rapide sur les Applications Aimables et les Frameworks

Avant de toucher code, sachez que le type d'application web générée par Lovable affecte l'enveloppe mobile.

Jusqu'à présent, la valeur par défaut de Lovable était une application web unique (SPA) React + ViteDepuis mai 2026, de nouvelles applications Lovable peuvent utiliser TanStack avec la mise en page côté serveur (MPS) par défaut. L' MPS est excellent pour le web, mais Capacitor enveloppe un une construction statique — un dossier de HTML, CSS et JavaScript avec un index.html à sa racine — qui est embarqué à l'intérieur de l'application sur le dispositif.

Une application MPS s'attend à ce qu'un serveur affiche les pages à chaque requête. Il n'y a pas de serveur à l'intérieur d'un téléphone, donc pour Capacitor vous voulez une sortie statique, client-remontée.

Que faire :

• Démarrer frais : Demander à Lovable un application unique de page (AUP) ou de passer l' MPS afin que vous obteniez une construction statique dist/ dossier.
• Déjà sur TanStack Start (SSR) : Configurez-le pour pré-renderiser ou générer un SPA statique. La seule exigence est un dossier de construction statique contenant index.html.
• Projets Lovable Legacy Next.js : Utilisez l'export statique — la sortie va à out/ au lieu de dist/.

Quel que soit le framework que vous utilisez, pointez Capacitor vers ce dossier. Pour un SPA Vite, ce dossier est webDir Étape 1 — Exportez votre application Lovable vers __CAPGO_KEEP_0__ dist.

Lovable garde votre GitHub dans son éditeur jusqu'à ce que vous connectiez __CAPGO_KEEP_1__.

Lovable keeps your code in its editor until you connect GitHub.

1. Ouvrez votre projet Lovable dans le navigateur
2. Cliquez Mettez à jour Si nécessaire, ouvrez ensuite Git dans le menu de gauche
3. Choisissez GitHubLovable crée un dépôt et pousse automatiquement votre application
4. Connexion Lovable.dev __CAPGO_KEEP_0__

✅ Réussite : Visiter github.com/YOUR-USERNAME/your-app affiche votre application code.

Étape 2 — Configurer le curseur et cloner votre projet

Avant de pouvoir travailler avec votre code localement, vous aurez besoin d'un code éditeur. Nous recommandons Cursor, un éditeur alimenté par l'intelligence artificielle qui peut exécuter des commandes de terminal pour vous.

Télécharger et Installer le Cursor

1. Visitez cursor.sh et téléchargez la version pour votre système d'exploitation
2. Installez Cursor en suivant le guide d'installation
3. Une fois installé, ouvrez Cursor

Configurez Cursor pour le développement AI

Pour une expérience optimale, configurez Cursor avant de commencer :

1. Achetez un plan Cursor — Même si Cursor propose un niveau gratuit, un plan Pro (20 $/mois) vous donne accès à des complétions AI illimitées, à Claude et GPT-4, ainsi qu'à l'exécution de commandes
2. Ouvrez les paramètres de Cursor en appuyant sur Command+, (Mac) ou Ctrl+, (Windows)

3. Activer les modèles AI — Assurez-vous que les fonctionnalités AI soient activées :

4. Choisissez votre modèle préféré — Choisissez Claude ou GPT-4 pour les meilleurs résultats :

5. Permettre l'exécution de commandes — Activez la souris pour exécuter des commandes pour vous :

Cloner votre dépôt dans la souris

1. Dans la souris, appuyez Shift+Command+P (Mac) ou Shift+Ctrl+P ouvrir la palette de commandes (Windows)
2. Taper « clone » et sélectionner Git : Cloner
3. Coller votre URL de dépôt GitHub : https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Choisissez un dossier où vous souhaitez sauvegarder le projet

5. Le curseur clonera et ouvrira votre projet

Étape 3 — Installer les dépendances et exécuter localement

Méthode 1 : Utiliser le curseur AI (recommandé)

1. Ouvrir la case à outils AI du curseur en appuyant Command+K (Mac) ou Ctrl+K (Windows)
2. Tapez la commande suivante :

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

L'IA détectera automatiquement votre OS, installe Node.js, exécute npm install, et démarre le serveur de développement avec npm run dev.

Méthode 2 : Installation manuelle

Ouvrez le terminal dans Cursor en appuyant sur Shift+Command+T (Mac) ou Shift+Ctrl+T (Windows), puis :

Pour 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

Pour Windows :

1. Téléchargez le 24 LTS à partir de nodejs.org
2. Exécutez l'installateur
3. Ouvrez un terminal et exécutez :

cd your-lovable-app
npm install
npm run dev

Les applications Lovable fonctionnent généralement sur http://localhost:8080 ou http://localhost:5173 — utilisez l'adresse que votre terminal imprime.

Appuyez sur Ctrl + C pour arrêter le serveur de développement lorsque vous êtes prêt à continuer.

✅ Réussite : Votre application s'ouvre dans le navigateur avec son interface utilisateur fonctionnelle.

Étape 4 — Préparez la mise en production de la build statique

Capacitor nécessite une build de production avant d'ajouter des plateformes natives.

React + Vite (la plupart des applications Lovable)

Méthode 1 : Utilisation de Cursor AI (Recommandée)

Appuyez Command+K ou Ctrl+K et demandez :

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

Méthode 2 : Configuration manuelle

Confirmez vite.config.ts utilise une base relative afin que les assets se chargent à l'intérieur de la vue WebView native :

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

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

Construire et vérifier :

npm run build

Vous devriez voir un dist/ dossier avec index.html à son sommet.

Projets Next.js Legacy Lovable

Si votre dépôt utilise Next.js, demandez à Cursor :

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

Ou suivez Convertir votre application Next.js en mobile pour la configuration complète, puis utilisez next.config dans __CAPGO_KEEP_0__ au lieu de webDir: 'out' in Capacitor instead of dist.

✅ Réussite : Un dossier de build statique existe (dist/ ou out/Étape 5 — Ajoutez __CAPGO_KEEP_0__ et les plateformes natives index.html.

Capacitor enveloppe votre application web dans des coquilles iOS et Android réelles — aucune reécriture n'est nécessaire.

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

Appuyez

(Mac) ou Command+K (Windows) et demandez : Ctrl+K L’AI vous demandera le nom de votre

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

application Appuyez sur et ID de la mise en boîte (par exemple com.yourcompany.myapp).

Méthode 2 : Installation manuelle

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

Lorsqu'on vous demande :

Sélectionnez un ID de package que vous possédez réellement. Les IDs de bundle sont uniques à l'échelle mondiale. Utilisez un ID à domaine inversé basé sur un domaine que vous contrôlez dès le début — changer cela plus tard signifie trouver et remplacer partout ios/ et android/ et

npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Configure Capacitor

Méthode 1 : Utilisation de Cursor AI (Recommandée)

Demander à Cursor :

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

Pour l'export statique de Next.js, demandez-lui d'utiliser out au lieu de cela.

Méthode 2 : Configuration manuelle

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;

Construire et synchroniser

Méthode 1 : Utilisation de Cursor AI (Recommandée)

Dites à Cursor :

Build the production web app and sync it with Capacitor platforms

Méthode 2 : Commandes manuelles

npm run build
npx cap sync

Votre projet ressemble maintenant à :

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 nécessaires. Capacitor 8 utilise le gestionnaire de packages Swift pour les dépendances iOS automatiquement.

✅ Réussite : ios/ et android/ les dossiers apparaissent et le terminal affiche Sync finished.

Étape 6 — Vérifiez votre .gitignore

Capgo Le constructeur compile à partir de votre dépôt Git, donc ios/ et android/ doivent être commités. Une erreur courante est d'ignorer les fichiers à la racine du dépôt.

Confirmer :

• racine .gitignore ignore node_modules et dist (la reconstruction dans le cloud dist pendant les builds web)
• ios/ et android/ seuls sont pas ignorés

✅ Succès : git status montre ios/ et android/ prêts à être commités (pas ignorés).

Étape 7 — Commitez et Poussez

git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push

✅ Réussite : Votre GitHub repo montre les ios/ et android/ dossiers.

Étape 8 — Construisez des fichiers binaires prêts à être mis en magasin avec Capgo Builder

Vous n'avez pas besoin d'un Mac ou d'une ligne de conduite locale Xcode/Android Studio pour expédier. Capgo Builder Vous n'avez pas besoin d'un Mac ou d'une ligne de conduite locale Xcode/Android Studio pour expédier.

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

__CAPGO_KEEP_0__ Builder

• __CAPGO_KEEP_0__ Builder compile, signe et peut soumettre des builds iOS et Android depuis le cloud.
• Android Générateur de Clés de Stockage
• iOS Trouveur d'ID de Dispositif — enregistrez votre iPhone pour les builds de développement

Voir Gestion des Identifiants et Construire iOS à partir de Windows.

Demander un build cloud

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

Les journaux de build s'affichent dans votre terminal. Avec App Store Connect configuré, les builds iOS peuvent être envoyés automatiquement vers TestFlight.

Installez sur un appareil réel :

• iOS : TestFlight (recommandé) ou un build de développement avec l'ID de votre appareil enregistré
• Android : Google Play internal testing track ou un APK/AAB signé

✅ Réussite : Une build signée est complétée et vous pouvez l'installer sur un appareil réel.

Étape 9 — Optionnel : Tester Localement dans Xcode ou Android Studio

Si vous avez un Mac ou que vous souhaitez tester un émulateur avant les builds cloud :

Pour iOS

Méthode 1 : Utilisation de Cursor AI (Recommandée)

Open the iOS project in Xcode

Méthode 2 : Commande Manuel

npx cap open ios

Première configuration de Xcode :

1. Sélectionnez un simulateur dans le menu déroulant des appareils (par exemple iPhone 15)
2. Pour les appareils réels : activez Gérez automatiquement la signature et sélectionnez votre équipe développeur Apple
3. Cliquez sur le bouton ▶️ Play — la première construction prend 5-10 minutes

Pour Android

Méthode 1 : Utilisation de Cursor AI (Recommandé)

Open the Android project in Android Studio

Méthode 2 : Commande manuelle

npx cap open android

Première configuration d'Android Studio :

1. Installez les packages manquants SDK si demandé
2. Créez un émulateur dans Gestionnaire de périphériques (par exemple, Pixel 6, API 33+)
3. Lancez le bouton vert ▶️ Run — la première construction prend 5–15 minutes

Utilisez les IDE locaux pour le débogage quotidien. Utilisez Capgo Constructeur lorsque vous avez besoin de fichiers de version signés.

✅ Réussite : L'application s'ouvre dans le simulateur ou l'émulateur montrant votre contenu Lovable.

Étape 10 — Activez Live Reload (Développement)

Accélérez l'itération en pointant le shell natif vers votre serveur de développement local.

Méthode 1 : Utilisation de Cursor AI (Recommandée)

Dites à Cursor :

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

Méthode 2 : Configuration manuelle

1. Trouvez votre adresse IP locale :

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

2. Mettre à jour 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;

Utiliser le port 8080 ou 3000 ou utilisez le port npm run dev Si c'est ce que vous souhaitez

3. imprime.

npx cap copy

✅ La rechargement en direct est activé Edits to your web code hot-reload on the device or simulator.

Les modifications apportées à votre web __CAPGO_KEEP_0__ se rechargent automatiquement sur le dispositif ou l'émulateur.

Étape 11 — Ajouter une fonctionnalité native : La Caméra : Un Capacitor plugin permet à JavaScript d'appeler des fonctionnalités de dispositif réelles. Nous allons ajouter le plugin Caméra afin que les utilisateurs puissent prendre une photo — quelque chose qu'une fenêtre de navigateur ne peut pas faire de manière fiable.

Méthode 1 : Utilisation de Cursor AI (Recommandée)

Dites à Cursor :

Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo

Méthode 2 : Installation manuelle

npm install @capacitor/camera
npx cap sync

iOS — ajoutez à ios/App/App/Info.plist à l'intérieur du niveau supérieur <dict>:

<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>

Android — ajoutez à l'intérieur <manifest> dans 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;
}

L'ajout d'un plugin nécessite une nouvelle construction native à travers Capgo Builder avant qu'il fonctionne sur les appareils.

✅ Réussite : La caméra code compile et npx cap sync se termine sans erreur.

Étape 12 — Ajoutez Capgo Mises à jour en temps réel

Tout changement natif passe normalement par la revue de l'application. Capgo Mises à jour en temps réel context

Page/area: Page de produit de mise à jour en temps réel. Role: Étiquette de navigation ou élément UI court. Voir dans : page live-update.astro. Préservez les termes de produit/marque et les termes de développeur exactement. Clé de message `live_update_hero_badge` (Étiquette de badge de mise à jour en temps réel). envoyez des modifications à la couche web de votre application (HTML, CSS, JS, images) par Wi-Fi en quelques minutes.

npm install @capgo/capacitor-updater
npx cap sync

Installez le correcteur dans votre première version 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;

afin que vous ne soyez jamais bloqué en attente de la revue lorsque vous devez envoyer une correction. src/main.tsx):

import { CapacitorUpdater } from '@capgo/capacitor-updater';

void CapacitorUpdater.notifyAppReady();

Commitez, envoyez et exécutez une nouvelle Capgo construction du constructeur afin que l'SDK mette à jour soit dans le shell natif.

Téléchargez les bundles web après le lancement :

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

Voir Capgo documentation des mises à jour en direct.

Pour automatiser cette téléchargement chaque fois que quelqu'un clique sur Publier suivre Automatiser les mises à jour en direct de Capgo à partir de Lovable avec GitHub Actions.

✅ Réussite : Le plugin de mise à jour est installé et notifyAppReady() exécute à l'ouverture.

Étape 13 — Corriger l'espace de la barre d'état avec une mise à jour en direct

Sur un iPhone réel, votre en-tête peut se trouver sous la barre d'état (heure et batterie). Le Capacitor moderne dessine jusqu'aux bords, votre application doit donc respecter les marges de sécurité: env(safe-area-inset-top), -bottom, -left, -right.

Beaucoup d'applications Lovable gèrent déjà l'inset inférieur mais utilisent une marge de haut fixe (comme pt-6sans l'inset de haut.

1. Confirmer viewport-fit=cover dans index.html:

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

2. Fixer les en-têtes de haut — utiliser max() pour conserver la marge web et s'étendre sur les appareils à notches :

/* Before */
padding-top: 1.5rem;

/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));

Dans Cursor ou Lovable, demandez :

“Le contenu de l'application s'exécute sous la barre de statut en haut sur les appareils mobiles. Ajoutez env(safe-area-inset-top) à la marge supérieure de chaque en-tête de page en utilisant max(), en gardant la marge existante comme minimum.”

3. Envoyez la correction par le biais de l'air — c'est du CSS pur, pas de rebuild natif nécessaire:

git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production

Forcez la fermeture de l'application sur votre appareil, rouvrez-la, attendez ~15–30 secondes, et rouvrez-l’à nouveau. L'en-tête devrait se trouver en dessous de la barre de statut — corrigé sans examen de la boutique.

✅ Réussite: Le contenu supérieur efface la barre de statut après l'application du bundle OTA.

Pour des travaux de mise en page plus approfondis, consultez @capgo/tailwind-capacitor __CAPGO_KEEP_0__ écran écran Capacitor edge-to-edge display.

Étape 14 — Préparez votre liste d'applications dans les magasins

Votre application est construite, installable et vous pouvez envoyer des mises à jour instantanées. La mise en ligne des magasins publics est principalement du papier :

• Icône de l'application — 1024 × 1024 px pour iOS (sans transparence), 512 × 512 px pour Google Play
• Écrans d'aperçu — Apple exige des écrans d'aperçu iPhone 6.9” (1320 × 2868 px)
• Nom, sous-titre, description, mots-clés de l'application
• Lien vers la politique de confidentialité — requis par les deux magasins, même pour les applications gratuites
• Classement d'âge context : Page/zone : Page de solution exemple d'applications. Rôle : Étiquette de navigation ou élément de l'interface utilisateur court. Vu dans : composant solutions/SolutionAppExample.astro. Clé de message `solution_app_examples_rating` (Classement d'applications de solution).
• Énoncés de collecte de données — Étiquettes de confidentialité Apple et Google Sécurité des données

Méthode 1 : Utilisation de Cursor AI (Recommandée)

Set up app icons and splash screens for my Capacitor app

Méthode 2 : Configuration manuelle

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

Ce qui reste avant « en direct » :

1. Testage fermé de Google Play (comptes personnels créés après le 13 novembre 2023) : au moins 12 testeurs pendant 14 jours consécutifs avant l'accès à la production. L'iOS n'a pas d'équivalent.
2. Soumettre pour examen — Apple ~3–5 jours, Google ~3–7 jours après que les exigences de testage soient remplies.

Consultez notre guide de revue d'applications pour les débutants pour la liste complète des vérifications.

Erreurs courantes (et comment les résoudre)

• Could not find the web assets directory: ./dist — Exécutez npm run build avant npx cap add contexte : fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `create_an_issue_and_discuss_before_working_on_a_new_feature`). Page/zone : site Web de marketing Capgo. Rôle : Paragraphe de marketing ou juridique long. Vu dans : page contributing.astro. Clé de message `create_an_issue_and_discuss_before_working_on_a_new_feature` (Créez un problème et discutez avant de travailler sur une nouvelle fonctionnalité). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `mention_issue_before_working`). Page/zone : site Web de marketing Capgo. Rôle : Phrase de site Web. Vu dans : page contributing.astro. Clé de message `mention_issue_before_working` (Mentionnez le problème avant de travailler). npx cap syncou webDir contexte : fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `alternatives_cta_questions`). Page/zone : page de comparaison des alternatives de mise à jour en direct de Capacitor. Rôle : Paragraphe de marketing ou juridique long. Vu dans : page alternatives.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `alternatives_cta_questions` (Questions de CTA pour les alternatives). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `appflow_cta_questions`). Page/zone : page de comparaison/migration de marketing de Appflow. Rôle : Paragraphe de marketing ou juridique long. Vu dans : page ionic-appflow.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `appflow_cta_questions` (Questions de CTA pour Appflow). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `capwesome_cta_questions`). Page/zone : page de comparaison de Capawesome. Rôle : Paragraphe de marketing ou juridique long. Vu dans : page capwesome.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `capwesome_cta_questions` (Questions de CTA pour Capwesome). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `consulting_faq_subtitle`). Page/zone : page de services de consultation. Rôle : Sujet de sous-titre ou de tagline. Vu dans : page consulting.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `consulting_faq_subtitle` (Sous-titre des questions fréquentes pour la consultation). | Page/zone : page de comparaison/migration de marketing de Appflow. Rôle : Étiquette de navigation ou élément de navigation court. Vu dans : page ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. Clé de message `appflow_plugins_or` (Appflow Plugins ou). capacitor.config.ts . Assurez-vousdist in out correspond à votre sortie de framework (
• pour Vite, pour Next.js static export).
• “Cette ID d'application … n'est pas disponible” — L’ID dans votre projet natif doit correspondre à Apple App Store Connect. Recherchez et remplacez à travers ios/ et android/, commit, rebuild.
• Écran blanc au lancement — Définissez base: './' en Vite config, rebuild, et exécutez npx cap sync.
• Contenu sous la barre de statut — Ajoutez viewport-fit=cover et env(safe-area-inset-top) padding (Étape 13).
• APK signé en mode debug — Google Play rejette les builds de débogage. Utilisez une build de production signée avec votre clé de stockage.
• La mise en production a été rejetée — la version existe déjà. — Mettre à jour la version/nombre de build dans les projets natifs et les reconstruire.

Pour les problèmes de Capgo Builder, consultez Résolution de problèmes de build natif et Mises à jour en temps réel de débogage.

Conclusion

Vous avez transformé une application web Lovable en native iOS et Android — construite dans le cloud sans Mac, avec une fonctionnalité de caméra réelle et une correction de mise en page déployée par Wi-Fi. C'est la partie difficile qui est maintenant terminée.

Étapes suivantes

• Capgo Live Updates — Envoyez les correctifs de l'interface utilisateur et du texte sans attendre la revue de la boutique.
• Capgo Constructeur — Automatisez les builds de version en CI
• Capgo Répertoire des plugins — Les biométries, les notifications push, la géolocalisation, et bien plus
• Guides connexes : Base44 vers mobile · Bolt.new vers mobile

Inscrivez-vous à un compte gratuit Capgo pour activer les mises à jour en temps réel et les builds natives dans le cloud.

Ressources

• Documentation Lovable
• Capacitor Documentation
• Capgo Builds natives
• Capgo — Mises à jour en temps réel pour les Capacitor applications
• Construire iOS à partir de Windows
• Export statique Next.js pour mobile

Continuez à partir de Convertir votre application chérie en iOS et Android avec Capacitor

Si vous utilisez Convertir votre application chérie en iOS et Android avec Capacitor pour planifier le travail de plugin natif, connectez-l’avec Capgo Répertoire de plugins pour le flux de travail du produit dans Capgo Répertoire de plugins, Capacitor Plugins par Capgo pour les détails d'implémentation dans Capacitor Plugins par Capgo, Capgo Bâtiments natifs pour le flux de workflow du produit dans Capgo Builds natifs Construire iOS à partir de Windows pour les builds iOS cloud sans Mac