Capacitor CLI: Guide de configuration du projet

Voulez-vous créer des applications iOS et Android avec un code unique ? Capacitor CLI simplifie le processus, vous permettant de créer des applications natives à l'aide de technologies web. Voici ce que vous allez apprendre :

Mise en place rapide: Installez Capacitor CLI et initialisez votre projet en quelques minutes.
Intégration de plateforme: Ajoutez le support iOS et Android avec des commandes simples.
Mises à jour en direct: Utilisez __CAPGO_KEEP_0__ Capgo pour des mises à jour en temps réel sur les appareils.
Réparations courantes: Résolvez les problèmes tels que les erreurs de synchronisation ou les échecs de construction.

Étapes clés pour commencer :

Installer Node.js, npm, JDK, Xcode, et Android Studio.
Exécuter npm install @capacitor/core @capacitor/cli et initialiser votre projet.
Ajoutez les plateformes iOS et Android en utilisant npx cap add ios et npx cap add android.
Facultatif : Configurez Capgo pour les mises à jour en direct mises à jour de l'application.

Cette guide couvre tout ce dont vous avez besoin pour configurer Capacitor CLI, configurer les plateformes et déployer votre application. Allons-y !

Présentation Capacitor Configurer

Capacitor Documentation du Framework Site Web

Exigences de configuration

Pour commencer, assurez-vous d'avoir les outils suivants installés :

Node.js (version 14 ou plus récent) et npm
Java JDK (version 11 ou plus récent)
Xcode (version 12 ou plus récent pour les builds iOS)
Android Studio (pour les builds Android)
Capacitor CLI (version 6 ou 7)

Facultatif : Si vous souhaitez activer les mises à jour en temps réel, consultez le guide de configuration « Capgo Guide de configuration» ci-dessous.

CLI Étapes d'installation

Avant de commencer, assurez-vous d'avoir Node.js, npm, JDK, Xcode, et Android Studio préinstallé. Une fois prêt, vous pouvez installer le Capacitor CLI en exécutant :

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

Cette commande installe Capacitor et met en place ses composants de base.

Après avoir terminé cette étape, passez à Créer un Nouveau Projet pour structurer votre application.

Créer un Nouveau Projet

Pour démarrer votre projet en utilisant Capacitor CLIsuivez ces étapes :

mkdir my-app && cd my-app
npm init -y
npx cap init my-app com.company.app --web-dir dist

Mettre à Jour le Fichier de Configuration

Éditez le capacitor.config.json fichier pour y inclure les paramètres suivants :

{
  "appId": "com.company.app",
  "appName": "My App",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "server": {
    "hostname": "app.example.com",
    "androidScheme": "https"
  }
}

Une fois mis à jour, utilisez cette configuration pour configurer Capacitor pour votre projet.

Configuration de la plateforme

Maintenant que la structure de projet est terminée, il est temps de configurer les cibles iOS et Android.

Ajouter iOS et Android

Commencez par installer les packages spécifiques à la plateforme en utilisant le Capacitor CLI :

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

Pour iOS, assurez-vous d'avoir Xcode 14 ou ultérieur, CocoaPods 1.11 ou plus récent, et macOS 12 ou supérieur. Pour Android, vous aurez besoin de Android Studio Giraffe (2022.3.1+), JDK 17 ou ultérieur, et Gradle 7.5 ou supérieur.

Une fois installés, vous devrez tenir vos cibles natives à jour avec les modifications de votre application web.

Mise à jour de la plateforme

Pour synchroniser vos plateformes avec les dernières modifications de l'application web, suivez ces étapes après avoir mis à jour votre application web :

npm run build
npx cap sync

La commande gère deux tâches : cap sync Copie les actuels web assets vers les plateformes natives

Met à jour les configurations et les plugins natifs pour les adapter aux dernières modifications
Configuration de l'IDE

Ouvrez les projets spécifiques aux plateformes dans les IDE appropriés :

Dans Xcode :

npx cap open ios     # Opens Xcode
npx cap open android # Opens Android Studio

Choisissez votre équipe de développement.

Configurez les certificats de signature.
Met à jour votre identifiant de paquet.
Dans Android Studio :

Modifiez l'ID de l'application.

Copie les actuels web assets vers les plateformes natives build.gradle.
Configurez le coffre-fort pour la signature.
Configurez les deux variantes de build, debug et release.

Lorsque tout est configuré, construisez les projets à l'aide de npx cap build ios ou npx cap build androidN'oubliez pas de lancer npx cap sync encore pour vous assurer que tous les actifs sont à jour.

Capgo Guide de configuration

Capgo Interface de tableau de bord de mise à jour en direct

Configurez Capgo pour activer les mises à jour instantanées en ligne pour votre application.

Fonctionnalités clés de Capgo

Capgo propose plusieurs outils pour simplifier les mises à jour de l'application :

Chiffrement de bout en bout assure la livraison sécurisée des mises à jour.
Les mises à jour s'exécutent en arrière-plan lors du lancement de l'application.
Les outils d'analytique aident à suivre les taux de réussite des mises à jour et l'engagement des utilisateurs.
Un retour en arrière option de retrait rapide
permet de récupérer rapidement d'une mise à jour problématique. Utilisez le système de canal for les déploiements étalés et les tests de bêta.

Installer Capgo

Suivez ces étapes pour vous lancer avec Capgo:

Installer le Capgo CLI:
```
npm install --save @capgo/cli
```
Initialiser Capgo dans votre projet :
```
npx capgo init
```
Construire et publier les mises à jour :
```
npm run build
npx capgo release
```
Ouvrez l'application pour déclencher le processus d'actualisation de fond.

Meilleures Pratiques

Utilisez les canaux pour tester les mises à jour avant de les déployer à tous les utilisateurs.
Surveiller les analyses pour vous assurer que les mises à jour sont livrées avec succès et que les utilisateurs restent engagés.
Activer la suivi des erreurs pour attraper et corriger les problèmes dès le début.
Préservez la fonctionnalité de retrait pour vous permettre de répondre rapidement à tout problème.

Capgo est compatible avec Capacitor 8, s'intègre facilement avec les pipelines CI/CD et respecte les exigences des magasins Apple et Google.

Problèmes courants et conseils

Une fois que vous avez terminé la mise en place de la plateforme et de Capgo, vous pourriez rencontrer certaines erreurs courantes. Voici comment les résoudre rapidement.

Problèmes de mise en place de l'environnement

CLI Non trouvé Erreur : La commande npx cap échoue. Réparez : Exécutez npm install --save @capacitor/cli @capacitor/core et essayez à nouveau.
Version de Node Mauvaise Erreur: Les commandes CLI échouent en raison d'erreurs de version de Node.js. Réparation: Installez Node.js version 14 ou supérieure comme indiqué dans les exigences de configuration.

Problèmes de Configuration

Mauvaise Configuration Erreur: Les modifications dans ne prennent pas effet. capacitor.config.json Réparation : Assurez-vous que lesdonnées appId et webDir les valeurs correspondent à votre projet. package.json et le dossier de sortie de construction web.
Erreurs de synchronisation de plateforme Erreur: Exécution npx cap sync se traduit par des conflits de versions de plugin. Réparer: Mettre à jour @capacitor/android et @capacitor/ios à la même version majeure, puis relancer la commande de synchronisation.

Construction et déploiement

Échecs de signature de build ErreurLes builds iOS ou Android échouent en raison de certificats manquants ou d'un keystore. RéparationSuivez les instructions de configuration de l'IDE. Pour iOS, ajoutez votre équipe de développement dans Xcode. Pour Android, configurez le keystore dans build.gradle.
Répertoire Web Non Trouvé Erreur: npx cap sync On ne peut pas trouver les actifs web. RéparationExécutez votre commande de build web (par exemple, npm run buildProblèmes de mise à jour en temps réel

Exécutez votre commande de build web (par exemple, __CAPGO_KEEP_0__ ) avant de synchroniser les plateformes.

Capgo Update Failures Erreur : Les mises à jour ne sont pas affichées dans l'application de production. Correction : Vérifiez à nouveau votre Capgo API key dans capacitor.config.json et assurez-vous d'obtenir le bon canal.

Pour plus de détails sur la configuration spécifique à la plateforme, consultez la section de configuration de la plateforme. Si vous travaillez avec des mises à jour en direct, consultez le guide de configuration Capgo pour obtenir des conseils de dépannage supplémentaires.

Résumé

Révision de la configuration

Lancez votre application web avec Capacitor CLI, configurez les plateformes iOS et Android, et incluez facultativement Capgo pour les mises à jour en direct.

Voici comment commencer :

Utilisez le Capacitor CLI pour initialiser votre projet.
Configurez l'ID de package de votre application et définissez le répertoire de sortie web.
Ajoutez le support pour les plateformes iOS et Android.
Installez et configurez Capgo avec la commande suivante : npm install --save @capgo/cli && npx capgo init

Pour des instructions de configuration détaillées ou pour résoudre les problèmes, consultez la documentation officielle de Capacitor et Capgo.

Continuez avec le guide de configuration de projet : Capacitor CLI

Si vous utilisez Capacitor CLI: Guide de configuration de projet pour planifier le tableau de bord et les opérations de API, connectez-le avec API : Vue d'ensemble pour les détails d'implémentation dans API : Vue d'ensemble Introduction Pour les détails d'implémentation dans l'Introduction, API Keys Pour les détails d'implémentation dans API Keys, Devices Pour les détails d'implémentation dans les Devices, et Bundles Pour les détails d'implémentation dans les Bundles.