Arhiva Ionic 3 - Stranica 4 od 8 - Tomislav Stanković

Ionic – RxJS Observable Timer

U ovom ću blog postu pokazati kako koristeći RxJS Observable upravljati pozivanjem API-ja u određenim vremenskim intervalima.

Primjer se temelji na blog postu pod nazivom ‘Ionic 3 – Autocomplete polje za unos‘ kojeg sam objavio prije pola godine.

Prvo kreiram novu Ionic aplikaciju

$ ionic start Ionic3RxJS blank 
$ cd Ionic3RxJS

1 2	$ ionic start Ionic3RxJS blank $ cd Ionic3RxJS

Nakon toga mogu kreirati servis pod nazivom ApiProvider

$ ionic generate provider ApiProvider

1	$ ionic generate provider ApiProvider

koji na početku izgleda ovako

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
 
@Injectable()
export class ApiProvider {
 
  constructor(public _http: Http) {
    console.log('Hello ApiProvider Provider');
  }
 
  loadData(){
    return this._http.get('https://restcountries.eu/rest/v2/all')
      .map(res => res.json());
  }
 
}

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

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()

export class ApiProvider {

constructor(public _http: Http) {

console.log('Hello ApiProvider Provider');

}

loadData(){

return this._http.get('https://restcountries.eu/rest/v2/all')

.map(res => res.json());

}

Gore se može vidjeti običan servis koji služi za pozivanje API-ja s popisom država. API će se pozvati isključivo nakon određene akcije korisnika. To može biti npr. na klik, prilikom otvaranja neke stranice unutar aplikacije ili na neki treći način.

Međutim, što napraviti ako želim u određenom vremenskom intervalu ponovno pozvati API kako bi se podaci osvježili bez da to korisnik mora učiniti?

U tom slučaju unutar servisa mogu definirati Observable.timer(x,x) koji prima dva parametra. Prvi parameter označava broj milisekundi nakon kojih će se API pozvati, a drugi označava svakih koliko milisekundi će se API ponovno pozvati.

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

import { Observable } from 'rxjs';

@Injectable()
export class ApiProvider {

  constructor(public _http: Http) {
    console.log('Hello ApiProvider Provider');
  }
  
   timer = Observable.timer(0, 6000);

  loadData = () => {
    return this.timer
      .flatMap((i) => this._http.get("https://restcountries.eu/rest/v2/all"))
	  .map(res => res.json());
  }

}

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

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

import { Observable } from 'rxjs';

@Injectable()

export class ApiProvider {

constructor(public _http: Http) {

console.log('Hello ApiProvider Provider');

}

timer = Observable.timer(0, 6000);

loadData = () => {

return this.timer

.flatMap((i) => this._http.get("https://restcountries.eu/rest/v2/all"))

.map(res => res.json());

}

U ovom slučaju API će prvi put dovući podatke bez odgode, a kasnije će to činiti svakih 6 sekundi. Posebno zanimljiva je i činjenica da će se API nastaviti pozivati čak i u slučaju kada aplikacije nije pokrenuta.

Za one koji žele znati više:

– FlatMap
– Using Observables at an interval

Ionic 3 – Spremanje i slanje podataka kada nema interneta

Jedna od osnovnih funkcionalnosti koju volim vidjeti u mobilnim aplikacijama je mogućnost rada izvan mreže (offline) tj. kada mobilni uređaj nije povezan s internetom.

Pretpostavimo da aplikacija ima nekakvu formu za unos koju je potrebno ispuniti i da se klikom na gumb ‘Pošalji podatke’ ništa ne događa. Možda tek eventualno bude nekakva poruka da trenutno nema mrežne povezanosti i zato nije moguće spremiti unesene podatke. Najgora stvar koja se onda može dogoditi je da aplikacija ne zapamti unesene podatke i da ih korisnik kasnije mora ponovno upisivati.

U ovom ću blog postu obraditi scenarij mobilne aplikacija koja ima nekakvu formu za unos koju je moguće ispuniti i spremiti podatke neovisno i povezanosti s internetom. Korisniku je najbitnije da ne mora više puta unositi podatke ili razmišljati zašto ih nije u mogućnosti spremiti.

Provjera povezanosti s mrežom

O ovoj sam temi također objavio blog post. Prije svega moram nekako dobiti informaciju postoji li povezanost s internetom ili ne. U slučaju Ionica to se saznaje koristeći Ionic Native Network plugin.

Napravim servis npr. network-service.ts kojemu će jedina i osnovna svrha biti provjera povezanosti s internetom. Dalje, na svakoj stranici mobilne aplikacije pozivam taj servis ili prilikom klika na gumb ‘Pošalji podatke’ i ako dobijem informaciju da nema povezanosti s internetom automatski znam da nešto drugo s tim podacima trebam učiniti, a to je – spremiti ih u lokalnu bazu podataka.

 provjeraInterneta(){
      if(this._networkService.isOnline()){
       console.log('Ima interneta!');
       //Odmah šalji podatke na API
        }else{
        console.log('Nema interneta!');
        //Spremi podatke u SQLite bazu
    }
}

provjeraInterneta(){

if(this._networkService.isOnline()){

console.log('Ima interneta!');

//Odmah šalji podatke na API

}else{

console.log('Nema interneta!');

//Spremi podatke u SQLite bazu

}

Spremanje podataka u lokalnu SQLite bazu

O ovoj sam temi također objavio blog post. Kada sam u prethodnom koraku dobio informaciju da ne postoji povezanost s internetom odlučujem se na spremanje podataka lokalno na mobilni uređaj. Kako bi to mogao učiniti moram prvo kreirati lokalnu bazu podataka, a to činim koristeći Ionic Native SQLite plugin.

Najbolje je opet napraviti poseban servis, npr. database-service.ts, koji će služiti za sve radnje (kreiranje baze, kreiranje tablica, spremanje, prikaz i brisanje podataka) povezane sa SQLite bazom.

Klikom na gumb ‘Pošalji podatke’ sada se događa sljedeće. U SQLite tablicu mojaLokalnaTablica spremam podatke unesene u formu. Podaci su u obliku objekta this.podaciIzForme.

provjeraInterneta(){
      if(this._networkService.isOnline()){
       console.log('Ima interneta!');
       //Odmah šalji podatke na API
        }else{
        console.log('Nema interneta!');
        this._database.mojaLokalnaTablica(this.podaciIzForme);
    }
}

provjeraInterneta(){

if(this._networkService.isOnline()){

console.log('Ima interneta!');

//Odmah šalji podatke na API

}else{

console.log('Nema interneta!');

this._database.mojaLokalnaTablica(this.podaciIzForme);

}

Na ovaj način korisnik može bez problema unositi podatke neovisno o povezanosti s internetom jer će se svi podaci spremiti u lokalnu SQLite bazu podataka koja se nalazi na mobilnom uređaju.

Korisno je dati korisniku i nekakvu obavijest o ne postojanju povezanosti s internetom čisto iz razloga ako se odluči npr. otići na računalo i u nekakvoj web aplikaciji provjeriti podatke koje je maloprije poslao, da se ne iznenadi ako ih u tom trenutku ne vidi. Bitno je da su podaci spremljeni i da će biti poslani čim se ostvari povezanost s internetom.

Automatsko slanje podataka / sinkronizacija

Sada dolazim do dijela koji je u ovoj priči najvažniji. Znači, korisnik je bez problema koristio mobilnu aplikaciju i nekoliko puta unosio različite podatke u formu za unos i svi ti podaci su privremeno spremljeni u lokalnu SQLite bazu podataka.

U ovom je koraku ključno prepoznati trenutak kada se ponovno uspostavi povezanost s internetom i sve ranije spremljene podatke poslati na API te istovremeno isprazniti lokalnu bazu podataka.

Na početnoj stranici mobilne aplikacije mogu pozvati funkciju provjeraInterneta() koja će svaki put kada se dođe na početnu stranicu provjeravati postoji li povezanost s internetom i ako postoji odmah će poslati sve lokalne podatke te isprazniti lokalnu bazu.

provjeraInterneta(){
      if(this._networkService.isOnline()){
       console.log('Ima interneta!');
         this.posaljiLokalnePodatke();
        }else{
        console.log('Ne šaljem podatke! Nema interneta!');
    }
}

provjeraInterneta(){

if(this._networkService.isOnline()){

console.log('Ima interneta!');

this.posaljiLokalnePodatke();

}else{

console.log('Ne šaljem podatke! Nema interneta!');

}

Sada na početnoj stranici radim sljedeće. Pozivam servis koji provjerava povezanost s internetom. Ako postoji veza s internetom pozivam funkciju posaljiLokalnePodatke(). Ta funkcija dohvaća niz (array) svih objekata koji su spremljeni u lokalnu SQLite bazu i šaljem ih na API. Kada stigne odgovor od API-ja da su podaci uspješno primljeni krećem s brisanjem lokalne baze podataka this._database.isprazniLokalnuTablicu().

posaljiLokalnePodatke(){
     this._database.getOfflineTable().then((result) => {
            this.mojaLokalnaTablicaNiz = <Array<Object>> result;
            if(this.mojaLokalnaTablica.length != 0){
            for(var i = 0; i < this.mojaLokalnaTablica.length; i++){
              this._api.posaljiPodatke(this.mojaLokalnaTablica[i]).subscribe(res => {
              if(res.status == true){
                 this._database.isprazniLokalnuTablicu();
              }
         }); 
            }}
        }, (error) => {
            console.log("ERROR: ", error);
        });
   }

posaljiLokalnePodatke(){

this._database.getOfflineTable().then((result) => {

this.mojaLokalnaTablicaNiz = <Array<Object>> result;

if(this.mojaLokalnaTablica.length != 0){

for(var i = 0; i < this.mojaLokalnaTablica.length; i++){

this._api.posaljiPodatke(this.mojaLokalnaTablica[i]).subscribe(res => {

if(res.status == true){

this._database.isprazniLokalnuTablicu();

}

});

}}

}, (error) => {

console.log("ERROR: ", error);

});

}

Zaključak

Ovo je pojednostavljeni primjer kako korisnicima mobilne aplikacije omogućiti da unose podatke i onda kada ne postoji povezanost s internetom.

Ionic 3 – podrška za vibraciju

S obzirom da za nekoliko sati stiže Božić potrudit ću se ovaj blog post učiniti što konkretnijim bez puno okolišanja. U nastavku ću pokazati kako u Ionic aplikaciju dodati podršku za vibraciju.

Priprema Ionic projekta

Za početak kreiram novi Ionic projekt.

$ ionic start Ionic3VibrateApp blank
$ cd Ionic3VibrateApp
$ ionic serve

$ ionic start Ionic3VibrateApp blank

$ cd Ionic3VibrateApp

$ ionic serve

Sada ću instalirati Ionic Native Vibration plugin:

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

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

Nakon toga, kako je i navedeno u službenoj dokumentaciji, dodajem plugin unutar app.module.ts

import { Vibration } from '@ionic-native/vibration';
...
 
@NgModule({
  ...
  providers: [
    ...
    Vibration 
    ...
  ]
  ...
})
export class AppModule { }

import { Vibration } from '@ionic-native/vibration';

...

@NgModule({

...

providers: [

...

Vibration

...

]

...

})

export class AppModule { }

Za potrebu ovog blog posta napravit ću tri funkcije

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

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

  constructor(public navCtrl: NavController,
              private _vibration: Vibration) {

  }


  vibrate1(){
  // Vibrate the device for a second
  // Duration is ignored on iOS.
     this._vibration.vibrate(1000);
  }

  vibrate2(){
  // Vibrate 2 seconds
  // Pause for 1 second
  // Vibrate for 2 seconds
  // Patterns work on Android and Windows only
     this._vibration.vibrate([2000,1000,2000]);
  }


  vibrate3(){
  // Stop any current vibrations immediately
  // Works on Android and Windows only
     this._vibration.vibrate(0);
  }

}

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

import { NavController } from 'ionic-angular';

import { Vibration } from '@ionic-native/vibration';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController,

private _vibration: Vibration) {

}

vibrate1(){

// Vibrate the device for a second

// Duration is ignored on iOS.

this._vibration.vibrate(1000);

}

vibrate2(){

// Vibrate 2 seconds

// Pause for 1 second

// Vibrate for 2 seconds

// Patterns work on Android and Windows only

this._vibration.vibrate([2000,1000,2000]);

}

vibrate3(){

// Stop any current vibrations immediately

// Works on Android and Windows only

this._vibration.vibrate(0);

}

I napraviti tri gumba koji će aktivirati te funkcije

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Vibrate
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="vibrate1()">Vibrate 1</button>
  <button ion-button (click)="vibrate2()">Vibrate 2</button>
  <button ion-button (click)="vibrate3()">Vibrate 3</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Vibrate

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button (click)="vibrate1()">Vibrate 1</button>

<button ion-button (click)="vibrate2()">Vibrate 2</button>

<button ion-button (click)="vibrate3()">Vibrate 3</button>

</ion-content>

Zaključak

Vibracija je jedna od onih funkcionalnosti koja nekoj mobilnoj aplikaciji može dati završni sjaj ili ju učiniti odbojnom korisnicima i zato treba ju treba pažljivo koristiti.

I za kraj, struktura projekta prema package.json

{
    "name": "Ionic3VibrateApp",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.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": "5.0.3",
        "@angular/compiler": "5.0.3",
        "@angular/compiler-cli": "5.0.3",
        "@angular/core": "5.0.3",
        "@angular/forms": "5.0.3",
        "@angular/http": "5.0.3",
        "@angular/platform-browser": "5.0.3",
        "@angular/platform-browser-dynamic": "5.0.3",
        "@ionic-native/core": "4.4.0",
        "@ionic-native/splash-screen": "4.4.0",
        "@ionic-native/status-bar": "4.4.0",
        "@ionic-native/vibration": "^4.5.2",
        "@ionic/storage": "2.1.3",
        "cordova-android": "^6.2.3",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-ionic-webview": "^1.1.11",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-vibration": "^2.1.6",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "3.9.2",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.5.2",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@ionic/app-scripts": "3.1.6",
        "typescript": "2.4.2"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-vibration": {},
            "cordova-plugin-device": {},
            "cordova-plugin-ionic-webview": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android"
        ]
    }
}

{

"name": "Ionic3VibrateApp",

"version": "0.0.1",

"author": "Ionic Framework",

"homepage": "http://ionicframework.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": "5.0.3",

"@angular/compiler": "5.0.3",

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

"@angular/core": "5.0.3",

"@angular/forms": "5.0.3",

"@angular/http": "5.0.3",

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

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

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

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

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

"@ionic-native/vibration": "^4.5.2",

"@ionic/storage": "2.1.3",

"cordova-android": "^6.2.3",

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

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

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

"cordova-plugin-vibration": "^2.1.6",

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

"ionic-angular": "3.9.2",

"ionic-plugin-keyboard": "^2.2.1",

"ionicons": "3.0.0",

"rxjs": "5.5.2",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.18"

"devDependencies": {

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

"typescript": "2.4.2"

"description": "An Ionic project",

"cordova": {

"plugins": {

"cordova-plugin-vibration": {},

"cordova-plugin-device": {},

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

"cordova-plugin-splashscreen": {},

"cordova-plugin-whitelist": {},

"ionic-plugin-keyboard": {}

"platforms": [

"android"

]

}

Ionic 3 & Google Maps – prikaz rute između dvije lokacije

U ovom ću blog postu koristiti Google Maps Directions API za prikaz rute od jedne do druge lokacije. Također, ovaj će blog post biti vrlo sličan jednom kojeg sam objavio ranije ove godine pod naslovom “Ionic 3 – Prikaz Google mape“.

Priprema Ionic projekta

Za početak kreiram novi Ionic projekt.

$ ionic start IonicGoogleMapsDirections blank
$ cd IonicGoogleMapsDirections
$ ionic serve

$ ionic start IonicGoogleMapsDirections blank

$ cd IonicGoogleMapsDirections

$ ionic serve

Aplikacija sada nema nikakve funkcionalnosti pa ću prije nego implementiram Google Maps Directions API implementirati Lazy Loading. Ovaj korak nije potreban i može se bez njega, ali će dobro za kasnije brže učitavanje aplikacije.

Prvi korak koji je potrebno učiniti tiče se stranice ‘src/app/app.module.ts’ u kojoj je potrebno ukloniti sve poveznice na Home stranicu.

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

@NgModule({
  declarations: [
    MyApp
    //HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
    //HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {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 { 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,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Nakon toga kreiram novu stranicu ‘src/pages/home/home.module.ts’ sa sljedećim sadržajem

import { NgModule } from '@angular/core';
import { HomePage} from './home';
import { IonicPageModule } from 'ionic-angular';

@NgModule({
  declarations: [HomePage],
  imports: [IonicPageModule.forChild(HomePage)],
  entryComponents: [HomePage]
})
export class HomePageModule { }

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

import { HomePage} from './home';

import { IonicPageModule } from 'ionic-angular';

@NgModule({

declarations: [HomePage],

imports: [IonicPageModule.forChild(HomePage)],

entryComponents: [HomePage]

})

export class HomePageModule { }

Sada se vraćam na stranicu ‘src/pages/home/home.ts’ unutar koje moram dodati IonicPage pa to sada izgleda ovako

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

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

  constructor(public navCtrl: NavController) {

  }

}

import { IonicPage } from 'ionic-angular';

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

import { NavController } from 'ionic-angular';

@IonicPage()

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController) {

}

I za kraj odlazim u ‘src/app/app.component.ts’ gdje uklanjam import na HomePage stranicu i stavljam ju pod navodnike jer tako funkcionira Lazy Loading.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

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

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'HomePage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

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

import { Platform } from 'ionic-angular';

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

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

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

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage:any = 'HomePage';

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

platform.ready().then(() => {

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

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

statusBar.styleDefault();

splashScreen.hide();

});

}

Google Developer konzola

Odlazim na stranicu https://console.developers.google.com/ i ondje kreiram novi projekt.

Nakon toga idem na ‘Enable Apis And Services‘ kako bi odabrao i aktivirao API koji želim koristiti.

U tražilicu upisujem ‘Google Maps‘ i dobijem popis svih povezanih API-ja.

Aktiviram Google Maps Directions API.

Nakon što sam aktivirao API moram kreirati jedinstveni ključ koji ću kasnije biti dio Ionic aplikacije.

I konačno, imam jedinstveni API ključ.

Ugrađivanje API-ja u aplikaciju

API ključ koji sam maloprije kreirao u aplikaciju ugrađujem tako da unutar datoteke ‘src/app/index.html’ unutar <head> taga upisujem

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

1	<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

Sada mogu napraviti glavnu funkcionalnost unutar datoteke ‘src/pages/home/home.ts’. U ovom slučaju odabirem travelMode: 'DRIVING' jer želim prikazati cestovnu rutu. Detaljnije o drugim opcijama na poveznici https://developers.google.com/maps/documentation/javascript/directions

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

declare var google;

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

  @ViewChild('map') mapElement: ElementRef;
  map: any;
  start = 'vinkovci, hr';
  end = 'vinkovci, hr';
  directionsService = new google.maps.DirectionsService;
  directionsDisplay = new google.maps.DirectionsRenderer;

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.initMap();
  }

  initMap() {
    this.map = new google.maps.Map(this.mapElement.nativeElement, {
      zoom: 7,
      center: {lat: 41.85, lng: -87.65}
    });

    this.directionsDisplay.setMap(this.map);
  }

  calculateAndDisplayRoute() {
    this.directionsService.route({
      origin: this.start,
      destination: this.end,
      travelMode: 'DRIVING'
    }, (response, status) => {
      if (status === 'OK') {
        this.directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

}

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

import { IonicPage } from 'ionic-angular';

import { NavController } from 'ionic-angular';

declare var google;

@IonicPage()

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild('map') mapElement: ElementRef;

map: any;

start = 'vinkovci, hr';

end = 'vinkovci, hr';

directionsService = new google.maps.DirectionsService;

directionsDisplay = new google.maps.DirectionsRenderer;

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){

this.initMap();

}

initMap() {

this.map = new google.maps.Map(this.mapElement.nativeElement, {

zoom: 7,

center: {lat: 41.85, lng: -87.65}

});

this.directionsDisplay.setMap(this.map);

}

calculateAndDisplayRoute() {

this.directionsService.route({

origin: this.start,

destination: this.end,

travelMode: 'DRIVING'

}, (response, status) => {

if (status === 'OK') {

this.directionsDisplay.setDirections(response);

} else {

window.alert('Directions request failed due to ' + status);

}

});

}

Izgled ekrana sastojat će se od pregleda Google mape i mogućnosti odabira lokacija u gornjem desnom kutu ekrana.

<ion-content>
  <div id="floating-panel">
    <b>Start: </b>
    <select [(ngModel)]="start" id="start" (change)="calculateAndDisplayRoute()">
      <option value="vinkovci, hr">Vinkovci</option>
	  <option value="osijek, hr">Osijek</option>
	  <option value="split, hr">Split</option>
	  <option value="zagreb, hr">Zagreb</option>
	  <option value="cakovec, hr">Čakovec</option>
	  <option value="dubrovnik, hr">Dubrovnik</option>
    </select><br>
    <b>End: </b>
    <select [(ngModel)]="end" id="end" (change)="calculateAndDisplayRoute()">
      <option value="vinkovci, hr">Vinkovci</option>
	  <option value="osijek, hr">Osijek</option>
	  <option value="split, hr">Split</option>
	  <option value="zagreb, hr">Zagreb</option>
	  <option value="cakovec, hr">Čakovec</option>
	  <option value="dubrovnik, hr">Dubrovnik</option>
    </select>
    </div>
    <div #map id="map"></div>
</ion-content>

<ion-content>

<b>Start: </b>

<option value="vinkovci, hr">Vinkovci</option>

<option value="osijek, hr">Osijek</option>

<option value="split, hr">Split</option>

<option value="zagreb, hr">Zagreb</option>

<option value="cakovec, hr">Čakovec</option>

<option value="dubrovnik, hr">Dubrovnik</option>

</select><br>

<option value="vinkovci, hr">Vinkovci</option>

<option value="osijek, hr">Osijek</option>

<option value="split, hr">Split</option>

<option value="zagreb, hr">Zagreb</option>

<option value="cakovec, hr">Čakovec</option>

<option value="dubrovnik, hr">Dubrovnik</option>

</select>

</div>

</ion-content>

Pozicioniranje padajućeg izbornika CSS-om.

page-home {
  #floating-panel {
    position: absolute;
    top: 10px;
    right: 5px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
  }
  #map {
    height: 100%;
  }
}

page-home {

#floating-panel {

position: absolute;

top: 10px;

right: 5px;

z-index: 5;

background-color: #fff;

padding: 5px;

border: 1px solid #999;

text-align: center;

font-family: 'Roboto','sans-serif';

line-height: 30px;

padding-left: 10px;

}

#map {

height: 100%;

}

I konačno, aplikacija sada izgleda ovako

Ionic 3 desktop aplikacija

Iako sam do sada o Ionicu pisao samo u kontekstu mobilnih aplikacija nedavno sam naišao na primjere korištenja Ionica kao cross-platform desktop aplikacije što mi se učinilo zanimljivim pa sam odlučio nešto više saznati o tome i napisati ovaj blog post.

Što je Electron?

Electron je framework za razvoj cross-platform desktop aplikacija koristeći JavaScript, HTML i CSS. S tehnologijama koje koristi jako podsjeća na Ionic, a omogućava razvoj desktop aplikacija koje se mogu pokrenuti na Windows, Mac i Linux platformi.

Priprema Ionic projetka

Za početak ćemo kreirati novi Ionic projekt.

$ ionic start Ionic3ElectronApp sidemenu
$ cd Ionic3ElectronApp
$ ionic serve

$ ionic start Ionic3ElectronApp sidemenu

$ cd Ionic3ElectronApp

$ ionic serve

Kada aplikaciju pokrenemo nećemo vidjeti ništa što već ranije nismo vidjeli. Standardna Ionic aplikacija koja se pokreće u web pregledniku kao što je npr. Google Chrome.

Postavljanje Electron projekta

Sada je potrebno dodati Electron unutar našeg Ionic projekta koristeći naredbu:

$ npm install electron --save

1	$ npm install electron --save

Sve dalje opisane korake radimo prema službenoj dokumentaciji na adresi https://electron.atom.io/docs/

Sada ćemo kreirati datoteku main.js koja će biti ulazna točka prilikom pokretanja Ionic-Electron aplikacije. Više o ovoj datoteci možete pronaći na adresi https://electron.atom.io/docs/tutorial/quick-start/

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'www/index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

const {app, BrowserWindow} = require('electron')

const path = require('path')

const url = require('url')

// Keep a global reference of the window object, if you don't, the window will

// be closed automatically when the JavaScript object is garbage collected.

let win

function createWindow () {

// Create the browser window.

win = new BrowserWindow({width: 800, height: 600})

// and load the index.html of the app.

win.loadURL(url.format({

pathname: path.join(__dirname, 'www/index.html'),

protocol: 'file:',

slashes: true

}))

// Open the DevTools.

win.webContents.openDevTools()

// Emitted when the window is closed.

win.on('closed', () => {

// Dereference the window object, usually you would store windows

// in an array if your app supports multi windows, this is the time

// when you should delete the corresponding element.

win = null

})

}

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

// Some APIs can only be used after this event occurs.

app.on('ready', createWindow)

// Quit when all windows are closed.

app.on('window-all-closed', () => {

// On macOS it is common for applications and their menu bar

// to stay active until the user quits explicitly with Cmd + Q

if (process.platform !== 'darwin') {

app.quit()

}

})

app.on('activate', () => {

// On macOS it's common to re-create a window in the app when the

// dock icon is clicked and there are no other windows open.

if (win === null) {

createWindow()

}

})

// In this file you can include the rest of your app's specific main process

// code. You can also put them in separate files and require them here.

Osim te datoteke moramo unutar package.json dodati dvije važne naredbe.

"main": "main.js" služi kako bi se znalo koju datoteku gledati kada se projekt pokrene kao Electron aplikacija.

"start": "electron ." služi kao naredba za pokretanje Electron aplikacije.

{
  "name": "Ionic3ElectronApp",
  "version": "0.0.1",
  "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",
    "start": "electron ."
  },
  "dependencies": {
    "@angular/common": "4.4.4",
    "@angular/compiler": "4.4.4",
    "@angular/compiler-cli": "4.4.4",
    "@angular/core": "4.4.4",
    "@angular/forms": "4.4.4",
    "@angular/http": "4.4.4",
    "@angular/platform-browser": "4.4.4",
    "@angular/platform-browser-dynamic": "4.4.4",
    "@ionic-native/core": "4.3.2",
    "@ionic-native/splash-screen": "4.3.2",
    "@ionic-native/status-bar": "4.3.2",
    "@ionic/storage": "2.0.1",
    "electron": "^1.7.9",
    "ionic-angular": "3.8.0",
    "ionicons": "3.0.0",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.0.1",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project",
  "main": "main.js"
}

{

"name": "Ionic3ElectronApp",

"version": "0.0.1",

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

"start": "electron ."

"dependencies": {

"@angular/common": "4.4.4",

"@angular/compiler": "4.4.4",

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

"@angular/core": "4.4.4",

"@angular/forms": "4.4.4",

"@angular/http": "4.4.4",

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

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

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

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

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

"@ionic/storage": "2.0.1",

"electron": "^1.7.9",

"ionic-angular": "3.8.0",

"ionicons": "3.0.0",

"rxjs": "5.4.3",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.18"

"devDependencies": {

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

"typescript": "2.3.4"

"description": "An Ionic project",

"main": "main.js"

}

Spremni smo za kreiranje skripte buildElectron.sh koja će obaviti nekoliko radnji automatski tako da ih ne moramo svaki put ručno pokretati.

ionic cordova build browser --prod
rm -rf www/*
cp -r platforms/browser/www/* www/
npm start

ionic cordova build browser --prod

rm -rf www/*

cp -r platforms/browser/www/* www/

npm start

I konačno, Ionic-Electron aplikaciju možemo pokrenuti naredbom ./buildElectron.sh

ili dvoklikom na ikonu buildElectron skripte unutar našeg projekta.

nakon čega dobijemo našu Ionic aplikaciju unutar Electrona.

Možete primijetiti da se prilikom pokretanja aplikacije automatski pokrenuo i Developer Tools. To možemo spriječiti ako unutar main.js datoteke zakomentiramo win.webContents.openDevTools().

Dizajn i prilagodba sučelja

Dizajn trenutno kreirane aplikacije prilagođen je mobilnim uređajima i ako ju raširimo preko cijelog ekrana nekog desktop uređaja to neće izgledati lijepo jer će npr. popis stavki ići jedan ispod drugog preko cijelog ekrana umjesto da se fino rasporedi po nekoliko stavki u jedan red.

Ovo ćemo prikazati na primjeru stranice list.html

To ćemo riješiti korištenjem Ionic Grida.

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>List</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col *ngFor="let item of items" (click)="itemTapped($event, item)" col-12 col-md-6 col-lg-4 col-xl-3>
          <ion-card>
              <ion-card-header>{{item.title}}</ion-card-header>
              <ion-card-content>{{item.note}}</ion-card-content>
          </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>
</ion-content>

<ion-header>

<ion-navbar>

<ion-icon name="menu"></ion-icon>

</button>

<ion-title>List</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<ion-grid>

<ion-row>

<ion-col *ngFor="let item of items" (click)="itemTapped($event, item)" col-12 col-md-6 col-lg-4 col-xl-3>

<ion-card>

<ion-card-header>{{item.title}}</ion-card-header>

<ion-card-content>{{item.note}}</ion-card-content>

</ion-card>

</ion-col>

</ion-row>

</ion-grid>

You navigated here from <b>{{selectedItem.title}}</b>

</div>

</ion-content>

Konačan izgled na većem ekranu je sljedeći

Produkcijska verzija Electron aplikacije

Kada smo zadovoljni s našom aplikacijom možemo kreirati produkcijsku verziju.

Prije nego to napravimo moramo instalirati Electron Packager. To možemo učiniti naredbom $ npm install -g electron-packager

Nakon toga ćemo kreirati produkcijsku verziju Electron aplikacije za Windows OS.

$ electron-packager . Ionic3ElectronApp --overwrite --platform=win32 --arch=x64 --prune=true --out=release-builds

1	$ electron-packager . Ionic3ElectronApp --overwrite --platform=win32 --arch=x64 --prune=true --out=release-builds

Proces kreiranja produkcijske verzije Electron aplikacije za Windows, Mac ili Linux može se olakšati i ubrzati na sljedeći način.

U datoteku package.json dodajemo

{
    "name": "Ionic3ElectronApp",
    "version": "0.0.1",
    "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",
        "start": "electron .",
        "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
        "package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"",    
        "package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"
    },

{

"name": "Ionic3ElectronApp",

"version": "0.0.1",

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

"start": "electron .",

"package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",

"package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"",

"package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"

I onda se proces kreiranja produkcijske verzije Electron desktop aplikacije pokreće sljedećim naredbama:
– Windows OS: npm run package-win
– Mac: npm run package-mac
– Linux: npm run package-linux

Zaključak

Iz ovog ste blog posta mogli vidjeti kako Ionic mobilnu aplikaciju pretvoriti u cross-platform destkop aplikaciju pa iako se to čini zanimljivim i očito da je moguće osobno se ne planiram detaljnije tome posvetiti. Također, ne treba zanemariti niti činjenicu da na tu temu ne postoji dovoljno primjera i dokumentacije.