Tworzenie aplikacji mobilnych z kondensatorem i Vue.js

Niedawno zespół Ionic ogłosił duchowego następcę Apache Cordova i Adobe PhoneGap o otwartym kodzie źródłowym, zwanego Capacitor. Capacitor pozwala budować aplikację z nowoczesnymi technologiami internetowymi i uruchamiać ją wszędzie, od przeglądarek internetowych po natywne urządzenia mobilne (Android i iOS), a nawet platformy desktopowe za pośrednictwem Electron — popularnej platformy GitHub do tworzenia wieloplatformowych aplikacji desktopowych z Node.js i front-endowe technologie internetowe.

Ionic — najpopularniejsza hybrydowa platforma mobilna — obecnie działa na platformie Cordova, ale w przyszłych wersjach Capacitor będzie domyślną opcją dla aplikacji Ionic. Capacitor zapewnia również warstwę kompatybilności, która pozwala na użycie istniejących wtyczek Cordova w projektach Capacitor.

Oprócz używania kondensatora w aplikacjach Ionic, możesz go również używać bez Ionic z preferowaną platformą front-end lub biblioteką interfejsu użytkownika, taką jak Vue, React, Angular with Material, Bootstrap itp.

W tym samouczku zobaczymy, jak wykorzystać kondensator i Vue do zbudowania prostej aplikacji mobilnej na Androida. W rzeczywistości, jak wspomniano, Twoja aplikacja może również działać jako progresywna aplikacja internetowa (PWA) lub jako aplikacja komputerowa w głównych systemach operacyjnych za pomocą zaledwie kilku poleceń.

Będziemy również używać niektórych komponentów interfejsu użytkownika Ionic 4 do stylizacji naszej demonstracyjnej aplikacji mobilnej.

Funkcje kondensatora

Kondensator posiada wiele cech, które czynią go dobrą alternatywą dla innych rozwiązań takich jak Cordova. Zobaczmy niektóre cechy kondensatora:

• Otwarte i bezpłatne
  Capacitor to projekt open-source, licencjonowany na podstawie liberalnej licencji MIT i utrzymywany przez Ionic i społeczność.
• Wieloplatformowy
  Możesz użyć kondensatora do tworzenia aplikacji z jedną bazą kodu i kierowania na wiele platform. Możesz uruchomić kilka dodatkowych poleceń interfejsu wiersza poleceń (CLI), aby obsługiwać inną platformę.
• Natywny dostęp do pakietów SDK platformy
  Kondensator nie przeszkadza, gdy potrzebujesz dostępu do natywnych pakietów SDK.
• Standardowe technologie internetowe i przeglądarki
  Aplikacja zbudowana przy użyciu Capacitor korzysta ze standardowych internetowych interfejsów API, więc Twoja aplikacja będzie również działać w różnych przeglądarkach i będzie działać dobrze we wszystkich nowoczesnych przeglądarkach zgodnych ze standardami.
• Rozciągliwy
  Możesz uzyskać dostęp do natywnych funkcji bazowych platform, dodając wtyczki lub, jeśli nie możesz znaleźć wtyczki, która odpowiada Twoim potrzebom, tworząc niestandardową wtyczkę za pomocą prostego interfejsu API.

Wymagania

Aby ukończyć ten samouczek, będziesz potrzebować maszyny programistycznej z następującymi wymaganiami:

• Będziesz potrzebować zainstalowanych na komputerze węzłów w wersji 8.6+ i npm w wersji 5.6+ . Wystarczy wejść na oficjalną stronę internetową i pobrać wersję dla swojego systemu operacyjnego.
• Aby zbudować aplikację na iOS, potrzebujesz Maca z Xcode.
• Aby zbudować aplikację na Androida, musisz zainstalować Java 8 JDK i Android Studio z Android SDK.

Tworzenie projektu Vue

W tej sekcji zainstalujemy Vue CLI i wygenerujemy nowy projekt Vue. Następnie dodamy nawigację do naszej aplikacji za pomocą routera Vue. Na koniec zbudujemy prosty interfejs użytkownika przy użyciu komponentów Ionic 4.

Instalowanie Vue CLI v3

Zacznijmy od zainstalowania Vue CLI v3 z npm, uruchamiając następujące polecenie z wiersza poleceń:

 $ npm install -g @vue/cli

Może być konieczne dodanie sudo , aby zainstalować pakiet globalnie, w zależności od konfiguracji npm.

Generowanie nowego projektu Vue

Po zainstalowaniu Vue CLI użyjmy go do wygenerowania nowego projektu Vue, uruchamiając z CLI następujące polecenie:

 $ vue create vuecapacitordemo

Serwer deweloperski można uruchomić, przechodząc do folderu głównego projektu i uruchamiając następujące polecenie:

 $ cd vuecapacitordemo $ npm run serve

Twoja aplikacja typu front-end będzie działać z https://localhost:8080/ .

Jeśli odwiedzasz https://localhost:8080/ w swojej przeglądarce, powinieneś zobaczyć następującą stronę:

Dodanie Ionic 4

Aby móc używać komponentów Ionic 4 w swojej aplikacji, musisz użyć podstawowego pakietu Ionic 4 z npm.

Więc śmiało otwórz plik index.html , który znajduje się w folderze public twojego projektu Vue, i dodaj następujący <script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'></script> w nagłówku pliku.

To jest zawartość 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>

Aktualną wersję pakietu Ionic core można pobrać z npm.

Teraz otwórz src/App.vue i dodaj następującą zawartość w tagu template po usunięciu tego, co tam jest:

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

ion-app to składnik jonowy. Powinien to być komponent najwyższego poziomu, który otacza inne komponenty.

router-view to wyjście routera Vue. Komponent pasujący do ścieżki zostanie tutaj wyrenderowany przez router Vue.

Po dodaniu komponentów Ionic do aplikacji Vue, zaczniesz otrzymywać ostrzeżenia w konsoli przeglądarki podobne do tych:

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

Dzieje się tak dlatego, że komponenty Ionic 4 są w rzeczywistości komponentami sieciowymi, więc musisz powiedzieć Vue, że komponenty zaczynające się od prefiksu ion nie są komponentami Vue. Możesz to zrobić w pliku src/main.js , dodając następujący wiersz:

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

Te ostrzeżenia należy teraz wyeliminować.

Dodawanie komponentów Vue

Dodajmy dwa składniki. Najpierw usuń wszystkie pliki z folderu src/components (również usuń wszelkie importy składnika HelloWorld.vue w App.vue ) i dodaj pliki Home.vue i About.vue .

Otwórz src/components/Home.vue i dodaj następujący szablon:

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

Następnie w tym samym pliku dodaj następujący kod:

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

Teraz otwórz src/components/About.vue i dodaj następujący szablon:

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

Ponadto w tym samym pliku dodaj następujący kod:

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

Dodawanie nawigacji za pomocą routera Vue

Zacznij od zainstalowania routera Vue, jeśli nie jest jeszcze zainstalowany, uruchamiając następujące polecenie z folderu głównego projektu:

 npm install --save vue-router

Następnie w src/main.js dodaj następujące importy:

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

Spowoduje to zaimportowanie routera Vue oraz komponentów „Dom” i „Informacje”.

Dodaj:

 Vue.use(Router)

Utwórz instancję Router z tablicą tras:

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

Na koniec poinformuj Vue o instancji Router :

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

Teraz, gdy skonfigurowaliśmy routing, dodajmy kilka przycisków i metod, aby nawigować między naszymi dwoma komponentami „Strona główna” i „Informacje”.

Otwórz src/components/Home.vue i dodaj następującą goToAbout() :

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

W bloku template dodaj przycisk wyzwalający goToAbout() :

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

Teraz musimy dodać przycisk, aby wrócić do domu, gdy jesteśmy w komponencie „O mnie”.

Otwórz src/components/About.vue i dodaj goBackHome() :

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

A w bloku template dodaj przycisk wyzwalający goBackHome() :

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

Podczas uruchamiania aplikacji na prawdziwym urządzeniu mobilnym lub emulatorze zauważysz problem ze skalowaniem. Aby rozwiązać ten problem, musimy po prostu dodać kilka meta , które poprawnie ustawiają widok.

W public/index.html dodaj następujący kod do head strony:

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

Dodawanie kondensatora

Kondensatora można używać na dwa sposoby:

• Utwórz nowy projekt kondensatora od podstaw.
• Dodaj kondensator do istniejącego projektu front-end.

W tym samouczku przyjmiemy drugie podejście, ponieważ najpierw stworzyliśmy projekt Vue, a teraz dodamy kondensator do naszego projektu Vue.

Integracja kondensatora z Vue

Kondensator został zaprojektowany tak, aby można go było umieścić w dowolnej nowoczesnej aplikacji JavaScript. Aby dodać kondensator do aplikacji internetowej Vue, musisz wykonać kilka kroków.

Najpierw zainstaluj Capacitor CLI i podstawowe pakiety z npm. Upewnij się, że jesteś w swoim projekcie Vue i uruchom następujące polecenie:

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

Następnie zainicjuj Capacitor z informacjami o swojej aplikacji, uruchamiając następujące polecenie:

 $ npx cap init

Używamy npx do uruchamiania poleceń Capacitor. npx to narzędzie dostarczane z npm v5.2.0 i zaprojektowane w celu ułatwienia uruchamiania narzędzi CLI i plików wykonywalnych hostowanych w rejestrze npm. Na przykład umożliwia programistom używanie lokalnie zainstalowanych plików wykonywalnych bez konieczności używania skryptów npm run.

Polecenie init w Capacitor CLI doda również domyślne platformy natywne dla Capacitor, takie jak Android i iOS.

Zostaniesz również poproszony o wprowadzenie informacji o Twojej aplikacji, takich jak nazwa, identyfikator aplikacji (który będzie używany głównie jako nazwa pakietu dla aplikacji Android) oraz katalog Twojej aplikacji.

Po wprowadzeniu wymaganych szczegółów, kondensator zostanie dodany do twojego projektu Vue.

Możesz również podać szczegóły aplikacji w wierszu poleceń:

 $ npx cap init vuecapacitordemo com.example.vuecapacitordemo

Nazwa aplikacji to vuecapacitordemo , a jej identyfikator to com.example.vuecapacitordemo . Nazwa pakietu musi być poprawną nazwą pakietu Java.

Powinieneś zobaczyć komunikat „Twój projekt kondensatora jest gotowy do pracy!”

Możesz również zauważyć, że plik o nazwie capacitor.config.json został dodany do folderu głównego projektu Vue.

Tak jak sugeruje CLI, kiedy zainicjowaliśmy Capacitor w naszym projekcie Vue, możemy teraz dodać natywne platformy, na które chcemy kierować reklamy. To zmieni naszą aplikację internetową w natywną aplikację dla każdej dodanej przez nas platformy.

Ale tuż przed dodaniem platformy musimy powiedzieć Capacitorowi, gdzie szukać zbudowanych plików — czyli folderu dist naszego projektu Vue. Folder ten zostanie utworzony podczas pierwszego uruchomienia polecenia build aplikacji Vue ( npm run build ) i znajduje się w folderze głównym naszego projektu Vue.

Możemy to zrobić, zmieniając webDir w capacitor.config.json , który jest plikiem konfiguracyjnym dla Capacitor. Więc po prostu zamień www na dist . Oto zawartość capacitor.config.json :

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

Teraz utwórzmy folder dist i zbudujmy nasz projekt Vue, uruchamiając następujące polecenie:

 $ npm run build

Następnie możemy dodać platformę Android za pomocą:

 npx cap add android

Jeśli zajrzysz do swojego projektu, zauważysz, że został dodany natywny projekt android .

To wszystko, czego potrzebujemy do integracji Capacitora i docelowego systemu Android. Jeśli chcesz celować w iOS lub Electron, po prostu uruchom npx cap add ios lub npx cap add electron .

Korzystanie z wtyczek kondensatorów

Capacitor zapewnia środowisko uruchomieniowe, które umożliwia programistom wykorzystanie trzech filarów sieci — HTML, CSS i JavaScript — do tworzenia aplikacji, które działają natywnie w Internecie oraz na głównych platformach stacjonarnych i mobilnych. Ale zapewnia również zestaw wtyczek, aby uzyskać dostęp do natywnych funkcji urządzeń, takich jak kamera, bez konieczności używania specyficznego kodu niskopoziomowego dla każdej platformy; wtyczka robi to za Ciebie i zapewnia znormalizowany interfejs API wysokiego poziomu.

Capacitor zapewnia również API, którego możesz użyć do tworzenia niestandardowych wtyczek dla natywnych funkcji, które nie są objęte zestawem oficjalnych wtyczek dostarczonych przez zespół Ionic. Możesz dowiedzieć się, jak stworzyć wtyczkę w dokumentach.

Więcej informacji na temat dostępnych interfejsów API i podstawowych wtyczek znajdziesz w dokumentach.

Przykład: Dodawanie wtyczki kondensatora

Zobaczmy przykład wykorzystania wtyczki Capacitor w naszej aplikacji.

Użyjemy wtyczki „Modals”, która służy do wyświetlania natywnych okien modalnych dla alertów, potwierdzeń i monitów o wprowadzanie danych, a także arkuszy działań.

Otwórz src/components/Home.vue i dodaj następujący import na początku bloku script :

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

Ten kod importuje klasę Plugins z @capacitor/core .

Następnie dodaj następującą metodę, aby wyświetlić okno dialogowe:

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

Na koniec dodaj przycisk w bloku template , aby uruchomić tę metodę:

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

Oto zrzut ekranu okna dialogowego:

Więcej szczegółów znajdziesz w dokumentacji.

Budowanie aplikacji dla platform docelowych

Aby zbudować swój projekt i wygenerować natywny plik binarny dla platformy docelowej, musisz wykonać kilka kroków. Zobaczmy je najpierw w skrócie:

1. Wygeneruj produkcyjną wersję swojej aplikacji Vue.
2. Skopiuj wszystkie zasoby internetowe do projektu natywnego (w naszym przykładzie na Androida) wygenerowanego przez Capacitor.
3. Otwórz projekt systemu Android w Android Studio (lub Xcode dla systemu iOS) i użyj natywnego zintegrowanego środowiska programistycznego (IDE), aby skompilować i uruchomić aplikację na rzeczywistym urządzeniu (jeśli jest dołączony) lub emulatorze.

Uruchom następujące polecenie, aby utworzyć kompilację produkcyjną:

 $ npm run build

Następnie użyj polecenia copy z interfejsu CLI kondensatora, aby skopiować zasoby sieciowe do projektu natywnego:

 $ npx cap copy

Na koniec możesz otworzyć swój natywny projekt (w naszym przypadku Android) w natywnym IDE (w naszym przypadku Android Studio) za pomocą polecenia open w interfejsie Capacitor CLI:

 $ npx cap open android

Albo zostanie otwarty Android Studio z Twoim projektem, albo zostanie otwarty folder zawierający natywne pliki projektu.

Jeśli to nie otworzy Android Studio, po prostu otwórz swoje IDE ręcznie, przejdź do „Plik” → „Otwórz…”, a następnie przejdź do swojego projektu i otwórz folder android z poziomu IDE.

Możesz teraz używać Android Studio do uruchamiania aplikacji za pomocą emulatora lub prawdziwego urządzenia.

Wniosek

W tym samouczku wykorzystaliśmy Ionic Capacitor z komponentami sieciowymi Vue i Ionic 4, aby stworzyć mobilną aplikację na Androida z technologiami sieciowymi. Kod źródłowy aplikacji demonstracyjnej, którą stworzyliśmy w tym samouczku, można znaleźć w repozytorium GitHub.