Dans le monde en évolution de la développement d'applications mobiles, la montée des Applications Web Progressives (PWAs) a ouvert la voie à de nouveaux runtimes cross-plateformes. Ces runtimes permettent aux applications web de figurer dans les magasins d'applications sans se fier uniquement au code. 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 code JavaScript unique. Cette approche réduit considérablement les coûts de développement et augmente l'efficacité de codage.
Cette 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 en JavaScript en 2021, nous sommes là pour vous fournir un tutoriel complet sur la construction de votre application et l'utilisation de plugins natifs 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)
NoteLe 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 jusqu'à votre dossier souhaité et exécutez la commande suivante dans votre terminal :
npm init @capacitor/appSuivez 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.mdUne fois la configuration initiale terminée, vous êtes prêt à passer à l'étape suivante.
‣ Restructuration du projet
Nous utiliserons Vite pour empaqueter nos fichiers JavaScript, donc réorganisons notre projet en conséquence :
- Créer un nouveau dossier
srcdans le répertoire principal. - Créer un nouveau fichier de script
index.jsdanssrc/. - Créer le fichier de configuration Vite
vite.config.jsdans le répertoire principal. - Supprimer le
capacitor-welcome.jsfichier dewww/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 quelques fichiers pour fonctionner avec le JavaScript pur :
www/index.html
- Supprimez les importations de scripts 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>-
Supprimez l'élément
<capacitor-welcome>HTML du corps. -
Mettez à jour l'importation de script de
capacitor.jsàjs/main.js. Cela sera notre fichier JavaScript compilé. -
Supprimez les
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 configuration spécifiant le destinataire de sortie de notre script bundlé. La configuration suivante prendra le fichier src/index.js et le bundlera pour la production sous 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 "bundledWebRuntime": true propriété et modifiez-la en falseCet ajustement nous permet d'utiliser Vite à la place de Capacitor.
Avec ces modifications, votre application Capacitor est prête à démarrer et vous êtes prêts à développer votre application avec du JavaScript pur.
‣ Développement de l'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 d'exécuter la commande de build de Vite pour packager vos fichiers JavaScript chaque fois que vous apportez des modifications :
vite buildCette commande générera le main.js fichier dans votre www/js répertoire, que votre index.html fichier référencera.
‣ Test et Débogage
Capacitor offre une méthode pratique pour 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 androidFor iOS (macOS uniquement):
npx cap add ios
npx cap open iosFor Web/PWA:
npx cap serveCes commandes vous permettront de lancer votre application dans Android Studio, Xcode ou votre navigateur web, où vous pouvez tester et déboguer comme nécessaire.
‣ Conclusion
Le développement d'applications cross-plateformes avec CapacitorJS en utilisant uniquement JavaScript 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.
Souvenez-vous de tester soigneusement sur toutes les plateformes et d'utiliser 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 Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide pour planifier le travail de plugin natif, connectez-le avec Capgo Plugin Directory pour le flux de travail du produit dans Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by 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âtisseurs Natifs pour le flux de travail du produit dans Capgo Bâtisseurs Natifs.
