Création d'applications mobiles avec Capacitor et Vue.js

Dans ce tutoriel, vous apprendrez à utiliser les technologies Web de pointe et de condensateur telles que Vue.js et les composants Web Ionic 4 pour créer des applications mobiles multiplateformes. applications pour Android et iOS. Vous pouvez également utiliser Capacitor pour cibler d'autres plateformes telles que le bureau et le Web en utilisant la même base de code.

Récemment, l'équipe Ionique a annoncé un successeur spirituel open-source à 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 des plates-formes de bureau via Electron – la plate-forme GitHub populaire pour construire 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. Le condensateur fournit également une couche de compatibilité qui permet l'utilisation de plugins Cordova existants dans les projets Capacitor.

En plus d'utiliser Capacitor dans les applications ioniques, vous pouvez également l'utiliser sans Ionic avec votre framework frontal préféré ou votre bibliothèque UI, comme Vue , Réagir, Angulaire avec matériel, Bootstrap, etc.

Dans ce tutoriel, 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 en tant qu'application Web progressive (PWA) ou en tant qu'application de bureau dans les principaux systèmes d'exploitation avec seulement quelques commandes.

Nous utiliserons également certains composants Ionic 4 UI pour le style Non, nous ne pouvons pas faire de tours de magie, mais nous avons des articles, des livres et webinars qui présentent des techniques que nous pouvons tous utiliser pour améliorer notre travail. Smashing Members obtiennent une sélection chevronnée d'astuces magiques – par ex. sessions de conception en direct et audits de perf, aussi. Il suffit de dire ! 😉

Explorez Smashing Wizardry →
      

Capacitor Features

Capacitor 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é. [19659016] Cross-platform
  Vous pouvez utiliser Capacitor pour créer des applications avec une base de code et cibler plusieurs plates-formes. Vous pouvez exécuter quelques autres commandes d'interface de ligne de commande (CLI) pour prendre en charge une autre plate-forme.
• Accès natif aux SDK de plate-forme
  Le condensateur ne vous gêne pas lorsque vous avez besoin d'accéder aux SDK natifs. et technologies de navigateur
  Une application créée avec Capacitor utilise des API web standard, de sorte que votre application sera également multi-navigateur et fonctionnera bien dans tous les navigateurs modernes qui respectent 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 un plugin qui correspond à vos besoins, en créant un plugin personnalisé via une API simple.

Conditions requises

Pour compléter ce tutoriel, vous aurez besoin d'un développement machine avec les exigences suivantes:

• Vous aurez besoin de Node v8.6 + et npm v5.6 + installé sur votre machine. Rendez-vous 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 ' ll faut installer Java 8 JDK et Android Studio avec le SDK Android.

Créer un projet Vue

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

Installation de Vue CLI v3

Commençons par installer la vue CLI v3 à partir de npm en lançant les commandes suivantes depuis 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érer un nouveau projet Vue

Après avoir installé la vue CLI, utilisons-la pour générer un nouveau projet Vue en lançant 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
 service de course $ npm

Votre application frontale fonctionnera à partir de http: // localhost: 8080 / .

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

Ajout d'Ionic 4

Pour pouvoir utiliser des composants Ionic 4 dans votre application, vous devez utiliser le paquet Ionic 4 de npm.

Alors, allez-y et ouvrez l'index . Fichier html qui se trouve dans le dossier public de votre projet Vue, et ajoute le script & lt; src = 'https: //unpkg.com/@ionic/core@4.0 Balise .0-alpha.7 / dist / ionic.js '& gt; / script & gt; dans la tête du fichier.

Ceci est le contenu de public / index.html :

 <lien rel = "icône" href = "<%= BASE_URL %> favicon.ico">




 
  

Vous pouvez obtenir la version actuelle du package de base ionique à partir de npm .

Maintenant, ouvrez src / App.vue et ajoutez le contenu suivant dans le ] modèle après avoir supprimé ce qu'il y a dedans:

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

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

Après avoir ajouté des composants ioniques à votre application Vue, vous allez commencer à recevoir des avertissements similaires à ce qui suit:

[Vue warn]: élément personnalisé inconnu:  - avez-vous enregistré le composant correctement? Pour les composants récursifs, assurez-vous de fournir l'option "nom".

trouvé dans

--->  sur src / components / HelloWorld.vue
        à src / App.vue
         

Cela est dû au fait que les composants Ionic 4 sont en fait des composants Web. Par conséquent, vous devez 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 tout fichier dans le dossier src / components (également, supprimez toute importation pour le composant HelloWorld.vue dans App.vue ), puis ajoutez le Fichiers Home.vue et About.vue .

Ouvrir src / components / Home.vue et ajouter le modèle suivant:

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

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

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

Ajout de la navigation avec Vue Router

Commencez par installer le routeur Vue, s'il n'est pas encore 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 imports suivants:

 import Router from 'vue-router'
import Home à partir de './components/Home.vue'
import À propos de './components/About.vue'

Cela importe le routeur Vue et les composants "Home" et "About"

Ajouter ceci:

 Vue.use (Router)

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

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

Enfin, dites à Vue à propos de l'instance Router :

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

Maintenant que nous avons configuré le routage, ajoutons quelques boutons et méthodes pour naviguer entre nos deux composants "Home" et "About"

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

 ...
valeur par défaut d'exportation {
  nom: 'Accueil',
  méthodes: {
    goToAbout () {
      ceci. $ router.push ('about')
    },

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

 Accéder à À propos de 

Maintenant nous devons ajouter un bouton pour retourner à la maison quand nous sommes dans le composant "About"

Ouvrez src / components / About.vue et ajoutez le goBackHome ( Méthode :

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

 Retour en arrière 

Lors de l'exécution de l'application sur un périphérique mobile ou un émulateur réel, 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 à la tête de la page:

Ajout de condensateur

Vous pouvez utiliser le condensateur de deux manières:

• Créer un nouveau projet de condensateur à partir de zéro
• Ajouter un condensateur à un projet frontal existant. Dans ce tutoriel, nous adopterons la deuxième approche, car nous avons d'abord créé un projet Vue, et nous allons maintenant ajouter Capacitor à notre projet Vue.

  Capacitor d'intégration avec Vue

  Capacitor est conçu pour être intégré dans n'importe quel projet. application JavaScript moderne. Pour ajouter du condensateur à votre application Web Vue, vous devrez suivre quelques étapes.

  Tout d'abord, installez l'interface CLI de Capacitor et les paquets de base à partir de npm. Assurez-vous que vous êtes dans votre projet Vue et exécutez la commande suivante:

   $ cd vuecapacitordemo
  $ npm install --save @ condensateur / core @ condensateur / 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 des 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, comme Android et iOS

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

  vous avez entré les informations requises, 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 paquet doit être un nom de paquet Java valide.

  Vous devriez voir un message disant: "Votre projet Capacitor est prêt!"

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

  Comme le suggère la CLI lorsque nous avons initialisé Capacitor dans notre projet Vue, nous pouvons maintenant ajouter des plateformes natives que nous voulons cibler. Cela transformera notre application Web en une application native pour chaque plate-forme que nous ajouterons.

  Mais juste avant d'ajouter une plate-forme, nous devons dire à Capacitor où chercher les fichiers construits – c'est-à-dire dist ] dossier 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 faire cela en changeant 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": faux,
    "webDir": "dist"
  }
  

  Maintenant, créons le dossier dist et construisons notre projet Vue en lançant la commande suivante:

   $ npm run build
  

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

   cap npx ajouter android
  

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

  C'est tout ce dont nous avons besoin pour intégrer les capacités et Android. Si vous souhaitez cibler iOS ou Electron, exécutez simplement cap npx ajouter ios ou cap npx ajouter électron respectivement.

  Utilisation de condensateurs de condensateur

  Capacitor fournit une durée d'exécution permet aux développeurs d'utiliser les trois piliers du Web – HTML, CSS et JavaScript – pour créer des applications fonctionnant 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 périphériques, tels que la caméra, sans avoir à utiliser le code spécifique de bas niveau pour 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 des plugins officiels fournis par le Équipe ionique. Vous pouvez apprendre comment créer un plugin dans les docs.

  Vous pouvez également trouver plus de détails sur les API disponibles et les plugins de base dans les docs.

  Exemple: Ajouter un Plugin Capacitor

  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 d'entrée, ainsi que

  Ouvrir src / components / Home.vue et ajouter l'importation suivante au début du bloc script :

   import {Plugins} from '@ condensateur / noyau »;
  

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

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

   ...
    méthodes: {
      ...
      async showDialogAlert () {
        wait Plugins.Modals.alert ({
            titre: 'Alerte',
            message: 'Ceci est un exemple de boîte d'alerte'
        });
      }
  

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

   Show Alert Box 
  

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

  
  

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

  Construire l'application pour les plates-formes cibles

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

  1. Générer une version de production de votre application Vue.
  2. Copiez tous les éléments 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é natif (IDE) pour générer et exécuter votre application sur un périphérique réel (s'il est connecté) ou un émulateur.

  Exécutez la commande suivante pour créer une production build:

   $ npm run build
  

  Ensuite, utilisez la commande copy de l'interface de ligne de commande Capacitor pour copier les éléments Web dans le projet natif:

   Copie de casquette $ npx
  

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

   $ npx capuchon ouvert android
  

  Soit Android Studio sera ouvert avec votre projet, soit le dossier contenant les fichiers du projet natif sera ouvert

  
  

  Si cela n'ouvre pas Android Studio, ouvrez simplement votre IDE manuellement, allez dans "Fichier" → "Ouvrir …", puis naviguez jusqu'à 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 vrai périphérique.

  
  

  Conclusion

  Dans ce tutoriel, nous avons utilisé Ionic Capacitor avec Vue et Ionic 4 pour créer une application mobile Android avec des technologies web. Vous pouvez trouver le code source de l'application de démonstration que nous avons créée tout au long de ce tutoriel dans le dépôt GitHub .

  (lf, ra, yk, al)