Razvoj – Tomislav Stanković

Ionic geolociranje – dohvaćanje i prikaz lokacije korisnika

Ranije sam već objavio jedan blog post na temu prikaza Google karte međutim ondje kao početnu lokaciju koristim zadane koordinate Vinkovaca.

loadMap(){

let latLng = new google.maps.LatLng('45.287906','18.805678');

let mapOptions = {

center:latLng,

zoom:11,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

I to je u redu opcija ako će korisnici aplikacije biti iz Vinkovaca, ali ako se korisnik nalazi u bilo kojem drugom mjestu neće baš imati koristi od aplikacije koja mu kao zadanu lokaciju prikazuje mjesto gdje on nije.

Zato moram pronaći način kako dinamički dohvatiti lokaciju korisnika u trenutku kada on pokreće mobilnu aplikaciju ili u trenutku kada on unutar mobilne aplikacije ode na dio koji mu prikazuje Google kartu.

Kako dohvatiti lokaciju korisnika?

U ovom slučaju mogu koristiti Ionic Native Geolocation plugin koji će mi omogućiti dohvaćanje lokacije korisnika (koordinate).

This plugin provides information about the device’s location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.

Plugin instaliram sljedećim naredbama:

1 2	$ ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you" $ npm install --save @ionic-native/geolocation

Odmah nakon instalacije plugin deklariram unutar app.module.ts

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 { Geolocation } from '@ionic-native/geolocation';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

Geolocation,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Sada sam spreman za praktičan prikaz dohvaćanja lokacije korisnika. To radim pozivanjem funkcije mojaLokacija().

Korisnik mora odobriti Ionic aplikaciji dohvaćanje lokacije.

U ovom slučaju tek nakon što sam dobio koordinate korisnika pozivam funkciju this.loadMap(resp.coords.latitude, resp.coords.longitude); koja će prikazati Google kartu na ekranu, a korisnikova lokacija biti će na sredini ekrana.

mojaLokacija(){

let options = {

enableHighAccuracy: true

};

this._geolocation.getCurrentPosition(options).then((resp) => {

console.log(resp);

if(resp.coords.latitude && resp.coords.longitude){

this.loadMap(resp.coords.latitude, resp.coords.longitude);

}

}).catch((error) => {

console.log('Error getting location', error);

});

}

Međutim, ovdje postoji jedan problem. Da bi ovo iznad bilo moguće na mobilnom uređaju u postavkama mora biti omogućeno dohvaćanje lokacije.

Komponenta na kraju sa svim funkcionalnostima izgleda ovako:

import { Component, ViewChild, ElementRef } from '@angular/core';

import { NavController } from 'ionic-angular';

import { Geolocation } from '@ionic-native/geolocation';

declare var google;

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild('map') mapElmt: ElementRef;

map: any;

constructor(public _navCtrl: NavController,

private _geolocation: Geolocation) {

}

ionViewDidEnter(){

this.mojaLokacija();

}

mojaLokacija(){

let options = {

enableHighAccuracy: true

};

this._geolocation.getCurrentPosition(options).then((resp) => {

console.log(resp);

if(resp.coords.latitude && resp.coords.longitude){

this.loadMap(resp.coords.latitude, resp.coords.longitude);

}

}).catch((error) => {

console.log('Error getting location', error);

});

}

loadMap(latitude, longitude){

let latLng = new google.maps.LatLng(latitude,longitude);

let mapOptions = {

center:latLng,

zoom:13,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);

}

Ako to nije uključeno unutar Ionic aplikacije neće se prikazati ništa tj. ekran će biti prazan jer se funkcija za prikaz Google karte neće niti učitati jer nema koordinara. U slučaju da su varijable s koordinatama prazne prikazat će se zadana lokacija negdje u Africi na moru.

Naravno da ovo ne želim dopustiti i da korisnik Ionic aplikacije treba biti obaviješten o čemu se radi tj. ako želi koristiti određenu funkcionalnost mobilne aplikacije treba dati lokaciju uređaja. Korisnik čak ne mora niti znati da mu su mu postavke lokacije isključene i zato moram pronaći način kako da to saznam i omogućim mu da to uključi.

Android – upravljanje postavkama lokacije

Pomoću plugina Ionic Native Diagnostic mogu saznati je li dohvaćanje lokacije omogućeno na tom konkretnom Android uređaju. U slučaju kada nije imam mogućnost obavijestiti korisnika i omogućiti mu da uključi lociranje.

Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi

Plugin instaliram sljedećim naredbama:

1 2	$ ionic cordova plugin add cordova.plugins.diagnostic $ npm install --save @ionic-native/diagnostic

Odmah nakon instalacije plugin deklariram unutar app.module.ts

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 { Geolocation } from '@ionic-native/geolocation';

import { Diagnostic } from '@ionic-native/diagnostic';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

Geolocation,

Diagnostic,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Sada mogu testirati ovu opciju.

Ako sada pokrenem aplikaciju dobijem sljedeće

Klikom na “UKLJUČI” otvaraju se postavke u kojima je moguće uključiti geolociranje.

Sva se funkcionalnost nalazi unutar funkcije provjeraLokacije().

provjeraLokacije(){

this._diagnostic.isLocationEnabled()

.then((state) => {

console.log(state);

if (state == true){

this.mojaLokacija();

} else {

let alert = this._alertCtrl.create({

title: 'Želite li uključiti geolociranje?',

message: 'Geolociranje koristimo kako bismo Vam omogućili prikaz objekata u Vašoj blizini.',

buttons: [

{

text: 'Odustani',

role: 'cancel',

handler: () => {

}

{

text: 'Uključi',

handler: () => {

this._diagnostic.switchToLocationSettings();

}

]

});

alert.present();

}

}).catch(e => console.error(e));

}

Komponenta na kraju sa svim funkcionalnostima izgleda ovako:

import { Component, ViewChild, ElementRef } from '@angular/core';

import { NavController, AlertController } from 'ionic-angular';

import { Geolocation } from '@ionic-native/geolocation';

import { Diagnostic } from '@ionic-native/diagnostic';

declare var google;

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild('map') mapElmt: ElementRef;

map: any;

constructor(public _navCtrl: NavController,

private _geolocation: Geolocation,

private _diagnostic: Diagnostic,

public _alertCtrl: AlertController) {

}

ionViewDidEnter(){

this.provjeraLokacije();

}

mojaLokacija(){

let options = {

enableHighAccuracy: true

};

this._geolocation.getCurrentPosition(options).then((resp) => {

console.log(resp);

if(resp.coords.latitude && resp.coords.longitude){

this.loadMap(resp.coords.latitude, resp.coords.longitude);

}

}).catch((error) => {

console.log('Error getting location', error);

});

}

provjeraLokacije(){

this._diagnostic.isLocationEnabled()

.then((state) => {

console.log(state);

if (state == true){

this.mojaLokacija();

} else {

let alert = this._alertCtrl.create({

title: 'Želite li uključiti geolociranje?',

message: 'Geolociranje koristimo kako bismo Vam omogućili prikaz objekata u Vašoj blizini.',

buttons: [

{

text: 'Odustani',

role: 'cancel',

handler: () => {

}

{

text: 'Uključi',

handler: () => {

this._diagnostic.switchToLocationSettings();

}

]

});

alert.present();

}

}).catch(e => console.error(e));

}

loadMap(latitude, longitude){

let latLng = new google.maps.LatLng(latitude,longitude);

let mapOptions = {

center:latLng,

zoom:13,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);

}

Zaključak

Struktura projekta prema package.json

{

"name": "IonicGeolocation",

"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.17.0",

"@ionic-native/diagnostic": "^4.18.0",

"@ionic-native/geolocation": "^4.18.0",

"@ionic-native/splash-screen": "~4.17.0",

"@ionic-native/status-bar": "~4.17.0",

"@ionic/storage": "2.2.0",

"cordova-android": "7.0.0",

"cordova-plugin-device": "^2.0.2",

"cordova-plugin-geolocation": "^4.0.1",

"cordova-plugin-ionic-keyboard": "^2.1.3",

"cordova-plugin-ionic-webview": "^2.2.5",

"cordova-plugin-splashscreen": "^5.0.2",

"cordova-plugin-statusbar": "^2.4.2",

"cordova-plugin-whitelist": "^1.3.3",

"cordova.plugins.diagnostic": "^4.0.10",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.11",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

"devDependencies": {

"@ionic/app-scripts": "3.2.1",

"typescript": "~2.6.2"

"description": "An Ionic Geolocation 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": {},

"cordova-plugin-geolocation": {

"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"

"cordova.plugins.diagnostic": {}

"platforms": [

"android"

]

}

Kako saznati status napunjenosti baterije unutar Ionic aplikacije

Cilj ovog blog posta je prikazati na koji način je moguće unutar Ionic aplikacije saznati kakav je status napunjenosti baterije mobilnog uređaja i je li uređaj trenutno spojen na punjenje. Ovisno o dobivenim parametrima lakše se može upravljati ostalim stanjima unutar aplikacije.

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem podršku za Android platformu.

$ ionic start IonicBatteryStatus --blank

$ cd IonicBatteryStatus

$ ionic cordova platform add android

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 { BatteryStatus } from '@ionic-native/battery-status';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

BatteryStatus,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Battery Status – Ionic Native plugin

Funkcionalnost ću ugraditi unutar HomePage komponente.

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { BatteryStatus } from '@ionic-native/battery-status';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

subscription:any;

level: number;

isPlugged: boolean;

constructor(public navCtrl: NavController,

private _batteryStatus: BatteryStatus) {

//Battery Status start

this.subscription = this._batteryStatus.onChange().subscribe(status => {

console.log(status.level, status.isPlugged);

this.level = status.level;

this.isPlugged = status.isPlugged;

});

//Battery Status end

}

ionViewWillLeave() {

this.subscription.unsubscribe();

}

Kada se mobilna aplikacija pokrene to izgleda ovako

Gore prikazani rezultat označava da je baterija mobilnog uređaja na 78% kapaciteta napunjenosti i da je trenutno spojena na punjač.

Zaključak

Struktura projekta prema package.json

{

"name": "IonicBatteryStatus",

"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/battery-status": "^4.17.0",

"@ionic-native/core": "~4.17.0",

"@ionic-native/splash-screen": "~4.17.0",

"@ionic-native/status-bar": "~4.17.0",

"@ionic/storage": "2.2.0",

"cordova-android": "7.0.0",

"cordova-plugin-battery-status": "^2.0.2",

"cordova-plugin-device": "^2.0.2",

"cordova-plugin-ionic-keyboard": "^2.1.3",

"cordova-plugin-ionic-webview": "^2.0.0",

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

"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": {},

"cordova-plugin-ionic-keyboard": {},

"cordova-plugin-battery-status": {}

"platforms": [

"android"

]

}

Ionic + OpenWeatherMap – prikaz vremenske prognoze

U ovom ću blog postu pokazati kako unutar Ionic aplikacije postaviti API za prikaz vremenske prognoze koristeći OpenWeatherMap.

Iako svaki Android mobilni uređaj sam po sebi već ima prikaz vremenske prognoze, koji je moguće dodatno prilagoditi, na početnom zaslonu ipak može biti korisno ubaciti i ovakav način prikaza takvih informacija.

Npr. ako je u pitanju nekakva turistička aplikacije dobro je prikazati trenutnu vremensku prognozu mjesta u koje smo stigli ili gdje planiramo putovati.

Uvod

Prije svega potrebno je kreirati korisnički račun na https://home.openweathermap.org/users/sign_up

Postoji nekoliko različitih opcija od kojih je manji dio besplatan, ali u svakom slučaju i to je dovoljno za osnovni prikaz vremenske prognoze. U slučaju potrebe za dodatnim informacijama moguće je koristiti neki od oblika mjesečne pretplate.

Kreiranje aplikacije

Kreiram novi Ionic, u ovom slučaju Ionic 4, projekt i odmah dodajem podršku za Android platformu.

$ ionic start IonicWeather blank--type=angular

$ cd IonicWeather

$ ionic cordova platform add android

OpenWeatherMap API

S obzirom da sam se registrirao za besplatnu verziju API-ja mogu, od onoga što je meni trenutno zanimljivo, koristiti samo “Current weather data” API i “5 day / 3 hour forecast” API.

Current weather data

Ovaj API prikazuje trenutnu vremensku prognozu za odabrani grad, a pozivam ga na adresi

1	http://api.openweathermap.org/data/2.5/weather?q=

U sljedećem primjeru pozivam ovaj API s dva osnovna parametra, a to su: moj API ključ koji sam dobio nakon registracije te ime grada za koji želim dobiti vremensku prognozu.

import { Component } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

vrijemeObjekt = {

temperatura: 0,

opis: '',

slika: ''};

grad: string = "Vinkovci";

constructor(

private _http: HttpClient) {

}

ionViewDidEnter(){

this.prikaziVrijeme();

}

prikaziVrijeme(){

this._http.get("http://api.openweathermap.org/data/2.5/weather?q=" + this.grad + "&appid=********************************")

.subscribe((data) => {

console.log(data);

this.vrijemeObjekt.temperatura = data['main']['temp'];

this.vrijemeObjekt.opis = data['weather'][0]['description'];

this.vrijemeObjekt.slika = 'http://openweathermap.org/img/w/' + data['weather'][0]['icon'] + ".png";

console.log(this.vrijemeObjekt);

});

}

I odmah dobijem željene podatke na kojima se mogu primijetiti dva detalja. Prvi se tiče opisa vremenske prognoze koji je na engleskom jeziku, a drugi se tiče mjerne jedinice koja nije u °C.

Kako bi to promijenio dodat ću još dva parametra u API URL.

prikaziVrijeme(){

this._http.get("http://api.openweathermap.org/data/2.5/weather?q=" + this.grad + "&appid=********************************" + "&units=metric" + "&lang=hr")

.subscribe((data) => {

console.log(data);

this.vrijemeObjekt.temperatura = data['main']['temp'];

this.vrijemeObjekt.opis = data['weather'][0]['description'];

this.vrijemeObjekt.slika = 'http://openweathermap.org/img/w/' + data['weather'][0]['icon'] + ".png";

console.log(this.vrijemeObjekt);

});

}

Nakon toga mogu vidjeti da je sada opis vremenske prognoze na hrvatskom jeziku i da je mjerna jedinica °C.

Ikona se prikazuje na način da se na URL 'http://openweathermap.org/img/w/' doda naziv slike data['weather'][0]['icon'] + ".png" koji se dobije kao odgovor na API zahtjev. Više o tome na poveznici https://openweathermap.org/weather-conditions

Na ekranu to može izgledati ovako, ali je i dalje malo čudno zbog decimalnog prikaza.

<ion-header>

<ion-toolbar>

<ion-title>

Ionic Weather App

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<ion-card>

<ion-row>

<ion-col>

</ion-col>

<ion-col>

<h1>{{vrijemeObjekt.temperatura}}°C</h1>

</ion-col>

</ion-row>

</ion-card>

</ion-content>

To se vrlo lako riješi pomoću Math.round().

1	this.vrijemeObjekt.temperatura = Math.round(data['main']['temp']);

Što daje sljedeći rezultat

5 day / 3 hour forecast

Ovaj API prikazuje vremensku prognozu za pet dana unaprijed u razmacima od po tri sata, a pozivam ga na adresi

1	http://api.openweathermap.org/data/2.5/forecast?q=

Nakon svega navedenog u primjeru iznad u ovom se primjeru neće puno toga promijeniti. Rezultat će ostati na hrvatskom jeziku te u obliku °C.

prikaziVrijeme(){

this._http.get("http://api.openweathermap.org/data/2.5/forecast?q=" + this.grad + "&appid=********************************" + "&units=metric" + "&lang=hr")

.subscribe((data) => {

console.log(data);

// Sada

this.vrijemeObjekt.slikaDanas = 'http://openweathermap.org/img/w/' + data['list'][0]['weather'][0]['icon'] + ".png";

this.vrijemeObjekt.temperaturaDanas = Math.round(data['list'][0]['main']['temp']);

this.vrijemeObjekt.opisDanas = data['list'][0]['weather'][0]['description'];

// Za 3 sata

this.vrijemeObjekt.slikaDanas3 = 'http://openweathermap.org/img/w/' + data['list'][1]['weather'][0]['icon'] + ".png";

this.vrijemeObjekt.temperaturaDanas3 = Math.round(data['list'][1]['main']['temp']);

// Za 6 sati

this.vrijemeObjekt.slikaDanas6 = 'http://openweathermap.org/img/w/' + data['list'][2]['weather'][0]['icon'] + ".png";

this.vrijemeObjekt.temperaturaDanas6 = Math.round(data['list'][2]['main']['temp']);

// Za 9 sati

this.vrijemeObjekt.slikaDanas9 = 'http://openweathermap.org/img/w/' + data['list'][3]['weather'][0]['icon'] + ".png";

this.vrijemeObjekt.temperaturaDanas9 = Math.round(data['list'][3]['main']['temp']);

// Za 12 sati

this.vrijemeObjekt.slikaDanas12 = 'http://openweathermap.org/img/w/' + data['list'][4]['weather'][0]['icon'] + ".png";

this.vrijemeObjekt.temperaturaDanas12 = Math.round(data['list'][4]['main']['temp']);

console.log(this.vrijemeObjekt);

});

}

Na ekranu to može izgledati ovako

<ion-content padding>

<ion-card>

<ion-row>

<ion-col>

</ion-col>

<ion-col>

<h6>{{vrijemeObjekt.temperaturaDanas}}°C<br>

{{vrijemeObjekt.opisDanas}}</h6>

</ion-col>

<ion-col text-center>

{{vrijemeObjekt.temperaturaDanas3}}°C

</ion-col>

<ion-col text-center>

{{vrijemeObjekt.temperaturaDanas6}}°C

</ion-col>

<ion-col text-center>

{{vrijemeObjekt.temperaturaDanas9}}°C

</ion-col>

<ion-col text-center>

{{vrijemeObjekt.temperaturaDanas12}}°C

</ion-col>

</ion-row>

</ion-card>

</ion-content>

Zaključak

Struktura projekta prema package.json

{

"name": "IonicWeather",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/common": "~7.0.0",

"@angular/core": "~7.0.0",

"@angular/forms": "~7.0.0",

"@angular/http": "~7.0.0",

"@angular/platform-browser": "~7.0.0",

"@angular/platform-browser-dynamic": "~7.0.0",

"@angular/router": "~7.0.0",

"@ionic-native/core": "5.0.0-beta.21",

"@ionic-native/splash-screen": "5.0.0-beta.21",

"@ionic-native/status-bar": "5.0.0-beta.21",

"@ionic/angular": "4.0.0-beta.16",

"cordova-android": "7.0.0",

"cordova-plugin-device": "^2.0.2",

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

"core-js": "^2.5.4",

"rxjs": "~6.3.3",

"zone.js": "~0.8.26"

"devDependencies": {

"@angular-devkit/architect": "~0.10.0",

"@angular-devkit/build-angular": "~0.10.0",

"@angular-devkit/core": "~7.0.0",

"@angular-devkit/schematics": "~7.0.0",

"@angular/cli": "~7.0.0",

"@angular/compiler": "~7.0.0",

"@angular/compiler-cli": "~7.0.0",

"@angular/language-service": "~7.0.0",

"@ionic/angular-toolkit": "~1.2.0",

"@types/node": "~10.12.0",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~3.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~7.0.0",

"tslint": "~5.11.0",

"typescript": "~3.1.6"

"description": "An Ionic Weather 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": {}

"platforms": [

"android"

]

}

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:

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.

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:

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"

]

}

Kategorija: Razvoj

Ionic 3 Popover

Kreiranje Ionic aplikacije

Zaključak

Ionic geolociranje – dohvaćanje i prikaz lokacije korisnika

Kako dohvatiti lokaciju korisnika?

Android – upravljanje postavkama lokacije

Zaključak

Kako saznati status napunjenosti baterije unutar Ionic aplikacije

Kreiranje aplikacije

Battery Status – Ionic Native plugin

Zaključak

Ionic + OpenWeatherMap – prikaz vremenske prognoze

Uvod

Kreiranje aplikacije

OpenWeatherMap API

Current weather data

5 day / 3 hour forecast

Zaključak

Ionic Launch Navigator – otvaranje nativne aplikacije za navigaciju

Kreiranje aplikacije

Launch Navigator plugin

Zaključak