Arhiva Mobile - Stranica 13 od 18

Ionic 3 – Firebase registracija i prijava

Kada razvijate Ionic aplikaciju i dođete do faze u kojoj trebate funkcionalnosti kao što su registracija i prijava korisnika imate dvije mogućnosti. Napraviti vlastiti API ili koristiti neki vanjski servis kao što su npr. Google Firebase i Auth0. U prvom slučaju imate više kontrole jer točno znate zašto ste nešto napravili dok u drugom slučaju imate više sigurnosti jer velike tvrtke stoje iza usluga koje pružaju i na kojima radi puno developera.

Postavljanje Firebase projekta

Za početak je na adresi https://console.firebase.google.com/ potrebno kreirati projekt.

Nakon postavljanja projekta u izborniku Authentication odabrat ćemo Email/Password metodu. To će nam omogućiti da se u Ionic aplikaciju registriramo tj. prijavimo koristeći email i lozinku.

Sada ćemo se prebaciti na početnu stranicu našeg Google Firebase projekta i kliknuti na Add Firebase to your web app prilikom čega ćemo dobiti config objekt koji ćemo koristiti unutar aplikacije.

Postavljanje Firebasea u Ionic

Ranije preuzet config objekt možemo odmah dodati unutar aplikacije, a nalazit će se unutar datoteke app.firebase.config.ts koju ćemo ručno kreirati.

Međutim, taj nam config objekt ničemu ne služi dok ne dodamo dva paketa koji znaju što s njima raditi. A to su:

koje instaliramo naredbom

$ npm install firebase angularfire2 --save

1	$ npm install firebase angularfire2 --save

I nakon toga, kao što vam je i poznato, trebamo ih uvesti 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 { FIREBASE_CONFIG } from './app.firebase.config';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';

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

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(FIREBASE_CONFIG),
    AngularFireAuthModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  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 { FIREBASE_CONFIG } from './app.firebase.config';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuthModule } from 'angularfire2/auth';

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

@NgModule({

declarations: [

MyApp

imports: [

BrowserModule,

IonicModule.forRoot(MyApp),

AngularFireModule.initializeApp(FIREBASE_CONFIG),

AngularFireAuthModule

bootstrap: [IonicApp],

entryComponents: [

MyApp

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Sada imamo sve što nam je potrebno kako bi korisnicima Ionic aplikacije omogućili registraciju i prijavu koristeći email i lozinku.

Kreiranje stranica za registraciju i prijavu

Stranice za registraciju i prijavu kreiramo sljedećim naredbama

$ ionic generate page Prijava 
$ ionic generate page Registracija

1 2	$ ionic generate page Prijava $ ionic generate page Registracija

Nakon toga ćemo odmah postaviti stranicu za prijavu kao zadanu umjesto dosadašnje Home stranice.

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

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

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      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';

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage:any = 'PrijavaPage';

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

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

statusBar.styleDefault();

splashScreen.hide();

});

}

Registracija

Iako korisnika možemo ručno dodati direktno u Firebase sučelju mi ćemo ga registrirati kroz našu Ionic aplikaciju.

Sada ćemo napraviti formu putem koje će se korisnici registrirati. Forma se sastoji od dva polja. U prvo se polje unosi e-mail, a u drugo lozinka. Na kraju imamo gumb sa funkcijom registracija() u kojoj se prosljeđuje objekt user .

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Registracija</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-item>
<ion-label floating>E-mail</ion-label>
<ion-input type="text" [(ngModel)]="user.email"></ion-input>
</ion-item>

<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [(ngModel)]="user.password"></ion-input>
</ion-item>

<ion-row padding>
  <ion-col>
<button ion-button (click)="registracija(user)">Registracija</button>
   </ion-col>
</ion-row>

</ion-content>

<ion-header>

<ion-navbar color="primary">

<ion-title>Registracija</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-item>

<ion-label floating>E-mail</ion-label>

<ion-input type="text" [(ngModel)]="user.email"></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Password</ion-label>

<ion-input type="password" [(ngModel)]="user.password"></ion-input>

</ion-item>

<ion-row padding>

<ion-col>

<button ion-button (click)="registracija(user)">Registracija</button>

</ion-col>

</ion-row>

</ion-content>

Logika stranice za registraciju nalazi se unutar registracija.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';

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

  user = {email: '', password: ''};

  constructor(public _navCtrl: NavController, 
              public _navParams: NavParams, 
              private _auth: AngularFireAuth) {
  }

  registracija(){
    const result = this._auth.auth.createUserWithEmailAndPassword(this.user.email, this.user.password);
    console.log(result);
  }

}

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

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { AngularFireAuth } from 'angularfire2/auth';

@IonicPage()

@Component({

selector: 'page-registracija',

templateUrl: 'registracija.html',

})

export class RegistracijaPage {

user = {email: '', password: ''};

constructor(public _navCtrl: NavController,

public _navParams: NavParams,

private _auth: AngularFireAuth) {

}

registracija(){

const result = this._auth.auth.createUserWithEmailAndPassword(this.user.email, this.user.password);

console.log(result);

}

Proces registracije na kraju izgleda ovako:

Prijava

Stranica za prijavu također se sastoji od forme za unos s dva polja (e-mail i lozinka), ali ra razliku od stranice za registraciju ova stranica ima dva gumba. Jedan koji služi za prijavu prijava(user) , a drugi idNaRegistraciju() koji vodi na stranicu tj. formu za registraciju.

<ion-item>
<ion-label floating>E-mail</ion-label>
<ion-input type="text" [(ngModel)]="user.email"></ion-input>
</ion-item>

<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [(ngModel)]="user.password"></ion-input>
</ion-item>

<ion-row padding>
  <ion-col>
<button ion-button (click)="prijava(user)">Prijava</button>
   </ion-col>
   <ion-col>
<button ion-button color="light" (click)="idiNaRegistraciju()">Registracija</button>
  </ion-col>
</ion-row>

</ion-content>

<ion-item>

<ion-label floating>E-mail</ion-label>

<ion-input type="text" [(ngModel)]="user.email"></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Password</ion-label>

<ion-input type="password" [(ngModel)]="user.password"></ion-input>

</ion-item>

<ion-row padding>

<ion-col>

<button ion-button (click)="prijava(user)">Prijava</button>

</ion-col>

<ion-col>

<button ion-button color="light" (click)="idiNaRegistraciju()">Registracija</button>

</ion-col>

</ion-row>

</ion-content>

Logika komponente za prijavu malo je proširena za razliku od one za registraciju. Sastoji se od dvije funkcije.

Funkcija prijava(user) obavlja dvije radnje. Vrši prijavu i obavlja redirekciju na stranicu HomePage u slučaju kada je prijava uspješna.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';

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

  user = {email: '', password: ''};

  constructor(public _navCtrl: NavController, 
              public _navParams: NavParams,
              private _auth: AngularFireAuth) {
  }

  prijava(user){
    const result = this._auth.auth.signInWithEmailAndPassword(user.email, user.password);
    if(result){
    console.log(result);
    this._navCtrl.push('HomePage');
    }
  }

  idiNaRegistraciju(){
     this._navCtrl.push('RegistracijaPage');
  }

}

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

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { AngularFireAuth } from 'angularfire2/auth';

@IonicPage()

@Component({

selector: 'page-prijava',

templateUrl: 'prijava.html',

})

export class PrijavaPage {

user = {email: '', password: ''};

constructor(public _navCtrl: NavController,

public _navParams: NavParams,

private _auth: AngularFireAuth) {

}

prijava(user){

const result = this._auth.auth.signInWithEmailAndPassword(user.email, user.password);

if(result){

console.log(result);

this._navCtrl.push('HomePage');

}

idiNaRegistraciju(){

this._navCtrl.push('RegistracijaPage');

}

Proces prijave izgleda ovako:

Zaključak

I to je sve! Vidjeli ste primjer Google Firebase registracije i prijave za Ionic 3 projekt. Dalje si možete ugraditi mogućnost pamćenja prijave tako da se jednom prijavljeni korisnik ne mora prijaviti svaki put kada pokrene aplikaciju.

Google Firebase Auth odlična je opcija kada želite pokriti područje registracije i prijave. Za kratko vrijeme možete dobiti funkcionalnu aplikaciju spremnu za implementaciju ostalih funkcionalnosti.

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"

}