Arhiva Mobile - Stranica 16 od 18

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

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.

Uvod u Ionic 2

Ionic 2 je framework za izradu hibridnih mobilnih aplikacija koje dijele isti programski kod (aplikacije razvijamo koristeći HTML, CSS i JavaScript tj. Angular(2)), za Android, iOS i Windows Phone platformu. Time štedimo vrijeme uloženo u razvoj dok bi u slučaju nativnih aplikacija morali napraviti tri aplikacije s tri različite tehnologije. Nekada i to može biti bolja opcija sve ovisi od projekta do projekta tj. o zahtjevima projekta. U ovom blog postu zadržat ćemo se na hibridnim mobilnim aplikacijama i prednostima Ionic 2 frameworka.

Postavljanje razvojne okoline

U ovom primjeru nećemo ići od nule kao u jednom od prethodnih blog postova, nego ćemo koristiti Ionic command line utility (CLI) kako bi što prije i što jednostavnije postavili razvojnu okolinu.

Potrebno je instalirati:

Node.js LTS
Ionic i Cordova pomoću naredbe: $ npm install -g ionic cordova
TypeScript pomoću naredbe: $ npm install -g typescript

Pokretanje Ionic 2 projekta

Ako smo sve dobro napravili sada ćemo moći pokrenuti Ionic 2 projekt koristeći naredbu $ ionic start Ionic2Aplikacija sidemenu --v2

ionic označava da koristimo Ionic CLI
start označava da želimo pokrenuti novi Ionic projekt
Ionic2Aplikacija označava naziv aplikacije
sidemenu označava vrstu predloška
--v2 označava da želite želimo pokrenuti Ionic 2 projekt, inače bi kreirali Ionic 1 projekt

Osim sidemenu predloška, prilikom pokretanja projekta moguće je birati između sljedećih nekoliko predložaka:

tabs: $ ionic start Ionic2Aplikacija tabs --v2
sidemenu: $ ionic start Ionic2Aplikacija sidemenu --v2
blank: $ ionic start Ionic2Aplikacija blank --v2
tutorial: $ ionic start Ionic2Aplikacija tutorial --v2

Ako prilikom kreiranja projekta ne navedemo koji predložak želimo koristiti dobit ćemo tabs predložak.

Projekt ćemo pokrenuti naredbom $ ionic serve i on će se prikazati u web pregledniku.

Kako bi Ionic 2 aplikaciju mogli pokrenuti na Android $ ionic run android odnosno na iOS $ ionic run ios uređaju moramo dodati i pripadajuće platforme, a to ćemo učiniti pomoću sljedećih naredbi:

$ionic platform add android
$ionic platform add ios // iOS platformu možete dodati isključivo na Mac-u

1 2	$ionic platform add android $ionic platform add ios // iOS platformu možete dodati isključivo na Mac-u

Struktura Ionic 2 projekta

Ako sada pogledate strukturu projekta vidjet ćete puno mapa i puno datoteka, međutim najbitnije datoteke nalaze se unutar src mape.

| - Ionic2Aplikacija/
     | - hooks/
     | - node_modules/
     | - platforms/
          | - android/
          | - ios/
     | - plugins/
     | - resources/
     | - src/
          | - app/
               | - app.component.ts
               | - app.html
               | - app.module.ts
               | - app.scss
               | - main.ts
          | - assets/
               | - icon/
          | - pages/
               | - page1/
               | - page2/
          | - theme/
               | - variables.scss
          | - declarations.d
          | - index.html
          | - manifest.jsom
          | - service-worker.js
     | - www/
     | - .editconfig
     | - config.xml
     | - ionic.config.json
     | - package.json
     | - tsconfig.json
     | - tslint.json

| - Ionic2Aplikacija/

| - hooks/

| - node_modules/

| - platforms/

| - android/

| - ios/

| - plugins/

| - resources/

| - src/

| - app/

| - app.component.ts

| - app.html

| - app.module.ts

| - app.scss

| - main.ts

| - assets/

| - icon/

| - pages/

| - page1/

| - page2/

| - theme/

| - variables.scss

| - declarations.d

| - index.html

| - manifest.jsom

| - service-worker.js

| - www/

| - .editconfig

| - config.xml

| - ionic.config.json

| - package.json

| - tsconfig.json

| - tslint.json

Pojašnjenje važnijih datoteka:

config.xml – konfiguracijska datoteka koja sadržava naziv aplikacije i popis datoteka od kojih se Ionic 2 aplikacija sastoji.
src – mapa u kojoj se stvara Ionic 2 aplikacija. Sve stranice, komponente, servise i ostalo kreirat ćemo i uređivati ovdje.
platforms – svaka dodana platforma ima svoju mapu u kojoj se nalaze specifične datoteke za tu platformu, a koje omogućavaju kreiranje završne verzije aplikacije koja ide na uređaj
node_modules – npm paketi navedeni u package.json nalaze se u ovoj mapi.
plugins – mjesto gdje se nalaze svi dodaci koji će proširiti mogućnosti Ionic 2 aplikacije
resources – sadržava ikone i početni ekran (splash screens) za dodane platforme, u ovom slučaju to su iOS i Android

Ionic komponenta

Osnovna gradivna jedinica Ionic 2 projekta je komponenta koja se sastoji od 3 datoteke npr. komponenta.ts, komponenta.html i komponenta.scss

U .ts datoteci definiramo logiku komponente.

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

import { NavController } from 'ionic-angular';

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

  constructor(public _navCtrl: NavController) {
    
  }
  
}

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

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-page1',

templateUrl: 'page1.html'

})

export class Page1 {

constructor(public _navCtrl: NavController) {

}

U .html datoteci definiramo raspored sadržaja komponente.

<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>
</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>

</ion-content>

U .scss datoteci definiramo izgled sadržaja komponente.

page-page1 {

}

page-page1 {

}

Više o komponentama i načinu kako se stvaraju biti će riječi u nekom od sljedećih blog postova.

Zaključak

O Ionicu 2 bi se moglo napisati još toliko toga i sve ranije navedeno može se još detaljnije pojasniti, ali zaustaviti ćemo se na ovome. Napravili smo toliko toga i pokazali kako na jednostavan i brz način pokrenuti Ionic 2 projekt, a zapravo nismo napravili ništa jer aplikacija u trenutnom obliku ništa ne radi i ničemu ne služi. Ipak, temelj imamo i lako ćemo dalje. Kroz buduće blog postove detaljnije ćemo se pozabaviti dodavanjem konkretnih funkcionalnosti ove Ionic 2 aplikacije, a sve ćete moći preuzeti na GitHubu.