Initialisation d'une app Capacitor : guide étape par étape

Vous voulez créer des apps mobiles avec une base de code unique ? 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 commencer :

• Installer les outils: Node.js, npm, Git et un éditeur code comme VS Code.
• Configurer Capacitor: Installez le CLI Capacitor 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 des outils live update comme Capgo pour des mises à jour fluides.

Capacitor fait le pont entre les web apps 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 NATIVE APP 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 de 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ébuter.

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 :

• projectDirectory: Le nom de votre dossier de 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 fichier capacitor.config.json .

Configuration du fichier capacitor.config.json

Le capacitor.config.json C'est ici que 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 :

Installation des 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 et le développement spécifiques aux plateformes.

Configuration des plateformes mobiles

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

Configuration iOS et Android

Commencez par ajouter le support des plateformes en utilisant les commandes suivantes :

npx cap add ios
npx cap add android

Après avoir ajouté les 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 pour les adapter aux besoins de votre application.

Paramètres spécifiques aux plateformes

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 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 cela 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

En utilisant la configuration décrite plus haut, 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 vont compiler et lancer votre application sur un simulateur ou un appareil connecté. Tester à la fois sur des appareils réels et des simulateurs est crucial pour identifier d'éventuels problèmes spécifiques à une 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 des prérequis de configuration :

Les 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 de bugs immédiats pendant vos tests.
• Suivez le taux de réussite des mises à jour avec l'analytics intégrée.
• Roll back updates quickly if issues arise.

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 ciblés avant leur déploiement progressif.

Résumé

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

Points clés

Créer une application Capacitor nécessite une attention particulière à la configuration et aux ajustements spécifiques à chaque plateforme. Configurer votre environnement de développement — incluant des outils comme Node.js et la Capacitor CLI - est un point de départ crucial. Configurer des plateformes comme iOS et Android garantit que l'app 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'app [1].

Voici un récapitulatif des phases clés :

Continuez avec Capacitor App Initialization: Step-by-Step Guide

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