Tomislav Stanković, Autor na Tomislav Stanković

Ionic 3 – prikaz informacija o uređaju i platformi

Postoji mnogo vrsta i verzija mobilnih i drugih uređaja na kojima možemo pokrenuti Ionic aplikaciju, a također postoji i mnogo pluginova tj. dodataka pomoću kojih možemo proširiti mogućnosti Ionic aplikacije. Međutim, mnoštvo mogućnosti donosi i mnoštvo briga jer neće se sve funkcionalnosti moći iskoristiti na svim vrstama uređaja i nama kao developerima je vrlo korisno znati na kojem se uređaju tj. na kojoj se platformi vrti naša Ionic aplikacija kako bi je bolje znali prilagoditi.

Za ovu ćemo svrhu koristiti Device plugin koji dohvaća sljedeće podatke:

cordova – verzija Cordove
model – naziv modela. Vrijednost koju određuje proizvođač i može se razlikovati u različitim verzijama istog proizvoda
platform – naziv operacijskog sustava uređaja
uuid – jedinstveni identifikator uređaja
version – inačica/verzija operacijskog sustava
manufacturer – naziv proizvođača uređaja
isVirtual – je li uređaj pokrenut na simulatoru
serial – serijski broj uređaja

Dodavanje Device plugina

Pod uvjetom da već imamo pokrenut Ionic projekt možemo dodati IonicNative Device plugin sljedećim naredbama:

$ ionic cordova plugin add cordova-plugin-device
$ npm install --save @ionic-native/device

1 2	$ ionic cordova plugin add cordova-plugin-device $ npm install --save @ionic-native/device

Nakon uspješne instalacije plugin ćemo dodati kao jedan od providera u 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 { Device } from '@ionic-native/device';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Device,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

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

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

Device,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Primjena Device plugina

U ovom ćemo primjeru prikazati sve informacije koje nam Device plugin može dati na početnoj stranici.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Device } from '@ionic-native/device';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  uuid:string;
  model:string;
  cordova:string;
  platform:string;
  version:string;
  manufacturer:string;
  isVirtual:boolean;

  constructor(public navCtrl: NavController,
              private _device: Device) {
   //IonicNative Device
   this.uuid = this._device.uuid;
   this.model = this._device.model;
   this.cordova = this._device.cordova;
   this.platform = this._device.platform;
   this.version = this._device.version;
   this.manufacturer = this._device.manufacturer;
   this.isVirtual = this._device.isVirtual;
  }

}

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

import { NavController } from 'ionic-angular';

import { Device } from '@ionic-native/device';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

uuid:string;

model:string;

cordova:string;

platform:string;

version:string;

manufacturer:string;

isVirtual:boolean;

constructor(public navCtrl: NavController,

private _device: Device) {

//IonicNative Device

this.uuid = this._device.uuid;

this.model = this._device.model;

this.cordova = this._device.cordova;

this.platform = this._device.platform;

this.version = this._device.version;

this.manufacturer = this._device.manufacturer;

this.isVirtual = this._device.isVirtual;

}

Na uređaju to izgleda ovako

<ion-header>
  <ion-navbar>
    <ion-title>
      IonicNative Device
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Ionic Native Device</h2>
  <ul>
    <li>{{uuid}}</li>
    <li>{{model}}</li>
    <li>{{cordova}}</li>
    <li>{{platform}}</li>
    <li>{{version}}</li>
    <li>{{manufacturer}}</li>
    <li>{{isVirtual}}</li>
  </ul>

  <p>{{poruka}}</p>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

IonicNative Device

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<h2>Ionic Native Device</h2>

<ul>

<li>{{model}}</li>

<li>{{cordova}}</li>

<li>{{platform}}</li>

<li>{{version}}</li>

<li>{{manufacturer}}</li>

<li>{{isVirtual}}</li>

</ul>

<p>{{poruka}}</p>

</ion-content>

Zaključak

Kao što se iz ranije navedenog može vidjeti korištenje Device plugina je vrlo logično i jednostavno, a mogućnosti koje pruža su mnogobrojne i ovise jedino o vašoj mašti da određene funkcionalnosti pružite na određenim uređajima i platformama.

Ionic – automatska prijava u aplikaciju

Ovo je blog post o temi o kojoj se puno ne govori, ali koja se podrazumijeva za gotovo sve Ionic aplikacije koje sadržavaju ekran za prijavu.

Kada imate svoj API za prijavu ovo je jedan od načina kako korisnicima omogućiti automatsku prijavu u aplikaciju bez potrebe da svaki put prilikom pokretanja unose korisničko ime i lozinku. Znači, korisničko ime i lozinku trebaju upisati samo prvi put.

U nastavku možete vidjeti kako korisnicima omogućiti da ostanu prijavljeni u aplikaciju i nakon što se aplikacija zatvori.

Pretpostavka

Imate Ionic aplikaciju s ekranom za prijavu. Korisnik pokrene aplikaciju, pojavi se ekran za prijavu, korisnik unese korisničko ime i lozinku i nakon klika na gumb, pod uvjetom da je unio točne podatke, pojavi mu se početni ekran Ionic aplikacije.

Nakon nekog vremena korisnik ugasi aplikaciju i odloži mobilni uređaj. Kasnije ponovno želi pokrenuti Ionic aplikaciju i ponovno mora unositi korisničko ime i lozinku i tako svaki put.

Ako pretpostavimo da samo jedan korisnik koristi taj mobilni uređaj jasno je da takav način korištenja aplikacije nije najsretnije rješenje i da tom korisniku treba omogućiti jednostavniji i brži način prijave u aplikaciju tj. omogućiti korisniku da ostane prijavljen sve dok se sam ne odluči odjaviti.

localStorage kao rješenje

To ćemo postići koristeći localStorage.

Spremanje

Nakon što je korisnik uspješno prijavljen res.status == 'ok' spremit ćemo podatak o njegovom korisničkom imenu localStorage.setItem('username', res.username); u localStorage.

Znači taj se podatak sprema isključivo u slučaju kada je korisnik uspješno prijavljen i zato se možemo pouzdati u njega.

login(username,password){

    this.user.username = username;
    this.user.password = password;

     this._api.userLogin(this.user).subscribe(res => {

      if(res.status == 'ok'){
      //Spremanje podataka lokalno nakon uspješne prijave
      localStorage.setItem('username', res.username);

        this._navCtrl.setRoot(Dashboard);
      } else {
        this.loginFailed();
      }

    });

}

this.user.username = username;

this.user.password = password;

this._api.userLogin(this.user).subscribe(res => {

if(res.status == 'ok'){

//Spremanje podataka lokalno nakon uspješne prijave

localStorage.setItem('username', res.username);

this._navCtrl.setRoot(Dashboard);

} else {

this.loginFailed();

}

});

}

Korištenje

Prilikom svakog sljedećeg pokretanja aplikacije vršit će se provjera postoji li podatak o korisničkom imenu u lokalnoj memoriji localStorage.getItem('username') i pod uvjetom da postoji automatski se ulazi u aplikaciju i prikazuje početna stranica.

 initializeApp() {
    this._platform.ready().then(() => {

     //Ostani prijavljen
      if (localStorage.getItem('username')) {
           this.nav.push(Dashboard);
           this.nav.setRoot(Dashboard);
     } else {
        //
     }

      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this._statusBar.styleDefault();
      this._splashScreen.hide(); 
    });
  }

initializeApp() {

this._platform.ready().then(() => {

//Ostani prijavljen

if (localStorage.getItem('username')) {

this.nav.push(Dashboard);

this.nav.setRoot(Dashboard);

} else {

}

// Okay, so the platform is ready and our plugins are available.

// Here you can do any higher level native things you might need.

this._statusBar.styleDefault();

this._splashScreen.hide();

});

}

Brisanje

U slučaju da više korisnika koristi jedan mobilni uređaj omogućit ćemo brisanje podatka iz lokalne memorije prilikom odjave. Na taj se način nekom drugom korisniku omogućava da se samostalno prijavu u aplikaciju i ostane prijavljen sve dok se i on ne odluči odjaviti.

logout(){
  localStorage.clear();
  this.nav.setRoot(Login);
}

logout(){

localStorage.clear();

this.nav.setRoot(Login);

}

Ionic 3 – aplikacija koja govori

Nedavno mi je pala jedna ideja na pamet koju mislim realizirati koristeći upravo Ionic Native Text To Speech plugin tako da će ovaj blog post poslužiti kao proba.

Dodavanje TTS plugina

Za početak trebamo dodati plugin koji će činiti jezgru aplikacije, a to činimo naredbama:

$ ionic plugin add --save cordova-plugin-tts
$ npm install --save @ionic-native/text-to-speech

1 2	$ ionic plugin add --save cordova-plugin-tts $ npm install --save @ionic-native/text-to-speech

Nakon uspješne instalacije plugin ćemo dodati kao jedan od providera u app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TextToSpeech } from '@ionic-native/text-to-speech';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { BrowserModule } from '@angular/platform-browser'

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    TextToSpeech
    ]
})
export class AppModule {}

import { NgModule, ErrorHandler } from '@angular/core';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { TextToSpeech } from '@ionic-native/text-to-speech';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

import { BrowserModule } from '@angular/platform-browser'

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler},

TextToSpeech

]

})

export class AppModule {}

Logika aplikacije

Logika aplikacije nalazit će se u ovom slučaju unutar home.ts datoteke.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TextToSpeech } from '@ionic-native/text-to-speech';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  speakingText = '';
  speakingLocale = 'hr-HR';
  speakingRate = 50;

  constructor(public _navCtrl: NavController, 
              public _tts: TextToSpeech) { 
                
              }

  speak() {
    let options = {
      text: this.speakingText,
      locale: this.speakingLocale,
      rate: this.speakingRate / 200
    };

    this._tts.speak(options)
      .then(() => console.log('Uspješno izgovoreno!'))
      .catch((reason: any) => console.log(reason));
  }
}

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

import { NavController } from 'ionic-angular';

import { TextToSpeech } from '@ionic-native/text-to-speech';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

speakingText = '';

speakingLocale = 'hr-HR';

speakingRate = 50;

constructor(public _navCtrl: NavController,

public _tts: TextToSpeech) {

}

speak() {

let options = {

text: this.speakingText,

locale: this.speakingLocale,

rate: this.speakingRate / 200

};

this._tts.speak(options)

.then(() => console.log('Uspješno izgovoreno!'))

.catch((reason: any) => console.log(reason));

}

Ovako to izgleda na ekranu

Ekran se sastoji od četiri dijela:

Polje za unos sadržaja kojeg želimo da aplikacija izgovori

<ion-item>
 <ion-input type="text" placeholder="Unesite sadržaj koji želite izgovoriti..." [(ngModel)]="speakingText"></ion-input>
</ion-item>

<ion-item>

<ion-input type="text" placeholder="Unesite sadržaj koji želite izgovoriti..." [(ngModel)]="speakingText"></ion-input>

</ion-item>

Padajući izbornik s popisom jezika pomoću kojih želimo izgovoriti uneseni sadržaj

 <ion-item>
    <ion-label>Odabir jezika</ion-label>
    <ion-select [(ngModel)]="speakingLocale" okText="Odaberi" cancelText="Odustani">
      <ion-option value="hr-HR">hr-HR</ion-option>
      <ion-option value="en-G">en-GB</ion-option>
      <ion-option value="en-US">en-US</ion-option>
      <ion-option value="de-DE">de-DE</ion-option>
    </ion-select>
  </ion-item>

<ion-item>

<ion-label>Odabir jezika</ion-label>

<ion-select [(ngModel)]="speakingLocale" okText="Odaberi" cancelText="Odustani">

<ion-option value="hr-HR">hr-HR</ion-option>

<ion-option value="en-G">en-GB</ion-option>

<ion-option value="en-US">en-US</ion-option>

<ion-option value="de-DE">de-DE</ion-option>

</ion-select>

</ion-item>

Klizač koji određuje brzinu izgovora

<ion-item>
    <ion-range [(ngModel)]="speakingRate" min="100" max="200">
      <ion-icon range-left small name="speedometer"></ion-icon>
      <ion-icon range-right name="speedometer"></ion-icon>
    </ion-range>
  </ion-item>

<ion-item>

<ion-range [(ngModel)]="speakingRate" min="100" max="200">

<ion-icon range-left small name="speedometer"></ion-icon>

<ion-icon range-right name="speedometer"></ion-icon>

</ion-range>

</ion-item>

Gumb za pokretanje govora

<button ion-button full icon-left (click)="speak()"><ion-icon name="megaphone"></ion-icon>Govor!</button>

1	<button ion-button full icon-left (click)="speak()"><ion-icon name="megaphone"></ion-icon>Govor!</button>

U konačnici sve zajedno to izgleda ovako:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3TextToSpeech
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-input type="text" placeholder="Unesite sadržaj koji želite izgovoriti..." [(ngModel)]="speakingText"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Odabir jezika</ion-label>
    <ion-select [(ngModel)]="speakingLocale" okText="Odaberi" cancelText="Odustani">
      <ion-option value="hr-HR">hr-HR</ion-option>
      <ion-option value="en-G">en-GB</ion-option>
      <ion-option value="en-US">en-US</ion-option>
      <ion-option value="de-DE">de-DE</ion-option>
    </ion-select>
  </ion-item>

   <ion-item>
    <ion-range [(ngModel)]="speakingRate" min="100" max="200">
      <ion-icon range-left small name="speedometer"></ion-icon>
      <ion-icon range-right name="speedometer"></ion-icon>
    </ion-range>
  </ion-item>

  <button ion-button full icon-left (click)="speak()"><ion-icon name="megaphone"></ion-icon>Govor!</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3TextToSpeech

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-item>

<ion-input type="text" placeholder="Unesite sadržaj koji želite izgovoriti..." [(ngModel)]="speakingText"></ion-input>

</ion-item>

<ion-item>

<ion-label>Odabir jezika</ion-label>

<ion-select [(ngModel)]="speakingLocale" okText="Odaberi" cancelText="Odustani">

<ion-option value="hr-HR">hr-HR</ion-option>

<ion-option value="en-G">en-GB</ion-option>

<ion-option value="en-US">en-US</ion-option>

<ion-option value="de-DE">de-DE</ion-option>

</ion-select>

</ion-item>

<ion-item>

<ion-range [(ngModel)]="speakingRate" min="100" max="200">

<ion-icon range-left small name="speedometer"></ion-icon>

<ion-icon range-right name="speedometer"></ion-icon>

</ion-range>

</ion-item>

<button ion-button full icon-left (click)="speak()"><ion-icon name="megaphone"></ion-icon>Govor!</button>

</ion-content>

Zaključak

Nažalost nisam mogao pokazati kako ova aplikacija radi u praksi, ali ako budete radili prema ranije navedenom imati ćete i sami funkcionalan primjer aplikacije koja tekst pretvara u govor.

Ionic 3 – Prikaz Google mape

U ovom ću blog postu pokazati kako integrirati Google mape unutar Ionic aplikacije koristeći JavaScript SDK.

Zašto Google Maps?

Zato što je to najjednostavniji i najbolji način za prikaz mapa sa dosta mogućnosti i odličnom dokumentacijom + što je korištenje Google mapa besplatno do određene razine.

Native ili JavaScript SDK?

U ovom slučaju koristit ćemo JavaScript SDK jer nam je to brži i jednostavniji način za razvoj i testiranje. Znači, kako razvijamo funkcionalnosti Google mape unutar Ionic aplikacije istovremeno ih možemo testirati unutar web preglednika dok bi u slučaju korištenja Native SDK morali sve testirati na uređaju.

Pod pretpostavkom da već imate pokrenut Ionic projekt možemo krenuti dalje.

Prikaz Google mape

Za početak ćemo uvesti JavaScript SDK u index.html datoteku na način da dodamo <script> tag na sljedeći način

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBnJkTG_-ZSxxXwseJTZcvgFscpcFM1WFw"></script>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>

U slučaju da ne unesete Api Key dobit ćete poruku o grešci “Google Maps API warning: NoApiKeys“, ali će mape i dalje raditi.

Sada se možemo prebaciti na stranicu u našoj Ionic aplikaciji koja će služiti za prikaz Google mape. U ovom slučaju to će biti home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3GoogleMaps
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

<div #map id="map"></div>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3GoogleMaps

</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

</ion-content>

ID "map" služi nam samo kako bi mogli napraviti sljedeće

page-home {
  #map {
      width: 100%;
      height: 100%;
  }
}

#map {

width: 100%;

height: 100%;

}

Za sada još uvijek ne vidimo mapu jer nismo kontoleru rekli što da napravi, gdje i pomoću čega tj. naša datoteka home.ts trenutno izgleda ovako

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

}

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

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController) {

}

Međutim, nakon što uvezemo dodatne elemente i kreiramo funkciju koja će prikazati zadanu mapu stanje će se promijeniti

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

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElmt: ElementRef;
  map: any;
  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){
    let latLng = new google.maps.LatLng('45.287906','18.805678');
    let mapOptions = {
      center:latLng,
      zoom:11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

  }

}

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

import { NavController } from 'ionic-angular';

declare var google;

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild('map') mapElmt: ElementRef;

map: any;

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){

this.loadMap();

}

loadMap(){

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

let mapOptions = {

center:latLng,

zoom:11,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

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

}

Sada već možemo nešto konkretno vidjeti na ekranu. Imamo mapu koja prikazuje Vinkovce prema long i lat parametrima.

Dodavanje markera

Mapa prikazana na ranije definiran način nije pretjerano korisna i zato ćemo dodati markere kako bi se točnije znalo što želimo naglasiti i što zapravo prikazujemo. Za ovaj ću primjer odabrati četiri lokacije vezane uz grad Vinkovce i njih ću označiti na Google mapi.

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

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElmt: ElementRef;
  map: any;

   mojeLokacije = [
     {
      'name':'Stadion HNK Cibalia',
      'lat':'45.283666',
      'lng':'18.797286'
     },
     {
      'name':'Opća županijska bolnica Vinkovci',
      'lat':'45.292581',
      'lng':'18.818271'
     },
     {
      'name':'Jezero Banja, Vinkovci',
      'lat':'45.286323',
      'lng':'18.784025'
     },
     {
      'name':'Željeznički kolodvor (postaja) Vinkovci',
      'lat':'45.300063',
      'lng':'18.802725'
     }
   ]

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){
    let latLng = new google.maps.LatLng('45.286674','18.802124');
    let mapOptions = {
      center:latLng,
      zoom:11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

    for (let lokacija of this.mojeLokacije){
        this.addMarker(lokacija, lokacija['name']);
    }

  }

  addMarker(posInfo,info){
    let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);

    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: position
    });
  }

}

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

import { NavController } from 'ionic-angular';

declare var google;

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild('map') mapElmt: ElementRef;

map: any;

mojeLokacije = [

{

'name':'Stadion HNK Cibalia',

'lat':'45.283666',

'lng':'18.797286'

{

'name':'Opća županijska bolnica Vinkovci',

'lat':'45.292581',

'lng':'18.818271'

{

'name':'Jezero Banja, Vinkovci',

'lat':'45.286323',

'lng':'18.784025'

{

'name':'Željeznički kolodvor (postaja) Vinkovci',

'lat':'45.300063',

'lng':'18.802725'

}

]

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){

this.loadMap();

}

loadMap(){

let latLng = new google.maps.LatLng('45.286674','18.802124');

let mapOptions = {

center:latLng,

zoom:11,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

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

for (let lokacija of this.mojeLokacije){

this.addMarker(lokacija, lokacija['name']);

}

addMarker(posInfo,info){

let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);

let marker = new google.maps.Marker({

map: this.map,

animation: google.maps.Animation.DROP,

position: position

});

}

Kada osvježimo ekran možemo vidjeti animirane markere za sve četiri lokacije.

Dodatne informacije na markerima

Iako se ranije prikazana mapa već sada može smatrati donekle funkcionalnom ipak joj nedostaje jedan važan detalj, a to su informacije o tome što svaki pojedini marker točno prikazuje.

Zato ćemo sada za svaki marker napraviti skočni prozorčić koji će se prikazati kada se klikne na pojedini marker i na taj ćemo način prikazati naziv lokacije.

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

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElmt: ElementRef;
  map: any;

   mojeLokacije = [
     {
      'name':'Stadion HNK Cibalia',
      'lat':'45.283666',
      'lng':'18.797286'
     },
     {
      'name':'Opća županijska bolnica Vinkovci',
      'lat':'45.292581',
      'lng':'18.818271'
     },
     {
      'name':'Jezero Banja, Vinkovci',
      'lat':'45.286323',
      'lng':'18.784025'
     },
     {
      'name':'Željeznički kolodvor (postaja) Vinkovci',
      'lat':'45.300063',
      'lng':'18.802725'
     }
   ]

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){
    let latLng = new google.maps.LatLng('45.286674','18.802124');
    let mapOptions = {
      center:latLng,
      zoom:11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

    for (let lokacija of this.mojeLokacije){
        this.addMarker(lokacija, lokacija['name']);
    }

  }

  addMarker(posInfo,info){
    let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);

    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: position
    });
    let markerInfo = info;
    this.addInfo(marker, markerInfo);
  }

  addInfo(marker, content){
    let infoWindow = new google.maps.InfoWindow({
      content: content
    });

    google.maps.event.addListener(marker, 'click', () => {
     infoWindow.open(this.map, marker);
    })
  }

}

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

import { NavController } from 'ionic-angular';

declare var google;

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild('map') mapElmt: ElementRef;

map: any;

mojeLokacije = [

{

'name':'Stadion HNK Cibalia',

'lat':'45.283666',

'lng':'18.797286'

{

'name':'Opća županijska bolnica Vinkovci',

'lat':'45.292581',

'lng':'18.818271'

{

'name':'Jezero Banja, Vinkovci',

'lat':'45.286323',

'lng':'18.784025'

{

'name':'Željeznički kolodvor (postaja) Vinkovci',

'lat':'45.300063',

'lng':'18.802725'

}

]

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){

this.loadMap();

}

loadMap(){

let latLng = new google.maps.LatLng('45.286674','18.802124');

let mapOptions = {

center:latLng,

zoom:11,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

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

for (let lokacija of this.mojeLokacije){

this.addMarker(lokacija, lokacija['name']);

}

addMarker(posInfo,info){

let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);

let marker = new google.maps.Marker({

map: this.map,

animation: google.maps.Animation.DROP,

position: position

});

let markerInfo = info;

this.addInfo(marker, markerInfo);

}

addInfo(marker, content){

let infoWindow = new google.maps.InfoWindow({

content: content

});

google.maps.event.addListener(marker, 'click', () => {

infoWindow.open(this.map, marker);

})

}

U nastavku možemo vidjeti markere s dodatnim informacijama.

Popis lokacija s fokusom

Sada ćemo napraviti popis lokacija koji će se nalaziti ispod same mape. Klikom na neku od lokacija mapa će se automatski pozicionirati na odabranu lokaciju.

Za početak ćemo napraviti malo mjesta ispod mape

page-home {
  #map {
      width: 100%;
      height: 70%;
  }
}

page-home {

#map {

width: 100%;

height: 70%;

}

Nakon toga napravit ćemo pripremu za ispis lokacija

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3GoogleMaps
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

<div #map id="map"></div>
<ion-list>
  <button ion-item (click)="focusMap(lokacija)" *ngFor="let lokacija of mojeLokacije">
  <ion-icon name="locate" item-left small></ion-icon>
  {{lokacija.name}}
  </button>
</ion-list>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3GoogleMaps

</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<ion-list>

<ion-icon name="locate" item-left small></ion-icon>

</button>

</ion-list>

</ion-content>

I sada smo spremni za kreiranje funkcije koja će nam omogućiti fokus na odabranu lokaciju

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

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElmt: ElementRef;
  map: any;

   mojeLokacije = [
     {
      'name':'Stadion HNK Cibalia',
      'lat':'45.283666',
      'lng':'18.797286'
     },
     {
      'name':'Opća županijska bolnica Vinkovci',
      'lat':'45.292581',
      'lng':'18.818271'
     },
     {
      'name':'Jezero Banja, Vinkovci',
      'lat':'45.286323',
      'lng':'18.784025'
     },
     {
      'name':'Željeznički kolodvor (postaja) Vinkovci',
      'lat':'45.300063',
      'lng':'18.802725'
     }
   ]

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){
    let latLng = new google.maps.LatLng('45.286674','18.802124');
    let mapOptions = {
      center:latLng,
      zoom:11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

    for (let lokacija of this.mojeLokacije){
        this.addMarker(lokacija, lokacija['name']);
    }

  }

  addMarker(posInfo,info){
    let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);

    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: position
    });
    let markerInfo = info;
    this.addInfo(marker, markerInfo);
  }

  addInfo(marker, content){
    let infoWindow = new google.maps.InfoWindow({
      content: content
    });

    google.maps.event.addListener(marker, 'click', () => {
     infoWindow.open(this.map, marker);
    })
  }

  focusMap(lokacija){
   let position = new google.maps.LatLng(lokacija['lat'],lokacija['lng']);
   this.map.setCenter(position);
   this.map.setZoom(15);
  }

}

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

import { NavController } from 'ionic-angular';

declare var google;

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild('map') mapElmt: ElementRef;

map: any;

mojeLokacije = [

{

'name':'Stadion HNK Cibalia',

'lat':'45.283666',

'lng':'18.797286'

{

'name':'Opća županijska bolnica Vinkovci',

'lat':'45.292581',

'lng':'18.818271'

{

'name':'Jezero Banja, Vinkovci',

'lat':'45.286323',

'lng':'18.784025'

{

'name':'Željeznički kolodvor (postaja) Vinkovci',

'lat':'45.300063',

'lng':'18.802725'

}

]

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){

this.loadMap();

}

loadMap(){

let latLng = new google.maps.LatLng('45.286674','18.802124');

let mapOptions = {

center:latLng,

zoom:11,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

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

for (let lokacija of this.mojeLokacije){

this.addMarker(lokacija, lokacija['name']);

}

addMarker(posInfo,info){

let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);

let marker = new google.maps.Marker({

map: this.map,

animation: google.maps.Animation.DROP,

position: position

});

let markerInfo = info;

this.addInfo(marker, markerInfo);

}

addInfo(marker, content){

let infoWindow = new google.maps.InfoWindow({

content: content

});

google.maps.event.addListener(marker, 'click', () => {

infoWindow.open(this.map, marker);

})

}

focusMap(lokacija){

let position = new google.maps.LatLng(lokacija['lat'],lokacija['lng']);

this.map.setCenter(position);

this.map.setZoom(15);

}

Konačni rezultat je vidljiv u nastavku

Zaključak

Ovo je samo dio onoga što se može postići koristeći Google Maps API. Dalje sve ovisi o specifičnim potrebama vaše Ionic aplikacije, ali vjerujem da možete postići sve što želite jer dokumentacija je poprilično detaljna i za svakoga se može pronaći nešto korisno.

{
  "name": "Ionic3-GoogleMaps",
  "version": "0.0.0",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@ionic-native/core": "3.6.1",
    "@ionic-native/splash-screen": "3.6.1",
    "@ionic-native/status-bar": "3.6.1",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.1.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.7",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "ionic-plugin-keyboard",
    "cordova-plugin-splashscreen"
  ],
  "cordovaPlatforms": [],
  "description": "Ionic3GoogleMaps: An Ionic project"
}

{

"name": "Ionic3-GoogleMaps",

"version": "0.0.0",

"author": "Tomislav Stanković",

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

"private": true,

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve"

"dependencies": {

"@angular/common": "4.0.2",

"@angular/compiler": "4.0.2",

"@angular/compiler-cli": "4.0.2",

"@angular/core": "4.0.2",

"@angular/forms": "4.0.2",

"@angular/http": "4.0.2",

"@angular/platform-browser": "4.0.2",

"@angular/platform-browser-dynamic": "4.0.2",

"@ionic-native/core": "3.6.1",

"@ionic-native/splash-screen": "3.6.1",

"@ionic-native/status-bar": "3.6.1",

"@ionic/storage": "2.0.1",

"ionic-angular": "3.1.1",

"ionicons": "3.0.0",

"rxjs": "5.1.1",

"sw-toolbox": "3.4.0",

"zone.js": "^0.8.10"

"devDependencies": {

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

"typescript": "~2.2.1"

"cordovaPlugins": [

"cordova-plugin-whitelist",

"cordova-plugin-console",

"cordova-plugin-statusbar",

"cordova-plugin-device",

"ionic-plugin-keyboard",

"cordova-plugin-splashscreen"

"cordovaPlatforms": [],

"description": "Ionic3GoogleMaps: An Ionic project"

}

Kako ubrzati pokretanje Ionic 3 aplikacije?

Ako koristite Ionic 2 ili Ionic 3 mogli ste primijetiti dugo vrijeme pokretanja aplikacije, kako na iOS tako i na Android platformi. Ja sam ga definitivno primijetio, a vidim da su i mnogi drugi.

Vrijeme potrebno da se aplikacija pokrene nakon Splash Screena kretalo se između 11 i 15 sekundi što nikako nije dobro za korisničko iskustvo.

Uzrok

Kao zadano, Ionic 2 & 3 projekti su u non-AoT stanju što znači da su uvijek u stanju za razvoj (state of development) i to je dobro i korisno za testiranje i rješavanje problema (debugging), ali nije dobro za kreiranje verzija aplikacija koje će koristiti krajnji korisnik.

Builds are now always development (non-AoT) by default. To enable prod builds, use the –prod option. – izvor

AoT (Ahead-of-Time) je termin za build process koji kompajlira predloške i minimizira JS datoteke kako bi se poboljšale performanse aplikacije prilikom pokretanja. Kompajler se pokreće samo prvi put prilikom kreiranja .APK-a tj. .IPA-a tj. ne pokreće se svaki prilikom pokretanja aplikacije i time se postiže veća brzina pokretanja aplikacije i prikaza predložaka. I to je upravo ono što kao developeri želimo.

Problem se javlja zbog toga što je Ionic tim odabrao da zadano stanje bude suprotno od ranije opisanog procesa. I to je razlog sporog pokretanja aplikacije. Može se činiti kao sitnica, ali i kao sitnica koja može izluditi developera koji može krenuti u proces preoptimizacije svoje aplikacije bez uspjeha.

Rješenje –prod

Rješenje svih problema sadržano je u nastavku --prod

//iOS
ionic emulate ios --prod
ionic build ios --prod
ionic run ios --prod

//Android
ionic emulate android --prod
ionic build android --prod
ionic run android --prod

//iOS

ionic emulate ios --prod

ionic build ios --prod

ionic run ios --prod

//Android

ionic emulate android --prod

ionic build android --prod

ionic run android --prod

Nakon dodavanja --prod nastavka možete primijetiti drastično ubrzanje prilikom pokretanja aplikacije s 11 do 15 sekundi na 2-3 sekunde.

Pretpostavimo da želite ubrzati proces pokretanja, ali ne želite minimizirati JS datoteke kako bi mogli jednostavnije testirati i rješavati probleme tj. raditi debugging. U tom slučaju možete koristiti - -aot nastavak.

//iOS
ionic emulate ios --aot
ionic run ios --aot

//Android
ionic emulate android --aot
ionic run android --aot

//iOS

ionic emulate ios --aot

ionic run ios --aot

//Android

ionic emulate android --aot

ionic run android --aot

Na taj način koristite Ahead-of-Time kompajliranje, ali ne minimizirate JS datoteke.

Što ćete od ranije navedenog odabrati ovisi o vašim potrebama u određenom trenutku.

Zaključak

AoT čini drastičnu razliku u vremenu potrebnom za pokretanje Ionic aplikacije. Ionic tim je odabrao non-AoT kao zadano kako bi developerima olakšao proces razvoja što nove developere može odbiti od korištenja Ionic Frameworka jer im neće biti jasno zašto im je aplikacija koju su tek kreirali tako spora.