Développer des applications multiplateformes avec CapacitorJS : Guide étape par étape

Dans le monde en évolution de la développement d'applications mobiles, la montée en puissance des Applications Web Progressives (PWAs) a ouvert la voie à de nouveaux runtimes multiplateformes. Ces runtimes permettent aux applications web de figurer dans les magasins d'applications sans se fier uniquement aux code. technologies natives. Une technologie qui facilite cela est CapacitorJS, qui permet aux développeurs de déployer un site web simple en tant qu'application sur Android, iOS et le web à l'aide d'un seul codebase JavaScript. Cette approche réduit considérablement les coûts de développement et augmente l'efficacité de codage.

Cet guide se concentrera sur la création d'une application à l'aide de JavaScript pur sans aucun framework supplémentaire. Malgré les défis de trouver des ressources pour le développement d'applications purement JavaScript en 2021, nous sommes là pour vous fournir un tutoriel complet sur la création de votre application et l'utilisation de plugins natives avec CapacitorJS.

‣ Prérequis

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

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 (disponible uniquement sur macOS)

Remarque: 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, accédez au dossier souhaité et exécutez la commande suivante dans votre terminal :

npm init @capacitor/app

Suivez les invites 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

Avec la mise en place initiale terminée, vous êtes prêt à poursuivre.

‣ Restructuration du projet

Nous utiliserons Vite pour empaqueter nos fichiers JavaScript, il faut donc restructurer notre projet en conséquence :

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

Votre nouvelle structure de dossier 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 à Pure JavaScript

Modifions certains fichiers pour fonctionner avec le JavaScript pur :

www/index.html

Supprimer les importations de script pour Ionic PWA Elements si vous ne déployez pas l'application sous forme de 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>

Supprimer le <capacitor-welcome> élément HTML du corps.
Mette à jour l'importation du script depuis capacitor.js vers js/main.js. Ce sera notre fichier JavaScript embarqué.
Supprimer l'import. Votre js/capacitor-welcome.js est maintenant prêt. index.html vite.config.js

Pour emballer nos modules Node.js avec

Vite , nous avons besoin d'un fichier de configuration spécifiant la destination de sortie de notre script embarqué. La configuration suivante prendra le fichieret l'emballera pour la production sous le nom de src/index.js __CAPGO_KEEP_0__.config.json www/js/main.js:

import { defineConfig } from 'vite';
import path from 'node: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')
      }
    }
  }
});

Pour emballer nos modules Node.js avec Vite, nous avons besoin d'un fichier de configuration spécifiant la destination de sortie de notre script embarqué. La configuration suivante prendra le fichier capacitor et l'emballera pour la production sous le nom de capacitor.config.json

In le capacitor.config.json le fichier, localisez la "bundledWebRuntime": true propriété et modifiez-la en false. Cette modification garantit que Capacitor ne bunde pas les fichiers, nous permettant d'utiliser Vite à cette fin.

Avec ces modifications, votre application Capacitor dispose d'une mise en place de base complète, et vous êtes prêt à commencer à développer votre application avec du JavaScript pur.

‣ Développer votre application

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

N'oubliez pas de lancer la commande de build de Vite pour bundler vos fichiers JavaScript chaque fois que vous apportez des modifications :

vite build

Cette commande générera le main.js fichier dans votre www/js répertoire, qui sera utilisé par votre application __CAPGO_KEEP_0__. index.html file se référencera.

‣ Test et Débogage

Capacitor offre une façon pratique de tester votre application sur diverses plateformes. Utilisez les commandes suivantes pour ouvrir votre application dans l'environnement de développement de la plateforme respective :

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 de lancer votre application dans Android Studio, Xcode ou votre navigateur web, où vous pourrez tester et déboguer si nécessaire.

‣ Conclusion

Le développement d'applications cross-plateformes avec CapacitorJS en utilisant du JavaScript pur est une façon rentable et efficace de créer des applications pour plusieurs plateformes avec un seul codebase. En suivant ce guide, vous avez configuré votre projet, le réorganisé pour Vite et préparé votre application au développement. Avec cette base, vous êtes bien en route pour créer une application robuste et polyvalente.

N'oubliez pas de tester soigneusement sur toutes les plateformes et utilisez les plugins natifs de Capacitor pour améliorer la fonctionnalité de votre application. Bon codage !

Continuez de Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide

Si vous utilisez Développer des Applications Multiplateformes avec CapacitorJS : Guide Étape par Étape pour planifier le travail de plugin natif, connectez-le à Capgo Répertoire de Plugin pour le flux de travail du produit dans Capgo Répertoire de Plugin, Capacitor Plugins par Capgo pour le détail d'implémentation dans Capacitor Plugins par Capgo, Ajouter ou Mettre à Jour les Plugins pour le détail d'implémentation dans Ajouter ou Mettre à Jour les Plugins, Alternatives de Plugins Entreprise Ionic pour le flux de travail du produit dans Alternatives de Plugins Entreprise Ionic, et Capgo Bâtiments Natives pour le flux de travail du produit dans Capgo Bâtiments Natives.

Créer des applications multiplateformes avec CapacitorJS : Guide étape par étape