Capacitor CLI: Guide de configuration de 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 :

Rapid Configuration : Installez Capacitor CLI et initialisez votre projet en quelques minutes.
Intégration de plateforme : Ajoutez le support iOS et Android avec des commandes simples.
__CAPGO_KEEP_0__: Use Capgo pour soumettre un PR à Capgo.
Réparations courantes: Troubleshoot issues like sync errors or build failures.

Étapes clés pour démarrer :

Installer Node.js, npm, JDK Xcode, et Android Studio.
Démarrez npm install @capacitor/core @capacitor/cli et initialisez votre projet.
Ajoutez les plateformes iOS et Android npx cap add ios et npx cap add android.
Optional : Configurez Capgo pour le live app updates.

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 Configurez

Documentation du framework Capacitor

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)

Optionnel : Si vous souhaitez activer les mises à jour en temps réel, consultez la « Capgo Guide de configuration” below.

CLI Étapes d'installation

Avant de commencer, assurez-vous d'avoir Node.js, npm, JDK, Xcode, et Android Studio préparé. 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 configure ses composants de base.

Après avoir terminé cette étape, passez à Création d'un nouveau projet pour structurer votre application.

Création d'un nouveau projet

Pour commencer 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

Mise à jour du 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 du plateau

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 aux plateformes 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 une version ultérieure. CocoaPods 1.11 ou ultérieur, et macOS 12 ou supérieur. Pour Android, vous aurez besoin d'Android Studio Giraffe (2022.3.1+), JDK 17 ou ultérieur et Gradle 7.5 ou supérieur.

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

Ajouter iOS et Android

Suivez ces étapes après avoir mis à jour votre application web pour synchroniser vos plateformes avec les dernières modifications web.

npm run build
npx cap sync

The cap sync command gère deux tâches :

Copie les actuels web assets vers les plateformes natives
Mise à jour des configurations et plugins natives pour correspondre aux dernières modifications

IDE Setup

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

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

En Xcode :

Choisissez votre équipe de développement.
Configurez les certificats de signature.
Mettez à jour votre identifiant de paquet.

En Android Studio :

Modifiez l'ID d'application dans build.gradle.
Configurez le coffre-fort de signature.
Configurez les deux variantes de build, débogage et de production.

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

Capgo Setup Guide

Capgo Live Update Tableau de bord Interface

Capgo propose plusieurs outils pour simplifier les mises à jour d'applications :

Fonctionnalités Clés de Capgo

Capgo offers several tools to streamline app updates:

Chiffrement de bout en bout assure une livraison sécurisée des mises à jour.
Updates run en arrière-plan lors du lancement de l'application.
Outils d'analytique suivre les taux de réussite des mises à jour et l'engagement des utilisateurs.
Une option de reversion rapide permet de récupérer rapidement des mises à jour problématiques.
Utilisez le système de canal pour les déploiements étalés et les tests bêta.

Installation de Capgo

Suivez ces étapes pour vous lancer avec Capgo :

Installez le Capgo CLI:
```
npm install --save @capgo/cli
```
Initialisez Capgo dans votre projet :
```
npx capgo init
```
Construire et publier des 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 pour tous les utilisateurs.
Surveillez les analyses pour vous assurer que les mises à jour sont livrées avec succès et que les utilisateurs restent engagés.
Enable error tracking to catch and fix issues early.
Prévoyez la fonctionnalité de retrait pour résoudre 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 et Conseils courants

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

Problèmes de configuration de l'environnement

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

Problèmes de configuration

Erreur de configuration Erreur: Les modifications dans capacitor.config.json ne sont pas prises en compte. Réparation: Assurez-vous que les appId et les webDir vos valeurs correspondent à votre projet’s package.json et le dossier de sortie de construction web.
Erreurs de synchronisation de plateforme Erreur: Exécution npx cap sync résulte en conflits de versions de plugins. Corriger: Mettre à jour @capacitor/android et @capacitor/ios Rerunner le command de synchronisation.

Déploiement et Construction

Construction et déploiement de l'application Erreur: Les builds iOS ou Android échouent en raison de certificats manquants ou d'un coffre-fort. Réparation: Suivez les instructions de configuration de l'IDE. Pour iOS, ajoutez votre équipe de développement dans Xcode. Pour Android, configurez le coffre-fort dans build.gradle.
Répertoire Web Non Trouvé Erreur: npx cap sync Impossible de trouver les actifs web. Réparation: Exécutez votre commande de build web (par exemple, npm run build: ) avant de synchroniser les plateformes.

Live Update Problèmes

Capgo Échecs de mise à jour Erreur: Les mises à jour ne s'affichent pas dans l'application de production. Correction: Vérifiez à nouveau votre Capgo API clé en capacitor.config.json et assurez-vous d'être sur le bon canal.

Pour plus de détails sur la configuration spécifique à la plateforme, revenez à la section de configuration de la plateforme. Si vous travaillez avec les 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

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

Ici est comment commencer :

Utilisez les Capacitor CLI pour initialiser votre projet.
Configurez l'ID de votre application et définissez le répertoire de sortie web.
Ajoutez la prise en charge des 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 des problèmes, consultez la documentation officielle Capacitor et Capgo.

Continuez de Capacitor CLI: Guide de configuration du projet

Si vous utilisez Capacitor CLI: Guide de configuration du projet pour planifier les tableaux de bord et les opérations API, connectez-l’avec API Vue d'ensemble pour les détails d'implémentation dans API Vue d'ensemble, Introduction pour le détail d'implémentation dans Introduction, Clés API pour le détail d'implémentation dans Clés API, Appareils pour le détail d'implémentation dans Appareils, et Paquets pour le détail d'implémentation dans Paquets.