Développer des applications multiplateformes avec CapacitorJS : Un guide étape par étape

Dans le monde en constante évolution du développement d’applications mobiles, l’essor des Applications Web Progressives (PWA) a ouvert la voie à de nouveaux environnements d’exécution multiplateformes. Ces environnements permettent aux applications web d’être présentes dans les stores d’applications sans dépendre uniquement du code natif. CapacitorJS est l’une de ces technologies qui permet aux développeurs de déployer un simple site web comme une application sur Android, iOS et le web en utilisant une base de code JavaScript unique. Cette approche réduit considérablement les coûts de développement et augmente l’efficacité du codage.

Ce guide se concentrera sur la création d’une application utilisant JavaScript pur sans frameworks supplémentaires. Malgré la difficulté à trouver des ressources pour le développement d’applications en JavaScript pur en 2021, nous allons vous fournir un tutoriel complet sur la création de votre application et l’utilisation des plugins natifs avec CapacitorJS.

‣ Prérequis

Avant de commencer, assurez-vous d’avoir installé les outils suivants :

Node.js (v14.16.1) ou supérieur
NPM (v7.6.2) ou supérieur
Android Studio pour le développement d’applications Android
Xcode pour le développement d’applications iOS (macOS uniquement)

Note : Le développement d’applications iOS n’est possible que sur un appareil macOS.

‣ Configuration de Votre Projet Capacitor

Pour créer une application Capacitor, naviguez vers le dossier souhaité et exécutez la commande suivante dans votre terminal :

npm init @capacitor/app

Suivez les instructions pour installer le package et configurer votre projet. Avec Capacitor v3, votre répertoire de projet devrait ressembler à ceci :

www/
  css/
    style.css
  js/
    capacitor-welcome.js
  index.html
  manifest.json
.gitignore
capacitor.config.json
package.json
README.md

Une fois la configuration initiale terminée, vous êtes prêt à continuer.

‣ Restructuration du Projet

Nous utiliserons Vite pour regrouper nos fichiers JavaScript, alors restructurons notre projet en conséquence :

Créez un nouveau dossier src dans le répertoire principal.
Créez un nouveau fichier script index.js dans src/.
Créez le fichier de configuration Vite vite.config.js dans le répertoire principal.
Supprimez le fichier capacitor-welcome.js de www/js/.

Votre nouvelle structure de dossiers devrait ressembler à :

src/
  index.js
www/
  css/
    style.css
  js/
  index.html
  manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js

‣ Adaptation au JavaScript Pur

Modifions quelques fichiers pour travailler avec JavaScript pur :

www/index.html

Supprimez les importations de script pour Ionic PWA Elements si vous ne publiez pas l’application en tant que PWA :

<script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"></script>

Supprimez l’élément HTML <script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"> du corps.
Mettez à jour l’importation du script de capacitor.js vers js/main.js. Ce sera notre fichier JavaScript regroupé.
Supprimez l’importation de js/capacitor-welcome.js. Votre index.html est maintenant prêt.

vite.config.js

Pour regrouper nos modules Node.js avec Vite, nous avons besoin d’un fichier de configuration spécifiant la destination de sortie pour notre script regroupé. La configuration suivante prendra le fichier src/index.js et le regroupera pour la production en tant que www/js/main.js :

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  build: {
    outDir: path.resolve(__dirname, 'www'),
    rollupOptions: {
      input: './src/index.js',
      output: {
        format: 'es',
        file: path.resolve(__dirname, 'www/js/main.js')
      }
    }
  }
});

capacitor.config.json

Dans le fichier capacitor.config.json, localisez la propriété "bundledWebRuntime": true et changez-la en false. Cet ajustement garantit que Capacitor ne regroupe pas les fichiers, nous permettant d’utiliser Vite à la place.

Avec ces modifications, la configuration de base de votre application Capacitor est terminée, et vous êtes prêt à commencer le développement de votre application avec JavaScript pur.

‣ Développement de Votre Application

Maintenant que les bases sont posées, vous pouvez commencer à écrire la logique de votre application dans le fichier src/index.js. Ici, vous pouvez importer les modules Node.js nécessaires, définir les fonctionnalités de votre application et interagir avec les plugins natifs de Capacitor.

N’oubliez pas d’exécuter la commande de construction de Vite pour regrouper vos fichiers JavaScript chaque fois que vous apportez des modifications :

vite build

Cette commande générera le fichier main.js dans votre répertoire www/js, que votre fichier index.html référencera.

‣ Test et Débogage

Capacitor fournit un moyen pratique de tester votre application sur différentes plateformes. Utilisez les commandes suivantes pour ouvrir votre application dans l’environnement de développement respectif :

Pour Android :

npx cap add android
npx cap open android

Pour iOS (macOS uniquement) :

npx cap add ios
npx cap open ios

Pour Web/PWA :

npx cap serve

Ces commandes vous permettront d’exécuter votre application dans Android Studio, Xcode ou votre navigateur web, où vous pourrez tester et déboguer selon vos besoins.

‣ Conclusion

Le développement d’applications multiplateformes avec CapacitorJS en utilisant JavaScript pur est un moyen rentable et efficace de créer des applications pour plusieurs plateformes avec une seule base de code. En suivant ce guide, vous avez configuré votre projet, l’avez restructuré pour Vite et préparé votre application pour le développement. Avec cette base, vous êtes bien parti pour construire une application robuste et polyvalente.

N’oubliez pas de tester minutieusement sur toutes les plateformes et d’utiliser les plugins natifs de Capacitor pour améliorer les fonctionnalités de votre application. Bon codage !