Arhiva Mobile - Stranica 8 od 18 - Tomislav Stanković

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:

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"

]

}

Ionic – RxJS Observable Timer

U ovom ću blog postu pokazati kako koristeći RxJS Observable upravljati pozivanjem API-ja u određenim vremenskim intervalima.

Primjer se temelji na blog postu pod nazivom ‘Ionic 3 – Autocomplete polje za unos‘ kojeg sam objavio prije pola godine.

Prvo kreiram novu Ionic aplikaciju

$ ionic start Ionic3RxJS blank 
$ cd Ionic3RxJS

1 2	$ ionic start Ionic3RxJS blank $ cd Ionic3RxJS

Nakon toga mogu kreirati servis pod nazivom ApiProvider

$ ionic generate provider ApiProvider

1	$ ionic generate provider ApiProvider

koji na početku izgleda ovako

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
 
@Injectable()
export class ApiProvider {
 
  constructor(public _http: Http) {
    console.log('Hello ApiProvider Provider');
  }
 
  loadData(){
    return this._http.get('https://restcountries.eu/rest/v2/all')
      .map(res => res.json());
  }
 
}

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

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

import 'rxjs/add/operator/map';

@Injectable()

export class ApiProvider {

constructor(public _http: Http) {

console.log('Hello ApiProvider Provider');

}

loadData(){

return this._http.get('https://restcountries.eu/rest/v2/all')

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

}

Gore se može vidjeti običan servis koji služi za pozivanje API-ja s popisom država. API će se pozvati isključivo nakon određene akcije korisnika. To može biti npr. na klik, prilikom otvaranja neke stranice unutar aplikacije ili na neki treći način.

Međutim, što napraviti ako želim u određenom vremenskom intervalu ponovno pozvati API kako bi se podaci osvježili bez da to korisnik mora učiniti?

U tom slučaju unutar servisa mogu definirati Observable.timer(x,x) koji prima dva parametra. Prvi parameter označava broj milisekundi nakon kojih će se API pozvati, a drugi označava svakih koliko milisekundi će se API ponovno pozvati.

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

import { Observable } from 'rxjs';

@Injectable()
export class ApiProvider {

  constructor(public _http: Http) {
    console.log('Hello ApiProvider Provider');
  }
  
   timer = Observable.timer(0, 6000);

  loadData = () => {
    return this.timer
      .flatMap((i) => this._http.get("https://restcountries.eu/rest/v2/all"))
	  .map(res => res.json());
  }

}

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

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

import 'rxjs/add/operator/map';

import { Observable } from 'rxjs';

@Injectable()

export class ApiProvider {

constructor(public _http: Http) {

console.log('Hello ApiProvider Provider');

}

timer = Observable.timer(0, 6000);

loadData = () => {

return this.timer

.flatMap((i) => this._http.get("https://restcountries.eu/rest/v2/all"))

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

}

U ovom slučaju API će prvi put dovući podatke bez odgode, a kasnije će to činiti svakih 6 sekundi. Posebno zanimljiva je i činjenica da će se API nastaviti pozivati čak i u slučaju kada aplikacije nije pokrenuta.

Za one koji žele znati više:

– FlatMap
– Using Observables at an interval

Ionic 3 – Spremanje i slanje podataka kada nema interneta

Jedna od osnovnih funkcionalnosti koju volim vidjeti u mobilnim aplikacijama je mogućnost rada izvan mreže (offline) tj. kada mobilni uređaj nije povezan s internetom.

Pretpostavimo da aplikacija ima nekakvu formu za unos koju je potrebno ispuniti i da se klikom na gumb ‘Pošalji podatke’ ništa ne događa. Možda tek eventualno bude nekakva poruka da trenutno nema mrežne povezanosti i zato nije moguće spremiti unesene podatke. Najgora stvar koja se onda može dogoditi je da aplikacija ne zapamti unesene podatke i da ih korisnik kasnije mora ponovno upisivati.

U ovom ću blog postu obraditi scenarij mobilne aplikacija koja ima nekakvu formu za unos koju je moguće ispuniti i spremiti podatke neovisno i povezanosti s internetom. Korisniku je najbitnije da ne mora više puta unositi podatke ili razmišljati zašto ih nije u mogućnosti spremiti.

Provjera povezanosti s mrežom

O ovoj sam temi također objavio blog post. Prije svega moram nekako dobiti informaciju postoji li povezanost s internetom ili ne. U slučaju Ionica to se saznaje koristeći Ionic Native Network plugin.

Napravim servis npr. network-service.ts kojemu će jedina i osnovna svrha biti provjera povezanosti s internetom. Dalje, na svakoj stranici mobilne aplikacije pozivam taj servis ili prilikom klika na gumb ‘Pošalji podatke’ i ako dobijem informaciju da nema povezanosti s internetom automatski znam da nešto drugo s tim podacima trebam učiniti, a to je – spremiti ih u lokalnu bazu podataka.

 provjeraInterneta(){
      if(this._networkService.isOnline()){
       console.log('Ima interneta!');
       //Odmah šalji podatke na API
        }else{
        console.log('Nema interneta!');
        //Spremi podatke u SQLite bazu
    }
}

provjeraInterneta(){

if(this._networkService.isOnline()){

console.log('Ima interneta!');

//Odmah šalji podatke na API

}else{

console.log('Nema interneta!');

//Spremi podatke u SQLite bazu

}

Spremanje podataka u lokalnu SQLite bazu

O ovoj sam temi također objavio blog post. Kada sam u prethodnom koraku dobio informaciju da ne postoji povezanost s internetom odlučujem se na spremanje podataka lokalno na mobilni uređaj. Kako bi to mogao učiniti moram prvo kreirati lokalnu bazu podataka, a to činim koristeći Ionic Native SQLite plugin.

Najbolje je opet napraviti poseban servis, npr. database-service.ts, koji će služiti za sve radnje (kreiranje baze, kreiranje tablica, spremanje, prikaz i brisanje podataka) povezane sa SQLite bazom.

Klikom na gumb ‘Pošalji podatke’ sada se događa sljedeće. U SQLite tablicu mojaLokalnaTablica spremam podatke unesene u formu. Podaci su u obliku objekta this.podaciIzForme.

provjeraInterneta(){
      if(this._networkService.isOnline()){
       console.log('Ima interneta!');
       //Odmah šalji podatke na API
        }else{
        console.log('Nema interneta!');
        this._database.mojaLokalnaTablica(this.podaciIzForme);
    }
}

provjeraInterneta(){

if(this._networkService.isOnline()){

console.log('Ima interneta!');

//Odmah šalji podatke na API

}else{

console.log('Nema interneta!');

this._database.mojaLokalnaTablica(this.podaciIzForme);

}

Na ovaj način korisnik može bez problema unositi podatke neovisno o povezanosti s internetom jer će se svi podaci spremiti u lokalnu SQLite bazu podataka koja se nalazi na mobilnom uređaju.

Korisno je dati korisniku i nekakvu obavijest o ne postojanju povezanosti s internetom čisto iz razloga ako se odluči npr. otići na računalo i u nekakvoj web aplikaciji provjeriti podatke koje je maloprije poslao, da se ne iznenadi ako ih u tom trenutku ne vidi. Bitno je da su podaci spremljeni i da će biti poslani čim se ostvari povezanost s internetom.

Automatsko slanje podataka / sinkronizacija

Sada dolazim do dijela koji je u ovoj priči najvažniji. Znači, korisnik je bez problema koristio mobilnu aplikaciju i nekoliko puta unosio različite podatke u formu za unos i svi ti podaci su privremeno spremljeni u lokalnu SQLite bazu podataka.

U ovom je koraku ključno prepoznati trenutak kada se ponovno uspostavi povezanost s internetom i sve ranije spremljene podatke poslati na API te istovremeno isprazniti lokalnu bazu podataka.

Na početnoj stranici mobilne aplikacije mogu pozvati funkciju provjeraInterneta() koja će svaki put kada se dođe na početnu stranicu provjeravati postoji li povezanost s internetom i ako postoji odmah će poslati sve lokalne podatke te isprazniti lokalnu bazu.

provjeraInterneta(){
      if(this._networkService.isOnline()){
       console.log('Ima interneta!');
         this.posaljiLokalnePodatke();
        }else{
        console.log('Ne šaljem podatke! Nema interneta!');
    }
}

provjeraInterneta(){

if(this._networkService.isOnline()){

console.log('Ima interneta!');

this.posaljiLokalnePodatke();

}else{

console.log('Ne šaljem podatke! Nema interneta!');

}

Sada na početnoj stranici radim sljedeće. Pozivam servis koji provjerava povezanost s internetom. Ako postoji veza s internetom pozivam funkciju posaljiLokalnePodatke(). Ta funkcija dohvaća niz (array) svih objekata koji su spremljeni u lokalnu SQLite bazu i šaljem ih na API. Kada stigne odgovor od API-ja da su podaci uspješno primljeni krećem s brisanjem lokalne baze podataka this._database.isprazniLokalnuTablicu().

posaljiLokalnePodatke(){
     this._database.getOfflineTable().then((result) => {
            this.mojaLokalnaTablicaNiz = <Array<Object>> result;
            if(this.mojaLokalnaTablica.length != 0){
            for(var i = 0; i < this.mojaLokalnaTablica.length; i++){
              this._api.posaljiPodatke(this.mojaLokalnaTablica[i]).subscribe(res => {
              if(res.status == true){
                 this._database.isprazniLokalnuTablicu();
              }
         }); 
            }}
        }, (error) => {
            console.log("ERROR: ", error);
        });
   }

posaljiLokalnePodatke(){

this._database.getOfflineTable().then((result) => {

this.mojaLokalnaTablicaNiz = <Array<Object>> result;

if(this.mojaLokalnaTablica.length != 0){

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

this._api.posaljiPodatke(this.mojaLokalnaTablica[i]).subscribe(res => {

if(res.status == true){

this._database.isprazniLokalnuTablicu();

}

});

}}

}, (error) => {

console.log("ERROR: ", error);

});

}

Zaključak

Ovo je pojednostavljeni primjer kako korisnicima mobilne aplikacije omogućiti da unose podatke i onda kada ne postoji povezanost s internetom.