Arhiva Ionic - Stranica 5 od 9 - 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 i Gravatar – prikaz slike profila

Nedavno sam objavio blog post o korištenju Facebooka kao mehanizma za prijavu u Ionic aplikaciju i ondje mi se posebno svidjelo što dobijem određene podatke o korisniku koje mogu koristiti kako bi personalizirao korištenje mobilne aplikacije. Npr. na osnovu dobivenih podatka mogu kreirati profil korisnika unutar mobilne aplikacije, prikazati profilnu sliku i osloviti ga imenom.

Međutim, ako se korisnik odluči registrirati/prijaviti u mobilnu aplikaciju koristeći svoju e-mail adresu tada nemam mehanizam da npr. prikažem njegovu sliku profila. Mogu omogućiti korisniku da tijekom registracije sam odabere i postavi svoju profilnu sliku, ali ako želim maksimalno olakšati i ubrzati korištenja aplikacije najbolje je proces što je moguće više automatizirati.

Tu nastupa Gravatar koji na osnovu e-mail adrese automatski povlači sliku profila korisnika. Korisnik mora biti registriran na https://www.gravatar.com/ te ondje postaviti svoju e-mail adresu i sliku profila koju želi vezati uz nju.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju

$ ionic start IonicGravatar blank
$ cd IonicGravatar 
$ ionic serve

$ ionic start IonicGravatar blank

$ cd IonicGravatar

$ ionic serve

S obzirom da Gravatar prikazuje sliku profila putem posebnog URL-a koji sadržava e-mail adresu u obliku

https://www.gravatar.com/avatar/ + (e-mail MD5 hash)

1	https://www.gravatar.com/avatar/ + (e-mail MD5 hash)

tj.

https://www.gravatar.com/avatar/5dfd90bbddd22a81c410800ed0e97cdc

1	https://www.gravatar.com/avatar/5dfd90bbddd22a81c410800ed0e97cdc

moram još instalirati crypto-md5 paket koji će mi omogućiti pretvaranje stringa u MD5 hash.

$ npm install crypto-md5 --save

1	$ npm install crypto-md5 --save

Nakon instalacije dodajem import md5 from 'crypto-md5'; u komponentu u kojoj tu mogućnost želim koristiti.

U ovom ću slučaju cijelu funkcionalnost ugraditi unutar home.ts

Iznad konstruktora definiram varijablu profilePicture koja će služiti za prikaz zadane slike profila. Nakon toga imam funkciju emailChanged() koja će toj varijabli dodati unesenu e-mail adresu i tako prikazati pripadajuću sliku profila.

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

import md5 from 'crypto-md5';

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

  email: any;
  profilePicture: any = "https://www.gravatar.com/avatar/"

  constructor(public navCtrl: NavController) {

  }

  emailChanged(){
    console.log(md5(this.email.toLowerCase(), 'hex'));
    this.profilePicture = "https://www.gravatar.com/avatar/" + md5(this.email.toLowerCase(), 'hex');
}

}

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

import { NavController } from 'ionic-angular';

import md5 from 'crypto-md5';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

email: any;

profilePicture: any = "https://www.gravatar.com/avatar/"

constructor(public navCtrl: NavController) {

}

emailChanged(){

console.log(md5(this.email.toLowerCase(), 'hex'));

this.profilePicture = "https://www.gravatar.com/avatar/" + md5(this.email.toLowerCase(), 'hex');

}

Prikaz na ekranu sastoji se od polja za unos e-mail adrese i prikaza slike profila iznad njega.

<ion-content padding>
 
  <ion-card>

    <ion-item>
      <ion-avatar>
        <img [src]="profilePicture">
      </ion-avatar>
    </ion-item>

    <ion-card-content>

      <ion-list no-lines>

        <ion-item>
          <ion-label floating>e-mail</ion-label>
          <ion-input [(ngModel)]="email" (change)="emailChanged()" type="email"></ion-input>
        </ion-item>
        
      </ion-list>

    </ion-card-content>

  </ion-card>

</ion-content>

<ion-content padding>

<ion-card>

<ion-item>

<ion-avatar>

</ion-avatar>

</ion-item>

<ion-card-content>

<ion-list no-lines>

<ion-item>

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

<ion-input [(ngModel)]="email" (change)="emailChanged()" type="email"></ion-input>

</ion-item>

</ion-list>

</ion-card-content>

</ion-card>

</ion-content>

—

page-home {
 
        .scroll-content {
            background-color: #3F9FCF;
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
 
        ion-avatar > img {
            margin: auto;
            width: 80px;
            height: auto;
        }
 
        ion-input {
            background-color: map-get($colors, light);
            padding-left: 10px;
            color: #3F9FCF;
        }
 
        ion-label {
            color: #3F9FCF;
        }
 
        [floating] {
            margin-left: 10px;
        }
 
    }

page-home {

.scroll-content {

background-color: #3F9FCF;

align-items: center;

display: flex;

flex-direction: column;

justify-content: center;

}

ion-avatar > img {

margin: auto;

width: 80px;

height: auto;

}

ion-input {

background-color: map-get($colors, light);

padding-left: 10px;

color: #3F9FCF;

}

ion-label {

color: #3F9FCF;

}

[floating] {

margin-left: 10px;

}

Sve to na kraju izgleda ovako

Zaključak

Iako ovakav način korištenja Gravatara nije vezan isključivo uz Ionic mora se priznati da je pristup vrlo zanimljiv jer je uz vrlo malo truda moguće poboljšati korisničko iskustvo Ionic aplikacije.

Za one koji žele znati više mogu to učiniti na poveznici https://www.joshmorony.com/automatic-profile-pictures-with-gravatar-in-ionic-2/ gdje je Joshua Morony prvi obradio korištenje Gravatara unutar Ionic aplikacije.

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: