Tomislav Stanković, Autor na Tomislav Stanković

Ionic 2 – Events, upravljanje događajima

Prije ili kasnije susrest ćete se s potrebom pokretanja nekog događaja (event) u jednoj komponenti i dohvaćanja tog događaja u drugoj komponenti kao što se dogodilo ovom StackOverflow korisniku, a koji me i potaknuo na objavu ovog blog posta.

Ionic 2 koristi Events API koji omogućava objavu nekog događaja i mogućnost pretplate na taj događaj na razini aplikacije tj. u bilo kojoj drugoj komponenti. Događaj može biti varijabla, objekt ili nekakva funkcija. Ovisi što vam treba.

Recimo da je jedan od scenarija kada se korisnik prijavi u aplikaciju i otvori izbornik (sidemenu) da odmah vidi svoje korisničko ime, sliku i npr. email. S obzirom da se prijava u aplikaciju vrši u jednoj komponenti login.ts, a logika izbornika se nalazi u drugoj komponenti app.component.ts potrebno je nekako omogućiti da komponenta 2 osluškuje što se događa u komponenti 1 i da reagira prema tome.

Kako koristiti Ionic 2 Events?

U nastavku možete vidjeti primjer iz službene Ionic 2 dokumentacije.

import { Events } from 'ionic-angular';

constructor(public events: Events) {}

// first page (publish an event when a user is created)
function createUser(user) {
  console.log('User created!')
  events.publish('user:created', user, Date.now());
}

// second page (listen for the user created event)
events.subscribe('user:created', (user, time) => {
  // user and time are the same arguments passed in `events.publish(user, time)`
  console.log('Welcome', user, 'at', time);
});

import { Events } from 'ionic-angular';

constructor(public events: Events) {}

// first page (publish an event when a user is created)

function createUser(user) {

console.log('User created!')

events.publish('user:created', user, Date.now());

}

// second page (listen for the user created event)

events.subscribe('user:created', (user, time) => {

// user and time are the same arguments passed in `events.publish(user, time)`

console.log('Welcome', user, 'at', time);

});

Jedino što trebamo napraviti kako bi mogli koristiti Ionic 2 Events je u obje komponente uvesti import { Events } from 'ionic-angular';. Znači, nije potrebna instalacija nikakvog dodatka.

Za one koji žele znati više

Obradit ćemo scenarij u kojemu želimo prikazati korisničko ime i email u izborniku (sidemenu) od korisnika koji se upravo prijavio u mobilnu aplikaciju.

U login.ts vršimo prijavu korisnika i ovdje kreiramo događaj _events.subscribe.

import { Events } from 'ionic-angular';
constructor(public _events: Events) {
}

logIn() {
   localStorage.setItem('username', res.username);
   localStorage.setItem('email', res.email);
_events.publish('user:login');
}

import { Events } from 'ionic-angular';

constructor(public _events: Events) {

}

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

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

_events.publish('user:login');

}

U app.component.ts se pretplaćujemo _events.publish na taj događaj.

import { Events } from 'ionic-angular';

constructor(public _events: Events) {
_events.subscribe('user:login', () => {
  this.loggedIn();
});
}

loggedIn() {
   this.username = localStorage.getItem('username');
   this.email = localStorage.getItem('email');
}

import { Events } from 'ionic-angular';

constructor(public _events: Events) {

_events.subscribe('user:login', () => {

this.loggedIn();

});

}

loggedIn() {

this.username = localStorage.getItem('username');

this.email = localStorage.getItem('email');

}

Zaključak

I to je sve. Kratak blog post, ali zato vrlo koristan. Za više informacija posjetite službenu dokumentaciju.

Google Drive REST API & Ionic 2 – prikaz podataka

U ovom ćemo blog postu napraviti primjer Ionic 2 aplikacije koja prikazuje podatke izravno s Google Diska pomoću Google Drive REST API-ja.

Najveći fokus biti će na postavljanju Google Drive API-ja kako bi dobili URL, na koji ćemo slati GET zahtjev, koji se onda može koristiti u svim vrstama mobilnih i web aplikacija. Ovdje je sada slučajno ispalo da će se prikaz vršiti u Ionic 2 aplikaciji, ali isto tako mogli smo napraviti običnu Angular 2 web aplikaciju ili nešto treće.

Jedna od najvećih prednosti korištenja Google Drive API-ja je što ne morate raditi svoj API jer to ipak zahtjeva nešto više vremena i znanja kako bi se sve postavilo i bilo spremno za korištenje. U ovom slučaju Google se brine za sve, a na vama je samo da smislite način kako najbolje iskoristiti to što vam Google nudi unutar svoje web ili mobilne aplikacije.

Google API Manager

Na adresi https://console.developers.google.com/ ćemo kreirati aplikaciju za koju trebamo API key.

Nakon što smo to napravili trebamo odobriti (Enable) Google Drive API.

Sada moramo kreirati pristupne podatke (Credentials) kako bi Google znao da imamo pravo pristupiti podacima unutar Google Drivea.

U ovom slučaju mi ćemo koristiti API key. Više o ostalim vrstama autentifikacije možete saznati ovdje.

API key uspješno kreiran.

Nakon što je API key kreiran imamo mogućnost pozabaviti se njegovom sigurnošću. U ovom primjeru opciju sigurnosti ćemo ostaviti kao None jer će ovaj blog post dobiti značajno na dužini i kompleksnosti ako krenem sve opcije detaljno objašnjavati. Također, nakon objave ovog blog posta API koji smo kreirali ću ugasiti tako da neće biti sigurnosnih problema. Vi nipošto nemojte svoj Google Drive API ostaviti tako nezaštićen.

Google Drive API URL

Kako bi mogli prikazati podatke iz Google Drivea osim API keya trebamo i ID mape iz koje želimo vući podatke. Više o tome na API Reference.

https://www.googleapis.com/drive/v2/files?q='{folder ID}'+in+parents&key={API key}

1	https://www.googleapis.com/drive/v2/files?q='{folder ID}'+in+parents&key={API key}

Na Google Driveu sada imamo mapu ZaIonic2Aplikaciju unutar koje se nalaze još dvije mape, nekoliko fotografija i jedan Word dokument.

Iz URL-a https://drive.google.com/drive/folders/0BzVqFZUj1VDhYnk4dkZ1NGVRWUE ćemo izvući ID mape 0BzVqFZUj1VDhYnk4dkZ1NGVRWUE .

Sada još samo trebamo postaviti u opcijama naše mape da je vidljiva javno.

I konačno, naš API URL izgleda ovako https://www.googleapis.com/drive/v2/files?q='0BzVqFZUj1VDhYnk4dkZ1NGVRWUE'+in+parents&key=AIzaSyC6Ifro0MzucXPKM-LpKNB2M-dP6U1yPYU.

API sada možemo testirati koristeći Postman. Rezultat je array sa objektima.

Ionic 2 aplikacija

Ovako to izgleda kada se API koristi unutar Ionic 2 aplikacije. Kako to postići možete saznati u jednom od prethodnih blog postova pod nazivom “Ionic 2 – prikaz JSON-a sa API-ja“.

<ion-header>
  <ion-navbar>
    <ion-title>
     Google Drive API Data
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button color="light" (click)="getData()">GET Data</button>
 
  <ion-card *ngFor="let u of data">

  <ion-item>
    <ion-avatar item-left>
      <img src="{{u.owners[0].picture.url}}">
    </ion-avatar>
    <h2>Naziv: {{u.title}}</h2>
    <p>Autor: {{u.owners[0].displayName}}</p>
	<p>Datum: {{u.createdDate}}</p>
  </ion-item>
  
   <img src="{{u.thumbnailLink}}"> 

</ion-card>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Google Drive API Data

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-card *ngFor="let u of data">

<ion-item>

<ion-avatar item-left>

</ion-avatar>

<h2>Naziv: {{u.title}}</h2>

<p>Autor: {{u.owners[0].displayName}}</p>

<p>Datum: {{u.createdDate}}</p>

</ion-item>

</ion-card>

</ion-content>

Pomoću parametra mimeType možemo si filtrirati npr. samo mape, fotografije i dr.

Zaključak

Kada radite aplikaciju u kojoj želite prikazati neke podatke jedna od mogućnosti je korištenje Google Drive API-ja. U ovom ste blog postu mogli vidjeti koliko je jednostavno postaviti funkcionalan API o kojemu kasnije ne morate previše brinuti za razliku od opcije da radite svoj NodeJS & ExpressJS API.

Ionic 2 – Podrška za višejezičnost

Kako raste važnost mobilne aplikacije tako se povećava i nužnost višejezičnosti. U ovom blog proći ćemo kroz postupak dodavanja podrške za višejezičnost korištenjem NG2-Translate plugina. Hrvatski jezik ćemo postaviti kao zadani dok će se uz njega moći odabrati još engleski i njemački jezik.

Uz pretpostavku da ste već pokrenuli novi Ionic 2 projekt možemo krenuti dalje.

Dodavanje NG2-Translate plugina

NG2-Translate plugin dodajemo pomoću naredbe

$ npm install ng2-translate --save

1	$ npm install ng2-translate --save

Nakon toga fokus prebacujemo na app.module.ts.

Kako bi uopće mogli koristiti NG2-Translate moramo ga uvesti u app.module.ts.

import { TranslateModule, TranslateStaticLoader, TranslateLoader} from 'ng2-translate/ng2-translate';
import { Http } from '@angular/http';

1 2	import { TranslateModule, TranslateStaticLoader, TranslateLoader} from 'ng2-translate/ng2-translate'; import { Http } from '@angular/http';

NG2-Translate kao zadano traži datoteke s prijevodom unutar mape i18n/ i tu ćemo mapu kreirati unutar src/assets.

export function createTranslateLoader(http: Http) {
	return new TranslateStaticLoader(http, './assets/i18n', '.json');
}

export function createTranslateLoader(http: Http) {

return new TranslateStaticLoader(http, './assets/i18n', '.json');

}

Naravno, sada trebamo kreirati i18n mapu.

Odmah nakon toga dodajemo ga i u NgModule niz.

imports: [
  IonicModule.forRoot(MyApp),
  TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [Http]
  })
]

imports: [

IonicModule.forRoot(MyApp),

TranslateModule.forRoot({

provide: TranslateLoader,

useFactory: (createTranslateLoader),

deps: [Http]

})

]

Kreiranje .json datoteka

Za svaki jezik koji želimo omogućiti u Ionic 2 aplikaciji moramo napraviti posebnu .json datoteku. U ovom slučaju imamo tri .json datoteke.

hr.json za hrvatski
en.json za engleski
de.json za njemački

Datoteke izgledaju ovako:

hr.json

{
	"poruka": "Dobrodošli",
	"uvod" : "Uvod",
    "odjava" : "Odjava"
}

{

"poruka": "Dobrodošli",

"uvod" : "Uvod",

"odjava" : "Odjava"

}

en.json

{
	"poruka": "Welcome",
	"uvod" : "Introduction",
     "odjava" : "Log out"
}

{

"poruka": "Welcome",

"uvod" : "Introduction",

"odjava" : "Log out"

}

de.json

{
	"poruka": "Willkommen",
	"uvod" : "Einführung",
     "odjava" : "Ausloggen"
}

{

"poruka": "Willkommen",

"uvod" : "Einführung",

"odjava" : "Ausloggen"

}

Korištenje višejezičnosti

Odlučili smo da će zadani jezik biti hrvatski. Zato u app.component.ts dodajemo sljedeće:

import {TranslateService} from 'ng2-translate';

...

constructor(_platform: Platform,
            _translate: TranslateService) {}

 _platform.ready().then(() => {
    //Zadani jezik
       _translate.setDefaultLang('hr');
  });

import {TranslateService} from 'ng2-translate';

...

constructor(_platform: Platform,

_translate: TranslateService) {}

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

//Zadani jezik

_translate.setDefaultLang('hr');

});

Prikaz prijevoda:

<ion-list inset>
   <ion-item>{{ 'poruka' | translate:param }}</ion-item>
   <ion-item>{{ 'uvod' | translate:param }}</ion-item>
   <ion-item>{{ 'odjava' | translate:param }}</ion-item>
</ion-list>

<ion-list inset>

<ion-item>{{ 'poruka' | translate:param }}</ion-item>

<ion-item>{{ 'uvod' | translate:param }}</ion-item>

<ion-item>{{ 'odjava' | translate:param }}</ion-item>

</ion-list>

Jezik koji postavimo na ovaj način automatski se učitava prilikom pokretanja Ionic 2 aplikacije.

Napredno korištenje višejezičnosti

Što kada želimo korisniku omogućiti da samostalno bira na kojem jeziku želi koristiti mobilnu aplikaciju?

U tom slučaju dodajemo tri funkcije

 translateCroatian(){
    this._translate.use('hr');
  }

   translateEnglish(){
    this._translate.use('en');
  }

   translateGerman(){
    this._translate.use('de');
  }

translateCroatian(){

this._translate.use('hr');

}

translateEnglish(){

this._translate.use('en');

}

translateGerman(){

this._translate.use('de');

}

i tri gumba pomoću kojih će korisnici moći odabrati koji jezik žele koristiti

<ion-row>
    <ion-col><button ion-button color="light" (click)="translateCroatian()">HR</button></ion-col>
    <ion-col><button ion-button color="light" (click)="translateEnglish()">EN</button></ion-col>
    <ion-col><button ion-button color="light" (click)="translateGerman()">DE</button></ion-col>
</ion-row>

<ion-row>

<ion-col><button ion-button color="light" (click)="translateCroatian()">HR</button></ion-col>

<ion-col><button ion-button color="light" (click)="translateEnglish()">EN</button></ion-col>

<ion-col><button ion-button color="light" (click)="translateGerman()">DE</button></ion-col>

</ion-row>

To izgleda ovako:

Međutim, ovdje imamo jedan problem. Korisnik može odabrati jezik koji želi koristiti u mobilnoj aplikaciji, ali taj jezik se vrati na zadani čim se ponovno učita/osvježi aplikacija.

Kako bi to riješili koristiti ćemo localStorage. Kada korisnik odabere jezik podatak o tome sprema se u lokalnu memoriju. Taj podatak ćemo kasnije koristiti kako bi znali je li korisnik odabrao jezik kako bi mu isti mogli prikazati. U konačnici to izgleda ovako:

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

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

  en:string;
  de:string;

  constructor(public _navCtrl: NavController,
              public _translate: TranslateService) {
  }

  translateCroatian(){
    this._translate.use('hr');
    //Brisanje EN ili DE iz lokalne memorije
    localStorage.removeItem('language');
  }

   translateEnglish(){
    this._translate.use('en');
    //Spremanje varijable u lokalnu memoriju
    this.en = "EN";
    localStorage.setItem('language',this.en);
  }

   translateGerman(){
    this._translate.use('de');
    //Spremanje varijable u lokalnu memoriju
    this.de = "DE";
    localStorage.setItem('language',this.de);
  }

}

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

import { NavController } from 'ionic-angular';

import {TranslateService} from 'ng2-translate';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

en:string;

de:string;

constructor(public _navCtrl: NavController,

public _translate: TranslateService) {

}

translateCroatian(){

this._translate.use('hr');

//Brisanje EN ili DE iz lokalne memorije

localStorage.removeItem('language');

}

translateEnglish(){

this._translate.use('en');

//Spremanje varijable u lokalnu memoriju

this.en = "EN";

localStorage.setItem('language',this.en);

}

translateGerman(){

this._translate.use('de');

//Spremanje varijable u lokalnu memoriju

this.de = "DE";

localStorage.setItem('language',this.de);

}

Prilikom pokretanja aplikacije vršit ćemo provjeru odabranog jezika.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

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

import {TranslateService} from 'ng2-translate';

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

  constructor(_platform: Platform,
              _translate: TranslateService) {
    _platform.ready().then(() => {

       //Zadani jezik
       _translate.setDefaultLang('hr');

      //Provjera jezika
      if(localStorage.getItem('language') === "EN"){
         _translate.use('en');
      } else if(localStorage.getItem('language') === "DE") {
         _translate.use('de');
      }

      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

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

import { Platform } from 'ionic-angular';

import { StatusBar, Splashscreen } from 'ionic-native';

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

import {TranslateService} from 'ng2-translate';

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage = HomePage;

constructor(_platform: Platform,

_translate: TranslateService) {

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

//Zadani jezik

_translate.setDefaultLang('hr');

//Provjera jezika

if(localStorage.getItem('language') === "EN"){

_translate.use('en');

} else if(localStorage.getItem('language') === "DE") {

_translate.use('de');

}

StatusBar.styleDefault();

Splashscreen.hide();

});

}

Ako u localStorage nemamo zapisano ništa prikazat će se zadani hrvatski jezik. Međutim, ako se u lokalnoj memoriji nalazi EN ili DE to znači da je korisnik kliknuo na gumb i da želi koristiti neki drugi jezik umjesto hrvatskog.

<ion-header>
  <ion-navbar>
    <ion-title>
      NG2-Translate
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

 <ion-row>
    <ion-col><button ion-button color="light" (click)="translateCroatian()">HR</button></ion-col>
    <ion-col><button ion-button color="light" (click)="translateEnglish()">EN</button></ion-col>
    <ion-col><button ion-button color="light" (click)="translateGerman()">DE</button></ion-col>
</ion-row>

<ion-list inset>
   <ion-item>{{ 'poruka' | translate:param }}</ion-item>
   <ion-item>{{ 'uvod' | translate:param }}</ion-item>
   <ion-item>{{ 'odjava' | translate:param }}</ion-item>
</ion-list>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

NG2-Translate

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-row>

<ion-col><button ion-button color="light" (click)="translateCroatian()">HR</button></ion-col>

<ion-col><button ion-button color="light" (click)="translateEnglish()">EN</button></ion-col>

<ion-col><button ion-button color="light" (click)="translateGerman()">DE</button></ion-col>

</ion-row>

<ion-list inset>

<ion-item>{{ 'poruka' | translate:param }}</ion-item>

<ion-item>{{ 'uvod' | translate:param }}</ion-item>

<ion-item>{{ 'odjava' | translate:param }}</ion-item>

</ion-list>

</ion-content>

Jezik uređaja kao jezik aplikacije

Postoji još jedna opcija, a to je aplikacija bude automatski prevedena na jezik uređaja. Znači, ako korisnik ima kao jezik uređaja postavljen npr. hrvatski jezik onda će mu i aplikacija prilikom pokretanja biti automatski prikazana na hrvatskom jeziku tako da on neće morati raditi ručno pritiskom na gumb kao i primjeru iznad.

Kako bi se ovo omogućilo potrebno je instalirati Globalization plugin.

Nakon instalacije plugin se uveze u app.module.ts

import { Globalization } from '@ionic-native/globalization';

..

providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Globalization  
  ]

import { Globalization } from '@ionic-native/globalization';

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler},

Globalization

]

I odmah se može koristiti.

Provjeru i postavljenja jezika postavit ćemo u app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
 
import { HomePage } from '../pages/home/home';
 
import { TranslateService } from 'ng2-translate';
import { Globalization } from '@ionic-native/globalization';
 
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;
 
  constructor(_platform: Platform,
              _translate: TranslateService,
              _globalization: Globalization) {
    _platform.ready().then(() => {
          StatusBar.styleDefault();
          Splashscreen.hide();
 
       //Zadani jezik
       _translate.setDefaultLang('hr');
 
       _globalization.getPreferredLanguage().then(result => {
          let deviceLng = result.value.substring(0,2).toLowerCase();
          _translate.use(deviceLng);
         })
    });
  }
}

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

import { Platform } from 'ionic-angular';

import { StatusBar, Splashscreen } from 'ionic-native';

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

import { TranslateService } from 'ng2-translate';

import { Globalization } from '@ionic-native/globalization';

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage = HomePage;

constructor(_platform: Platform,

_translate: TranslateService,

_globalization: Globalization) {

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

StatusBar.styleDefault();

Splashscreen.hide();

//Zadani jezik

_translate.setDefaultLang('hr');

_globalization.getPreferredLanguage().then(result => {

let deviceLng = result.value.substring(0,2).toLowerCase();

_translate.use(deviceLng);

})

});

}

Zaključak

U ovom smo blog postu prikazali jedan od načina kako omogućiti višejezičnost u Ionic 2 aplikaciji. Naravno da postoji više različitih načina na koje je moguće koristiti višejezičnost i sve ranije navedeno može se prilagoditi specifičnim potrebama svake Ionic 2 aplikacije.

Ionic 2 – Toast obavijesti

Toast obavijesti su kratke poruke koje se obično nalaze na dnu ekrana mobitela i koriste se kako bi korisnicima pružili kratke i brze informacije o onome što se trenutno događa u mobilnoj aplikaciji.

U ovom primjeru iskoristit ćemo ih kako bi korisnicima prikazali obavijest da je aplikacija izgubila vezu s internetom prilikom osvježavanja podataka (pull to refresh). Znači, kada korisnik povuče ekran aplikacije prema dolje mogu se dogoditi dvije stvari:

– kada ima interneta podaci se vuku sa vanjskog API-ja i prikazuju u aplikaciji
– kada nema interneta prikazuje se Toast obavijest kako bi korisnici znali zašto nema, novih, podataka u aplikaciji

Instalacija Toast plugina

Pod uvjetom da imamo pokrenut Ionic 2 projekt možemo pristupiti procesu instalacije Toast plugina pomoću naredbe

$ ionic plugin add cordova-plugin-x-toast

1	$ ionic plugin add cordova-plugin-x-toast

Dodavanje Toast plugina u Ionic 2 komponentu

Toast plugin u željenu komponentu dodajemo na vrlo jednostavan način, kao i sve ostale Ionice Native pluginove.

Dovoljno je na vrhu .ts datoteke uvesti željeni plugin koristeći

import { Toast } from 'ionic-native';

1	import { Toast } from 'ionic-native';

I to je sve. Već sada možemo koristiti Toast obavijesti.

Toast.show("No network connection!", '1000', 'bottom').subscribe(
     toast => {
      console.log(toast);
  }
);

Toast.show("No network connection!", '1000', 'bottom').subscribe(

toast => {

console.log(toast);

}

);

Praktična primjena

Imamo funkciju napraviRefresh koja se pokreće kada korisnik povuče ekran aplikacije prema dolje.

<ion-refresher (ionRefresh)="napraviRefresh($event)">
    <ion-refresher-content
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

<ion-refresher (ionRefresh)="napraviRefresh($event)">

<ion-refresher-content

refreshingSpinner="circles"

refreshingText="Refreshing...">

</ion-refresher-content>

</ion-refresher>

U tom se trenutku provjerava povezanost s mrežom. Ako veza s mrežom postoji prikazuju se podaci, a ako veza ne postoji prikazuje se Toast obavijest.

import { Component } from '@angular/core';
import { NetworkService } from '../../providers/network-service';
import { Toast } from 'ionic-native';

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

  poruka:string;

  constructor(public _networkService: NetworkService) {
  }
  
    napraviRefresh(refresher){
    setTimeout(() => {
     
  if(this._networkService.isOnline()){ 
     //Ako ima interneta prikaži podatke s API-ja
	  this.poruka = "Ovo je primjer podatka koji se prikaže s API-ja kada ima interneta!";
  } else {
     //Ako nema interneta prikaži Toast obavijest
	  this.poruka = "...";
    Toast.show("No network connection!", '1000', 'bottom').subscribe(
     toast => {
      console.log(toast);
  }
);
  }
      refresher.complete();
    }, 1000);
  }  
  
}

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

import { NetworkService } from '../../providers/network-service';

import { Toast } from 'ionic-native';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class Home {

poruka:string;

constructor(public _networkService: NetworkService) {

}

napraviRefresh(refresher){

setTimeout(() => {

if(this._networkService.isOnline()){

//Ako ima interneta prikaži podatke s API-ja

this.poruka = "Ovo je primjer podatka koji se prikaže s API-ja kada ima interneta!";

} else {

//Ako nema interneta prikaži Toast obavijest

this.poruka = "...";

Toast.show("No network connection!", '1000', 'bottom').subscribe(

toast => {

console.log(toast);

}

);

}

refresher.complete();

}, 1000);

}

Ovako to izgleda na klijentskoj strani:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Ionic Toast obavijesti</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
   
   <ion-refresher (ionRefresh)="napraviRefresh($event)">
    <ion-refresher-content
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>  

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

</ion-content>

<ion-header>

<ion-navbar>

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

</button>

<ion-title>Ionic Toast obavijesti</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-refresher (ionRefresh)="napraviRefresh($event)">

<ion-refresher-content

refreshingSpinner="circles"

refreshingText="Refreshing...">

</ion-refresher-content>

</ion-refresher>

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

</ion-content>

Na lijevoj slici nema Toast obavijesti jer postoji povezanost s mrežom i podaci se prikazuju, dok na desnoj slici vidimo Toast obavijest jer nema povezanosti s mrežom.

Zaključak

Danas je teško zamisliti aplikaciju koja nema ove dvije funkcionalnosti ili barem jednu od njih. Toast obavijesti odličan su način informiranja korisnika aplikacije bez da zahtijevaju bilo kakvu radnju od strane korisnika.

Ionic 2 – Push notifikacije za Android

Push notifikacije postaju sve popularnije i nisu više rezervirane samo za nativne mobilne aplikacije. U ovom ćemo blog postu proći kroz proces postavljanja Ionic 2 aplikacije za primanje push notifikacija.

Što se tiče slanja push notifikacija to smo obradili u blog postu pod nazivom Node.js API za slanje Push notifikacija. To je samo jedan od načina kako slati push notifikacije i ako vam djeluje komplicirano ili vam se jednostavno ne sviđa uvijek možete koristiti nešto od sljedećeg: Ionic Cloud, Pushwoosh, OneSignal,…

Instalacija Push plugina

Nakon što smo postavili Ionic 2 projekt možemo dodati Push plugin pomoću naredbe:

$ ionic plugin add phonegap-plugin-push --variable SENDER_ID=XXXXXXXXX

1	$ ionic plugin add phonegap-plugin-push --variable SENDER_ID=XXXXXXXXX

SENDER_ID ćete pronaći u Google Firebase sučelju na adresi https://console.firebase.google.com/.

API servis

Prije nego postavimo push plugin napravit ćemo servis api-service.ts. Više o Ionic 2 servisima možete saznati u blog postu Ionic 2 – prikaz JSON-a sa API-ja.

Možete primijetiti da koristimo https://localhost:3001/api/device-token za slanje tokena u MySQL bazu. To je URL koji smo napravili u jednom od prethodnih blog postova.

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

@Injectable()
export class ApiService {

  constructor(public _http: Http) {
    console.log('Hello ApiService');
  }

  sendToken(a: any){
    return this._http.post('http://localhost:3001/api/device-token', a)
      .map(res => res.json());
  }

}

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

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

import 'rxjs/add/operator/map';

@Injectable()

export class ApiService {

constructor(public _http: Http) {

console.log('Hello ApiService');

}

sendToken(a: any){

return this._http.post('http://localhost:3001/api/device-token', a)

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

}

Postavljanje push plugina

Nakon što smo instalirali Push plugin trebamo ga uključiti u projekt.

Sve dalje navedeno dodajemo u app.component.ts.

Za početak pozivamo Push plugin i ApiService.

import { StatusBar, Splashscreen, Push } from 'ionic-native';
import { ApiService } from '../providers/api-service';

1 2	import { StatusBar, Splashscreen, Push } from 'ionic-native'; import { ApiService } from '../providers/api-service';

Dodajemo provider za MyApp komponentu

providers: [ApiService]

1	providers: [ApiService]

Unutar konstruktora definiramo ranije kreiran ApiService

public _api: ApiService

1	public _api: ApiService

Sljedeći dio služi za upravljanje push notifikacijama. O ovom dijelu koda odvija se inicijalizacija plugina.

   var push = Push.init({
        android: {
          senderID: "xxxxxxxxxxxx"
        },
        ios: {
          alert: "true",
          badge: true,
          sound: 'false'
        },
        windows: {}
      });
      push.on('registration', (data) => {
        console.log(data.registrationId);
        this.device_token.token = data.registrationId;             
        //Provjera tokena
        if(localStorage.getItem('device_token')){
		     console.log("Ne šalji ništa! Token već postoji lokalno!");
	       } else {
		    //Token ne postoji, spremi novi
		    localStorage.setItem('device_token', this.device_token.token)
		    //Pošalji token u bazu
		    console.log("Šaljem token u bazu!");
		    this._api.sendToken(this.device_token).subscribe(res => {
          console.log("Rezultat: " + res);
        });
	     } 
      });
      push.on('notification', (data) => {
        console.log(data);
      });
      push.on('error', (e) => {
        console.log(e.message);
      });

var push = Push.init({

android: {

senderID: "xxxxxxxxxxxx"

ios: {

alert: "true",

badge: true,

sound: 'false'

windows: {}

});

push.on('registration', (data) => {

console.log(data.registrationId);

this.device_token.token = data.registrationId;

//Provjera tokena

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

console.log("Ne šalji ništa! Token već postoji lokalno!");

} else {

//Token ne postoji, spremi novi

localStorage.setItem('device_token', this.device_token.token)

//Pošalji token u bazu

console.log("Šaljem token u bazu!");

this._api.sendToken(this.device_token).subscribe(res => {

console.log("Rezultat: " + res);

});

}

});

push.on('notification', (data) => {

console.log(data);

});

push.on('error', (e) => {

console.log(e.message);

});

Sve zajedno to izgleda ovako:

P.S. Ako ne želite koristiti svoj NodeJS/Express.js server ne morate praviti import { ApiService } from '../providers/api-service;' i možete izbaciti dio vezan uz provjeru tokena.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen, Push } from 'ionic-native';
import { ApiService } from '../providers/api-service';

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

@Component({
  templateUrl: 'app.html',
  providers: [ApiService]
})
export class MyApp {
  rootPage = HomePage;

  device_token = { token: '' };

  constructor(platform: Platform,
              public _api: ApiService) {
    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();
        //Push notifikacije početak
	   var push = Push.init({
        android: {
          senderID: "344715041226"
        },
        ios: {
          alert: "true",
          badge: true,
          sound: 'false'
        },
        windows: {}
      });
      push.on('registration', (data) => {
        console.log(data.registrationId);
        this.device_token.token = data.registrationId;             
        //Provjera tokena
        if(localStorage.getItem('device_token')){
		     console.log("Ne šalji ništa! Token već postoji lokalno!");
	       } else {
		    //Token ne postoji, spremi novi
		    localStorage.setItem('device_token', this.device_token.token)
		    //Pošalji token u bazu
		    console.log("Šaljem token u bazu!");
		    this._api.sendToken(this.device_token).subscribe(res => {
          console.log("Rezultat: " + res);
        });
	     } 
      });
      push.on('notification', (data) => {
        console.log(data);
      });
      push.on('error', (e) => {
        console.log(e.message);
      });
        //Push notifikacije kraj
      Splashscreen.hide();
    });
  }
  
}

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

import { Platform } from 'ionic-angular';

import { StatusBar, Splashscreen, Push } from 'ionic-native';

import { ApiService } from '../providers/api-service';

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

@Component({

templateUrl: 'app.html',

providers: [ApiService]

})

export class MyApp {

rootPage = HomePage;

device_token = { token: '' };

constructor(platform: Platform,

public _api: ApiService) {

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();

//Push notifikacije početak

var push = Push.init({

android: {

senderID: "344715041226"

ios: {

alert: "true",

badge: true,

sound: 'false'

windows: {}

});

push.on('registration', (data) => {

console.log(data.registrationId);

this.device_token.token = data.registrationId;

//Provjera tokena

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

console.log("Ne šalji ništa! Token već postoji lokalno!");

} else {

//Token ne postoji, spremi novi

localStorage.setItem('device_token', this.device_token.token)

//Pošalji token u bazu

console.log("Šaljem token u bazu!");

this._api.sendToken(this.device_token).subscribe(res => {

console.log("Rezultat: " + res);

});

}

});

push.on('notification', (data) => {

console.log(data);

});

push.on('error', (e) => {

console.log(e.message);

});

//Push notifikacije kraj

Splashscreen.hide();

});

}

Slanje push notifikacija iz Firebase sučelja

Push notifikacije također možete slati direktno iz Google Firebase sučelja bez potrebe za izradom i pokretanjem NodeJS servera i uvozom import { ApiService } from '../providers/api-service;' u Ionic 2 aplikaciju.

Pokretanje aplikacije

Kada se aplikacija prvi put pokrene token ne postoji u lokalnoj memoriji te se u tom trenutku sprema u lokalnu memoriju uređaja i istovremeno šalje u bazu podataka.

Ako bi maknuli provjeru tokena to bi značilo da bi se token putem API-ja poslao u MySQL bazu svaki put kada se pokrene aplikacija. To naravno ne želimo pa zato vršimo provjeru.

Kada se aplikacija pokrene svaki sljedeći put provjera će vidjeti da token već postoji i neće ga ponovno slati u MySQL bazu.

Zaključak

U ovom smo blog postu obradili postupak postavljanja Ionic 2 aplikacije za primanje push notifikacija na Android mobilni uređaj. Kao što se može vidjeti postupak nije kompliciran, a sve dalje ovisi o specifičnim potrebama svake aplikacije. Različiti scenariji kada i kome slati push notifikacije trebaju se razraditi za svaku aplikaciju posebno.

Što se primanja push notifikacija na iOS uređaje tiče o tome možda nekom drugom prilikom jer postupak je kompliciraniji.