Créer des applications mobiles avec Capacitor et Vue.js

Récemment, l'équipe Ionic a annoncé un successeur spirituel open source pour Apache Cordova et Adobe PhoneGap, appelé Capacitor. Capacitor vous permet de créer une application avec des technologies Web modernes et de l'exécuter partout, des navigateurs Web aux appareils mobiles natifs (Android et iOS) et même aux plates-formes de bureau via Electron - la plate-forme GitHub populaire pour créer des applications de bureau multiplateformes avec Node.js et les technologies Web frontales.

Ionic - le framework mobile hybride le plus populaire - fonctionne actuellement sur Cordova, mais dans les futures versions, Capacitor sera l'option par défaut pour les applications Ionic. Capacitor fournit également une couche de compatibilité qui permet l'utilisation des plugins Cordova existants dans les projets Capacitor.

En plus d'utiliser Capacitor dans les applications Ionic, vous pouvez également l'utiliser sans Ionic avec votre framework frontal ou bibliothèque d'interface utilisateur préféré, tel que Vue, React, Angular with Material, Bootstrap, etc.

Dans ce didacticiel, nous verrons comment utiliser Capacitor et Vue pour créer une application mobile simple pour Android. En fait, comme mentionné, votre application peut également fonctionner comme une application Web progressive (PWA) ou comme une application de bureau dans les principaux systèmes d'exploitation avec seulement quelques commandes.

Nous utiliserons également certains composants de l'interface utilisateur Ionic 4 pour styliser notre application mobile de démonstration.

Caractéristiques du condensateur

Le condensateur possède de nombreuses fonctionnalités qui en font une bonne alternative à d'autres solutions telles que Cordova. Voyons quelques-unes des fonctionnalités de Capacitor :

• Open source et gratuit
  Capacitor est un projet open-source, sous licence permissive MIT et maintenu par Ionic et la communauté.
• Multiplateforme
  Vous pouvez utiliser Capacitor pour créer des applications avec une seule base de code et cibler plusieurs plates-formes. Vous pouvez exécuter quelques commandes supplémentaires de l'interface de ligne de commande (CLI) pour prendre en charge une autre plate-forme.
• Accès natif aux SDK de la plateforme
  Le condensateur ne vous gêne pas lorsque vous avez besoin d'accéder aux SDK natifs.
• Technologies Web et de navigation standard
  Une application construite avec Capacitor utilise des API Web standard, de sorte que votre application sera également inter-navigateur et fonctionnera bien dans tous les navigateurs modernes qui suivent les normes.
• Extensible
  Vous pouvez accéder aux fonctionnalités natives des plates-formes sous-jacentes en ajoutant des plugins ou, si vous ne trouvez pas de plugin qui correspond à vos besoins, en créant un plugin personnalisé via une simple API.

Conditions

Pour suivre ce didacticiel, vous aurez besoin d'une machine de développement répondant aux exigences suivantes :

• Vous aurez besoin de Node v8.6+ et npm v5.6+ installés sur votre machine. Rendez-vous simplement sur le site officiel et téléchargez la version de votre système d'exploitation.
• Pour créer une application iOS, vous aurez besoin d'un Mac avec Xcode.
• Pour créer une application Android, vous devez installer le JDK Java 8 et Android Studio avec le SDK Android.

Création d'un projet Vue

Dans cette section, nous allons installer la CLI Vue et générer un nouveau projet Vue. Ensuite, nous ajouterons la navigation à notre application en utilisant le routeur Vue. Enfin, nous allons créer une interface utilisateur simple à l'aide de composants Ionic 4.

Installation de la vue CLI v3

Commençons par installer Vue CLI v3 à partir de npm en exécutant ce qui suit à partir de la ligne de commande :

 $ npm install -g @vue/cli

Vous devrez peut-être ajouter sudo pour installer le package globalement, en fonction de votre configuration npm.

Génération d'un nouveau projet Vue

Après avoir installé la CLI Vue, utilisons-la pour générer un nouveau projet Vue en exécutant ce qui suit à partir de la CLI :

 $ vue create vuecapacitordemo

Vous pouvez démarrer un serveur de développement en naviguant dans le dossier racine du projet et en exécutant la commande suivante :

 $ cd vuecapacitordemo $ npm run serve

Votre application frontale s'exécutera à partir de https://localhost:8080/ .

Si vous visitez https://localhost:8080/ dans votre navigateur Web, vous devriez voir la page suivante :

Ajout d'ionique 4

Pour pouvoir utiliser les composants Ionic 4 dans votre application, vous devez utiliser le package Ionic 4 de base de npm.

Alors, allez-y et ouvrez le fichier index.html , qui se trouve dans le dossier public de votre projet Vue, et ajoutez le <script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'></script> balise dans l'en-tête du fichier.

Voici le contenu de public/index.html :

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>vuecapacitordemo</title> </head> <body> <noscript> <strong>We're sorry but vuecapacitordemo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div></div> <!-- built files will be auto injected --> <script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'></script> </body> </html>

Vous pouvez obtenir la version actuelle du package de base Ionic auprès de npm.

Maintenant, ouvrez src/App.vue et ajoutez le contenu suivant dans la balise de template après avoir supprimé ce qu'il contient :

 <template> <ion-app> <router-view></router-view> </ion-app> </template>

ion-app est un composant ionique. Il doit s'agir du composant de niveau supérieur qui encapsule les autres composants.

router-view est la prise du routeur Vue. Un composant correspondant à un chemin sera rendu ici par le routeur Vue.

Après avoir ajouté des composants Ionic à votre application Vue, vous allez commencer à recevoir des avertissements dans la console du navigateur similaires aux suivants :

 [Vue warn]: Unknown custom element: <ion-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <HelloWorld> at src/components/HelloWorld.vue <App> at src/App.vue <Root>

En effet, les composants Ionic 4 sont en fait des composants Web. Vous devrez donc indiquer à Vue que les composants commençant par le préfixe ion ne sont pas des composants Vue. Vous pouvez le faire dans le fichier src/main.js en ajoutant la ligne suivante :

 Vue.config.ignoredElements = [/^ion-/]

Ces avertissements devraient maintenant être éliminés.

Ajout de composants Vue

Ajoutons deux composants. Tout d'abord, supprimez tous les fichiers du dossier src/components (supprimez également toute importation pour le composant HelloWorld.vue dans App.vue ), puis ajoutez les fichiers Home.vue et About.vue .

Ouvrez src/components/Home.vue et ajoutez le modèle suivant :

 <template> <ion-app> <ion-header> <ion-toolbar color="primary"> <ion-title> Vue Capacitor </ion-title> </ion-toolbar> </ion-header> <ion-content padding> The world is your oyster. <p>If you get lost, the <a href="https://ionicframework.com/docs">docs</a> will be your guide.</p> </ion-content> </ion-app> </template>

Ensuite, dans le même fichier, ajoutez le code suivant :

 <script> export default { name: 'Home' } </script>

Maintenant, ouvrez src/components/About.vue et ajoutez le modèle suivant :

 <template> <ion-app> <ion-header> <ion-toolbar color="primary"> <ion-title> Vue Capacitor | About </ion-title> </ion-toolbar> </ion-header> <ion-content padding> This is the About page. </ion-content> </ion-app> </template>

De plus, dans le même fichier, ajoutez le code suivant :

 <script> export default { name: 'About' } </script>

Ajout de la navigation avec Vue Router

Commencez par installer le routeur Vue, s'il n'est pas déjà installé, en exécutant la commande suivante depuis le dossier racine de votre projet :

 npm install --save vue-router

Ensuite, dans src/main.js , ajoutez les importations suivantes :

 import Router from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue'

Cela importe le routeur Vue et les composants "Accueil" et "À propos".

Ajoute ça:

 Vue.use(Router)

Créez une instance de Router avec un tableau de routes :

 const router = new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] })

Enfin, parlez à Vue de l'instance du Router :

 new Vue({router, render: h => h(App) }).$mount('#app')

Maintenant que nous avons configuré le routage, ajoutons quelques boutons et méthodes pour naviguer entre nos deux composants "Accueil" et "À propos".

Ouvrez src/components/Home.vue et ajoutez la méthode goToAbout() suivante :

 ... export default { name: 'Home', methods: { goToAbout () { this.$router.push('about') },

Dans le bloc template , ajoutez un bouton pour déclencher la méthode goToAbout() :

 <ion-button @click="goToAbout" full>Go to About</ion-button>

Maintenant, nous devons ajouter un bouton pour revenir à l'accueil lorsque nous sommes dans le composant "À propos".

Ouvrez src/components/About.vue et ajoutez la méthode goBackHome() :

 <script> export default { name: 'About', methods: { goBackHome () { this.$router.push('/') } } } </script>

Et, dans le bloc template , ajoutez un bouton pour déclencher la méthode goBackHome() :

 <ion-button @click="goBackHome()" full>Go Back!</ion-button>

Lors de l'exécution de l'application sur un véritable appareil mobile ou un émulateur, vous remarquerez un problème de mise à l'échelle. Pour résoudre ce problème, nous devons simplement ajouter des balises meta qui définissent correctement la fenêtre d'affichage.

Dans public/index.html , ajoutez le code suivant à l'en- head de la page :

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no">

Ajout de condensateur

Vous pouvez utiliser Capacitor de deux manières :

• Créez un nouveau projet de condensateur à partir de zéro.
• Ajouter un condensateur à un projet frontal existant.

Dans ce didacticiel, nous adopterons la deuxième approche, car nous avons d'abord créé un projet Vue, et nous allons maintenant ajouter Capacitor à notre projet Vue.

Condensateur d'intégration avec Vue

Capacitor est conçu pour être inséré dans n'importe quelle application JavaScript moderne. Pour ajouter Capacitor à votre application Web Vue, vous devrez suivre quelques étapes.

Tout d'abord, installez la CLI Capacitor et les packages principaux à partir de npm. Assurez-vous d'être dans votre projet Vue et exécutez la commande suivante :

 $ cd vuecapacitordemo $ npm install --save @capacitor/core @capacitor/cli

Ensuite, initialisez Capacitor avec les informations de votre application en exécutant la commande suivante :

 $ npx cap init

Nous utilisons npx pour exécuter les commandes Capacitor. npx est un utilitaire fourni avec npm v5.2.0 et conçu pour faciliter l'exécution des utilitaires CLI et des exécutables hébergés dans le registre npm. Par exemple, il permet aux développeurs d'utiliser des exécutables installés localement sans avoir à utiliser les scripts d'exécution npm.

La commande init de Capacitor CLI ajoutera également les plates-formes natives par défaut pour Capacitor, telles qu'Android et iOS.

Vous serez également invité à entrer des informations sur votre application, telles que le nom, l'ID de l'application (qui sera principalement utilisé comme nom de package pour l'application Android) et le répertoire de votre application.

Après avoir entré les détails requis, Capacitor sera ajouté à votre projet Vue.

Vous pouvez également fournir les détails de l'application dans la ligne de commande :

 $ npx cap init vuecapacitordemo com.example.vuecapacitordemo

Le nom de l'application est vuecapacitordemo et son ID est com.example.vuecapacitordemo . Le nom du package doit être un nom de package Java valide.

Vous devriez voir un message indiquant "Votre projet de condensateur est prêt à démarrer !"

Vous remarquerez peut-être également qu'un fichier nommé capacitor.config.json a été ajouté au dossier racine de votre projet Vue.

Tout comme le suggère la CLI lorsque nous avons initialisé Capacitor dans notre projet Vue, nous pouvons désormais ajouter des plates-formes natives que nous souhaitons cibler. Cela transformera notre application Web en une application native pour chaque plate-forme que nous ajoutons.

Mais juste avant d'ajouter une plate-forme, nous devons indiquer à Capacitor où rechercher les fichiers construits, c'est-à-dire le dossier dist de notre projet Vue. Ce dossier sera créé lorsque vous exécuterez la commande build de l'application Vue pour la première fois ( npm run build ), et il se trouve dans le dossier racine de notre projet Vue.

Nous pouvons le faire en modifiant webDir dans capacitor.config.json , qui est le fichier de configuration de Capacitor. Donc, remplacez simplement www par dist . Voici le contenu de capacitor.config.json :

 { "appId": "com.example.vuecapacitordemo", "appName": "vuecapacitordemo", "bundledWebRuntime": false, "webDir": "dist" }

Maintenant, créons le dossier dist et construisons notre projet Vue en exécutant la commande suivante :

 $ npm run build

Après cela, nous pouvons ajouter la plate-forme Android en utilisant ce qui suit :

 npx cap add android

Si vous regardez dans votre projet, vous constaterez qu'un projet natif android a été ajouté.

C'est tout ce dont nous avons besoin pour intégrer Capacitor et cibler Android. Si vous souhaitez cibler iOS ou Electron, exécutez simplement npx cap add ios ou npx cap add electron , respectivement.

Utiliser des plugins de condensateur

Capacitor fournit un runtime qui permet aux développeurs d'utiliser les trois piliers du Web - HTML, CSS et JavaScript - pour créer des applications qui s'exécutent nativement sur le Web et sur les principales plates-formes de bureau et mobiles. Mais il fournit également un ensemble de plugins pour accéder aux fonctionnalités natives des appareils, comme la caméra, sans avoir à utiliser le code de bas niveau spécifique à chaque plate-forme ; le plugin le fait pour vous et fournit une API de haut niveau normalisée, d'ailleurs.

Capacitor fournit également une API que vous pouvez utiliser pour créer des plugins personnalisés pour les fonctionnalités natives non couvertes par l'ensemble de plugins officiels fournis par l'équipe Ionic. Vous pouvez apprendre à créer un plugin dans la documentation.

Vous pouvez également trouver plus de détails sur les API disponibles et les plugins principaux dans la documentation.

Exemple : Ajout d'un plug-in de condensateur

Voyons un exemple d'utilisation d'un plugin Capacitor dans notre application.

Nous utiliserons le plugin "Modals", qui est utilisé pour afficher les fenêtres modales natives pour les alertes, les confirmations et les invites de saisie, ainsi que les fiches d'action.

Ouvrez src/components/Home.vue et ajoutez l'importation suivante au début du bloc de script :

 import { Plugins } from '@capacitor/core';

Ce code importe la classe Plugins de @capacitor/core .

Ensuite, ajoutez la méthode suivante pour afficher une boîte de dialogue :

 … methods: { … async showDialogAlert(){ await Plugins.Modals.alert({ title: 'Alert', message: 'This is an example alert box' }); }

Enfin, ajoutez un bouton dans le bloc template pour déclencher cette méthode :

 <ion-button @click="showDialogAlert" full>Show Alert Box</ion-button>

Voici une capture d'écran de la boîte de dialogue :

Vous pouvez trouver plus de détails dans les docs.

Création de l'application pour les plates-formes cibles

Afin de construire votre projet et de générer un binaire natif pour votre plate-forme cible, vous devrez suivre quelques étapes. Voyons-les d'abord en quelques mots :

1. Générez une version de production de votre application Vue.
2. Copiez tous les actifs Web dans le projet natif (Android, dans notre exemple) généré par Capacitor.
3. Ouvrez votre projet Android dans Android Studio (ou Xcode pour iOS) et utilisez l'environnement de développement intégré (IDE) natif pour créer et exécuter votre application sur un appareil réel (si connecté) ou un émulateur.

Exécutez donc la commande suivante pour créer une version de production :

 $ npm run build

Ensuite, utilisez la commande copy de la CLI Capacitor pour copier les ressources Web dans le projet natif :

 $ npx cap copy

Enfin, vous pouvez ouvrir votre projet natif (Android, dans notre cas) dans l'IDE natif (Android Studio, dans notre cas) à l'aide de la commande open de la CLI Capacitor :

 $ npx cap open android

Soit Android Studio sera ouvert avec votre projet, soit le dossier contenant les fichiers de projet natifs sera ouvert.

Si cela n'ouvre pas Android Studio, ouvrez simplement votre IDE manuellement, allez dans "Fichier" → "Ouvrir...", puis accédez à votre projet et ouvrez le dossier android depuis l'IDE.

Vous pouvez maintenant utiliser Android Studio pour lancer votre application à l'aide d'un émulateur ou d'un appareil réel.

Conclusion

Dans ce didacticiel, nous avons utilisé Ionic Capacitor avec les composants Web Vue et Ionic 4 pour créer une application Android mobile avec les technologies Web. Vous pouvez trouver le code source de l'application de démonstration que nous avons créée tout au long de ce didacticiel dans le référentiel GitHub.