Arhiva Ionic - Stranica 6 od 9 - Tomislav Stanković

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.

Ionic 3 – podrška za vibraciju

S obzirom da za nekoliko sati stiže Božić potrudit ću se ovaj blog post učiniti što konkretnijim bez puno okolišanja. U nastavku ću pokazati kako u Ionic aplikaciju dodati podršku za vibraciju.

Priprema Ionic projekta

Za početak kreiram novi Ionic projekt.

$ ionic start Ionic3VibrateApp blank
$ cd Ionic3VibrateApp
$ ionic serve

$ ionic start Ionic3VibrateApp blank

$ cd Ionic3VibrateApp

$ ionic serve

Sada ću instalirati Ionic Native Vibration plugin:

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

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

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

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

import { Vibration } from '@ionic-native/vibration';

...

@NgModule({

...

providers: [

...

Vibration

...

]

...

})

export class AppModule { }

Za potrebu ovog blog posta napravit ću tri funkcije

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

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

  constructor(public navCtrl: NavController,
              private _vibration: Vibration) {

  }


  vibrate1(){
  // Vibrate the device for a second
  // Duration is ignored on iOS.
     this._vibration.vibrate(1000);
  }

  vibrate2(){
  // Vibrate 2 seconds
  // Pause for 1 second
  // Vibrate for 2 seconds
  // Patterns work on Android and Windows only
     this._vibration.vibrate([2000,1000,2000]);
  }


  vibrate3(){
  // Stop any current vibrations immediately
  // Works on Android and Windows only
     this._vibration.vibrate(0);
  }

}

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

import { NavController } from 'ionic-angular';

import { Vibration } from '@ionic-native/vibration';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController,

private _vibration: Vibration) {

}

vibrate1(){

// Vibrate the device for a second

// Duration is ignored on iOS.

this._vibration.vibrate(1000);

}

vibrate2(){

// Vibrate 2 seconds

// Pause for 1 second

// Vibrate for 2 seconds

// Patterns work on Android and Windows only

this._vibration.vibrate([2000,1000,2000]);

}

vibrate3(){

// Stop any current vibrations immediately

// Works on Android and Windows only

this._vibration.vibrate(0);

}

I napraviti tri gumba koji će aktivirati te funkcije

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Vibrate
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="vibrate1()">Vibrate 1</button>
  <button ion-button (click)="vibrate2()">Vibrate 2</button>
  <button ion-button (click)="vibrate3()">Vibrate 3</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Vibrate

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button (click)="vibrate1()">Vibrate 1</button>

<button ion-button (click)="vibrate2()">Vibrate 2</button>

<button ion-button (click)="vibrate3()">Vibrate 3</button>

</ion-content>

Zaključak

Vibracija je jedna od onih funkcionalnosti koja nekoj mobilnoj aplikaciji može dati završni sjaj ili ju učiniti odbojnom korisnicima i zato treba ju treba pažljivo koristiti.

I za kraj, struktura projekta prema package.json

{
    "name": "Ionic3VibrateApp",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.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-native/vibration": "^4.5.2",
        "@ionic/storage": "2.1.3",
        "cordova-android": "^6.2.3",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-ionic-webview": "^1.1.11",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-vibration": "^2.1.6",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "3.9.2",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.5.2",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@ionic/app-scripts": "3.1.6",
        "typescript": "2.4.2"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-vibration": {},
            "cordova-plugin-device": {},
            "cordova-plugin-ionic-webview": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android"
        ]
    }
}

{

"name": "Ionic3VibrateApp",

"version": "0.0.1",

"author": "Ionic Framework",

"homepage": "http://ionicframework.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-native/vibration": "^4.5.2",

"@ionic/storage": "2.1.3",

"cordova-android": "^6.2.3",

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

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

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

"cordova-plugin-vibration": "^2.1.6",

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

"ionic-angular": "3.9.2",

"ionic-plugin-keyboard": "^2.2.1",

"ionicons": "3.0.0",

"rxjs": "5.5.2",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.18"

"devDependencies": {

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

"typescript": "2.4.2"

"description": "An Ionic project",

"cordova": {

"plugins": {

"cordova-plugin-vibration": {},

"cordova-plugin-device": {},

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

"cordova-plugin-splashscreen": {},

"cordova-plugin-whitelist": {},

"ionic-plugin-keyboard": {}

"platforms": [

"android"

]

}

Ažuriranje Ionic Android aplikacije bez Google Storea

Ažuriranje Ionic aplikacije moguće je na nekoliko načina. Prvi je naravno koristeći Google Store, drugi je koristeći Ionic Deploy, treći je ručna instalacija nove verzije aplikacije svakom korisniku posebno dok je četvrti način koristeći App Update plugin (u slučaju ovog plugina moguće je ažurirati isključivo Android verzije Ionic aplikacije).

Više o načinu korištenja App Update plugina u nastavku ovog blog posta.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu jer kasnije planiram aplikaciju pokrenuti na Android mobilnom uređaju

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

$ ionic start IonicAppUpdate blank

$ cd IonicAppUpdate

$ ionic cordova platform add android

Sada ću instalirati App Update plugin koji će biti zadužen za ažuriranje aplikacije.

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

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

Plugin odmah dodajem u 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 { AppUpdate } from '@ionic-native/app-update';

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

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AppUpdate,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
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 { AppUpdate } from '@ionic-native/app-update';

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

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

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

AppUpdate,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Trenutna verzija aplikacije (0.0.1) navedena je u config.xml datoteci.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.tomislavstankovic.ionicappupdate" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>IonicAppUpdate</name>
...

<?xml version='1.0' encoding='utf-8'?>

<name>IonicAppUpdate</name>

...

Kako bi kasnije mogao provjeriti postoji li nova verzija Android aplikacije moram ugraditi glavnu funkcionalnost koja će se nalaziti unutar home.ts datoteke.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AppUpdate } from '@ionic-native/app-update';

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

  constructor(public navCtrl: NavController,
              private appUpdate: AppUpdate) {
			  
   const updateUrl = 'https://www.tomislavstankovic.com/Ionic/update.xml';
   this.appUpdate.checkAppUpdate(updateUrl);

  }

}

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

import { NavController } from 'ionic-angular';

import { AppUpdate } from '@ionic-native/app-update';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController,

private appUpdate: AppUpdate) {

const updateUrl = 'https://www.tomislavstankovic.com/Ionic/update.xml';

this.appUpdate.checkAppUpdate(updateUrl);

}

Za potrebu ovog primjera promijeniti ću sadržaj unutar home.html datoteke u kojoj ću prikazati trenutnu verziju Ionic aplikacije.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic AppUpdate
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1>App Update</h1>
  <p>This plugin does self-update for android</p>
  <p>App version="0.0.1"</p>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic AppUpdate

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<h1>App Update</h1>

<p>This plugin does self-update for android</p>

<p>App version="0.0.1"</p>

</ion-content>

P.S. Nakon instalacije App Update plugina nisam mogao instalirati Ionic aplikaciju na uređaj niti kreirati APK zbog sljedeće greške

To sam riješio instalacijom Android Support v4 client library

$ cordova plugin add cordova-plugin-android-support-v4

1	$ cordova plugin add cordova-plugin-android-support-v4

Aplikaciju nakon toga uspješno pokrećem

Nova verzija aplikacije

Sada ću kreirati novu verziju aplikacije u kojoj ću samo promijeniti sadržaj unutar home.html datoteke.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic AppUpdate
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1>App Update</h1>
  <p>This plugin does self-update for android</p>
  <p>App version="0.0.2"</p>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic AppUpdate

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<h1>App Update</h1>

<p>This plugin does self-update for android</p>

<p>App version="0.0.2"</p>

</ion-content>

Također, isto moram napraviti i unutar config.xml datoteke jer inače nije moguće ažurirati aplikaciju.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.tomislavstankovic.ionicappupdate" version="0.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>IonicAppUpdate</name>
...

<?xml version='1.0' encoding='utf-8'?>

<name>IonicAppUpdate</name>

...

Gdje se nalazi nova verzija aplikacije?

Pretpostavimo da moju aplikaciju koristi nekoliko desetaka osoba na raznim lokacijama i da svima njima moram poslati novu verziju. S obzirom da to nisam u mogućnosti napraviti koristeći npr. Google Store moram smisliti novu lokaciju s koje korisnici mogu preuzeti novu verziju aplikacije. Ranije sam već unutar Ionic aplikacije naveo da će se nove verzije aplikacije nalaziti na poveznici ‘https://www.tomislavstankovic.com/Ionic/update.xml’ pa ju sada moram i kreirati.

To činim putem FTP-a na način da kreiram mapu naziva “Ionic” unutar koje se nalazi informacija u novoj verziji Ionic aplikacije kao i sama Ionic aplikacija tj. novi APK.

Kreiram datoteku update.xml

<update>
    <version>36</version>
    <name>IonicAppUpdate</name>
    <url>https://www.tomislavstankovic.com/Ionic/IonicAppUpdate.apk</url>
</update>

<name>IonicAppUpdate</name>

<url>https://www.tomislavstankovic.com/Ionic/IonicAppUpdate.apk</url>

</update>

I uploadam novi APK.

Kada sljedeći put pokrenem aplikaciju automatski će se provjeriti postoji li ažuriranje i ako postoji ono će se automatski instalirati.

Zaključak

Korištenje App Update plugina dobro je rješenje u slučajevima kada želite svoju Ionic aplikaciju učiniti dostupom odabranom krugu osoba, npr. unutar neke tvrtke, tj. kada ju ne želite učiniti javno dostupnom putem Google Storea.

I za kraj, struktura projekta prema package.json datoteci

{
    "name": "IonicAppUpdate",
    "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/app-update": "^4.5.2",
        "@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",
        "cordova-android": "^6.2.3",
        "cordova-plugin-app-update": "^1.4.13",
        "cordova-plugin-appversion": "^1.0.0",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-ionic-webview": "^1.1.11",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "3.9.2",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.5.2",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@ionic/app-scripts": "3.1.5",
        "typescript": "2.4.2"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-app-update": {},
            "cordova-plugin-device": {},
            "cordova-plugin-ionic-webview": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android"
        ]
    }
}

{

"name": "IonicAppUpdate",

"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/app-update": "^4.5.2",

"@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",

"cordova-android": "^6.2.3",

"cordova-plugin-app-update": "^1.4.13",

"cordova-plugin-appversion": "^1.0.0",

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

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

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

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

"ionic-angular": "3.9.2",

"ionic-plugin-keyboard": "^2.2.1",

"ionicons": "3.0.0",

"rxjs": "5.5.2",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.18"

"devDependencies": {

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

"typescript": "2.4.2"

"description": "An Ionic project",

"cordova": {

"plugins": {

"cordova-plugin-app-update": {},

"cordova-plugin-device": {},

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

"cordova-plugin-splashscreen": {},

"cordova-plugin-whitelist": {},

"ionic-plugin-keyboard": {}

"platforms": [

"android"

]

}