Ovaj će blog post biti vrlo sličan jednom ranije objavljenom pod naslovom “Ionic 3 & Google Maps – prikaz rute između dvije lokacije” s tom razlikom da se glavni dio prikaza karte neće odvijati unutar Ionic aplikacije nego u nekoj od nativnih aplikacija instaliranih na mobilnom uređaju.
Kreiranje aplikacije
Kreiram novi Ionic, u ovom slučaju Ionic 3, projekt i odmah dodajem podršku za Android platformu.
|
1 2 3 |
$ ionic start IonicLaunchNavigator blank $ cd IonicLaunchNavigator $ ionic cordova platform add android |
Launch Navigator plugin
Launch Navigator plugin omogućava otvaranje nativne aplikacije za navigaciju koja je u tom trenutku instalirana na mobilnom uređaju. Jedino potrebno iz Ionic aplikacije je proslijediti nekoliko parametara, npr. početna i završna lokacija, kako bi se mogla prikazati ruta između njih.
Android platforma trenutno podržava pokretanje sljedećih aplikacija: Google Maps, Waze, CityMapper, Uber, Yandex, Sygic, HERE Maps, Moovit, Lyft, MAPS.ME, Cabify, Baidu Maps, 99 Taxi i Gaode Maps.
Plugin instaliram sljedećim naredbama:
|
1 2 |
$ ionic cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator $ npm install --save @ionic-native/launch-navigator |
Naravno, nakon toga ovaj plugin deklariram unutar app.module.ts datoteke.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { LaunchNavigator } from '@ionic-native/launch-navigator'; @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, LaunchNavigator, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} |
Na ekranu će se nalaziti samo gumb za pokretanje navigacije.
|
1 2 3 4 5 6 7 8 9 10 11 |
<ion-header> <ion-navbar> <ion-title> Ionic Launch Navigator </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button full (click)="otvoriNavigaciju()">Otvori navigaciju</button> </ion-content> |
Funkcionalnost se također sastoji od samo jedne funkcije.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { LaunchNavigator, LaunchNavigatorOptions } from '@ionic-native/launch-navigator'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { destination: string; latitude: number = 45.7713; longitude: number = 15.9436; constructor(public _navCtrl: NavController, private _launchNavigator: LaunchNavigator) { } otvoriNavigaciju(){ // Parametar može biti u obliku stringa this.destination = "Ilica 12, Zagreb" let options: LaunchNavigatorOptions = { // Parametar također može biti u obliku koordinata tj. brojeva start: [this.latitude, this.longitude] }; this._launchNavigator.navigate(this.destination, options) .then( success => console.log('Launched navigator'), error => console.log('Error launching navigator', error) ); } } |
Na ekranu to izgleda ovako:
Kao što se i vidi na zadnjoj slici ponuđena je vožnja putem aplikacije Uber. U slučaju da korisnik mobilnog uređaja u tom trenutku nema instaliranu tu aplikaciju biti će mu omogućeno automatsko instaliranje Uber aplikacije ako se odluči na vožnju.
Zaključak
Struktura projekta prema package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
{ "name": "IonicLaunchNavigator", "version": "0.0.1", "author": "Tomislav Stanković", "homepage": "https://www.tomislavstankovic.com/", "private": true, "scripts": { "start": "ionic-app-scripts serve", "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint" }, "dependencies": { "@angular/animations": "5.2.11", "@angular/common": "5.2.11", "@angular/compiler": "5.2.11", "@angular/compiler-cli": "5.2.11", "@angular/core": "5.2.11", "@angular/forms": "5.2.11", "@angular/http": "5.2.11", "@angular/platform-browser": "5.2.11", "@angular/platform-browser-dynamic": "5.2.11", "@ionic-native/core": "~4.15.0", "@ionic-native/launch-navigator": "^4.17.0", "@ionic-native/splash-screen": "~4.15.0", "@ionic-native/status-bar": "~4.15.0", "@ionic/storage": "2.2.0", "cordova-android": "7.0.0", "cordova-plugin-actionsheet": "^2.3.3", "cordova-plugin-device": "^2.0.2", "cordova-plugin-dialogs": "^2.0.1", "cordova-plugin-ionic-keyboard": "^2.1.3", "cordova-plugin-ionic-webview": "^2.2.3", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "^2.4.2", "cordova-plugin-whitelist": "^1.3.3", "ionic-angular": "3.9.2", "ionicons": "3.0.0", "rxjs": "5.5.11", "sw-toolbox": "3.6.0", "uk.co.workingedge.phonegap.plugin.launchnavigator": "^4.2.2", "zone.js": "0.8.26" }, "devDependencies": { "@ionic/app-scripts": "3.2.0", "typescript": "~2.6.2" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-whitelist": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": { "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+" }, "cordova-plugin-ionic-keyboard": {}, "uk.co.workingedge.phonegap.plugin.launchnavigator": { "OKHTTP_VERSION": "3.+" } }, "platforms": [ "android" ] } } |