Dans le monde en constante évolution du développement d'applications mobiles, l'essor des Progressive Web Applications (PWA) a ouvert la voie à de nouveaux runtimes cross-platform. Ces runtimes permettent aux applications web d'être présentes sur les stores sans dépendre uniquement du code natif. L'une des technologies qui facilite cela est CapacitorJS, qui permet aux développeurs de déployer un simple site web sous forme d'application sur Android, iOS et le web via une base de code JavaScript unique. Cette approche réduit considérablement les coûts de développement et augmente l'efficacité du code.
Ce guide se concentre sur la création d'une application en JavaScript pur, sans framework supplémentaire. Malgré la difficulté de trouver des ressources pour le développement d'apps en JavaScript pur en 2021, nous sommes là pour vous proposer un tutoriel complet sur la création de votre application et l'utilisation de plugins natifs avec CapacitorJS.
‣ Prérequis
Avant de commencer, assurez-vous d'avoir installé les outils suivants :
- Node.js (v14.16.1) ou supérieure
- NPM (v7.6.2) ou supérieure
- Android Studio pour le développement d'apps Android
- Xcode pour le développement d'apps iOS (macOS uniquement)
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 de votre choix et exécutez la commande suivante dans votre terminal :
npm init @capacitor/appSuivez les prompts 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.mdUne fois la configuration initiale terminée, vous êtes prêt à continuer.
‣ Restructuration du projet
Nous allons utiliser Vite pour bundler nos fichiers JavaScript, restructurons donc notre projet en conséquence :
- Créer un nouveau dossier
srcdans le répertoire principal. - Créer un nouveau fichier script
index.jsdanssrc/. - Créer le fichier de config Vite
vite.config.jsdans le répertoire principal. - Supprimer la
capacitor-welcome.jsle fichier dewww/js/.
Your new folder structure should resemble:
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 en JavaScript pur :
www/index.html
- Supprimez les imports de script pour Ionic PWA Elements si vous ne publiez pas l'app 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>-
Supprimer l'
<capacitor-welcome>élément HTML du body. -
Mettez à jour l'import du script depuis
capacitor.jsversjs/main.js. Ce sera notre fichier JavaScript bundlé. -
Supprimez l'import
js/capacitor-welcome.jsimport. Votreindex.htmlest maintenant prêt.
vite.config.js
Pour bundler nos modules Node.js avec Vite, nous avons besoin d'un fichier de config spécifiant la destination de sortie de notre bundle JS. La configuration suivante prendra le fichier src/index.js et le bundlera pour la production sous le nom 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')
}
}
}
});capacitor.config.json
Dans le capacitor.config.json fichier, localisez la propriété "bundledWebRuntime": true la propriété et la modifier en false. Cet ajustement garantit que Capacitor ne bundle pas les fichiers, nous permettant d'utiliser Vite à cet effet.
Avec ces changements, la configuration de base de votre application Capacitor est terminée, et vous êtes prêt à développer votre app en JavaScript pur.
‣ Développement de votre app
Maintenant que les bases sont posées, vous pouvez commencer à écrire la logique de votre application dans le src/index.js . Ici, vous pouvez importer tous les modules Node.js nécessaires, définir les fonctionnalités de votre app et interagir avec les plugins natifs de Capacitor.
N'oubliez pas d'exécuter la commande de build de Vite pour créer le bundle de vos fichiers JavaScript à chaque modification :
vite buildCette commande générera le main.js fichier dans votre www/js répertoire, que votre index.html fichier référencera.
‣ Tests et débogage
Capacitor offre 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 de la plateforme correspondante :
Pour Android :
npx cap add android
npx cap open androidPour iOS (macOS uniquement) :
npx cap add ios
npx cap open iosPour le web/PWA :
npx cap serveCes commandes vous permettront de lancer votre application dans Android Studio, Xcode ou votre navigateur web, où vous pourrez tester et déboguer selon vos besoins.
‣ Conclusion
Développer des applications multiplateformes avec CapacitorJS en JavaScript pur est un moyen rentable et efficace de créer des apps pour plusieurs plateformes à partir d'une seule base de code. En suivant ce guide, vous avez configuré votre projet, l'avez restructuré pour Vite et préparé votre app pour le développement. Avec ces bases, vous êtes bien parti pour créer une application robuste et polyvalente.
Pensez à tester minutieusement sur toutes les plateformes et à utiliser les plugins natifs de Capacitor pour enrichir les fonctionnalités de votre app. Bon code !
Continuer avec Développer des applications multiplateformes avec CapacitorJS : un guide étape par étape
Si vous utilisez Développer des applications multiplateformes avec CapacitorJS : un guide étape par étape pour planifier le travail sur les plugins natifs, connectez-l’à Capgo Répertoire des plugins pour le workflow produit dans Capgo Plugin Directory, Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou mettre à jour des plugins pour les détails d'implémentation dans Adding or Updating Plugins, Alternatives aux plugins Ionic Enterprise pour le workflow produit dans les alternatives aux plugins Ionic Enterprise, et Capgo Native Build pour le workflow produit dans Capgo Native Builds.
