Arhiva Razvoj - Stranica 14 od 27

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"

]

}

Angular & pdfmake – kreiranje PDF-a

U ovom ću blog postu pokazati kako kreirati PDF dokument unutar Angular web aplikacije koristeći pdfmake.

Što je pdfmake?

pdfmake je biblioteka temeljena na JavaScriptu koja omogućava kreiranje PDF dokumenata iz JSON-a. Može se koristiti na serverskoj npm install pdfmake i klijentskoj bower install pdfmake strani.

Osobno, više sam za NPM nego za Bower. Razloga je nekoliko.

Kreiranje Angular projekta

Koristeći Angular CLI pokrećem novi projekt

$ ng new AngularPdfMAke
$ ng serve

1 2	$ ng new AngularPdfMAke $ ng serve

Nakon što sam pokrenuo web aplikaciju u web pregledniku i uvjerio se da sam sve ispravno postavio mogu krenuti u instalaciju pdfmake biblioteke.

pdfmake implementacija

$ npm install pdfmake

1	$ npm install pdfmake

Nakon instalacije uvozim pdfmake u komponentu unutar koje želim kreirati PDF.

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

var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
...

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

var pdfMake = require('pdfmake/build/pdfmake.js');

var pdfFonts = require('pdfmake/build/vfs_fonts.js');

pdfMake.vfs = pdfFonts.pdfMake.vfs;

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

...

Što se vidljivog dijela aplikacije tiče ondje će se u ovom primjeru nalaziti samo tri gumba, po jedan za otvaranje, preuzimanje i ispis PDF-a.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Angular & pdfmake - kreiranje PDF-a
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<div class="button">
  <button (click)="open()">Open</button> - <button (click)="download()">Download</button> - <button (click)="print()">Print</button>
</div>

<h1>

Angular & pdfmake - kreiranje PDF-a

</h1>

</div>

<button (click)="open()">Open</button> - <button (click)="download()">Download</button> - <button (click)="print()">Print</button>

</div>

Kreiranje PDF-a moguće je na tri načina:

1.) Otvara PDF u novom tabu web preglednika.

pdfMake.createPdf(this.docDefinition).open();

1	pdfMake.createPdf(this.docDefinition).open();

2.) Otvara prozor za ispis.

pdfMake.createPdf(this.docDefinition).print();

1	pdfMake.createPdf(this.docDefinition).print();

3.) Preuzimanje PDF-a na računalo. U ovom je slučaju moguće unaprijed odrediti naziv PDF-a.

pdfMake.createPdf(this.docDefinition).download('exampleDocument.pdf');

1	pdfMake.createPdf(this.docDefinition).download('exampleDocument.pdf');

Kao što se vidi iz gore navedenih funkcija sadržaj od kojega se kreira PDF dobije se iz objekta this.docDefinition koji u ovom konkretnom primjeru izgleda ovako:

this.docDefinition = {
      content: [
        { text: 'Ovo je naslov', style: 'header' },
        'Primjer sadržaja bez dodatnog uređivanja.',
        { text: 'Poravnato desno.', style: 'anotherStyle' },
        { text: 'Kombinacija više stilova.', style: [ 'header', 'anotherStyle' ] }
      ],
    
      styles: {
        header: {
          fontSize: 22,
          bold: true
        },
        anotherStyle: {
          italics: true,
          alignment: 'right'
        }
      }
    };

this.docDefinition = {

content: [

{ text: 'Ovo je naslov', style: 'header' },

'Primjer sadržaja bez dodatnog uređivanja.',

{ text: 'Poravnato desno.', style: 'anotherStyle' },

{ text: 'Kombinacija više stilova.', style: [ 'header', 'anotherStyle' ] }

styles: {

header: {

fontSize: 22,

bold: true

anotherStyle: {

italics: true,

alignment: 'right'

}

};

Više primjera moguće je pronaći na poveznici http://pdfmake.org/playground.html

Osim toga, tražio sam popis mogućih CSS stilova i za sada sam pronašao poveznicu https://stackoverflow.com/a/32805835/5059916 na kojoj se spominje nekoliko njih.

Zaključak

pdfmake omogućava brzo i jednostavno kreiranje PDF-a unutar Angular aplikacije.

I za kraj, u nastavku dajem strukturu projekta prema package.json datoteci.

{
  "name": "angular-pdf-make",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "pdfmake": "^0.1.35",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.6",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

{

"name": "angular-pdf-make",

"version": "0.0.0",

"license": "MIT",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build --prod",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "^5.2.0",

"@angular/common": "^5.2.0",

"@angular/compiler": "^5.2.0",

"@angular/core": "^5.2.0",

"@angular/forms": "^5.2.0",

"@angular/http": "^5.2.0",

"@angular/platform-browser": "^5.2.0",

"@angular/platform-browser-dynamic": "^5.2.0",

"@angular/router": "^5.2.0",

"core-js": "^2.4.1",

"pdfmake": "^0.1.35",

"rxjs": "^5.5.6",

"zone.js": "^0.8.19"

"devDependencies": {

"@angular/cli": "1.6.6",

"@angular/compiler-cli": "^5.2.0",

"@angular/language-service": "^5.2.0",

"@types/jasmine": "~2.8.3",

"@types/jasminewd2": "~2.0.2",

"@types/node": "~6.0.60",

"codelyzer": "^4.0.1",

"jasmine-core": "~2.8.0",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~2.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "^1.2.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.1.2",

"ts-node": "~4.1.0",

"tslint": "~5.9.1",

"typescript": "~2.5.3"

}

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