Initialisation de l'application Capacitor : guide étape par étape

Vous voulez compiler des apps mobiles avec une seule base de code ? Capacitor permet de créer facilement des apps iOS, Android et web avec des frameworks comme React, Angular, ou Vue. Ce guide explique comment configurer Capacitor, configurer les plateformes et déployer des mises à jour efficacement.

Étapes clés pour démarrer :

• Installer les outils: Node.js, npm, Git et un éditeur code comme vs Code.
• Configurer Capacitor: Installez le Capacitor CLI et initialisez votre projet.
• Configurer les plateformes: Ajoutez le support iOS et Android, ajustez les paramètres et synchronisez votre code.
• Tester et déployer: Compilez, lancez sur vos appareils et utilisez les outils live update comme Capgo pour des mises à jour fluides.

Capacitor fait le pont entre les applications web et les fonctionnalités natives de l'appareil, garantissant des performances fluides sur toutes les plateformes. Suivez ce guide pour simplifier votre processus de développement !

5 étapes pour une app native avec CAPACITOR | Guide de release Ionic

Outils et configuration requis

Voici comment configurer votre environnement de développement avec les outils essentiels.

Installation des outils de développement

Pour travailler avec Capacitor, vous aurez besoin des outils suivants :

Suivez ces étapes pour les installer :

• Node.js et npm : Téléchargez et installez les deux depuis le site officiel de Node.js.
• Éditeur Code : Choisissez un éditeur comme VS Code, WebStorm, ou Sublime Text et installez la dernière version stable.
• Git: Récupérez-le sur git-scm.com.
• Outils spécifiques à la plateforme: Installez les outils propres à votre plateforme, comme Xcode pour macOS ou Android Studio pour le développement Android.

Une fois installés, vous pouvez passer à la configuration de Capacitor CLI.

Configuration de Capacitor CLI

Mettez en place Capacitor CLI en suivant ces étapes :

1. Installer Capacitor CLI globalement

   Ouvrez votre terminal et lancez la commande suivante :

   npm install -g @capacitor/cli

2. Initialiser le plugin Capgo

   Si ce n'est pas encore fait, lancez :

   npx @capgo/cli init

   Cela configurera les paramètres nécessaires pour gérer les mises à jour efficacement [1]. Cela simplifie le processus de build, de test et de déploiement de votre app.

Démarrer un nouveau projet Capacitor

Une fois les outils nécessaires installés, vous êtes prêt à configurer votre premier projet Capacitor. Voici comment démarrer.

Créer votre projet

Pour créer un nouveau projet Capacitor, ouvrez votre terminal et utilisez cette commande :

npx @capacitor/cli create [projectDirectory] [appId] [appDisplayName]

Par exemple :

npx @capacitor/cli create my-cap-app com.example.app "My Capacitor App"

Voici la signification de chaque paramètre :

• répertoire du projet: Le nom du dossier de votre projet (ex : my-cap-app).
• appId: Un identifiant en domaine inversé pour votre app (ex : com.example.app).
• appDisplayName: Le nom affiché pour votre app (ex : My Capacitor App).

Après avoir exécuté cette commande, vous devrez ajuster les paramètres de votre projet dans le capacitor.config.json fichier.

Configurer capacitor.config.json

Le capacitor.config.json Le fichier est l’endroit où vous définissez les paramètres clés de votre projet. Voici un exemple de configuration de base :

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

Voici le détail des options principales :

Installer les dépendances

Pour finaliser la configuration, installez les dépendances requises et initialisez votre projet avec ces commandes :

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

Une fois ces étapes terminées, votre projet est prêt pour la configuration spécifique à la plateforme et le développement.

Configurer les plateformes mobiles

Une fois votre projet Capacitor initialisé, l'étape suivante consiste à ajouter et configurer les plateformes iOS et Android afin que votre application puisse s'exécuter nativement sur les appareils mobiles.

Configuration iOS et Android

Commencez par ajouter le support des plateformes à l'aide des commandes suivantes :

npx cap add ios
npx cap add android

Après l'ajout des plateformes, synchronisez votre code web avec :

npx cap sync

Avant d'exécuter ces commandes, assurez-vous que votre application web est compilée et que le webDir dans capacitor.config.json est correctement configuré. Une fois cela fait, personnalisez les paramètres de chaque plateforme en fonction des besoins de votre application.

Paramètres par plateforme

iOS

Ouvrez le projet iOS avec :

npx cap open ios

Ensuite, configurez les paramètres suivants :

• Identifiant du bundle: Assurez-vous qu'il correspond à votre appId.
• Équipe de développement : Assignez l’équipe appropriée pour la signature de code.
• Cible de déploiement : Définissez la version minimale d’iOS.
• Orientation de l’appareil : Ajustez selon vos besoins.
• Descriptions de confidentialité : Ajoutez les descriptions requises dans Info.plist.

Android

Ouvrez le projet Android avec :

npx cap open android

Ensuite, mettez à jour ces paramètres :

• Nom du package: Assurez-vous qu'il correspond à votre appId.
• Autorisations: Définissez les permissions nécessaires dans AndroidManifest.xml.
• Orientation de l'écran: Configurez-le dans AndroidManifest.xml.
• Cible SDK: Définissez la version appropriée dans android/app/build.gradle.

Emplacements des assets et de la configuration

Voici où vous trouverez les fichiers clés pour les icônes d’app, les splash screens, les deep links et les permissions :

Une fois ces configurations en place, vous êtes prêt à compiler et tester votre app sur des appareils mobiles.

Build et tests

Grâce à la configuration décrite précédemment, vous pouvez maintenant compiler et tester votre app Capacitor pour garantir son bon fonctionnement sur différents appareils.

Commandes de build et d'exécution

Une fois votre application configurée pour les plateformes mobiles, il est temps de lancer le build et les tests. Commencez par mettre à jour vos assets web :

npm run build
npx cap sync

Ensuite, utilisez les commandes appropriées pour votre plateforme cible :

Pour iOS :

npx cap run ios

Pour Android :

npx cap run android

Ces commandes compilent et lancent votre application sur un simulateur ou un appareil connecté. Il est crucial de tester à la fois sur des appareils réels et des simulateurs pour identifier les problèmes spécifiques à chaque plateforme.

Ajout de plugins Capacitor

Plugins Capacitor vous permettent d'ajouter des fonctionnalités natives à votre application. Par exemple, pour inclure la caméra, la géolocalisation et le stockage, exécutez :

npm install @capacitor/camera @capacitor/geolocation @capacitor/storage
npx cap sync

Après l'installation, configurez les plugins dans vos projets natifs. Voici un aperçu rapide de la configuration requise :

Live updates avec Capgo

Pour simplifier le déploiement et les tests, vous pouvez intégrer des outils live update comme Capgo. Ce service a déjà livré plus de 23,5 millions de mises à jour, avec 95 % des utilisateurs recevant leur mise à jour en moins de 24 heures et un taux de réussite global de 82 % [1].

Pour ajouter Capgo à votre application :

npm install @capgo/capacitor-updater
npx cap sync

Capgo offre plusieurs avantages lors des tests :

• Créez des canaux distincts pour les environnements de développement, de staging et de production.
• Envoyez des correctifs immédiats pendant les tests.
• Suivez le taux de réussite des mises à jour avec l'analytics intégrée.
• Revenez rapidement à la version précédente en cas de problème.

Capgo garantit également une livraison sécurisée des mises à jour grâce au chiffrement de bout en bout. Son système de canaux vous permet de tester les mises à jour auprès de groupes d'utilisateurs sélectionnés avant de les déployer auprès de tous.

Résumé

Ce guide a détaillé chaque phase de la configuration et du déploiement d'une application Capacitor, en couvrant toutes les étapes essentielles pour bien démarrer et garantir un fonctionnement fluide.

Points clés

Créer une application Capacitor exige une attention particulière à la configuration, aux réglages et aux ajustements spécifiques à chaque plateforme. La mise en place de votre environnement de développement, y compris des outils comme Node.js et le Capacitor CLI - constitue un point de départ crucial. La configuration des plateformes iOS et Android garantit que l'application fonctionne parfaitement sur les systèmes natifs.

L'utilisation d'un système de mise à jour tel que Capgo peut simplifier la gestion des releases et aider à maintenir la stabilité de l’application [1].

Voici un aperçu des principales phases :

Continuer depuis Capacitor Initialisation de l’app : guide étape par étape

Si vous utilisez Initialisation de l'application Capacitor : guide étape par étape pour planifier l'automatisation CI/CD, et le connecter avec CI/CD Capgo pour le workflow produit dans le CI/CD de Capgo, Capgo Native Build pour le workflow produit dans les Native Builds de Capgo, Intégrations Capgo pour le workflow produit dans les intégrations de Capgo, Intégration CI/CD pour le détail d'implémentation dans l'intégration CI/CD, et Intégration GitHub Actions pour les détails d'implémentation de l'intégration GitHub Actions.