Tomislav Stanković, Autor na Tomislav Stanković

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.

nodemon – automatski restart NodeJS aplikacije

Tijekom razvoja NodeJS aplikacija potrebno je prilikom svake promjene restartati aplikaciju kako bi se promjene vidjele. To nije problem napraviti nekoliko puta, ali s vremenom čovjek se zapita postoji li mogućnost da se to automatizira.

Rješenje se nalazi u obliku nodemon skripte koja će pratiti sve promjene unutar projekta u kojemu je pokrenuta i automatski restartati aplikaciju kako bi se učinjene promjene odmah vidjele u npr. web pregledniku.

Novu ću aplikaciju kreirati naredbom

$ npm init --yes

1	$ npm init --yes

i odmah instalirati ExpressJS.

$ npm install express --save

1	$ npm install express --save

Sada u mapi projekta mogu vidjeti package.json datoteku sa sljedećim sadržajem

{
  "name": "NodemonPrimjer",
  "version": "1.0.0",
  "description": "Primjer NodeJS/Nodemoon APIja",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Tomislav Stanković",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.2"
  }
}

{

"name": "NodemonPrimjer",

"version": "1.0.0",

"description": "Primjer NodeJS/Nodemoon APIja",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [],

"author": "Tomislav Stanković",

"license": "ISC",

"dependencies": {

"express": "^4.16.2"

}

Sada ću kreirati index.js datoteku u kojoj određujem da će se API pokrenuti na portu 1337

var express = require('express');
var app = express(); 
 
var port = process.env.PORT || 1337
 
app.get('/', function(req, res) {
    res.send('<h1>Ovo je primjer Node.js/Nodemon API-ja!</h1>');
});
 
// pokretanje API-ja
app.listen(port);
console.log('API je pokrenut i koristi port:' + ' ' + port);

var express = require('express');

var app = express();

var port = process.env.PORT || 1337

app.get('/', function(req, res) {

res.send('<h1>Ovo je primjer Node.js/Nodemon API-ja!</h1>');

});

// pokretanje API-ja

app.listen(port);

console.log('API je pokrenut i koristi port:' + ' ' + port);

API pokrećem naredbom $ node index.js

U web pregledniku sada mogu vidjeti sljedeće

Trenutno u projekt nije instaliran nodemon i zato prilikom svake promjene moram ručno stopirati (CTRL+C) i ponovno pokrenuti (node index.js) API.

nodemon instalacija

nodemon se može instalirati na dva načina. Lokalno unutar projekta i globalno na računalu.

Sljedećom naredbom instaliram nodemon lokalno unutar projekta

npm install nodemon --save

1	npm install nodemon --save

U slučaju da želim nodemon instalirati globalno na računalo koristim sljedeću naredbu

npm install -g nodemon

1	npm install -g nodemon

Datoteka package.json sada ima jedan novi redak.

{
  "name": "NodemonPrimjer",
  "version": "1.0.0",
  "description": "Primjer NodeJS/Nodemoon APIja",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Tomislav Stanković",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.2",
    "nodemon": "^1.15.0"
  }
}

{

"name": "NodemonPrimjer",

"version": "1.0.0",

"description": "Primjer NodeJS/Nodemoon APIja",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [],

"author": "Tomislav Stanković",

"license": "ISC",

"dependencies": {

"express": "^4.16.2",

"nodemon": "^1.15.0"

}

Projekt sada pokrećem naredbom

$ nodemon index.js

1	$ nodemon index.js

I sada će bilo koja promjena unutar projekta rezultirati automatskim restartom

Zaključak

nodemon je posebno koristan prilikom razvoja NodeJS aplikacija, dok će se u produkciji koristiti npr. PM2, jer tada se događa najviše promjena i može biti jako naporno nakon svake promjene ručno raditi restart projekta. Više o skripti moguće je pronaći na poveznici https://github.com/remy/nodemon

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"

]

}