Capacitor CLI: Guide de configuration du projet

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

Configuration 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 Temps Réel: Utilisez __CAPGO_KEEP_0__ pour des mises à jour en temps réel par voie aérienne. Capgo : Résolvez des problèmes comme les erreurs de synchronisation ou les échecs de construction.
Étapes Clés pour Commencer :protectedTokens

targetLanguage

Installer Node.js, npm, JDK, Xcode, et Android Studio.
Exécutez et initialisez votre projet. npm install @capacitor/core @capacitor/cli Ajoutez les plateformes iOS et Android en utilisant
et npx cap add ios Facultatif : Configurez __CAPGO_KEEP_0__ pour les mises à jour en temps réel de votre application npx cap add android.
Optional: Configurez Capgo pour les mises à jour en temps réel de votre application Optional: Configurez __CAPGO_KEEP_0__ pour les mises à jour en temps réel de votre application.

Ce 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 le __CAPGO_KEEP_0__ Framework Documentation Website

Capacitor Framework Documentation Website

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

Node.js

(version 14 ou ultérieure) et __CAPGO_KEEP_0__ 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 le guide de "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êt. 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éer un Nouveau Projet pour créer l'architecture de votre application.

Créer 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 des Plates-Formes

Maintenant que la structure de projet est créé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 ultérieur, CocoaPods __CAPGO_KEEP_0__ ou une version plus récente, 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 __CAPGO_KEEP_0__ ou une version supérieure.

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

Mises à jour de plateforme

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

npm run build
npx cap sync

Le cap sync commande gère deux tâches :

Copie les actuels actifs web vers les plateformes natives
Met à jour les configurations et les plugins natives pour correspondre aux dernières modifications

Paramètres de l'IDE

Ouvrez les projets spécifiques à la plateforme 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 variantes de build debug et release.

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

Capgo Guide de configuration

Capgo Interface de tableau de bord de mise à jour en temps réel

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 d'applications :

La cryptage de bout en bout assure la livraison sécurisée des mises à jour.
Les mises à jour s'exécutent en arrière-plan lorsque l'application est lancée.
Outils d'analytique aide à suivre les taux de réussite des mises à jour et l'engagement des utilisateurs.
Un une option de reversion rapide permet de récupérer rapidement d'updates problématiques.
Utilisez le système de canal pour des déploiements étalés et des tests bêta.

Installer Capgo

Suivez ces étapes pour vous lancer avec Capgo:

Installez le Capgo CLI:
```
npm install --save @capgo/cli
```
Initialisez Capgo dans votre projet : 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 auprès de 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.
Activez la suivi des erreurs pour attraper et corriger les problèmes dès le début.
Prévoyez la fonctionnalité de reversion pour résoudre rapidement tout problème.

Capgo is compatible with Capacitor 8, integrates smoothly with CI/CD pipelines, and complies with Apple and Google store requirements.

Problèmes courants et Conseils

Once you’ve completed the platform and Capgo setup, you might face some common errors. Here’s how to address them quickly.

Problèmes de configuration de l'environnement

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

Problèmes de configuration

Mauvaise correspondance de configuration Erreur: Les modifications ne sont pas prises en compte. capacitor.config.json Réparez : Assurez-vous que les fichierset appId correspondent à votre projet et au dossier de sortie de construction web. webDir Erreurs de synchronisation de plateforme package.json Fix
Fix Erreur: Exécution npx cap sync Résulte en conflits de versions de plugin. Réparation: 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 construction Erreur: Les constructions 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éparer: Exécutez votre commande de build web (par exemple, npm run build) avant de synchroniser les plateformes.

Issues de mise à jour en temps réel

Capgo Échecs de mise à jour Erreur: Les mises à jour ne s'affichent pas dans l'application de production. Réparer: Vérifiez votre Capgo API clé dans capacitor.config.json et assurez-vous d'atteindre 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 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 Capacitor CLI: Guide de configuration du projet

Si vous utilisez Capacitor CLI: Guide de configuration du projet pour planifier la mise en page 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 Introduction, API Clés pour les détails d'implémentation dans API Clés Appareils pour le détail d'implémentation dans Appareils, et Paquets pour le détail d'implémentation dans Paquets.