Crearea de aplicații mobile cu condensator și Vue.js

Recent, echipa Ionic a anunțat un succesor spiritual open-source pentru Apache Cordova și Adobe PhoneGap, numit Capacitor. Capacitor vă permite să construiți o aplicație cu tehnologii web moderne și să o rulați peste tot, de la browsere web la dispozitive mobile native (Android și iOS) și chiar platforme desktop prin Electron - populara platformă GitHub pentru construirea de aplicații desktop multiplatforme cu Node.js și tehnologiile web front-end.

Ionic – cel mai popular cadru mobil hibrid – rulează în prezent peste Cordova, dar în versiunile viitoare, Capacitor va fi opțiunea implicită pentru aplicațiile Ionic. Capacitor oferă, de asemenea, un strat de compatibilitate care permite utilizarea pluginurilor Cordova existente în proiectele Capacitor.

Pe lângă utilizarea Capacitor în aplicațiile Ionic, îl puteți folosi și fără Ionic cu cadrul frontal-end preferat sau cu biblioteca UI, cum ar fi Vue, React, Angular with Material, Bootstrap etc.

În acest tutorial, vom vedea cum să folosiți Capacitor și Vue pentru a construi o aplicație mobilă simplă pentru Android. De fapt, după cum am menționat, aplicația dvs. poate rula și ca o aplicație web progresivă (PWA) sau ca o aplicație desktop în sistemele de operare majore cu doar câteva comenzi.

Vom folosi, de asemenea, câteva componente Ionic 4 UI pentru a stila aplicația noastră mobilă demonstrativă.

Caracteristicile condensatorului

Condensatorul are multe caracteristici care îl fac o alternativă bună la alte soluții precum Cordova. Să vedem câteva dintre caracteristicile condensatorului:

• Open-source și gratuit
  Capacitor este un proiect open-source, licențiat sub licența permisivă MIT și întreținut de Ionic și comunitate.
• Multiplatformă
  Puteți folosi Capacitor pentru a crea aplicații cu o bază de cod și pentru a viza mai multe platforme. Puteți rula mai multe comenzi de interfață de linie de comandă (CLI) pentru a susține o altă platformă.
• Acces nativ la SDK-urile platformei
  Condensatorul nu vă împiedică atunci când aveți nevoie de acces la SDK-uri native.
• Tehnologii standard de web și browser
  O aplicație construită cu Capacitor utilizează API-uri web standard, astfel încât aplicația dvs. va fi, de asemenea, cross-browser și va rula bine în toate browserele moderne care respectă standardele.
• Extensibil
  Puteți accesa funcțiile native ale platformelor subiacente prin adăugarea de pluginuri sau, dacă nu găsiți un plugin care să se potrivească nevoilor dvs., prin crearea unui plugin personalizat printr-un API simplu.

Cerințe

Pentru a finaliza acest tutorial, veți avea nevoie de o mașină de dezvoltare cu următoarele cerințe:

• Veți avea nevoie de Node v8.6+ și npm v5.6+ instalat pe computer. Doar accesați site-ul oficial și descărcați versiunea pentru sistemul dvs. de operare.
• Pentru a crea o aplicație iOS, veți avea nevoie de un Mac cu Xcode.
• Pentru a crea o aplicație Android, va trebui să instalați Java 8 JDK și Android Studio cu Android SDK.

Crearea unui proiect Vue

În această secțiune, vom instala Vue CLI și vom genera un nou proiect Vue. Apoi, vom adăuga navigare la aplicația noastră folosind routerul Vue. În cele din urmă, vom construi o interfață simplă folosind componente Ionic 4.

Instalarea Vue CLI v3

Să începem prin a instala Vue CLI v3 de la npm, rulând următoarele din linia de comandă:

 $ npm install -g @vue/cli

Poate fi necesar să adăugați sudo pentru a instala pachetul la nivel global, în funcție de configurația dvs. npm.

Generarea unui nou proiect Vue

După instalarea Vue CLI, să-l folosim pentru a genera un nou proiect Vue rulând următoarele din CLI:

 $ vue create vuecapacitordemo

Puteți porni un server de dezvoltare navigând în folderul rădăcină al proiectului și rulând următoarea comandă:

 $ cd vuecapacitordemo $ npm run serve

Aplicația dumneavoastră front-end va rula de la https://localhost:8080/ .

Dacă vizitați https://localhost:8080/ în browserul dvs. web, ar trebui să vedeți următoarea pagină:

Adăugarea lui Ionic 4

Pentru a putea folosi componentele Ionic 4 în aplicația dvs., va trebui să utilizați pachetul de bază Ionic 4 de la npm.

Deci, mergeți mai departe și deschideți fișierul index.html , care se află în folderul public al proiectului dvs. Vue și adăugați următorul <script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'></script> etichetă în capul dosarului.

Acesta este conținutul 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>

Puteți obține versiunea actuală a pachetului de bază Ionic de la npm.

Acum, deschideți src/App.vue și adăugați următorul conținut în eticheta template după ce ștergeți ceea ce este acolo:

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

ion-app este o componentă ionică. Ar trebui să fie componenta de nivel superior care împachetează alte componente.

router-view este priza routerului Vue. O componentă care se potrivește unei căi va fi redată aici de către routerul Vue.

După ce adăugați componente Ionic la aplicația dvs. Vue, veți începe să primiți avertismente în consola browserului similar cu următorul:

 [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>

Acest lucru se datorează faptului că componentele Ionic 4 sunt de fapt componente web, așa că va trebui să îi spuneți lui Vue că componentele care încep cu prefixul ion nu sunt componente Vue. Puteți face asta în fișierul src/main.js adăugând următoarea linie:

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

Aceste avertismente ar trebui acum eliminate.

Adăugarea de componente Vue

Să adăugăm două componente. Mai întâi, eliminați orice fișier din folderul src/components (de asemenea, eliminați orice import pentru componenta HelloWorld.vue din App.vue ) și adăugați fișierele Home.vue și About.vue .

Deschideți src/components/Home.vue și adăugați următorul șablon:

 <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>

Apoi, în același fișier, adăugați următorul cod:

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

Acum, deschideți src/components/About.vue și adăugați următorul șablon:

 <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 asemenea, în același fișier, adăugați următorul cod:

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

Adăugarea navigației cu Router-ul Vue

Începeți prin a instala routerul Vue, dacă nu este deja instalat, rulând următoarea comandă din folderul rădăcină al proiectului dvs.:

 npm install --save vue-router

Apoi, în src/main.js , adăugați următoarele importuri:

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

Aceasta importă routerul Vue și componentele „Acasă” și „Despre”.

Adaugă asta:

 Vue.use(Router)

Creați o instanță de Router cu o serie de rute:

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

În cele din urmă, spuneți lui Vue despre instanța Router :

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

Acum că am configurat rutarea, să adăugăm câteva butoane și metode pentru a naviga între cele două componente „Acasă” și „Despre”.

Deschideți src/components/Home.vue și adăugați următoarea metodă goToAbout() :

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

În blocul template , adăugați un buton pentru a declanșa metoda goToAbout() :

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

Acum trebuie să adăugăm un buton pentru a reveni la acasă când ne aflăm în componenta „Despre”.

Deschideți src/components/About.vue și adăugați metoda goBackHome() :

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

Și, în blocul template , adăugați un buton pentru a declanșa metoda goBackHome() :

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

Când rulați aplicația pe un dispozitiv mobil real sau pe un emulator, veți observa o problemă de scalare. Pentru a rezolva acest lucru, trebuie să adăugăm pur și simplu niște meta -etichete care setează corect fereastra de vizualizare.

În public/index.html , adăugați următorul cod în head paginii:

 <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">

Adăugarea condensatorului

Puteți utiliza condensatorul în două moduri:

• Creați un nou proiect de condensator de la zero.
• Adăugați condensator la un proiect front-end existent.

În acest tutorial, vom adopta a doua abordare, deoarece am creat mai întâi un proiect Vue, iar acum vom adăuga Capacitor la proiectul nostru Vue.

Integrarea condensatorului cu Vue

Condensatorul este proiectat pentru a fi introdus în orice aplicație JavaScript modernă. Pentru a adăuga Capacitor la aplicația web Vue, va trebui să urmați câțiva pași.

Mai întâi, instalați CLI-ul Capacitor și pachetele de bază din npm. Asigurați-vă că vă aflați în proiectul Vue și rulați următoarea comandă:

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

Apoi, inițializați Capacitor cu informațiile aplicației dvs. executând următoarea comandă:

 $ npx cap init

Folosim npx pentru a rula comenzile Capacitor. npx este un utilitar care vine cu npm v5.2.0 și care este conceput pentru a facilita rularea utilitarelor CLI și a executabilelor găzduite în registrul npm. De exemplu, permite dezvoltatorilor să folosească executabile instalate local fără a fi nevoie să folosească scripturile de rulare npm.

Comanda init a Capacitor CLI va adăuga, de asemenea, platformele native implicite pentru Capacitor, cum ar fi Android și iOS.

De asemenea, vi se va solicita să introduceți informații despre aplicația dvs., cum ar fi numele, ID-ul aplicației (care va fi folosit în principal ca nume de pachet pentru aplicația Android) și directorul aplicației dvs.

După ce ați introdus detaliile necesare, Capacitor va fi adăugat la proiectul dumneavoastră Vue.

De asemenea, puteți furniza detaliile aplicației în linia de comandă:

 $ npx cap init vuecapacitordemo com.example.vuecapacitordemo

Numele aplicației este vuecapacitordemo , iar ID-ul acesteia este com.example.vuecapacitordemo . Numele pachetului trebuie să fie un nume valid de pachet Java.

Ar trebui să vedeți un mesaj care spune „Proiectul dvs. de condensator este gata de plecare!”

De asemenea, puteți observa că un fișier numit capacitor.config.json a fost adăugat în folderul rădăcină al proiectului dumneavoastră Vue.

La fel cum sugerează CLI atunci când am inițializat Capacitor în proiectul nostru Vue, acum putem adăuga platforme native pe care dorim să le țintim. Acest lucru va transforma aplicația noastră web într-o aplicație nativă pentru fiecare platformă pe care o adăugăm.

Dar chiar înainte de a adăuga o platformă, trebuie să îi spunem Capacitorului unde să caute fișierele construite - adică folderul dist al proiectului nostru Vue. Acest folder va fi creat atunci când rulați comanda de compilare a aplicației Vue pentru prima dată ( npm run build build și se află în folderul rădăcină al proiectului nostru Vue.

Putem face asta schimbând webDir în capacitor.config.json , care este fișierul de configurare pentru Capacitor. Deci, pur și simplu înlocuiți www cu dist . Iată conținutul capacitor.config.json :

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

Acum, să creăm folderul dist și să construim proiectul nostru Vue rulând următoarea comandă:

 $ npm run build

După aceea, putem adăuga platforma Android folosind următoarele:

 npx cap add android

Dacă te uiți în proiectul tău, vei descoperi că a fost adăugat un proiect nativ android .

Asta este tot ce avem nevoie pentru a integra Capacitor și a viza Android. Dacă doriți să vizați iOS sau Electron, rulați pur și simplu npx cap add ios sau, respectiv, npx cap add electron .

Utilizarea pluginurilor de condensator

Capacitor oferă un timp de rulare care permite dezvoltatorilor să folosească cei trei piloni ai web-ului — HTML, CSS și JavaScript — pentru a construi aplicații care rulează nativ pe web și pe platformele desktop și mobile majore. Dar oferă, de asemenea, un set de plugin-uri pentru a accesa funcții native ale dispozitivelor, cum ar fi camera, fără a fi nevoie să utilizați codul specific de nivel scăzut pentru fiecare platformă; pluginul o face pentru tine și oferă un API normalizat de nivel înalt, de altfel.

Capacitor oferă, de asemenea, un API pe care îl puteți utiliza pentru a construi pluginuri personalizate pentru caracteristicile native care nu sunt acoperite de setul de pluginuri oficiale furnizate de echipa Ionic. Puteți afla cum să creați un plugin în documente.

De asemenea, puteți găsi mai multe detalii despre API-urile și pluginurile de bază disponibile în documente.

Exemplu: Adăugarea unui plugin de condensator

Să vedem un exemplu de utilizare a unui plugin Capacitor în aplicația noastră.

Vom folosi pluginul „Modals”, care este folosit pentru a afișa ferestre modale native pentru alerte, confirmări și solicitări de introducere, precum și foi de acțiuni.

Deschideți src/components/Home.vue și adăugați următorul import la începutul blocului de script :

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

Acest cod importă clasa Plugins din @capacitor/core .

Apoi, adăugați următoarea metodă pentru a afișa o casetă de dialog:

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

În cele din urmă, adăugați un buton în blocul template pentru a declanșa această metodă:

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

Iată o captură de ecran a casetei de dialog:

Puteți găsi mai multe detalii în documente.

Crearea aplicației pentru platformele țintă

Pentru a vă construi proiectul și a genera un binar nativ pentru platforma țintă, va trebui să urmați câțiva pași. Să le vedem mai întâi pe scurt:

1. Generați o versiune de producție a aplicației dvs. Vue.
2. Copiați toate activele web în proiectul nativ (Android, în exemplul nostru) generat de Capacitor.
3. Deschideți-vă proiectul Android în Android Studio (sau Xcode pentru iOS) și utilizați mediul de dezvoltare integrat (IDE) nativ pentru a vă construi și rula aplicația pe un dispozitiv real (dacă este atașat) sau un emulator.

Deci, rulați următoarea comandă pentru a crea o versiune de producție:

 $ npm run build

Apoi, utilizați comanda copy a CLI Capacitor pentru a copia activele web în proiectul nativ:

 $ npx cap copy

În cele din urmă, vă puteți deschide proiectul nativ (Android, în cazul nostru) în IDE nativ (Android Studio, în cazul nostru) folosind comanda open a CLI-ului Capacitor:

 $ npx cap open android

Fie Android Studio va fi deschis împreună cu proiectul dvs., fie folderul care conține fișierele de proiect native va fi deschis.

Dacă asta nu deschide Android Studio, atunci pur și simplu deschideți manual IDE-ul, mergeți la „Fișier” → „Deschide…”, apoi navigați la proiectul dvs. și deschideți folderul android din IDE.

Acum puteți utiliza Android Studio pentru a vă lansa aplicația folosind un emulator sau un dispozitiv real.

Concluzie

În acest tutorial, am folosit Ionic Capacitor cu componente web Vue și Ionic 4 pentru a crea o aplicație mobilă Android cu tehnologii web. Puteți găsi codul sursă al aplicației demo pe care am creat-o pe parcursul acestui tutorial în depozitul GitHub.