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

Ionic 3 – kako spriječiti slučajno gašenje aplikacije

U ovom ću blog postu pokazati kako spriječiti slučajno zatvaranje Ionic aplikacije pritiskom na hardversku/kapacitivnu back tipku na Android mobilnim uređajima.

Kada korisnik pritisne back tipku pojavit će se skočni prozor s pitanjem želi li stvarno zatvoriti aplikaciju ili ne.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu kako bi kasnije mogao aplikaciju pokrenuti na Android mobilnom uređaju.

$ ionic start IonicBack sidemenu
$ cd IonicBack 
$ ionic cordova platform add android

$ ionic start IonicBack sidemenu

$ cd IonicBack

$ ionic cordova platform add android

Ionic Platform

Najbolja stvar u svemu je što za ovu funkcionalnost nije potrebno instalirati dodatne Ionic Native pluginove.

Provjeru pritiska hardverske/kapacitivne back tipke postavit ću unutar dvije komponente čisto iz razloga da pokažem dva načina kako je to moguće učiniti.

Unutar app.component.ts Platform već imam tako da ću dodati još i AlertController.

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

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

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;

  pages: Array<{title: string, component: any}>;

  constructor(public _platform: Platform, 
              public _statusBar: StatusBar, 
              public _splashScreen: SplashScreen,
              public _alertCtrl: AlertController) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'List', component: ListPage }
    ];

  }

  initializeApp() {
    this._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.
      this._statusBar.styleDefault();
      this._splashScreen.hide();

      this._platform.registerBackButtonAction(() => {
        try {
          this.showConfirm();
        }
        catch(e) {
          console.log(e);
        }
      }, 0)

    });
  }

  showConfirm() {
    let confirm = this._alertCtrl.create({
      title: 'Pažnja!',
      message: 'Želite li ugasiti aplikaciju?',
      buttons: [
        {
          text: 'Ne',
          handler: () => {
            //
          }
        },
        {
          text: 'Da',
          handler: () => {
            this._platform.exitApp();
          }
        }
      ]
    });
    confirm.present();
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

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

import { Nav, Platform, AlertController } from 'ionic-angular';

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

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

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

import { ListPage } from '../pages/list/list';

@Component({

templateUrl: 'app.html'

})

export class MyApp {

@ViewChild(Nav) nav: Nav;

rootPage: any = HomePage;

pages: Array<{title: string, component: any}>;

constructor(public _platform: Platform,

public _statusBar: StatusBar,

public _splashScreen: SplashScreen,

public _alertCtrl: AlertController) {

this.initializeApp();

// used for an example of ngFor and navigation

this.pages = [

{ title: 'Home', component: HomePage },

{ title: 'List', component: ListPage }

];

}

initializeApp() {

this._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.

this._statusBar.styleDefault();

this._splashScreen.hide();

this._platform.registerBackButtonAction(() => {

try {

this.showConfirm();

}

catch(e) {

console.log(e);

}

}, 0)

});

}

showConfirm() {

let confirm = this._alertCtrl.create({

title: 'Pažnja!',

message: 'Želite li ugasiti aplikaciju?',

buttons: [

{

text: 'Ne',

handler: () => {

}

{

text: 'Da',

handler: () => {

this._platform.exitApp();

}

]

});

confirm.present();

}

openPage(page) {

// Reset the content nav to have just this page

// we wouldn't want the back button to show in this scenario

this.nav.setRoot(page.component);

}

Kada je u pitanju home.ts komponenta ondje trebam uvesti Platform i AlertController.

import { Component } from '@angular/core';
import { NavController, Platform, AlertController } from 'ionic-angular';

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

  constructor(public _navCtrl: NavController,
              public _platform: Platform, 
              public _alertCtrl: AlertController) {

  }

  ionViewDidEnter() {
    this.initializeBackButtonCustomHandler();
  }

  public initializeBackButtonCustomHandler(): void {
    this._platform.registerBackButtonAction(() => {
      try {
        this.showConfirm();
      }
      catch(e) {
        console.log(e);
      }
}, 10);
} 

showConfirm() {
  let confirm = this._alertCtrl.create({
    title: 'Pažnja!',
    message: 'Želite li ugasiti aplikaciju?',
    buttons: [
      {
        text: 'Ne',
        handler: () => {
          //
        }
      },
      {
        text: 'Da',
        handler: () => {
          this._platform.exitApp();
        }
      }
    ]
  });
  confirm.present();
}

}

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

import { NavController, Platform, AlertController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public _navCtrl: NavController,

public _platform: Platform,

public _alertCtrl: AlertController) {

}

ionViewDidEnter() {

this.initializeBackButtonCustomHandler();

}

public initializeBackButtonCustomHandler(): void {

this._platform.registerBackButtonAction(() => {

try {

this.showConfirm();

}

catch(e) {

console.log(e);

}

}, 10);

}

showConfirm() {

let confirm = this._alertCtrl.create({

title: 'Pažnja!',

message: 'Želite li ugasiti aplikaciju?',

buttons: [

{

text: 'Ne',

handler: () => {

}

{

text: 'Da',

handler: () => {

this._platform.exitApp();

}

]

});

confirm.present();

}

Zaključak

Ovo je jedan od načina kako spriječiti slučajno gašenje Ionic aplikacije pritiskom hardverske/kapacitivne back tipke.

Ionic 3 – Google login/prijava

U ovom ću blog postu pokazati kako na jednostavan način omogućiti prijavu unutar Ionic aplikacije koristeći Google korisničke podatke. Ranije sam već objavio blog post o tome kako se unutar Ionic aplikacije prijaviti koristeći Facebook.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu kako bi kasnije mogao aplikaciju pokrenuti na Android mobilnom uređaju.

$ ionic start IonicPrijavaG blank
$ cd IonicPrijavaG 
$ ionic cordova platform add android

$ ionic start IonicPrijavaG blank

$ cd IonicPrijavaG

$ ionic cordova platform add android

Sada ću odmah promijeniti i APP ID oznaku unutar config.xml iz id="io.ionic.starter" u id="hr.tomislavstankovic.ionicprijavag".

Postavljanje Firebase projekta

Temelj za uspješnu Google prijavu je pravilno postavljen Firebase projekt.

Na poveznici https://developers.facebook.com/apps/ kreiram profil za aplikaciju i pod Authentication – Sign-in providers odabirem Google.

Ovdje sada imam i Web Client ID koji će mi kasnije trebati unutar funkcije za prijavu.

SHA-1

Kako je i navedeno na slici iznad, moram kreirati SHA-1. Ovo radim na isti način kao i prilikom pripreme aplikacije za objavu na Google Play Store.

$ keytool -genkey -v -keystore IonicGooglePrijava.keystore -alias IonicGooglePrijava -keyalg RSA -keysize 2048 -validity 10000

1	$ keytool -genkey -v -keystore IonicGooglePrijava.keystore -alias IonicGooglePrijava -keyalg RSA -keysize 2048 -validity 10000

Google sign-in is automatically configured on your connected iOS and web apps. To set up Google sign-in for your Android apps, you need to add the SHA1 fingerprint for each app on your Project Settings.

Sada imam IonicGooglePrijava.keystore datoteku koja je preduvjet za kreiranje SHA-1.

Kreiranje, produkcijskog, SHA-1 potpisa radi se sljedećom naredbom

keytool -exportcert -list -v \
-alias myalias -keystore IonicGooglePrijava.keystore

1 2	keytool -exportcert -list -v \ -alias myalias -keystore IonicGooglePrijava.keystore

Kreiranje, dev, SHA-1 potpisa radi se sljedećom naredbom uz password android

$ keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

1	$ keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

Pod Project settings – Your apps klikom na Add Firebase to your Android app radim pripremu za Android verziju Ionic aplikacije.

Ovdje unosim ranije kreiran SHA-1.

Implementacija Google prijave

Prije svega moram instalirati Ionic Native Google Plus plugin koristeći sljedeću naredbu

$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid
$ npm install --save @ionic-native/google-plus

1 2	$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid $ npm install --save @ionic-native/google-plus

U ovom je koraku potreban REVERSED_CLIENT_ID kojega mogu dobiti ako posjetim https://console.developers.google.com/, u izborniku s lijeve strane odaberem API Credentials ili pronaći unutar GoogleService-Info.plist datoteke. To je zapravo obrnuti Web Client ID com.googleusercontent.apps.xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxv

Sada uvozim ranije instaliran plugin unutar app.module.ts

import { GooglePlus } from '@ionic-native/google-plus';
...
providers: [
    StatusBar,
    SplashScreen,
    GooglePlus,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

import { GooglePlus } from '@ionic-native/google-plus';

...

providers: [

StatusBar,

SplashScreen,

GooglePlus,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

Ako sada pokrenem aplikaciju vidjet ću samo HomePage stranicu jer sam koristio blank temu i zato ću sada kreirati novu stranicu koja će sadržavati gumb za prijavu. Tek nakon uspješne prijave prikaz će se HomePage stranica.

$ ionic generate page Prijava

1	$ ionic generate page Prijava

Sada ću u app.component.ts postaviti da mi je PrijavaPage početna stranica (rootPage) nakon što se pokrene aplikacija.

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

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

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

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

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

import { Platform } from 'ionic-angular';

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

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

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

@Component({

templateUrl: 'app.html'

})

export class MyApp {

//rootPage:any = HomePage;

rootPage:any = 'PrijavaPage';

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

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

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

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

statusBar.styleDefault();

splashScreen.hide();

});

}

Stranica za prijavu sastojat će se od Ionic loga i gumba za Google prijavu.

<ion-content padding>
  <ion-row>
      <ion-col col-12 text-center>
            <img src="assets/imgs/logo.png" alt="Ionic logo" width="250" height="auto">
          </ion-col>
      </ion-row>
            <ion-row padding>
                <ion-col col-12 text-center>
                    <img (click)="prijavaGoogle()" src="assets/imgs/google-button.png" alt="Google logo">
                </ion-col>
              </ion-row>
</ion-content>

<ion-content padding>

<ion-row>

<ion-col col-12 text-center>

</ion-col>

</ion-row>

<ion-row padding>

<ion-col col-12 text-center>

</ion-col>

</ion-row>

</ion-content>

Funkcionalnost će se sastojati samo od funkcije za prijavu prijavaGoogle().

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

import { GooglePlus } from '@ionic-native/google-plus';
import { HomePage } from '../home/home';

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

  constructor(public _navCtrl: NavController, 
              public _navParams: NavParams,
              public _googlePlus: GooglePlus) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PrijavaPage');
  }

  prijavaGoogle(){
    this._googlePlus.login({
      'webClientId': '551660638119-gik6rq06bojtil5f6jijl6aiapet2l6v.apps.googleusercontent.com'
    }).then((res) => {
        console.log(res);
        localStorage.setItem('userEmail', res.email);
        localStorage.setItem('userName', res.displayName);
        localStorage.setItem('userImage', res.imageUrl);
        this._navCtrl.setRoot(HomePage);
    }, (err) => {
        console.log(err);
    });
  }

}

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

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

import { GooglePlus } from '@ionic-native/google-plus';

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

@IonicPage()

@Component({

selector: 'page-prijava',

templateUrl: 'prijava.html',

})

export class PrijavaPage {

constructor(public _navCtrl: NavController,

public _navParams: NavParams,

public _googlePlus: GooglePlus) {

}

ionViewDidLoad() {

console.log('ionViewDidLoad PrijavaPage');

}

prijavaGoogle(){

this._googlePlus.login({

'webClientId': '551660638119-gik6rq06bojtil5f6jijl6aiapet2l6v.apps.googleusercontent.com'

}).then((res) => {

console.log(res);

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

localStorage.setItem('userName', res.displayName);

localStorage.setItem('userImage', res.imageUrl);

this._navCtrl.setRoot(HomePage);

}, (err) => {

console.log(err);

});

}

console.log(res) izgleda ovako

Nakon uspješne prijave otvara se početna stranica HomePage na kojoj će se prikazati ime i prezime, slika i e-mail korisnika.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Google login/prijava
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-avatar item-start>
        <img src="{{image}}">
      </ion-avatar>
      <h2>{{name}}</h2>
      <p>{{email}}</p>
    </ion-item>
  </ion-list>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Google login/prijava

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item>

<ion-avatar item-start>

</ion-avatar>

<p>{{email}}</p>

</ion-item>

</ion-list>

</ion-content>

Funkcionalnost HomePage stranice sastoji se od prikaza detalja o korisniku i funkcije za odjavu.

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

import { GooglePlus } from '@ionic-native/google-plus';

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

  email: string;
  name: string;
  image: string;

  constructor(public _navCtrl: NavController,
              public _googlePlus: GooglePlus) {
  }

  ionViewWillEnter(){
    this.email = localStorage.getItem('userEmail');
    this.name = localStorage.getItem('userName');
    this.image = localStorage.getItem('userImage');
  }

  logout(){
    this._googlePlus.logout().then(() => {
        console.log("logged out");
        this._navCtrl.setRoot('PrijavaPage');
    });
  }

}

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

import { NavController } from 'ionic-angular';

import { GooglePlus } from '@ionic-native/google-plus';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

email: string;

name: string;

image: string;

constructor(public _navCtrl: NavController,

public _googlePlus: GooglePlus) {

}

ionViewWillEnter(){

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

this.name = localStorage.getItem('userName');

this.image = localStorage.getItem('userImage');

}

logout(){

this._googlePlus.logout().then(() => {

console.log("logged out");

this._navCtrl.setRoot('PrijavaPage');

});

}

Sve to na kraju izgleda ovako

Zaključak

U ovom sam blog postu pokazao kako na jednostavan i brz način ugraditi Google prijavu unutar Ionic aplikacije.

Struktura projekta prema package.json

{
  "name": "IonicPrijavaG",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/google-plus": "^4.5.3",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "cordova-android": "7.0.0",
    "cordova-plugin-device": "^2.0.1",
    "cordova-plugin-googleplus": "^5.2.1",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "2.4.2"
  },
  "description": "Ionic3 - Google prijava/login",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "com.googleusercontent.apps.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxx"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

{

"name": "IonicPrijavaG",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"private": true,

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve"

"dependencies": {

"@angular/common": "5.0.3",

"@angular/compiler": "5.0.3",

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

"@angular/core": "5.0.3",

"@angular/forms": "5.0.3",

"@angular/http": "5.0.3",

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

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

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

"@ionic-native/google-plus": "^4.5.3",

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

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

"@ionic/storage": "2.1.3",

"cordova-android": "7.0.0",

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

"cordova-plugin-googleplus": "^5.2.1",

"cordova-plugin-ionic-keyboard": "^2.0.5",

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

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

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

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.2",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.18"

"devDependencies": {

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

"typescript": "2.4.2"

"description": "Ionic3 - Google prijava/login",

"cordova": {

"plugins": {

"cordova-plugin-whitelist": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

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

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

"cordova-plugin-googleplus": {

"REVERSED_CLIENT_ID": "com.googleusercontent.apps.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxx"

}

"platforms": [

"android"

]

}

Ionic 3 i WordPress REST API – prikaz blog postova

U ovom ću blog postu napraviti primjer Ionic 3 aplikacije koja će prikazivati popis blog postova sa ovog bloga koristeći WordPress REST API.

Na početnoj stranici biti će popis blog postova (naziv, vrijeme objave, kategorije, kratak sadržaj i slika) te će se moći pristupiti svakom blog postu pojedinačno.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu kako bi kasnije mogao aplikaciju pokrenuti na Android mobilnom uređaju.

$ ionic start Ionic3WordPressBlog blank
$ cd Ionic3WordPressBlog 
$ ionic cordova platform add android

$ ionic start Ionic3WordPressBlog blank

$ cd Ionic3WordPressBlog

$ ionic cordova platform add android

API provider

Sada ću kreirati API Provider koji će služiti kao centralno mjesto svih WordPress URL-ova koje ću koristiti unutar Ionic aplikacije.

$ ionic g provider ApiProvider

1	$ ionic g provider ApiProvider

Na URL-u https://www.tomislavstankovic.com/blog/wp-json/wp/v2/posts dohvaćam popis blog postova. Unutar ovog API-ja također imam dva vrlo bitna podatka, a to su featured_media i categories koji će mi poslužiti za dohvaćanje slike i kategorije svakog blog posta.

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

@Injectable()
export class ApiProvider {

  osnovniUrl: string = "https://www.tomislavstankovic.com/blog/wp-json/wp/v2/";

  constructor(public _http: HttpClient) {
    console.log('Hello ApiProvider Provider');
  }

  blogPostovi(){
    return this._http.get(this.osnovniUrl + 'posts')
    .map(data => Object.keys(data).map(k => data[k]))
  }

  slikaBlogPosta(a:any){
    return this._http.get(this.osnovniUrl + 'media' + a)
    .map(data => Object.keys(data).map(k => data[k]))
  }

  kategorijaBlogPosta(){
    return this._http.get(this.osnovniUrl + 'categories/?per_page=100')
    .map(data => Object.keys(data).map(k => data[k]))
  }

}

import { HttpClient } from '@angular/common/http';

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

import 'rxjs/add/operator/map';

@Injectable()

export class ApiProvider {

osnovniUrl: string = "https://www.tomislavstankovic.com/blog/wp-json/wp/v2/";

constructor(public _http: HttpClient) {

console.log('Hello ApiProvider Provider');

}

blogPostovi(){

return this._http.get(this.osnovniUrl + 'posts')

.map(data => Object.keys(data).map(k => data[k]))

}

slikaBlogPosta(a:any){

return this._http.get(this.osnovniUrl + 'media' + a)

.map(data => Object.keys(data).map(k => data[k]))

}

kategorijaBlogPosta(){

return this._http.get(this.osnovniUrl + 'categories/?per_page=100')

.map(data => Object.keys(data).map(k => data[k]))

}

Prikaz blog postova

Aplikacija će na kraju izgledati ovako:

Kao što se može vidjeti na početnom ekranu nalazi se popis zadnjih 10 blog postova. Svaki blog post ima naslov, sliku, kratak sadržaj i vrijeme proteklo od objave. Nekoliko preduvjeta je bilo potrebno zadovoljiti kako bi se sve to prikazalo na taj način.

Struktura početne stranice izgleda ovako i ovdje je posebno zanimljiva funkcija prikaziJedanBlogPost() pomoću koje prosljeđujem potrebne podatke na stranicu za prikaz pojedinačnog blog posta.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3WordPress
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
 
  <ion-card *ngFor="let post of jedanBlogPost; let i = index" tappable>
    <div *ngFor="let slika of jednaSlika; let i = index" (click)="prikaziJedanBlogPost({id:post.id, naslov:post.naslov, sadrzaj: post.sadrzaj, urlslike: slika.putanjaSlike, index: i})">
        <div *ngIf="post.id == slika.idBlogPosta">
         <img [src]="slika.putanjaSlike">
         <span class="vrijeme"><ion-icon name="time"></ion-icon> {{ post.vrijeme }}</span>
         <span class="kategorija"><ion-icon name="ios-bookmark-outline"></ion-icon> {{post.kategorije | KategorijaPipe:kategorije}}</span>
        </div>
      </div>
      <ion-card-content (click)="prikaziJedanBlogPost({id:post.id, naslov:post.naslov, sadrzaj: post.sadrzaj, urlslike: slika.putanjaSlike, index: i})">
          <ion-card-title [innerHTML]="post.naslov">
          </ion-card-title>
          <div [innerHTML]="post.uvod"></div>
        </ion-card-content>
</ion-card>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3WordPress

</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<ion-card *ngFor="let post of jedanBlogPost; let i = index" tappable>

<span class="vrijeme"><ion-icon name="time"></ion-icon> {{ post.vrijeme }}</span>

<span class="kategorija"><ion-icon name="ios-bookmark-outline"></ion-icon> {{post.kategorije | KategorijaPipe:kategorije}}</span>

</div>

<ion-card-content (click)="prikaziJedanBlogPost({id:post.id, naslov:post.naslov, sadrzaj: post.sadrzaj, urlslike: slika.putanjaSlike, index: i})">

<ion-card-title [innerHTML]="post.naslov">

</ion-card-title>

</ion-card-content>

</ion-card>

</ion-content>

Još jedna zanimljiva stvar u home.html je KategorijaPipe koja služi za dohvaćanje naziva kategorije na osnovu ID-a.

$ ionic generate pipe KategorijaPipe

1	$ ionic generate pipe KategorijaPipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'KategorijaPipe',
})
export class KategorijaPipe {

  transform(value, args) {
    let output = '';
    value.forEach(function(number){
      output = output + ' ' + args[number]
    })
    return output;
  }
}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

name: 'KategorijaPipe',

})

export class KategorijaPipe {

transform(value, args) {

let output = '';

value.forEach(function(number){

output = output + ' ' + args[number]

})

return output;

}

Naravno, potrebno je još o svemu tome obavijestiti app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ApiProvider } from '../providers/api/api';

import { HttpClientModule } from '@angular/common/http'; 
import { KategorijaPipe } from '../pipes/kategorija/kategorija';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    KategorijaPipe
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ApiProvider
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

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

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

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

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

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

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

import { ApiProvider } from '../providers/api/api';

import { HttpClientModule } from '@angular/common/http';

import { KategorijaPipe } from '../pipes/kategorija/kategorija';

@NgModule({

declarations: [

MyApp,

HomePage,

KategorijaPipe

imports: [

BrowserModule,

IonicModule.forRoot(MyApp),

HttpClientModule

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler},

ApiProvider

]

})

export class AppModule {}

Uz nešto malo CSS-a

page-home {

    .vrijeme {
        position: relative;
        color: #fff;
        background-color: #3F9FCF;
        padding: 1px;
    }

    .toolbar-background {
        background-color: #3F9FCF;
    }

    .toolbar-title {
        color: #fff;
    }

    .kategorija {
        position: absolute;
        right: 10px;
        background-color: #3F9FCF;
        color: #fff;
        padding: 1px;
    }

}

page-home {

.vrijeme {

position: relative;

color: #fff;

background-color: #3F9FCF;

padding: 1px;

}

.toolbar-background {

background-color: #3F9FCF;

}

.toolbar-title {

color: #fff;

}

.kategorija {

position: absolute;

right: 10px;

background-color: #3F9FCF;

color: #fff;

padding: 1px;

}

Kao što se može vidjeti u home.ts za prikaz vremena u željenom obliku koristio sam Moment.js

Pojašnjenje funkcija:

prikazBlogPostova() – dohvaća popis blog postova i kreira niz (array) jedanBlogPost
dohvatiUrlSlike() – dohvaća URL slike pojedinačnog blog posta na osnovu parametra idslike: res[i].featured_media iz gornje funkcije
ucitajKategorije() – dohvaća kategorije za blog post

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ApiProvider } from './../../providers/api/api';

import moment from 'moment';

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

  jedanBlogPost: Array<Object>;
  jednaSlika: Array<Object>;
  putanjaSlike: any;
  kategorije: any;

  constructor(public _navCtrl: NavController,
              public _api: ApiProvider) {
  }

  ionViewDidLoad(){
    moment.locale('hr');
    this.prikazBlogPostova();
    this.ucitajKategorije();
  }

  prikazBlogPostova(){
    this.jedanBlogPost = [];
    this.jednaSlika = [];
    this._api.blogPostovi().subscribe(res => {
      for(var i = 0; i < res.length; i++) {
        //Funkcija koja dohvaća sliku - početak
        this.dohvatiUrlSlike(res[i].featured_media);
        //Funkcija koja dohvaća sliku - kraj
        this.jedanBlogPost.push({id: res[i].id,
                             naslov: res[i].title.rendered,
                             uvod: res[i].excerpt.rendered,
                             sadrzaj: res[i].content.rendered,
                             kategorije: res[i].categories,
                             vrijeme: moment.utc(res[i].modified_gmt).fromNow(),
                             idslike: res[i].featured_media}); 
       }

    });
  }

  dohvatiUrlSlike(a){
    this.putanjaSlike = {};
    this._api.slikaBlogPosta(a).subscribe(res => {
      this.jednaSlika.push({
               idSlike: res[0],
               idBlogPosta: res[22],
               putanjaSlike: res[23]});
      }); 
  }

  ucitajKategorije(){
    let categoryArray = [];
    this._api.kategorijaBlogPosta().subscribe(res => {
      res.forEach(function(item){
        categoryArray[item.id] = item.name;
      })
      this.kategorije = categoryArray;
    }); 
  } 

  prikaziJedanBlogPost(a){
    this._navCtrl.push('JedanBlogPostPage', a);
  }

}

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

import { NavController } from 'ionic-angular';

import { ApiProvider } from './../../providers/api/api';

import moment from 'moment';

@Component({

selector: 'page-home',

templateUrl: 'home.html',

providers: [ApiProvider]

})

export class HomePage {

jedanBlogPost: Array<Object>;

jednaSlika: Array<Object>;

putanjaSlike: any;

kategorije: any;

constructor(public _navCtrl: NavController,

public _api: ApiProvider) {

}

ionViewDidLoad(){

moment.locale('hr');

this.prikazBlogPostova();

this.ucitajKategorije();

}

prikazBlogPostova(){

this.jedanBlogPost = [];

this.jednaSlika = [];

this._api.blogPostovi().subscribe(res => {

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

//Funkcija koja dohvaća sliku - početak

this.dohvatiUrlSlike(res[i].featured_media);

//Funkcija koja dohvaća sliku - kraj

this.jedanBlogPost.push({id: res[i].id,

naslov: res[i].title.rendered,

uvod: res[i].excerpt.rendered,

sadrzaj: res[i].content.rendered,

kategorije: res[i].categories,

vrijeme: moment.utc(res[i].modified_gmt).fromNow(),

idslike: res[i].featured_media});

}

});

}

dohvatiUrlSlike(a){

this.putanjaSlike = {};

this._api.slikaBlogPosta(a).subscribe(res => {

this.jednaSlika.push({

idSlike: res[0],

idBlogPosta: res[22],

putanjaSlike: res[23]});

});

}

ucitajKategorije(){

let categoryArray = [];

this._api.kategorijaBlogPosta().subscribe(res => {

res.forEach(function(item){

categoryArray[item.id] = item.name;

})

this.kategorije = categoryArray;

});

}

prikaziJedanBlogPost(a){

this._navCtrl.push('JedanBlogPostPage', a);

}

Klikom na naslov ili sliku blog posta otvara se jedan blog post. Stranica jednog blog posta kreirana je sljedećom naredbom

$ ionic generate page JedanBlogPost

1	$ ionic generate page JedanBlogPost

Dok je struktura ovakva

<ion-header>
  <ion-navbar color="secondary">
    <ion-title [innerHTML]="naslov"></ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    <img [src]="slika">
  <ion-card>
    <ion-card-content>
        <div [innerHTML]="sadrzaj"></div>
    </ion-card-content>
  </ion-card>
</ion-content>

<ion-header>

<ion-navbar color="secondary">

<ion-title [innerHTML]="naslov"></ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<ion-card>

<ion-card-content>

</ion-card-content>

</ion-card>

</ion-content>

Funkcionalnost stranice za prikaz jednog blog posta ne radi ništa osim dohvaćanja proslijeđenih podataka s prethodne stranice s popisom svih blog postova pomoću objekta NavParams.

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

@IonicPage()
@Component({
  selector: 'page-jedan-blog-post',
  templateUrl: 'jedan-blog-post.html'
})
export class JedanBlogPostPage {

  naslov:any;
  sadrzaj:any;
  slika:any;

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

  ionViewWillEnter() {
    this.naslov = this._navParams.data.naslov;
    this.sadrzaj = this._navParams.data.sadrzaj;
    this.slika = this._navParams.data.urlslike;
  }

}

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

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

@IonicPage()

@Component({

selector: 'page-jedan-blog-post',

templateUrl: 'jedan-blog-post.html'

})

export class JedanBlogPostPage {

naslov:any;

sadrzaj:any;

slika:any;

constructor(public _navCtrl: NavController,

public _navParams: NavParams) {

}

ionViewWillEnter() {

this.naslov = this._navParams.data.naslov;

this.sadrzaj = this._navParams.data.sadrzaj;

this.slika = this._navParams.data.urlslike;

}

Zaključak

Struktura projekta prema package.json izgleda ovako

{
  "name": "Ionic3WordPressBlog",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "moment": "^2.21.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "2.4.2"
  },
  "description": "Ionic3WordPressBlog"
}

{

"name": "Ionic3WordPressBlog",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"private": true,

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve"

"dependencies": {

"@angular/common": "5.0.3",

"@angular/compiler": "5.0.3",

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

"@angular/core": "5.0.3",

"@angular/forms": "5.0.3",

"@angular/http": "5.0.3",

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

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

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

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

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

"@ionic/storage": "2.1.3",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"moment": "^2.21.0",

"rxjs": "5.5.2",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.18"

"devDependencies": {

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

"typescript": "2.4.2"

"description": "Ionic3WordPressBlog"

}

Ionic 3 – prikaz informacija o SIM kartici

U ovom ću blog postu pokazati kako dobiti informacije o SIM kartici mobilnog uređaja unutar Ionic aplikacije.

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu kako bi kasnije mogao aplikaciju pokrenuti na Android mobilnom uređaju.

$ ionic start Ionic3Sim blank
$ cd Ionic3Sim 
$ ionic cordova platform add android

$ ionic start Ionic3Sim blank

$ cd Ionic3Sim

$ ionic cordova platform add android

Sada ću instalirati Ionic Native Sim plugin:

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

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

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

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

import { Sim } from '@ionic-native/sim';

...

@NgModule({

...

providers: [

...

Sim

...

]

...

})

export class AppModule { }

Funkcionalnost će se nalaziti unutar home.ts, a sastojat će se od jedne funkcije koja će dohvatiti informacije o SIM kartici.

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

import { Sim } from "@ionic-native/sim";

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

  constructor(public _navCtrl: NavController,
              private _sim: Sim) {

    this.dohvatiSimPodatke();

  }

  dohvatiSimPodatke(){
    this._sim.getSimInfo().then(
      (info) => console.log('Sim info: ', info),
      (err) => console.log('Unable to get sim info: ', err)
    );
    
    this._sim.hasReadPermission().then(
      (info) => console.log('Has permission: ', info)
    );
    
    this._sim.requestReadPermission().then(
      () => console.log('Permission granted'),
      () => console.log('Permission denied')
    );
  }

}

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

import { NavController } from 'ionic-angular';

import { Sim } from "@ionic-native/sim";

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public _navCtrl: NavController,

private _sim: Sim) {

this.dohvatiSimPodatke();

}

dohvatiSimPodatke(){

this._sim.getSimInfo().then(

(info) => console.log('Sim info: ', info),

(err) => console.log('Unable to get sim info: ', err)

);

this._sim.hasReadPermission().then(

(info) => console.log('Has permission: ', info)

);

this._sim.requestReadPermission().then(

() => console.log('Permission granted'),

() => console.log('Permission denied')

);

}

Kada se aplikacija pokrene na mobilnom uređaju tražit će određene dozvole

Nakon toga, moguće je dobiti sljedeće informacije o SIM kartici:

Ionic 3 – Facebook prijava

U ovom ću blog postu pokazati kako na jednostavan način ugraditi Facebook prijavu unutar Ionic aplikacije.

Ovo je odličan izbor za sve aplikacije koje trebaju neku vrstu prijave i održavanja komunikacije s korisnicima aplikacije bez da se mora imati poseban back-end za prijavu.

Također, korisnicima je jednostavnije kliknuti na jedan gumb i tako se prijaviti nego da se prvo moraju registrirati koristeći npr. e-mail.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu kako bi kasnije mogao aplikaciju pokrenuti na Android mobilnom uređaju.

$ ionic start IonicPrijavaF blank
$ cd IonicPrijavaF 
$ ionic cordova platform add android

$ ionic start IonicPrijavaF blank

$ cd IonicPrijavaF

$ ionic cordova platform add android

Sada ću odmah promijeniti i APP ID oznaku unutar config.xml iz id="io.ionic.starter" u id="hr.tomislavstankovic.ionicprijavaf" jer će mi to trebati odmah u nastavku.

Facebook Developers

Sada ću na poveznici https://developers.facebook.com/apps/ kreirati profil za maloprije kreiranu aplikaciju koji mi je potreban za uspješnu implementaciju prijave.

Klikom na “Add a New App” kreiram profil za svoju aplikaciju.

U ovom koraku unosim samo naziv aplikacije.

Sada vidim upravljačku ploču i “App ID” koji će mi uskoro trebati i bez kojega Facebook prijava ne bi radila.

Klikom na “Add Platform” u prethodnom koraku dobijem sljedeći prozor gdje odabirem “Android“.

Ovdje unosim ID iz config.xml datoteke.

Nakon toga dobijem sljedeću poruku i s obzirom da mi je ovo testna aplikacija i da se ne nalazi na Google Play Storeu dovoljno je kliknuti na “Use this package name“.

Sada imam sve spremno za implementaciju.

Implementacija prijave

Sada krećem u implementaciju Facebook prijave unutar Ionic aplikacije.

Prije svega moram instalirati Ionic Native Facebook plugin

$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="1986093454936515" --variable APP_NAME="IonicPrijavaF"
$ npm install --save @ionic-native/facebook

1 2	$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="1986093454936515" --variable APP_NAME="IonicPrijavaF" $ npm install --save @ionic-native/facebook

Nakon instalacije u config.xml pronalazim sljedeće

 <plugin name="cordova-plugin-facebook4" spec="^1.9.1">
        <variable name="APP_ID" value="1986093454936515" />
        <variable name="APP_NAME" value="IonicPrijavaF" />
 </plugin>

</plugin>

Sada uvozim ranije instaliran plugin unutar app.module.ts

import { Facebook } from '@ionic-native/facebook';
...
providers: [
    StatusBar,
    SplashScreen,
    Facebook,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

import { Facebook } from '@ionic-native/facebook';

...

providers: [

StatusBar,

SplashScreen,

Facebook,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

Ako sada pokrenem aplikaciju vidjet ću samo HomePage stranicu jer sam koristio blank temu i zato ću sada kreirati novu stranicu koja će sadržavati gumb za prijavu. Tek nakon uspješne prijave prikaz će se HomePage stranica.

$ ionic generate page Prijava

1	$ ionic generate page Prijava

Sada ću u app.component.ts postaviti da mi je PrijavaPage početna stranica (rootPage) nakon što se pokrene aplikacija.

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

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

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

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

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

import { Platform } from 'ionic-angular';

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

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

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

@Component({

templateUrl: 'app.html'

})

export class MyApp {

//rootPage:any = HomePage;

rootPage:any = 'PrijavaPage';

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

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

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

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

statusBar.styleDefault();

splashScreen.hide();

});

}

Stranica za prijavu sastojat će se od Ionic loga i gumba za Facebook prijavu.

<ion-content padding>
  <ion-row>
      <ion-col col-12 text-center>
            <img src="assets/imgs/logo.png" alt="Ionic logo" width="250" height="auto">
          </ion-col>
      </ion-row>
            <ion-row padding>
                <ion-col col-12 text-center>
                    <img (click)="prijavaFb()" src="assets/imgs/facebook-button.png" alt="Facebook logo">
                </ion-col>
              </ion-row>
</ion-content>

<ion-content padding>

<ion-row>

<ion-col col-12 text-center>

</ion-col>

</ion-row>

<ion-row padding>

<ion-col col-12 text-center>

</ion-col>

</ion-row>

</ion-content>

Funkcionalnost će se sastojati od dvije funkcije. Funkcija prijavaFb() vrši prijavu, dok funkcija getUserDetail() na osnovu ID-a korisnika dohvaća više detalja o korisniku kao što su ime i prezime, email adresa, spol i poveznicu na sliku profila.

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

import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';
import { HomePage } from '../home/home';

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

  constructor(public _navCtrl: NavController, 
              public _navParams: NavParams,
              private _facebook: Facebook) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PrijavaPage');
  }

  prijavaFb(){
    this._facebook.login(['public_profile', 'user_friends', 'email'])
  .then((res) => {
     console.log(res);
     this._navCtrl.setRoot(HomePage);
  }, (err) => {
    console.log('Error logging into Facebook', err);
  });
  } 

  getUserDetail(userid) {
    this._facebook.api("/"+userid+"/?fields=id,email,name,picture,gender",["public_profile"])
      .then(res => {
        console.log(res);
      })
      .catch(e => {
        console.log(e);
      });
  } 

}

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

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

import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';

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

@IonicPage()

@Component({

selector: 'page-prijava',

templateUrl: 'prijava.html',

})

export class PrijavaPage {

constructor(public _navCtrl: NavController,

public _navParams: NavParams,

private _facebook: Facebook) {

}

ionViewDidLoad() {

console.log('ionViewDidLoad PrijavaPage');

}

prijavaFb(){

this._facebook.login(['public_profile', 'user_friends', 'email'])

.then((res) => {

console.log(res);

this._navCtrl.setRoot(HomePage);

}, (err) => {

console.log('Error logging into Facebook', err);

});

}

getUserDetail(userid) {

this._facebook.api("/"+userid+"/?fields=id,email,name,picture,gender",["public_profile"])

.then(res => {

console.log(res);

})

.catch(e => {

console.log(e);

});

}

Nakon uspješne prijave korisnik automatski bude preusmjeren na HomePage dok u pozadini dobijem dva odgovora (res) s podacima o korisniku koji se upravo prijavio u moju Ionic aplikaciju.

U ovom se primjeru HomePage sastoji samo od gumba za odjavu

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic - Facebook prijava
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-row padding>
    <ion-col col-12 text-center>
        <img (click)="odjavaFb()" src="assets/imgs/facebook-logout.png" alt="Facebook logo">
    </ion-col>
  </ion-row>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic - Facebook prijava

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-row padding>

<ion-col col-12 text-center>

</ion-col>

</ion-row>

</ion-content>

tj. od funkcije za odjavu.

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

import { Facebook } from '@ionic-native/facebook';

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

  constructor(public _navCtrl: NavController,
              private _facebook: Facebook) {

  }

  odjavaFb(){
    this._facebook.logout()
    .then( res => console.log(res))
    .catch(e => console.log('Error logout from Facebook', e));
  }

}

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

import { NavController } from 'ionic-angular';

import { Facebook } from '@ionic-native/facebook';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public _navCtrl: NavController,

private _facebook: Facebook) {

}

odjavaFb(){

this._facebook.logout()

.then( res => console.log(res))

.catch(e => console.log('Error logout from Facebook', e));

}

I to bi bilo sve. Međutim, postoji još jedna stvar. Svaki put kada korisnik pokrene aplikaciju, neovisno o tome je li se ranije već prijavljivao, on će se morati ponovno prijaviti sa svojim podacima. Osim ako napravim sljedeće.

U trenutku kada se korisnik uspješno prijavi u aplikaciju spremam njegov ID u localStorage i kasnije svaki sljedeći put kada pokrene aplikaciju provjeravam postoji li već spremljen njegov ID this.provjera();, ako postoji automatski ga preusmjeravam na HomePage.

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

import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';
import { HomePage } from '../home/home';

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

  constructor(public _navCtrl: NavController, 
              public _navParams: NavParams,
              private _facebook: Facebook) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PrijavaPage');
    this.provjera();
  }

  prijavaFb(){
    this._facebook.login(['public_profile', 'user_friends', 'email'])
  .then((res) => {
     console.log(res);
     this._navCtrl.setRoot(HomePage);
  }, (err) => {
    console.log('Error logging into Facebook', err);
  });
  } 

  getUserDetail(userid) {
    this._facebook.api("/"+userid+"/?fields=id,email,name,picture,gender",["public_profile"])
      .then(res => {
        console.log(res);
        localStorage.setItem('userId', res.id);
      })
      .catch(e => {
        console.log(e);
      });
  } 

  provjera(){
    if(localStorage.getItem('userId')){
      this._navCtrl.setRoot(HomePage);
    }
  }

}

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

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

import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';

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

@IonicPage()

@Component({

selector: 'page-prijava',

templateUrl: 'prijava.html',

})

export class PrijavaPage {

constructor(public _navCtrl: NavController,

public _navParams: NavParams,

private _facebook: Facebook) {

}

ionViewDidLoad() {

console.log('ionViewDidLoad PrijavaPage');

this.provjera();

}

prijavaFb(){

this._facebook.login(['public_profile', 'user_friends', 'email'])

.then((res) => {

console.log(res);

this._navCtrl.setRoot(HomePage);

}, (err) => {

console.log('Error logging into Facebook', err);

});

}

getUserDetail(userid) {

this._facebook.api("/"+userid+"/?fields=id,email,name,picture,gender",["public_profile"])

.then(res => {

console.log(res);

localStorage.setItem('userId', res.id);

})

.catch(e => {

console.log(e);

});

}

provjera(){

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

this._navCtrl.setRoot(HomePage);

}

Zaključak

U ovom sam blog postu pokazao kako na jednostavan i brz način ugraditi Facebook prijavu unutar Ionic aplikacije.

Struktura projekta prema package.json

{
  "name": "IonicPrijavaF",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/facebook": "^4.5.3",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "cordova-android": "6.3.0",
    "cordova-plugin-device": "^2.0.1",
    "cordova-plugin-facebook4": "^1.9.1",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "2.4.2"
  },
  "description": "Primjer Facebook prijave u Ionic aplikaciju",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-facebook4": {
        "APP_ID": "1986093454936515",
        "APP_NAME": "IonicPrijavaF"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

{

"name": "IonicPrijavaF",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"private": true,

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve"

"dependencies": {

"@angular/common": "5.0.3",

"@angular/compiler": "5.0.3",

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

"@angular/core": "5.0.3",

"@angular/forms": "5.0.3",

"@angular/http": "5.0.3",

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

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

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

"@ionic-native/facebook": "^4.5.3",

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

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

"@ionic/storage": "2.1.3",

"cordova-android": "6.3.0",

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

"cordova-plugin-facebook4": "^1.9.1",

"cordova-plugin-ionic-keyboard": "^2.0.5",

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

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

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

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.2",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.18"

"devDependencies": {

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

"typescript": "2.4.2"

"description": "Primjer Facebook prijave u Ionic aplikaciju",

"cordova": {

"plugins": {

"cordova-plugin-whitelist": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

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

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

"cordova-plugin-facebook4": {

"APP_ID": "1986093454936515",

"APP_NAME": "IonicPrijavaF"

}

"platforms": [

"android"

]

}