Installer Capacitor CLI : guide étape par étape

Capacitor CLI vous aide à transformer vos web apps en applications iOS et Android natives avec une seule base de code. Voici comment le configurer rapidement :

• Prerequisites: Installer Node.js (v16+), npm, et un framework web (React, Vue, Angular, etc.).
• Installer Capacitor CLI: Exécuter npm install @capacitor/cli @capacitor/core et initialiser votre projet avec npx cap init.
• Préparer les plateformes: Ajouter le support pour iOS (npx cap add ios) et Android (npx cap add android) platforms.
• Build et Sync: Utilisez npm run build et npx cap sync pour transférer les assets web vers les projets natifs.
• Live Updates optionnels: Utilisez des outils comme Capgo pour envoyer des mises à jour instantanément sans les délais des stores.

Capacitor CLI simplifie le développement et la maintenance de vos apps. Suivez ce guide pour une configuration et un dépannage réussis.

Créez une app mobile rapidement ! React + Capacitor + Tailwind + DaisyUI

Avant de commencer

Préparez votre environnement en suivant ces étapes :

Configuration Node.js et npm

Vous aurez besoin de Node.js version 16 ou supérieure. La dernière version LTS est recommandée. Pour vérifier votre installation, lancez :

node --version
npm --version

Si vous devez faire une mise à jour, téléchargez Node.js (qui inclut npm) sur le site officiel.

Une fois que Node.js est prêt, assurez-vous que votre projet web respecte les exigences Capacitor nécessaires.

Vérifiez votre projet web

Votre projet web doit contenir les éléments suivants :

• Un package.json valide: Assurez-vous qu'il est correctement configuré.
• Un répertoire de build: C'est ici que se trouvent vos assets web (généralement dist ou www).
• Un point d'entrée: Votre répertoire de build doit inclure un index.html fichier.

Voici un aperçu des package.json champs clés :

Une fois votre projet Node.js et web prêt, passez à l'installation des outils spécifiques à la plateforme.

Installer les logiciels requis

Pour le développement Android :

• Téléchargez et installez la dernière version de Android Studio.
• Configurez le SDK Android avec au moins le niveau API 22.
• Configurez la ANDROID_HOME variable d'environnement.

Pour le développement iOS (Mac uniquement) :

• Installer Xcode 14 ou une version plus récente.

• Installez les Command Line Tools.

• Utilisez Homebrew pour installer CocoaPods:

  brew install cocoapods

• Acceptez la licence Xcode :

  sudo xcodebuild -license accept

Lors de l'intégration de Capgo plus tard, assurez-vous d'avoir une connexion internet stable et des certificats SSL valides.

Une fois ces étapes terminées, vous êtes prêt pour un processus de développement Capacitor fluide. Ensuite, vous installerez le Capacitor CLI.

Installer Capacitor CLI

Votre environnement étant prêt, il est temps d'installer et de configurer Capacitor CLI.

Ajouter des packages Capacitor

Commencez par installer les packages Capacitor CLI et Core en utilisant npm :

npm install @capacitor/cli @capacitor/core

Once installed, confirm the setup by checking the version Capacitor CLI:

npx cap --version

Configurez votre projet

Initialisez Capacitor dans votre projet avec la commande suivante :

npx cap init

Pendant l'initialisation, vous devrez fournir les détails suivants :

Ensuite, mettez à jour votre fichier de configuration (capacitor.config.ts ou capacitor.config.json) avec les paramètres suivants :

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.mycompany.myapp',
  appName: 'My Awesome App',
  webDir: 'dist',
  bundledWebRuntime: false
};

export default config;

Configurer iOS et Android

Ajoutez le support des plateformes iOS et Android avec ces commandes :

npx cap add ios
npx cap add android

Cela va générer les projets natifs :

• iOS : crée un dossier ios contenant le projet Xcode.
• Android : crée un dossier android : crée un dossier pour le projet Android Studio.

Après avoir modifié vos assets web, exécutez les commandes suivantes pour compiler et synchroniser :

npm run build
npx cap sync

Ce processus compile vos assets web et les transfère vers les projets natifs, y compris tout élément installé Plugins Capacitor.

Pour ouvrir les projets natifs et les personnaliser davantage :

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

Vous êtes maintenant prêt à tester votre configuration et à résoudre les éventuels problèmes.

Résoudre les problèmes courants

Lors de la configuration de Capacitor CLI, vous pourriez rencontrer quelques imprévus. Voici comment les gérer :

Problèmes Gradle sur Android

Si vous rencontrez des problèmes liés à Gradle, essayez ces étapes :

1. Accédez au répertoire Android et videz le cache de build :

   cd android
   ./gradlew cleanBuildCache

2. Mettez à jour la version de Gradle dans android/build.gradle:

   buildscript {
       ext {
           gradleVersion = '8.1.0'
       }
   }

3. Ajoutez les lignes suivantes à android/gradle.properties pour de meilleures performances :

   org.gradle.jvmargs=-Xmx4608m
   org.gradle.parallel=true

Si les problèmes persistent, revoyez votre configuration ou consultez les ressources de dépannage.

L'application affiche un écran blanc

Un écran blanc indique généralement un problème de configuration. Voici comment le résoudre :

• Vérifiez le chemin du répertoire web: Assurez-vous que le webDir correspond à votre dossier de build.

  const config: CapacitorConfig = {
      webDir: 'dist', // Adjust if necessary
  };

• Vérifiez la configuration du serveur: Confirmez que les paramètres du serveur sont corrects.

  server: {
      url: 'http://localhost:3000',
      cleartext: true
  }

• Mettez à jour la Content Security Policy: Ajoutez cette balise meta à votre HTML pour charger correctement les ressources.

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: *">

Le plugin ne fonctionne pas

Si un plugin ne se comporte pas comme prévu, suivez ces étapes :

1. Effectuez une installation propre des dépendances :

   rm -rf node_modules
   npm cache clean --force
   npm install

2. Vérifiez les paramètres du plugin dans capacitor.config.ts pour vous assurer qu'ils sont correctement configurés :

   plugins: {
       PluginName: {
           option: 'value'
       }
   }

Pour ceux qui utilisent le plugin natif de Capgo, il synchronise automatiquement les plugins et maintient la compatibilité lors des mises à jour.

Après avoir appliqué ces correctifs, reconstruisez votre projet pour vérifier les changements :

npm run build && npx cap copy && npx cap sync

Une fois que tout fonctionne correctement, vous pouvez explorer les options live update avec Capgo.

Les Live Updates avec Capgo

Simplifiez app updates avec Capgo. Cela vous permet d'envoyer des mises à jour directement aux utilisateurs, sans passer par la revue des stores.

Démarrer est très simple. Tout d'abord, installez les packages nécessaires :

npm install @capgo/cli @capgo/capacitor-updater
npx cap sync

Ensuite, initialisez Capgo dans votre projet :

npx @capgo/cli init

Tarifs des plans

Capgo propose plusieurs plans pour répondre à différents besoins :

Pour les entreprises, le plan PAYG commence à 249 $/mois et inclut des avantages comme l'accès à API, des domaines personnalisés et un support dédié.

Configuration pour les Live Updates

Pour activer les live updates, ajoutez ceci à votre capacitor.config.ts fichier :

{
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
      updateUrl: 'https://api.capgo.app/updates'
    }
  }
}

Fonctionnalités clés

Capgo propose plusieurs fonctionnalités phares :

• Mises à jour sécurisées avec chiffrement de bout en bout
• Déploiements automatisés via une CI/CD intégrée
• Mises à jour ciblées via l'assignation utilisateur
• Rollback instantané avec le contrôle de version
• Analyses en temps réel pour suivre les mises à jour

Commandes de déploiement

Testez vos mises à jour en développement avant de les déployer en live. Utilisez les commandes suivantes :

• Déployer sur staging :

  npx @capgo/cli deploy --channel staging

• Déployer en production :

  npx @capgo/cli deploy --channel production

Capgo garantit la conformité avec les directives Apple et Android, afin que vos live updates ne risquent pas de violer les règles des stores. C'est un moyen efficace de gérer les applications Capacitor après l'installation.

Conclusion

Configurer Capacitor CLI est simple lorsque vous disposez des prérequis nécessaires. Cette configuration garantit des mises à jour d'app plus fluides et des workflows de développement efficaces.

Les outils modernes facilitent la maintenance des apps plus que jamais. Par exemple, Capgo propose désormais les live updates, remplaçant les anciennes méthodes. Son intégration avec l'installation CLI en fait une excellente option pour les développeurs travaillant sur des apps Capacitor.

Le L'écosystème Capacitor s'améliore constamment avec de nouveaux outils et fonctionnalités. L'installation de CLI n'est que le point de départ pour créer des apps mobiles, et vous bénéficierez d'une documentation détaillée et d'une communauté de développeurs active.

Assurez-vous de maintenir Capacitor CLI et ses packages à jour pour éviter tout problème de compatibilité.

Continuer avec l'installation de Capacitor CLI : guide étape par étape

Si vous utilisez Installer Capacitor CLI : guide étape par étape pour planifier les opérations du dashboard et de API, connectez-l’à Aperçu de API pour les détails d'implémentation dans l'aperçu de API, Introduction pour les détails d'implémentation dans l'Introduction, Clés API pour les détails d'implémentation dans les clés API, Appareils pour les détails d'implémentation dans Devices, et Bundles pour les détails d'implémentation dans Bundles.