In the evolving world of mobile application development, the rise of Progressive Web Applications (PWAs) has paved the way for new cross-platform runtimes. These runtimes enable web-based applications to be present in app stores without relying solely on native code. One such technology that facilitates this is CapacitorJSqui permet aux développeurs de déployer un site web simple en tant qu'application sur Android, iOS et le web en utilisant un code JavaScript unique. Cette approche réduit considérablement les coûts de développement et augmente l'efficacité de codage.
Ce guide se concentrera sur la création d'une application en utilisant uniquement JavaScript 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 natifs avec CapacitorJS.
‣ Prérequis
Avant de commencer, assurez-vous d'avoir les outils suivants installés :
- Node.js ou une version supérieure __CAPGO_KEEP_0__
- NPM (v7.6.2) Android Studio
- pour le développement d'applications Android Xcode
- pour le développement d'applications iOS (macOS uniquement) Remarque
Note: Le développement d'applications iOS est uniquement possible 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/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.mdLa configuration initiale est terminée, vous êtes prêt à poursuivre.
‣ Restructuration du projet
Nous utiliserons Vite pour empaqueter nos fichiers JavaScript, donc restructurez votre projet comme suit :
- Créer un nouveau dossier
srcCréer - un nouveau fichier de script ‣ Setting Up Your __CAPGO_KEEP_0__ Project
index.jsen créantsrc/. - 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 à ceci :
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js‣ Adaptation à JavaScript pur
Modifions certains fichiers pour qu'ils fonctionnent avec JavaScript pur :
www/index.html
- Supprimer les importations de scripts pour Éléments Ionic PWA Si vous n'êtes pas en train de lancer 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 l'élément
<capacitor-welcome>HTML du corps. -
Met à jour l'importation de script depuis
capacitor.jsversjs/main.js. Cela sera notre fichier JavaScript embarqué. -
Supprimer l'importation de
js/capacitor-welcome.jsVotreindex.htmlest maintenant prêt.
vite.config.js
Pour embarquer nos modules Node.js avec Vite, nous avons besoin d'un fichier de configuration spécifiant la destination de sortie de notre script compilé. La configuration suivante prendra le fichier src/index.js et le compile 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-l’en false. Cette mise à jour garantit que Capacitor ne compile pas les fichiers, nous permettant d'utiliser Vite à cette fin.
Après ces modifications, votre application Capacitor est configurée de base, et vous êtes prêt à commencer à développer votre application avec du JavaScript pur.
‣ Développement de 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 regrouper 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, qui sera référencé par votre index.html fichier.
‣ Tests et Débogage
Capacitor fournit un moyen 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 correspondante :
Pour Android :
npx cap add android
npx cap open androidPour iOS (macOS uniquement) :
npx cap add ios
npx cap open iosPour 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 si nécessaire.
‣ Conclusion
Créer des applications cross-plateformes avec CapacitorJS à l'aide de JavaScript pur est une façon rentable et efficace de créer des applications pour plusieurs plateformes avec un code unique. 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 Developper des Applications Cross-Plateformes avec CapacitorJS : Guide étape par étape
Si vous utilisez Developper des Applications Cross-Plateformes avec CapacitorJS : Guide étape par étape pour planifier le travail de plugin natif, connectez-l’avec Répertoire de plugins de Capgo pour le flux de travail du produit dans Répertoire de plugins de Capgo Plugins de Capacitor par Capgo pour le détail d'implémentation dans Plugins de Capacitor par Capgo Ajouter ou Mettre à jour les plugins pour le détail d'implémentation dans Ajouter ou Mettre à jour les plugins, Alternatives d'extension Ionic Enterprise pour le flux de travail du produit dans les alternatives d'extension Ionic Enterprise, et Capgo Bâtiments natifs pour le flux de travail du produit dans Capgo Bâtiments natifs.
