Tomislav Stanković, Autor na Tomislav Stanković

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.

Ionic 2 – provjera povezanosti s mrežom

Iako sam već objavio blog post o provjeri povezanosti s mrežom/internetom za Ionic 1 mislim da je vrijeme da osvježim informacije s uputama vezanim uz Ionic 2. Od sada više nećemo koristiti ngCordova pluginove nego se prebacujemo na Ionic Native.

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

Ionic Native Network plugin

Network plugin ćemo dodati pomoću naredbe $ ionic plugin add cordova-plugin-network-information.

Network servis

Plugin koji smo ranije instalirali daje nam mogućnost da uopće možemo napraviti servis koji će vršiti provjeru povezanosti s mrežom/internetom. Servis ćemo kreirati koristeći Ionic CLI točnije naredbu $ ionic g provider NetworkService.

Prilikom kreiranja servisa u njemu se nalazi samo import { Injectable } from '@angular/core'; , a to nam nije dovoljno za provjeru povezanosti s mrežom/internetom. Sada trebamo pozvati ranije instaliran plugin uz dodatak Platform servisa koji će provjeravati na kojoj smo trenutno platformi (Android ili iOS) tj. jesmo li uopće na nekoj od tih platformi.

Sadržaj koji se nalazi u network-service.ts zamijenit ćemo sljedećim:

import { Injectable } from '@angular/core';
import { Network } from 'ionic-native';
import { Platform } from 'ionic-angular';
 
declare var Connection;
 
@Injectable()
export class NetworkService {
 
  onDevice: boolean;
 
  constructor(public platform: Platform){
    this.onDevice = this.platform.is('cordova');
  }
 
  isOnline(): boolean {
    if(this.onDevice && Network.connection){
      return Network.connection !== Connection.NONE;
    } else {
      return navigator.onLine; 
    }
  }
 
  isOffline(): boolean {
    if(this.onDevice && Network.connection){
      return Network.connection === Connection.NONE;
    } else {
      return !navigator.onLine;   
    }
  }
}

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

import { Network } from 'ionic-native';

import { Platform } from 'ionic-angular';

declare var Connection;

@Injectable()

export class NetworkService {

onDevice: boolean;

constructor(public platform: Platform){

this.onDevice = this.platform.is('cordova');

}

isOnline(): boolean {

if(this.onDevice && Network.connection){

return Network.connection !== Connection.NONE;

} else {

return navigator.onLine;

}

isOffline(): boolean {

if(this.onDevice && Network.connection){

return Network.connection === Connection.NONE;

} else {

return !navigator.onLine;

}

Servis nam se zapravo sastoji od dvije funkcije isOnline i isOffline koje možemo pozivati bilo gdje u aplikaciji kada želimo provjeriti povezanost s mrežom/internetom.

Iako sada imamo funkcionalan servis još uvijek ga ne možemo koristiti u aplikaciji jer ga nismo naveli u app.module.ts i aplikacija zapravo ne zna za njega. Zato ćemo sada dodati sljedeće u app.module.ts.

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { NetworkService } from '../providers/network-service';

@NgModule({
  declarations: [
    MyApp,
    Page1,
    Page2
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Page1,
    Page2
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, NetworkService]
})
export class AppModule {}

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

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

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

import { Page1 } from '../pages/page1/page1';

import { Page2 } from '../pages/page2/page2';

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

@NgModule({

declarations: [

MyApp,

Page1,

Page2

imports: [

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

Page1,

Page2

providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, NetworkService]

})

export class AppModule {}

Korištenje servisa

Servis koristimo na način da ga pozovemo import { NetworkService } from '../../providers/network-service'; u komponentu tj. klasu u kojoj želimo znati imamo li povezanost s mrežom/internetom.

U ovom primjeru NetworkService će na stranici page1.html provjeravati imamo li povezanost s mrežom/internetom tako da ćemo unutar page1.ts dodati sljedeće:

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

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

  poruka:string;

  constructor(public _navCtrl: NavController,
              public _networkService: NetworkService) {
              this.provjeraInterneta(); 
  }

  provjeraInterneta(){
      if(this._networkService.isOnline()){
       console.log('Ima interneta!');
       this.poruka = "Ima interneta!";
       //Povuci podatke s API-ja
        }else{
        console.log('Nema interneta!');
        this.poruka = "Nema interneta!";
        //Prikaži podatke iz lokalne SQLite baze 
    }
   }
  
}

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

import { NavController } from 'ionic-angular';

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

@Component({

selector: 'page-page1',

templateUrl: 'page1.html'

})

export class Page1 {

poruka:string;

constructor(public _navCtrl: NavController,

public _networkService: NetworkService) {

this.provjeraInterneta();

}

provjeraInterneta(){

if(this._networkService.isOnline()){

console.log('Ima interneta!');

this.poruka = "Ima interneta!";

//Povuci podatke s API-ja

}else{

console.log('Nema interneta!');

this.poruka = "Nema interneta!";

//Prikaži podatke iz lokalne SQLite baze

}

Unutar page1.html dodali smo sljedeće:

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

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="https://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>
  
  <button ion-button secondary menuToggle>Toggle Menu</button>

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

</ion-content>

<ion-header>

<ion-navbar>

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

</button>

<ion-title>Page One</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<h3>Ionic Menu Starter</h3>

<p>

If you get lost, the <a href="https://ionicframework.com/docs/v2">docs</a> will show you the way.

</p>

<button ion-button secondary menuToggle>Toggle Menu</button>

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

</ion-content>

U konačnici to izgleda ovako

Zaključak

I to je to! Ovo je samo jedna od mogućnosti kako koristiti Ionic Native Network plugin.

Ovaj je plugin posebno koristan kada u aplikaciji prikazujete podatke s nekog vanjskog izvora. Znači, ako nestane veze s internetom neće se više prikazati niti podaci koje želite dati korisniku, a korisnik neće znati zašto se to dogodilo. Jednom kada utvrdite da veza s internetom ne postoji trebate odlučiti što i kako dalje. Možete o tome obavijestiti korisnika ili mu u tom slučaju prikazivati podatke iz lokalne memorije sve dok se ponovno ne uspostavi veza s internetom. – Ionic aplikacija (ni)je povezana s internetom

Node.js API za slanje Push notifikacija

U ovom ćemo blog postu napraviti Node.js API za slanje Push notifikacija. Ovaj API je samo jedan dio svega onoga što je potrebno zadovoljiti kako bi se push notifikacije mogle uspješno slati/primati i biti će zapravo nadogradnja prethodnog Node.js API-ja za upload datoteka.

Proces slanja push notifikacija:

Treba nam servis koji će stajati između API-ja i mobilne aplikacije. U ovom slučaju to je Google Firebase.
Treba nam jedinstveni token mobilne aplikacije tj. uređaja kako bi API znao kome poslati push notifikaciju. Kreiranje jedinstvenog tokena odvija se u samoj mobilnoj aplikaciji i to neće biti pokriveno ovim blog postom.
Treba nam API koji će na osnovu zahtjeva skupiti sve tokene i poslati im push notifikaciju. Za to ćemo koristiti node-gcm NPM paket.

U nekom od sljedećih blog postova napravit ćemo primjer Ionic aplikacije koja će koristiti ovaj API tj. koja će zapravo primati push notifikacije.

Google Firebase

Google Firebase ćemo koristiti kao servis koji će stajati između mobilne aplikacije i Node.js API-ja. Na adresi https://console.firebase.google.com/ potrebno je napraviti novi projekt s nazivom mobilne aplikacije koja će API koristiti.

Server key će nam trebati u server.js kako bi naš API znao s kojim servisom će komunicirati.

Osim toga potrebno je još dodati podršku za konkretne platforme na kojima će se temeljiti mobilna aplikacija jer svaka platforma ima svoje specifičnosti. S obzirom da je Ionic framework za izradu hibridnih mobilnih aplikacija mi ćemo odmah kreirati podršku za iOS i Android platforme.

Priprema za Android platformu

Priprema za iOS platformu

Što se Google Firebasea tiče to je za sada to. Njemu ćemo se vratiti kada budemo radili mobilnu aplikaciju jer će nam trebati još neki podaci.

Testni push.js

Sada ćemo napraviti testni push.js s kojim ćemo isprobati radi li uopće naš API i hoće li push notifikacija stići na mobilni uređaj.

Prvo moramo instalirati https://www.npmjs.com/package/node-gcm pomoću naredbe $ npm install node-gcm --save.

gcmApiKey je zapravo server key koji imamo unutar Google Firebase sučelja, ali ovdje nam treba i jedinstveni token uređaja, a njega dobijemo unutar mobilne aplikacije. Kako dobiti taj token neću prikazati u ovom blog postu nego u nekom od sljedećih. Uglavnom, na slici se vidi token uređaja.

Njega dobijemo na način da buildamo aplikaciju na mobilni uređaj i unutar chrome://inspect/#devices otvorimo konzolu iz koje kopiramo token koji onda zalijepimo u push.js

Sada imamo sve potrebno unutar push.js kako bi testirali API.

var express = require('express');
var gcm = require('node-gcm');
var app = express();
var gcmApiKey = 'xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx-xx'; // Server key iz https://console.firebase.google.com/

var server = app.listen(3001, function () {
    console.log('Pokrenut testni push API server!');
});

app.get('/', function (req, res) {
    res.send("Defaultna ruta");
});

app.get('/push', function (req, res) {
    var device_tokens = []; // array jedinstvenih tokena uređaja
    var retry_times = 4; // broj puta koliko će se push notifikacija pokušati poslati ako ne uspije prvi put
    var sender = new gcm.Sender(gcmApiKey); // pošiljatelj
    var message = new gcm.Message(); // nova poruka
    message.addData('title', 'Naslov');
    message.addData('message', "Sadržaj push notifikacije");
    message.addData('sound', 'default');
    message.collapseKey = 'Testing Push'; // grupa push notifikacija
    message.delayWhileIdle = true; //odgoditi slanje push notifikacije ako je uređaj offline
    message.timeToLive = 3; //broj sekundi koliko push notifikaciju držati na serveru ako je uređaj offline
    device_tokens[0] = "cscMv3QlzAA:APA91bFU8OQRe1Dkja-Oq3krC1fQrMV0HU8AnjLjOhbTjqbwT4ljqt2rgMpK3gt1kpPqs-8ibELSxIY4QKN7EZvdznRoRP_oSXHW1saRxqW2AziuPJ9OK8jfwli1kIm01veCyEtkRFG9"; //jedinstveni token uređaja
    sender.send(message, device_tokens[0], retry_times, function (result) {
        console.log('Push poslan na: ' + device_tokens);
        res.status(200).send('Push notifikacija poslana na uređaj: ' + device_tokens);
    }, function (err) {
        res.status(500).send('Neuspješno poslana push notifikacija');
    });
});

var express = require('express');

var gcm = require('node-gcm');

var app = express();

var gcmApiKey = 'xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx-xx'; // Server key iz https://console.firebase.google.com/

var server = app.listen(3001, function () {

console.log('Pokrenut testni push API server!');

});

app.get('/', function (req, res) {

res.send("Defaultna ruta");

});

app.get('/push', function (req, res) {

var device_tokens = []; // array jedinstvenih tokena uređaja

var retry_times = 4; // broj puta koliko će se push notifikacija pokušati poslati ako ne uspije prvi put

var sender = new gcm.Sender(gcmApiKey); // pošiljatelj

var message = new gcm.Message(); // nova poruka

message.addData('title', 'Naslov');

message.addData('message', "Sadržaj push notifikacije");

message.addData('sound', 'default');

message.collapseKey = 'Testing Push'; // grupa push notifikacija

message.delayWhileIdle = true; //odgoditi slanje push notifikacije ako je uređaj offline

message.timeToLive = 3; //broj sekundi koliko push notifikaciju držati na serveru ako je uređaj offline

device_tokens[0] = "cscMv3QlzAA:APA91bFU8OQRe1Dkja-Oq3krC1fQrMV0HU8AnjLjOhbTjqbwT4ljqt2rgMpK3gt1kpPqs-8ibELSxIY4QKN7EZvdznRoRP_oSXHW1saRxqW2AziuPJ9OK8jfwli1kIm01veCyEtkRFG9"; //jedinstveni token uređaja

sender.send(message, device_tokens[0], retry_times, function (result) {

console.log('Push poslan na: ' + device_tokens);

res.status(200).send('Push notifikacija poslana na uređaj: ' + device_tokens);

}, function (err) {

res.status(500).send('Neuspješno poslana push notifikacija');

});

Ako sada pokrenemo $ node push.js i odemo na putanju http://localhost:3001/push

možemo vidjeti da je push notifikacija uspješno stigla na mobilni uređaj

Gledajući prema ovom primjeru ispada da nam svaki korisnik mobilne aplikacije treba poslati svoj jedinstveni token uređaja kako bi ga mi ručno upisali u push.js i kako bi mogli tom korisniku poslati push notifikaciju. Naravno da to nema smisla i da je ovo služilo samo za test. U produkcijskoj verziji API-ja potrebno je automatizirati čitav proces i napraviti automatsku registraciju jedinstvenog tokena, slanje tokena u bazu podataka pa će API slati push notifikacije prema svim uređajima čije tokene ima spremljene u bazu.

Nadogradnja MySQL baze

Napravit ćemo novu tablicu naziva device unutar MySQL baze u koju ćemo spremati sve tokene, a koji će u bazu biti poslani čim se mobilna aplikacija pokrene.

server.js nadogradnja

Sada ćemo nadograditi prethodno napravljen API za upload datoteka koji će odmah prilikom dodavanja novog korisnika poslati push notifikaciju o dodanom korisniku.

Pomoću naredbe $ npm install node-gcm ćemo instalirati https://www.npmjs.com/package/node-gcm i na vrh datoteke dodati:

var gcm = require('node-gcm');
var gcmApiKey = 'xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx-xx';

1 2	var gcm = require('node-gcm'); var gcmApiKey = 'xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx-xx';

Sada kada imamo spremnu novu tablicu u bazi možemo napraviti API koji će iz mobilne aplikacije primati jedinstvene tokene.

apiRoutes.post('/device-token', function (req, res, next) {

   console.log(req.body);
   
   var token = req.body.token;
   console.log(token);

   pool.getConnection(function(err, connection) {
 
        if (err) {
            console.error("Dogodila se greška: " + err);
        }
            
			var uredjaj = { 
            dev_token: token  
            };   

            connection.query('INSERT INTO device SET ?', uredjaj,
            function(err, rows) {
                if (err) {
                    throw err;
                } else {
                    var result = {
                        success: true,
                        detail: rows
                    }
                }
            });
    }); 
})

apiRoutes.post('/device-token', function (req, res, next) {

console.log(req.body);

var token = req.body.token;

console.log(token);

pool.getConnection(function(err, connection) {

if (err) {

console.error("Dogodila se greška: " + err);

}

var uredjaj = {

dev_token: token

};

connection.query('INSERT INTO device SET ?', uredjaj,

function(err, rows) {

if (err) {

throw err;

} else {

var result = {

success: true,

detail: rows

}

});

})

Sada možemo nadograditi i drugi dio API-ja koji služi za dodavanje korisnika.

//Dodavanje korisnika
apiRoutes.post('/dodajkorisnika', upload.any(),function (req, res, next) {

  console.log(req.body);
  console.log(req.files);

   pool.getConnection(function(err, connection) {
 
        if (err) {
            console.error("Dogodila se greška: " + err);
        }

            var korisnik = { 
            k_ime: req.body.ime,
            k_prezime: req.body.prezime,
            k_slika: req.files[0].destination + "/" + req.files[0].filename,  
	    k_dokument: req.files[1].destination + "/" + req.files[1].filename  
            };      
			
        //SELECT svih tokena i slanje push notifikacije
        pool.getConnection(function(err, connection) {
 
        if (err) {
            console.error("Dogodila se greška: " + err);
        }
       var query = "SELECT * FROM device ORDER BY iddevice ASC";
        query = mysql.format(query);
        connection.query(query,function(err,rows){
           connection.release();
            if (err) {               
               return next(err);
            } else {
                 var SviTokeni = [];
                 rows.forEach(function(a) {
                        var jedanToken = {
                             dev_token: a.dev_token
                            }
                            SviTokeni.push(jedanToken.dev_token);
                        });
            //Push
            var device_tokens = SviTokeni; // array jedinstvenih tokena uređaja
    var retry_times = 4; // broj puta koliko će se push notifikacija pokušati poslati ako ne uspije prvi put
    var sender = new gcm.Sender(gcmApiKey); // pošiljatelj
    var message = new gcm.Message(); // nova poruka
    message.addData('title', 'Dodan novi korisnik:');
    message.addData('message', korisnik.k_ime + ' ' + korisnik.k_prezime);
    message.addData('sound', 'default');
    message.collapseKey = 'Testing Push'; // grupa push notifikacija
    message.delayWhileIdle = true; //odgoditi slanje push notifikacije ako je uređaj offline
    message.timeToLive = 3; //broj sekundi koliko push notifikaciju držati na serveru ako je uređaj offline
    sender.send(message, device_tokens, retry_times, function (result) {
        console.log('Push poslan na: ' + device_tokens);
       res.status(200).send('Push notifikacija poslana na uređaj: ' + device_tokens);
    }, function (err) {
       res.status(500).send('Neuspješno poslana push notifikacija');
    });
            }
        });  
    })
			
            connection.query('INSERT INTO korisnik SET ?', korisnik,
            function(err, rows) {
                if (err) {
                    throw err;
                } else {
		    res.json("Uspješno dodan korisnik!");
                    res.end();
                }
                connection.release();
            });
    });
})

//Dodavanje korisnika

apiRoutes.post('/dodajkorisnika', upload.any(),function (req, res, next) {

console.log(req.body);

console.log(req.files);

pool.getConnection(function(err, connection) {

if (err) {

console.error("Dogodila se greška: " + err);

}

var korisnik = {

k_ime: req.body.ime,

k_prezime: req.body.prezime,

k_slika: req.files[0].destination + "/" + req.files[0].filename,

k_dokument: req.files[1].destination + "/" + req.files[1].filename

};

//SELECT svih tokena i slanje push notifikacije

pool.getConnection(function(err, connection) {

if (err) {

console.error("Dogodila se greška: " + err);

}

var query = "SELECT * FROM device ORDER BY iddevice ASC";

query = mysql.format(query);

connection.query(query,function(err,rows){

connection.release();

if (err) {

return next(err);

} else {

var SviTokeni = [];

rows.forEach(function(a) {

var jedanToken = {

dev_token: a.dev_token

}

SviTokeni.push(jedanToken.dev_token);

});

//Push

var device_tokens = SviTokeni; // array jedinstvenih tokena uređaja

var retry_times = 4; // broj puta koliko će se push notifikacija pokušati poslati ako ne uspije prvi put

var sender = new gcm.Sender(gcmApiKey); // pošiljatelj

var message = new gcm.Message(); // nova poruka

message.addData('title', 'Dodan novi korisnik:');

message.addData('message', korisnik.k_ime + ' ' + korisnik.k_prezime);

message.addData('sound', 'default');

message.collapseKey = 'Testing Push'; // grupa push notifikacija

message.delayWhileIdle = true; //odgoditi slanje push notifikacije ako je uređaj offline

message.timeToLive = 3; //broj sekundi koliko push notifikaciju držati na serveru ako je uređaj offline

sender.send(message, device_tokens, retry_times, function (result) {

console.log('Push poslan na: ' + device_tokens);

res.status(200).send('Push notifikacija poslana na uređaj: ' + device_tokens);

}, function (err) {

res.status(500).send('Neuspješno poslana push notifikacija');

});

}

});

})

connection.query('INSERT INTO korisnik SET ?', korisnik,

function(err, rows) {

if (err) {

throw err;

} else {

res.json("Uspješno dodan korisnik!");

res.end();

}

connection.release();

});

})

U ovom slučaju tijelo poruke message sastojat će se od korisnik.k_ime i korisnik.k_prezime.

Iz sljedeće se animacije vidi da smo dodali novog korisnika Tomislav Stanković.

Istovremeno s dodavanjem korisnika korisnicima mobilne aplikacije stigla je sljedeća push notifikacija.

Zaključak

I to je to! Napravili smo funkcionalan API za slanje push notifikacija. Još ostaje za napraviti iOS i Android mobilnu aplikaciju koja će automatski slati token uređaja u MySQL bazu i koja će primati push notifikacije, ali o tome će više riječi biti u nekom od sljedećih blog postova jer bi ovaj bio previše dug ako bi se htjelo sve detaljno obraditi.

Posjetite GitHub i preuzmite projekt.

Ionic 2 – prikaz JSON-a sa API-ja

Iako su neke aplikacije same sebi dostatne ipak je više onih koje ovise o podacima s vanjskih izvora, a to su javni ili privatni API-ji. U ovom blog postu prikazat ćemo primjer dohvaćanja JSON (JavaScript Object Notation) podataka s javnog API-ja RandomUser.Me.

Zašto baš RandomUser? Zato što na jednostavniji način, bez da kreirate i pokrećete svoj API možete napraviti i testirati svoju Ionic 2 aplikaciju što je posebno korisno u procesu učenja.

Kreiranje Ionic 2 projekta

Za početak ćemo kreirati novi Ionic 2 projekt koristeći blank predložak.

$ ionic start Ionic2RandomUser blank –-v2
$ cd Ionic2RandomUser
$ ionic serve

$ ionic start Ionic2RandomUser blank –-v2

$ cd Ionic2RandomUser

$ ionic serve

Aplikacija u web pregledniku sada izgleda ovako. Znači, ništa posebno.

Ako želite saznati nešto više o strukturi Ionic 2 aplikacije proučite moj prethodni blog post.

Ionic 2 provides (servisi)

Prije nego krenemo s izradom sučelja aplikacije i logike za prikaz podataka idemo napraviti servis koji će nam dohvaćati potrebne podatke. Koristiti ćemo sljedeći URL https://randomuser.me/api/?results=10. Ako kliknete na link vidjet ćete JSON sa 10 korisnika.

Servis nam služi za dohvaćanje podataka s JSON API-ja koristeći HTTP protokol. I ovdje ćemo koristiti Ionic 2 CLI pa ćemo servis kreirati pomoću naredbe $ ionic g provider RandomUserProvider.

Servisi se automatski kreiraju u mapi providers.

U random-user-provider.ts dodat ćemo sljedeće:

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

@Injectable()
export class RandomUserProvider {

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

  loadRandomUsers(){
    return this._http.get('https://randomuser.me/api/?results=10')
      .map(res => res.json());
  }

}

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

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

import 'rxjs/add/operator/map';

@Injectable()

export class RandomUserProvider {

constructor(public _http: Http) {

console.log('Hello RandomUserProvider Provider');

}

loadRandomUsers(){

return this._http.get('https://randomuser.me/api/?results=10')

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

}

Pozivanje servisa

Servis sada moramo pozvati u komponentu koja će činiti logiku naše aplikacije. Prvo je potrebno pozvati servis import { RandomUserProvider } from '../../providers/random-user-provider'; kako bi ga mogli koristiti.

Iako smo sada pozvali servis to i dalje ne znači da ga možemo koristiti. Kako bi to omogućili moramo ga navesti kao dio naše komponente @Component, a to činimo sa providers: [RandomUserProvider] .

Sljedeći korak je kreirati konstruktor _randomUser za RandomUserProvider.

Sada možemo kreirati funkciju getUsers() koja će nam prikazati korisnike.

U konačnici to izgleda ovako:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RandomUserProvider } from '../../providers/random-user-provider';

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

  constructor(public _navCtrl: NavController,
              public _randomUser: RandomUserProvider ) {
             // this.getUsers();
  }

  getUsers(){
     this._randomUser.loadRandomUsers().subscribe(res => {
     this.user = res.results;
     console.log(this.user);
    });
  }

}

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

import { NavController } from 'ionic-angular';

import { RandomUserProvider } from '../../providers/random-user-provider';

@Component({

selector: 'page-home',

templateUrl: 'home.html',

providers: [RandomUserProvider]

})

export class HomePage {

constructor(public _navCtrl: NavController,

public _randomUser: RandomUserProvider ) {

// this.getUsers();

}

getUsers(){

this._randomUser.loadRandomUsers().subscribe(res => {

this.user = res.results;

console.log(this.user);

});

}

Označene linije dodali smo u našu HomePage komponentu.

P.S. Ako se odkomentira linija 16 podaci će se automatski prikazati bez potrebe za klikom na gumb GET Users.

Sučelje za prikaz

Logiku aplikacije smo napravili i sada se možemo pozabaviti sučeljem za prikaz koji će biti običan popis.

*ngFor direktiva će proći kroz popis korisnika i za svakog kreirati po jedan red u popisu.

<ion-header>
  <ion-navbar>
    <ion-title>
     Top 10 Random Users
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button color="light" (click)="getUsers()">GET Users</button>
   <ion-list>
    <ion-item *ngFor="let u of user">
      <ion-avatar item-left>
        <img src="{{u.picture.thumbnail}}">
      </ion-avatar>
      <h2>{{u.name.first}} {{u.name.last}}</h2>
      <p>{{u.email}}</p>
    </ion-item>
  </ion-list> 
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Top 10 Random Users

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button color="light" (click)="getUsers()">GET Users</button>

<ion-list>

<ion-item *ngFor="let u of user">

<ion-avatar item-left>

</ion-avatar>

<h2>{{u.name.first}} {{u.name.last}}</h2>

<p>{{u.email}}</p>

</ion-item>

</ion-list>

</ion-content>

Konačan izgled aplikacije

$ ionic serve daje nam konačan izgled naše aplikacije s uspješno dohvaćenim JSON-om.

Zaključak

U ovom blog postu imali ste priliku vidjeti kako u Ionic 2 aplikaciju dohvatiti JSON podatke s javnog API-ja te ih prikazati u obliku popisa.

Jednako tako, da smo htjeli, mogli smo koristiti i naš NodeJS API kako bi prikazali korisnike iz naše baze podataka. Rezultat bi bio isti.