Capacitor CLI : guide de configuration du projet

Vous voulez compiler des apps iOS et Android avec une seule base de code ? Capacitor CLI simplifie le processus, vous permettant de créer des apps natives avec des technologies web. Voici ce que vous allez apprendre :

Quick Setup: Installez Capacitor CLI et initialisez votre projet en quelques minutes.
Intégration des plateformes: Ajoutez le support iOS et Android avec des commandes simples.
Live Update(s) : Utilisez Capgo pour des mises à jour OTA instantanées.
Corrections courantes: Résolvez les erreurs de synchronisation ou les échecs de build.

Étapes clés pour démarrer :

Installer Node.js, npm, JDK, Xcode, et Android Studio.
Exécutez npm install @capacitor/core @capacitor/cli et initialisez votre projet.
Ajoutez les plateformes iOS et Android avec npx cap add ios et npx cap add android.
Facultatif : configurez Capgo pour les live updates mises à jour d'app.

Ce guide couvre tout ce qu’il vous faut pour configurer Capacitor CLI, configurer les plateformes et déployer votre application. C’est parti !

Présentation de Capacitor Configurer

Site de documentation du framework Capacitor

Prérequis de configuration

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

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

Optionnel : Si vous souhaitez activer les live updates, consultez le « Guide de configuration Capgo » ci-dessous.

Étapes d'installation CLI

Avant de commencer, assurez-vous d'avoir Node.js, npm, JDK, Xcode, et Android Studio configuré. 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 principaux.

Une fois cette étape terminée, passez à Créer un nouveau projet pour générer la structure de votre application.

Créer un nouveau projet

Pour démarrer votre projet avec Capacitor CLI, suivez 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

Modifiez le capacitor.config.json fichier pour 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 le squelette du projet est en place, il est temps de configurer les cibles iOS et Android.

Ajout d'iOS et d'Android

Commencez par installer les packages nécessaires spécifiques à chaque plateforme avec 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 plus récent, et macOS 12 ou supérieur. Pour Android, vous aurez besoin d'Android Studio Giraffe (2022.3.1+), du JDK 17 ou plus récent, et de Gradle 7.5 ou version ultérieure.

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

Mises à jour des plateformes

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

npm run build
npx cap sync

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

Copie les assets web mis à jour vers les plateformes natives
Met à jour les configurations et plugins natifs pour refléter les dernières modifications

IDE Setup

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

Dans Xcode :

Choisissez votre équipe de développement.
Configurer les certificats de signature.
Mettre à jour votre bundle identifier.

Dans Android Studio :

Modifier l'application ID dans build.gradle.
Configurer le keystore pour la signature.
Configurer les variantes de build debug et release.

Une fois la configuration terminée, compilez les projets avec npx cap build ios ou npx cap build android. N’oubliez pas de lancer npx cap sync à nouveau pour vous assurer que tous les assets sont à jour.

Capgo Setup Guide

Interface du dashboard Capgo Live Update

Configurez Capgo pour activer des mises à jour OTA instantanées pour votre application.

Fonctionnalités clés de Capgo

Capgo propose plusieurs outils pour simplifier les mises à jour d’app :

Chiffrement de bout en bout garantit une livraison sécurisée des mises à jour.
Updates run en arrière-plan au lancement de l'application.
Les outils d'analyse help track update success rates and user engagement.
Un rollback en un clic vous permet de récupérer rapidement après une mise à jour problématique.
Utilisez le système de canaux pour les déploiements progressifs et les tests bêta.

Installation de Capgo

Suivez ces étapes pour commencer avec Capgo :

Installer le Capgo CLI:
```
npm install --save @capgo/cli
```
Initialisez Capgo dans votre projet :
```
npx capgo init
```
Compiler et publier des mises à jour :
```
npm run build
npx capgo release
```
Ouvrez l'application pour déclencher le processus de mise à jour en arrière-plan.

Bonnes pratiques

Utilisez des canaux pour tester les mises à jour avant de les déployer à tous les utilisateurs.
Surveillez les analytics pour garantir le succès des mises à jour et l'engagement des utilisateurs.
Activez le suivi des erreurs pour détecter et corriger les problèmes en amont.
Gardez la fonctionnalité de rollback prête pour résoudre rapidement tout problème.

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

Problèmes courants et conseils

Une fois la configuration de la plateforme et de Capgo terminée, vous pourriez rencontrer des erreurs classiques. Voici comment les résoudre rapidement.

Problèmes de configuration de l'environnement

CLI introuvable Erreur : la commande npx cap échoue. Corriger: Exécuter npm install --save @capacitor/cli @capacitor/core et réessayez.
Version Node incompatible Erreur: les commandes CLI échouent à cause d’erreurs de version de Node.js. Corriger: installez Node.js version 14 ou supérieure, comme indiqué dans les prérequis d’installation.

Problèmes de configuration

Incohérence de configuration Erreur: Les modifications dans capacitor.config.json ne sont pas appliquées. Corriger: Assurez-vous que les appId et webDir valeurs correspondent à celles de votre projet package.json et au dossier de sortie du build web.
Erreurs de synchronisation des plateformes Erreur: L’exécution de npx cap sync entraîne des conflits de versions de plugins. Corriger: mettre à jour @capacitor/android et @capacitor/ios vers la même version majeure, puis relancez la commande sync.

Build et déploiement

Échecs de signature du build Erreur: les builds iOS ou Android échouent car des certificats ou un keystore sont manquants. Corriger: Suivez 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 introuvable Erreur: npx cap sync ne parvient pas à trouver les assets web. Corriger: Exécutez votre commande de build web (ex : npm run build) avant de synchroniser les plateformes.

Problèmes Live Update

Échecs de mise à jour Capgo Erreur: Les mises à jour n'apparaissent pas dans l'app de production. Corriger: Vérifiez à nouveau votre clé Capgo API dans capacitor.config.json et assurez-vous de cibler le bon canal.

Pour plus de détails sur la configuration par plateforme, consultez la section Configuration de la plateforme. Si vous utilisez les live updates, consultez le guide de configuration Capgo pour des conseils de dépannage supplémentaires.

Résumé

Vérification de la configuration

Lancez votre application web avec Capacitor CLI, configurez les plateformes iOS et Android, et ajoutez en option Capgo pour les live updates.

Voici comment démarrer :

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 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 du dépannage, consultez la documentation officielle de Capacitor et Capgo.

Continuer avec Capacitor CLI : guide de configuration du projet

Si vous utilisez Capacitor CLI : guide de configuration du projet pour planifier les opérations du dashboard et de API, connectez-l’avec Aperçu de API pour les détails d'implémentation dans « Vue d'ensemble de API », Introduction pour les détails d'implémentation dans l'introduction, Clés API pour les détails d'implémentation dans API Keys, Appareils pour les détails d'implémentation dans Devices, et Les bundles pour les détails d'implémentation dans Bundles.