Ionic Launch Navigator

Ionic Launch Navigator – otvaranje nativne aplikacije za navigaciju

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.

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

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

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.

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

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:

Ionic Launch Navigator

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

{
  "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"
    ]
  }
}

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *