Arhiva Razvoj - Tomislav Stanković

DevExtreme Pivot Grid & Angular: prikaz i analiza višedimenzionalnih podataka

U ovom ću blog postu pokazati kako implementirati DevExtreme Pivot Grid UI komponentu u Angular projekt. Ona omogućava prikaz i analizu višedimenzionalnih podataka iz lokalne pohrane ili OLAP kocke.

Fokusirat ću se na prikaz podataka prema specifičnim parameterima te načinu na koji te podatke uređivati jer Pivot Grid nativno ne nudi takvu mogućnost.

Pivot Grid prikaz podataka

Prva i osnovna značajka Pivot Grida je prikaz i analizu višedimenzionalnih podataka.

U ovom ću primjeru koristiti strukturu podataka prikazanu u JSON-u kojega je moguće vidjeti ispod. S jedne strane biti će poslovnice, a s druge automobili. Cilj je prikazati količinu naručenih tj. isporučenih automobila ovisno o poslovnici.

Logika aplikacije nalazit će se unutar angular-devextreme.component.ts datoteke koja se temelji na PivotGridDataSource objektu. Za sada će se unutar njega nalaziti samo fields niz i store objekt.

Poslovnice će se nalaziti krajnje lijevo area: "row", a automobili na vrhu area: "column". Sve ostalo tj. narudžbe prikazuju se kao podaci area: "data".

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

import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";

@Component({
  selector: 'app-narudzbe-popis',
  templateUrl: './narudzbe-popis.component.html',
  styleUrls: ['./narudzbe-popis.component.scss']
})

export class NarudzbePopisComponent implements OnInit {

  dataSource: PivotGridDataSource;

  podaciDemo = [
    {
      "poslovnica_ID": 163,
      "poslovnica_naziv": "POSLOVNICA VK",
      "narudzba_ID": 1720303,
      "narudzba_narucenakolicina": 50,
      //Od 50 isporučeno 49 automobila
      "narudzba_isporucenakolicina": 49,
      "artikl_ar_ID": 69567,
      "artikl_sifra": 666627,
      "artikl_naziv": "Tesla Model S"
    },
    {
      "poslovnica_ID": 163,
      "poslovnica_naziv": "POSLOVNICA VK",
      "narudzba_ID": 83572434,
      "narudzba_narucenakolicina": 20,
      //Još nije unesena isporučena količina
      "narudzba_isporucenakolicina": null,
      "artikl_ar_ID": 69463,
      "artikl_sifra": 555018,
      "artikl_naziv": "Fiat Panda"
    },
    {
      "poslovnica_ID": 163,
      "poslovnica_naziv": "POSLOVNICA VK",
      "narudzba_ID": 83572437,
      "narudzba_narucenakolicina": 6,
      //Od 6 isporučeno 0 automobila
      "narudzba_isporucenakolicina": 0,
      "artikl_ar_ID": 69610,
      "artikl_sifra": 102836,
      "artikl_naziv": "Kia Rio"
    },
...
]

  constructor() {}

  ngOnInit(): void {
      this.prikaziNarudzbe();
  }

  prikaziNarudzbe(){
          this.dataSource = new PivotGridDataSource({
            fields: [
              {
                dataField: "poslovnica_naziv",
                dataType: "string",
                area: "row",
                width: 120
              },
              {
                dataField: "artikl_naziv",
                dataType: "string",
                area: "column",
                expanded: true
              },
              {
                caption: "Naručeno",
                dataField: "narudzba_narucenakolicina",
                dataType: "number",
                summaryType: "sum",
                area: "data"
              },
              {
                caption: "Isporučeno",
                dataField: "narudzba_isporucenakolicina",
                dataType: "number",
                summaryType: "sum",
                area: "data"
              }
            ],
            store: {
              type: "array",
              data: this.podaciDemo
            }
        });
  }

}

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

import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";

@Component({

selector: 'app-narudzbe-popis',

templateUrl: './narudzbe-popis.component.html',

styleUrls: ['./narudzbe-popis.component.scss']

})

export class NarudzbePopisComponent implements OnInit {

dataSource: PivotGridDataSource;

podaciDemo = [

{

"poslovnica_ID": 163,

"poslovnica_naziv": "POSLOVNICA VK",

"narudzba_ID": 1720303,

"narudzba_narucenakolicina": 50,

//Od 50 isporučeno 49 automobila

"narudzba_isporucenakolicina": 49,

"artikl_ar_ID": 69567,

"artikl_sifra": 666627,

"artikl_naziv": "Tesla Model S"

{

"poslovnica_ID": 163,

"poslovnica_naziv": "POSLOVNICA VK",

"narudzba_ID": 83572434,

"narudzba_narucenakolicina": 20,

//Još nije unesena isporučena količina

"narudzba_isporucenakolicina": null,

"artikl_ar_ID": 69463,

"artikl_sifra": 555018,

"artikl_naziv": "Fiat Panda"

{

"poslovnica_ID": 163,

"poslovnica_naziv": "POSLOVNICA VK",

"narudzba_ID": 83572437,

"narudzba_narucenakolicina": 6,

//Od 6 isporučeno 0 automobila

"narudzba_isporucenakolicina": 0,

"artikl_ar_ID": 69610,

"artikl_sifra": 102836,

"artikl_naziv": "Kia Rio"

...

]

constructor() {}

ngOnInit(): void {

this.prikaziNarudzbe();

}

prikaziNarudzbe(){

this.dataSource = new PivotGridDataSource({

fields: [

{

dataField: "poslovnica_naziv",

dataType: "string",

area: "row",

width: 120

{

dataField: "artikl_naziv",

dataType: "string",

area: "column",

expanded: true

{

caption: "Naručeno",

dataField: "narudzba_narucenakolicina",

dataType: "number",

summaryType: "sum",

area: "data"

{

caption: "Isporučeno",

dataField: "narudzba_isporucenakolicina",

dataType: "number",

summaryType: "sum",

area: "data"

}

store: {

type: "array",

data: this.podaciDemo

}

});

}

Izgled sučelja biti će definiran unutar angular-devextreme.component.html datoteke.

Od Pivot Grid UI svojstva koristit ću ih nekoliko:

showBorders – želim da vanjski rubovi budu vidljivi.

showColumnGrandTotals – ne želim prikazivati ukupne vrijednosti za kolone. Ovo bi se inače prikazivalo krajnje desno.

showRowGrandTotals – želim na dnu prikazati ukupne vrijednosti.

<dx-pivot-grid
            [showBorders]="true"
            [showColumnGrandTotals]="false"
            [showRowGrandTotals]="true"
            [dataSource]="dataSource">
            <dxo-field-chooser [enabled]="false" [height]="400"></dxo-field-chooser>
            <dxo-scrolling
                mode="standard"  
                [useNative]="false"
                [scrollByContent]="true"
                [scrollByThumb]="true"
                showScrollbar="always">
            </dxo-scrolling> <!-- "virtual" | "infinite" -->
</dx-pivot-grid>

<dx-pivot-grid

[showBorders]="true"

[showColumnGrandTotals]="false"

[showRowGrandTotals]="true"

[dataSource]="dataSource">

<dxo-field-chooser [enabled]="false" [height]="400"></dxo-field-chooser>

<dxo-scrolling

mode="standard"

[useNative]="false"

[scrollByContent]="true"

[scrollByThumb]="true"

showScrollbar="always">

</dxo-scrolling>

</dx-pivot-grid>

Sve to zajedno na kraju daje sljedeće:

Pivot Grid – promjena izgleda polja

Ako želim dodatno prilagoditi prikaz određenih polja to mogu napraviti koristeći onCellPrepared metodu.

<dx-pivot-grid ...
    (onCellPrepared)="onCellPrepared($event)">
</dx-pivot-grid>

<dx-pivot-grid ...

(onCellPrepared)="onCellPrepared($event)">

</dx-pivot-grid>

U ovom slučaju hoću napraviti tri grafičke izmjene. Stupac “Naručeno” će imati sivu pozadinsku boju i podebljane brojeve, ukupne vrijednosti na dnu također će biti podebljanje, a vrijednosti koje za “Isporučeno” imaju null će imati crvenu pozadinsku boju kako bi bila uočljivija.

onCellPrepared(e){
      
    if(e.cell.rowType == "GT"){
      e.cellElement.style.fontWeight = "bold";
    }

    if(e.area == 'data' && e.columnIndex % 2 == 0){
          e.cellElement.style.fontWeight = "bold";
          e.cellElement.style.backgroundColor = "rgb(242,242,242)";
    }
    
    if(e.area === "data" && e.cell.dataIndex === 1 && e.cell.value === null && e.cell.rowType != "GT"){
        e.cellElement.style.backgroundColor = "rgb(255 0 0 / 42%)";
    }
          
  }

onCellPrepared(e){

if(e.cell.rowType == "GT"){

e.cellElement.style.fontWeight = "bold";

}

if(e.area == 'data' && e.columnIndex % 2 == 0){

e.cellElement.style.fontWeight = "bold";

e.cellElement.style.backgroundColor = "rgb(242,242,242)";

}

if(e.area === "data" && e.cell.dataIndex === 1 && e.cell.value === null && e.cell.rowType != "GT"){

e.cellElement.style.backgroundColor = "rgb(255 0 0 / 42%)";

}

Na ekranu bi to izgledalo ovako:

Međutim, niti jedno polje nema crvenu pozadinsku boju. Razlog je što Pivot Grid sve null vrijednosti vidi kao 0 i zato uvjet e.cell.value === null nije zadovoljen. Ali ako stavim e.cell.value === 0 stanje će biti puno drugačije.

Iz podaciDemo niza se može vidjeti da narudzba_isporucenakolicina može imati vrijednosti null. To znači da bi vrijednost za “POSLOVNICA VK” i automobil “Fiat Panda” trebala imati crvenu pozadinsku boju jer je narudzba_isporucenakolicina = null, a kombinacija POSLOVNICA VK” i “Kia Rio” ne bi trebala imati crvenu pozadinsku boju jer ima vrijednost narudzba_isporucenakolicina = 0.

Pivot Grid – prikaz null vrijednosti

Kako bi u PivotGridu mogao prikazati null vrijednosti i razlikovati ih od vrijednosti 0 koristiti ću calculateCustomSummary funkciju. Tu ću funkciju vezati uz polje dataField: "narudzba_isporucenakolicina".

{
        caption: "Isporučeno",
        dataField: "narudzba_isporucenakolicina",
        dataType: "number",
        //summaryType: "sum",
        area: "data",
        summaryType: "custom",
        calculateCustomSummary: function(options) {  
          if (options.summaryProcess == 'start') {  
              options.totalValue = null;  
          }  
          if (options.summaryProcess == 'calculate') {  
              if (options.value !== null) {  
                  options.totalValue += options.value;  
              }  
          }  
        }
}

{

caption: "Isporučeno",

dataField: "narudzba_isporucenakolicina",

dataType: "number",

//summaryType: "sum",

area: "data",

summaryType: "custom",

calculateCustomSummary: function(options) {

if (options.summaryProcess == 'start') {

options.totalValue = null;

}

if (options.summaryProcess == 'calculate') {

if (options.value !== null) {

options.totalValue += options.value;

}

Sada se na ekranu može vidjeti da istovremeno imam prikazane vrijednosti za isporučenu količinu i kao null i kao 0.

Omogućiti klik na odabrano polje

Želim omogućiti klik samo na polje koje pokazuje isporučenu količinu, ali isključivo za poslovnice i automobile koji imaju unesenu naručenu količinu. Znači, ne želim da se u koloni sa isporučenom količinom može kliknuti na prazno polje jer nema smisla unositi isporučenu količinu ako ništa nije naručeno.

Za to ću koristiti onCellClick funkciju.

<dx-pivot-grid ...
    (onCellClick)="onPivotCellClick($event)">
</dx-pivot-grid>

<dx-pivot-grid ...

(onCellClick)="onPivotCellClick($event)">

</dx-pivot-grid>

onPivotCellClick(e) {
    //Klik na polje "narudzba_isporucenakolicina" ako ima unesenu vrijednost
    if(e.area == "data" && e.cell.dataIndex == 1 && e.cell.value != undefined && e.cell.rowType != "GT") {
      console.log(e);
    }
    //Klik na polje "narudzba_isporucenakolicina" ako je vrijednosti null tj. ako je polje crvene pozadinske boje
    if(e.area === "data" && e.cell.dataIndex === 1 && e.cell.value === null && e.cell.rowType != "GT"){
      console.log(e);
    }
 }

onPivotCellClick(e) {

//Klik na polje "narudzba_isporucenakolicina" ako ima unesenu vrijednost

if(e.area == "data" && e.cell.dataIndex == 1 && e.cell.value != undefined && e.cell.rowType != "GT") {

console.log(e);

}

//Klik na polje "narudzba_isporucenakolicina" ako je vrijednosti null tj. ako je polje crvene pozadinske boje

if(e.area === "data" && e.cell.dataIndex === 1 && e.cell.value === null && e.cell.rowType != "GT"){

console.log(e);

}

Iz prikazanog se može vidjeti da klik na prazno polje ne radi ništa, klik na crveno polje dohvaća vrijednost null, a klik na polje za unesenom količinom dohvaća tu vrijednost. U ovom slučaju ta vrijednost je 10.

Pivot Grid dohvaćanje vrijednosti polja

Pivot Grid je primarno kreiran s ciljem prikaza podataka tj. prema dokumentaciji nema mogućnost jednostavnog uređivanja podataka kao što je to slučaj kod Data Grida, barem ju nisam našao, ali sam znao da mora postojati neko rješenje.

Za početak želim prikazati nekakvu formu unutar koje će se vrijednost polja moći urediti. Za to ću iskoristiti Popup UI komponentu. Unutar nje definiram dxTemplate što mi omogućava daljnju prilagodbu sučelja za uređivanje isporučene vrijednosti.

Za dohvaćanje vrijednosti kliknutog polja koristit ću Drill Down.

...
</dx-pivot-grid>
        <dx-popup
        [closeOnOutsideClick]="false"
        [showCloseButton]="true"
        [(visible)]="popupVisible"
        [title]="popupTitle"
        [width]="650"
        [height]="200"
        >
        <div *dxTemplate="let data of 'content'">
            <dx-data-grid
            #drillDownDataGrid
            [dataSource]="drillDownDataSource"
            >
            </dx-data-grid>
        </div>
        </dx-popup>

...

</dx-pivot-grid>

<dx-popup

[closeOnOutsideClick]="false"

[showCloseButton]="true"

[(visible)]="popupVisible"

[title]="popupTitle"

[width]="650"

[height]="200"

<dx-data-grid

#drillDownDataGrid

[dataSource]="drillDownDataSource"

</dx-data-grid>

</div>

</dx-popup>

import { 
        Component,
        OnInit,
        ViewChild
      } 
      from '@angular/core';

import { DxTextBoxComponent } from 'devextreme-angular';
   ...

export class NarudzbePopisComponent implements OnInit {

  popupVisible = false;
  popupTitle: string;
  narudzba_ID: number;
  isporucenakolicina: number;
  narucenaKolicinaPopup: number;

  drillDownDataSource: any;

  @ViewChild("kolicinaUnos", { static: false }) inputName: DxTextBoxComponent;
...

onPivotCellClick(e) {
    //Klik na polje "narudzba_isporucenakolicina" ako ima unesenu vrijednost
    if(e.area == "data" && e.cell.dataIndex == 1 && e.cell.value != undefined && e.cell.rowType != "GT") {
      //console.log(e);
      this.drillDownDataSource = this.dataSource.createDrillDownDataSource(e.cell);
        let _this = this;
        this.drillDownDataSource.load().done(function(result) {
          _this.narucenaKolicinaPopup = result[0].nas_kolicina;
        });
        this.popupTitle = e.cell.rowPath[0] + ' - ' + e.cell.columnPath[0];
        this.popupVisible = true;
    }
    //Klik na polje "narudzba_isporucenakolicina" ako je vrijednosti null tj. ako je polje crvene pozadinske boje
    if(e.area === "data" && e.cell.dataIndex === 1 && e.cell.value === null && e.cell.rowType != "GT"){
      //console.log(e);
      this.drillDownDataSource = this.dataSource.createDrillDownDataSource(e.cell);
        let _this = this;
        this.drillDownDataSource.load().done(function(result) {
          _this.narucenaKolicinaPopup = result[0].nas_kolicina;
        });
        this.popupTitle = e.cell.rowPath[0] + ' - ' + e.cell.columnPath[0];
        this.popupVisible = true;
    }
  }

import {

Component,

OnInit,

ViewChild

}

from '@angular/core';

import { DxTextBoxComponent } from 'devextreme-angular';

...

export class NarudzbePopisComponent implements OnInit {

popupVisible = false;

popupTitle: string;

narudzba_ID: number;

isporucenakolicina: number;

narucenaKolicinaPopup: number;

drillDownDataSource: any;

@ViewChild("kolicinaUnos", { static: false }) inputName: DxTextBoxComponent;

...

onPivotCellClick(e) {

//Klik na polje "narudzba_isporucenakolicina" ako ima unesenu vrijednost

if(e.area == "data" && e.cell.dataIndex == 1 && e.cell.value != undefined && e.cell.rowType != "GT") {

//console.log(e);

this.drillDownDataSource = this.dataSource.createDrillDownDataSource(e.cell);

let _this = this;

this.drillDownDataSource.load().done(function(result) {

_this.narucenaKolicinaPopup = result[0].nas_kolicina;

});

this.popupTitle = e.cell.rowPath[0] + ' - ' + e.cell.columnPath[0];

this.popupVisible = true;

}

//Klik na polje "narudzba_isporucenakolicina" ako je vrijednosti null tj. ako je polje crvene pozadinske boje

if(e.area === "data" && e.cell.dataIndex === 1 && e.cell.value === null && e.cell.rowType != "GT"){

//console.log(e);

this.drillDownDataSource = this.dataSource.createDrillDownDataSource(e.cell);

let _this = this;

this.drillDownDataSource.load().done(function(result) {

_this.narucenaKolicinaPopup = result[0].nas_kolicina;

});

this.popupTitle = e.cell.rowPath[0] + ' - ' + e.cell.columnPath[0];

this.popupVisible = true;

}

Klikom na polje isporučene količine prikazat će se sljedeće:

Kao što se iz prikazanog može vidjeti dohvaćeni su podaci prikazani na vrhu blog posta.

{
      "poslovnica_ID": 163,
      "poslovnica_naziv": "POSLOVNICA VK",
      "narudzba_ID": 1720303,
      "narudzba_narucenakolicina": 50,
      //Od 50 isporučeno 49 automobila
      "narudzba_isporucenakolicina": 49,
      "artikl_ar_ID": 69567,
      "artikl_sifra": 666627,
      "artikl_naziv": "Tesla Model S"
}

{

"poslovnica_ID": 163,

"poslovnica_naziv": "POSLOVNICA VK",

"narudzba_ID": 1720303,

"narudzba_narucenakolicina": 50,

//Od 50 isporučeno 49 automobila

"narudzba_isporucenakolicina": 49,

"artikl_ar_ID": 69567,

"artikl_sifra": 666627,

"artikl_naziv": "Tesla Model S"

}

Pivot Grid uređivanje vrijednosti polja

Popup iz gornjeg primjera je potrebno prilagoditi na način da se kreira input polje za izmjenu isporučene količine. Klikom na polje sa već unesenom isporučenom količinom ista će se prikazati unutar input polja. Ako je polje prazno isto će biti i input polje.

U GIF-u se može primjetiti da uređivanje isporučene količine uredno prolazi, ali uz jedan problem. Prilikom svakog spremanja isporučene količine cijeli se Pivot Grid osvježi i vrati u krajnju lijevu poziciju. Naravno da to nije praktično. Uz to, prilikom otvaranja popupa polje za unos količine nije fokusirano (crvena podcrtana linija) nego je na njega prvo potrebno kliknuti.

U nastavku ću pokazati kako riješiti oba problema.

<div *dxTemplate="let data of 'content'">
            <dx-data-grid
            class="dataGridKlasa"
            #drillDownDataGrid
            [dataSource]="drillDownDataSource"
            >
                <dxi-column dataField="narudzba_isporucenakolicina" caption="Isporučena količina" [visible]="true" cellTemplate="urediKolicinu">
                    <div *dxTemplate="let data of 'urediKolicinu'">
                        <dx-number-box #kolicinaUnos
                            style="text-align: center;"
                            [value]="data.value"
                            [placeholder]="data.value"
                            (onValueChanged)="spremiKolicinu($event, data)"
                            (onEnterKey)="spremiKolicinuEnter($event, data)"
                            >
                        </dx-number-box>
                    </div>
                </dxi-column>
                <dxi-column cellTemplate="gumbUrediKolicinu">
                    <div *dxTemplate="let data of 'gumbUrediKolicinu'">
                        <dx-button
                            style="margin-bottom: 5px;"
                            stylingMode="contained"
                            text="SPREMI"
                            type="success"
                            [width]="120"
                            (onClick)="spremiKolicinuButton($event, data)">
                        </dx-button>
                    </div>
                </dxi-column>
            </dx-data-grid>
        </div>

<dx-data-grid

class="dataGridKlasa"

#drillDownDataGrid

[dataSource]="drillDownDataSource"

<dxi-column dataField="narudzba_isporucenakolicina" caption="Isporučena količina" [visible]="true" cellTemplate="urediKolicinu">

<dx-number-box #kolicinaUnos

style="text-align: center;"

[value]="data.value"

[placeholder]="data.value"

(onValueChanged)="spremiKolicinu($event, data)"

(onEnterKey)="spremiKolicinuEnter($event, data)"

</dx-number-box>

</div>

</dxi-column>

<dxi-column cellTemplate="gumbUrediKolicinu">

<dx-button

style="margin-bottom: 5px;"

stylingMode="contained"

text="SPREMI"

type="success"

[width]="120"

(onClick)="spremiKolicinuButton($event, data)">

</dx-button>

</div>

</dxi-column>

</dx-data-grid>

</div>

  spremiKolicinu(event, data){
    this.isporucenakolicina = event.value;
    this.narudzba_ID = data.row.cells[0].data.narudzba_ID;
  }

  spremiKolicinuButton(event, data){
    //Slanje podataka na API
    //if(res.success == true){
      this.popupVisible = false;
    //} else {
      //Poruka o grešci
    //}
  }

  spremiKolicinuEnter(event, data){
    // this.slanjeKolicine(data.key.nas_ID, e.value);
      //Slanje podataka na API
      //if(res.success == true){
        this.popupVisible = false;
      //} else {
        //Poruka o grešci
      //}
  }

spremiKolicinu(event, data){

this.isporucenakolicina = event.value;

this.narudzba_ID = data.row.cells[0].data.narudzba_ID;

}

spremiKolicinuButton(event, data){

//Slanje podataka na API

//if(res.success == true){

this.popupVisible = false;

//} else {

//Poruka o grešci

//}

}

spremiKolicinuEnter(event, data){

// this.slanjeKolicine(data.key.nas_ID, e.value);

//Slanje podataka na API

//if(res.success == true){

this.popupVisible = false;

//} else {

//Poruka o grešci

//}

}

Osvježavanje samo uređenog podatka

Jedan od problema koji se stvorio nakon što je omogućeno uređivanje podataka je to što se sada cijeli ekran osvježi i onda se svaki put iznova mora skrolati do točno određenog polja kako bi se nastavilo uređivanje. To nikako nije praktično i bilo je potrebno pronaći rješenje.

U ovom će mi slučaju pomoći ArrayStore, ali tek kada prilagodim prikaziNarudzbe() funkciju. Kao što se može vidjeti this.podaciDemo se sada dohvaćaju upravo kroz ArrayStore. Kroz key parametar identificiram unikatnu vrijednost pomoću koje Pivot Grid može znati koju vrijednost će osvježiti.

Podatke nakon unosa osvježavam pomoću update(key, values) metode unutar funkcija spremiKolicinuButton() i spremiKolicinuEnter().

import { Component, OnInit, ViewChild } from '@angular/core';

import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
import ArrayStore from "devextreme/data/array_store";
import { DxTextBoxComponent,
         DxPivotGridComponent } from 'devextreme-angular';
...

@ViewChild(DxPivotGridComponent, { static: false }) pivotGrid: DxPivotGridComponent;

dataSource: PivotGridDataSource;
dataStore: any;

...

prikaziNarudzbe(){
          this.dataStore = new ArrayStore({
            key: "narudzba_ID",
            data: this.podaciDemo
          });
          this.dataSource = new PivotGridDataSource({
            fields: [
              {
                dataField: "poslovnica_naziv",
                dataType: "string",
                area: "row",
                width: 120
              },
              {
                dataField: "artikl_naziv",
                dataType: "string",
                area: "column"
              },
              {
                caption: "Naručeno",
                dataField: "narudzba_narucenakolicina",
                dataType: "number",
                summaryType: "sum",
                area: "data"
              },
              {
                caption: "Isporučeno",
                dataField: "narudzba_isporucenakolicina",
                dataType: "number",
                area: "data",
                summaryType: "custom",
                calculateCustomSummary: function(options) {  
                  if (options.summaryProcess == 'start') {  
                      options.totalValue = null;  
                  }  
                  if (options.summaryProcess == 'calculate') {  
                      if (options.value !== null) {  
                          options.totalValue += options.value;  
                      }  
                  }  
                }
              }
            ],
            store: this.dataStore
        });
  }

...

spremiKolicinuButton(event, data){
    //Slanje podataka na API
    //if(res.success == true){
      this.dataStore.update(data.key, {
        'poslovnica_ID': data.data.poslovnica_ID,
        'poslovnica_naziv': data.data.poslovnica_naziv,
        'artikl_ar_ID': data.data.artikl_ar_ID,
        'artikl_naziv': data.data.artikl_naziv,
        'artikl_sifra': data.data.artikl_sifra,
        'narudzba_isporucenakolicina': this.isporucenakolicina,
        'narudzba_narucenakolicina': data.data.narudzba_narucenakolicina,
        'narudzba_ID': data.data.narudzba_ID
      });
      this.isporucenakolicina = null;
      this.pivotGrid.instance.getDataSource().reload();
      this.popupVisible = false;
    //} else {
      //Poruka o grešci
    //}
  }

  spremiKolicinuEnter(event, data){
    // this.slanjeKolicine(data.key.nas_ID, e.value);
      //Slanje podataka na API
      //if(res.success == true){
        this.dataStore.update(data.key, {
          'poslovnica_ID': data.data.poslovnica_ID,
          'poslovnica_naziv': data.data.poslovnica_naziv,
          'artikl_ar_ID': data.data.artikl_ar_ID,
          'artikl_naziv': data.data.artikl_naziv,
          'artikl_sifra': data.data.artikl_sifra,
          'narudzba_isporucenakolicina': this.isporucenakolicina,
          'narudzba_narucenakolicina': data.data.narudzba_narucenakolicina,
          'narudzba_ID': data.data.narudzba_ID
        });
        this.isporucenakolicina = null;
        this.pivotGrid.instance.getDataSource().reload();
        this.popupVisible = false;
      //} else {
        //Poruka o grešci
      //}
  }

100

101

102

103

104

105

106

import { Component, OnInit, ViewChild } from '@angular/core';

import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";

import ArrayStore from "devextreme/data/array_store";

import { DxTextBoxComponent,

DxPivotGridComponent } from 'devextreme-angular';

...

@ViewChild(DxPivotGridComponent, { static: false }) pivotGrid: DxPivotGridComponent;

dataSource: PivotGridDataSource;

dataStore: any;

...

prikaziNarudzbe(){

this.dataStore = new ArrayStore({

key: "narudzba_ID",

data: this.podaciDemo

});

this.dataSource = new PivotGridDataSource({

fields: [

{

dataField: "poslovnica_naziv",

dataType: "string",

area: "row",

width: 120

{

dataField: "artikl_naziv",

dataType: "string",

area: "column"

{

caption: "Naručeno",

dataField: "narudzba_narucenakolicina",

dataType: "number",

summaryType: "sum",

area: "data"

{

caption: "Isporučeno",

dataField: "narudzba_isporucenakolicina",

dataType: "number",

area: "data",

summaryType: "custom",

calculateCustomSummary: function(options) {

if (options.summaryProcess == 'start') {

options.totalValue = null;

}

if (options.summaryProcess == 'calculate') {

if (options.value !== null) {

options.totalValue += options.value;

}

store: this.dataStore

});

}

...

spremiKolicinuButton(event, data){

//Slanje podataka na API

//if(res.success == true){

this.dataStore.update(data.key, {

'poslovnica_ID': data.data.poslovnica_ID,

'poslovnica_naziv': data.data.poslovnica_naziv,

'artikl_ar_ID': data.data.artikl_ar_ID,

'artikl_naziv': data.data.artikl_naziv,

'artikl_sifra': data.data.artikl_sifra,

'narudzba_isporucenakolicina': this.isporucenakolicina,

'narudzba_narucenakolicina': data.data.narudzba_narucenakolicina,

'narudzba_ID': data.data.narudzba_ID

});

this.isporucenakolicina = null;

this.pivotGrid.instance.getDataSource().reload();

this.popupVisible = false;

//} else {

//Poruka o grešci

//}

}

spremiKolicinuEnter(event, data){

// this.slanjeKolicine(data.key.nas_ID, e.value);

//Slanje podataka na API

//if(res.success == true){

this.dataStore.update(data.key, {

'poslovnica_ID': data.data.poslovnica_ID,

'poslovnica_naziv': data.data.poslovnica_naziv,

'artikl_ar_ID': data.data.artikl_ar_ID,

'artikl_naziv': data.data.artikl_naziv,

'artikl_sifra': data.data.artikl_sifra,

'narudzba_isporucenakolicina': this.isporucenakolicina,

'narudzba_narucenakolicina': data.data.narudzba_narucenakolicina,

'narudzba_ID': data.data.narudzba_ID

});

this.isporucenakolicina = null;

this.pivotGrid.instance.getDataSource().reload();

this.popupVisible = false;

//} else {

//Poruka o grešci

//}

}

Uz to, kada se popup otvori polje za unos isporučene količine nije fokusirano i prije unosa potrebno je na njega kliknuti. To također nije praktično. Ovo se vrlo lako riješi kroz onShown funkciju.

<dx-popup
        [closeOnOutsideClick]="false"
        [showCloseButton]="true"
        [(visible)]="popupVisible"
        [title]="popupTitle"
        [width]="650"
        [height]="200"
        (onShown)="onPopupShown($event)"
        >

<dx-popup

[closeOnOutsideClick]="false"

[showCloseButton]="true"

[(visible)]="popupVisible"

[title]="popupTitle"

[width]="650"

[height]="200"

(onShown)="onPopupShown($event)"

onPopupShown(e) {
    let a = this;
    setTimeout(() => {
      a.inputName.instance.focus();
    }, 100);
}

onPopupShown(e) {

let a = this;

setTimeout(() => {

a.inputName.instance.focus();

}, 100);

}

Na kraju to izgleda ovako:

Zaključak

Naravno, ovo je samo dio mogućnosti koje DevExtreme Pivot Grid ima, ali dovoljno da pohvatate osnove i shvatite na koji način funkcionira.

Što napraviti kada izgubite Android keystore lozinku?

Za početak, važna napomena. Jedna stvar mora biti jasna. Ova metoda neće raditi u 100% slučajeva i treba se koristiti kao zadnja opcija.

Olakotna okolnost može biti ako ste sami kreirali keystore za koji više nemate lozinku jer lakše ćete dobiti inspiraciju za potencijalne mogućnosti kada znate koje najčešće kombinacije koristite No, ako želite doći do lozinke keystore datoteke koju je netko drugi kreirao onda najveću ulogu igra sreća i dovoljno vremena provedenog u čekanju da ovaj alat dođe do lozinke.

P.S. Prije korištenja ovog alata dobra je opcija kontaktirati Google kroz njihovu General Play Console issues formu (I have a key or keystore related issue -> I have an upload key-related issue -> I forgot the password to my keystore).

Android keystore!?

Ono što se u svim uputama može pronaći je važna napomena koja se tiče upravo keystore datoteke za koju je navedeno da se uvijek mora čuvati na sigurnom mjestu i da se nikako ne smije izgubiti pripadajuća lozinka. U suprotnom neće biti moguće napraviti ažuriranje aplikacije na Google Play Store. Druga opcija je da se aplikacija potpisuje sa certifikatom kojim upravlja Google direktno kroz Google Play Store.

…if you’re not opted in to app signing with by Google Play and you lose your app’s signing key, you lose the ability to update your app.

Više o načinu kako se Android keystore datoteka kreira i koristi za postavljanje Ionic aplikacija na Google Play Store moguće je pronaći u blog postu pod naslovom “Priprema i objava Ionic aplikacije na Google Play Store“.

No, vratimo se scenariju u kojemu lozinka keystore datoeke nije poznata.

Što napraviti u tom slučaju?

Priprema

Preduvjet za korištenje ovog alata je instalirana Java
AndroidKeystoreBrute alat je moguće preuzeti na adresi https://drive.google.com/file/d/0B_Rw7kNjv3BATldrLXMwcVRud2c/edit?usp=sharing

Alat se pokreće naredbom

java -jar AndroidKeystoreBrute.jar <argumenti>

1	java -jar AndroidKeystoreBrute.jar <argumenti>

Mogući argumenti:

-m <1..3> – metoda 1, 2 ili 3

-k <putanja> – putanja do keystore datoteke

-d <putanja> – putanja do datoteke sa popisom riječi (za metodu 2 i 3)

-p – korištenje uobičajene zamjene poput “@” za “a” (3. metoda). VAŽNO – vrlo sporo!

-start <String> – postavljanje početnog niza za lozinku (za brute force)

-w – kreira novu keystore datoteku s istom lozinkom

-h – prikaz pomoći

Korištenje AndroidKeystoreBrute alata

Prilikom pokretanja dobiju se alias i datum tj. vrijeme kreiranja keystore datoteke. U ovom slučaju to su:

Found alias: demoapp
Creation Date: Fri Aug 07 14:42:35 CEST 2020

1 2	Found alias: demoapp Creation Date: Fri Aug 07 14:42:35 CEST 2020

1. metoda – Simply Bruteforce

java -jar AndroidKeystoreBrute_v1.05.jar -m 1 -k DemoApp.keystore -start AAAAAA

1	java -jar AndroidKeystoreBrute_v1.05.jar -m 1 -k DemoApp.keystore -start AAAAAA

Najsporija metoda. Ovdje se ne koristi riječnik s popisom mogućih riječi nego se vrte sve kombinacije počevši od zadanog argumenta -START AAAAAA

2. metoda – Dictionary Attack

java -jar AndroidKeystoreBrute_v1.05.jar -m 2 -k DemoApp.keystore -d "wordlist.txt"

1	java -jar AndroidKeystoreBrute_v1.05.jar -m 2 -k DemoApp.keystore -d "wordlist.txt"

Metoda koja će vrtiti popis zadanih riječi u točnom obliku kako su navedene. Znači neće ih kombinirati kao što to radi u 3. metodi. Potreban je puno veći popis riječi i sve moguće kombinacije.

3. metoda – Smart Wordlist Attack (preporuka)

java -jar AndroidKeystoreBrute_v1.05.jar -m 3 -k DemoApp.keystore -d "wordlist.txt"

1	java -jar AndroidKeystoreBrute_v1.05.jar -m 3 -k DemoApp.keystore -d "wordlist.txt"

Najbolja metoda jer će od svih riječi iz riječnika napraviti sve moguće kombinacije. Brojevi se dodaju automatski i nije ih potrebno posebno navoditi. Ipak, ako znate da se lozinka sastoji od npr. broja godine “2020” dobro je to navesti jer će ubrzati pronalazak ispravne kombinacije.

Popis riječi koje sam koristio u wordlist.txt:

tomislav
primjer
demo
blog
8
7
0

tomislav

primjer

demo

blog

Ispravnu kombinaciju lozinke dobio sam za 22 sekunde:

Naslovna slika preuzeta sa https://android-developers.googleblog.com/2018/12/new-keystore-features-keep-your-slice.html

Prikaz podataka API-ja Sudskog registra u Angular formi

U ovom ću blog postu pokazati kako napraviti upit na API Sudskog registra i dohvatiti informacije o poslovnom subjektu prema OIB-u/MBS-a. U dokumentaciji se može vidjeti koje je sve informacije i preko kojih ruta moguće napraviti, ali ja ću se zadržati na onoj po meni najzanimljivijoj subjekt_detalji_Get.

Projekt je dostupan na GitHubu.

Uvod

Za kreiranje forme koristiti ću FormBuilder, a mogao sam isto tako koristiti i ngModel ili FormControl. Više o tome objavio sam u jednom od prijašnjih blog postova. Forma će se sastojati od nekoliko polja od kojih će većina biti obavezna. Prilikom unosa OIB-a ili MBS-a odmah ide provjera na API Sudskog registra i tek nakon te provjere moguće je kliknuti na gumb “Spremi” nakon kojega se podaci mogu spremiti u bazu podataka.

Provjera rada API-ja

Prije nego krenem s izradom Angular forme idem se uvjeriti da API radi na način kako je prikazano u dokumentaciji i da mi vraća podatke koje želim koristiti. API je moguće testirati i na ovoj adresi. Da nema te forme koristio bi Postman.

URL na koji radim upit je:

https://sudreg-api.pravosudje.hr/javni/subjekt_detalji?tipIdentifikatora={tipIdentifikatora}&identifikator={identifikator}[&expand_relations][&timestamp_id]

1	https://sudreg-api.pravosudje.hr/javni/subjekt_detalji?tipIdentifikatora={tipIdentifikatora}&identifikator={identifikator}[&expand_relations][&timestamp_id]

Obavezni parametri upita su sljedeći:

tipIdentifikatora* (string) – moguće koristiti oib (osobni identifikacijski broj) ili mbs (matični broj subjekta)
identifikator* (integer) – oib ili mbs koristim u obliku broja (int64)
Ocp-Apim-Subscription-Key* (string) – ide u header, a dobije se nakon registracije

Kreiranje API servisa

U servisu će se nalaziti dvije funkcije. Jedna će dohvaćati podatke prema OIB-u, a druga prema MBS-a.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

   httpOptions = {
    headers: new HttpHeaders({
      'Ocp-Apim-Subscription-Key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    })
  };

  constructor(private _http: HttpClient) { }

  sudskiRegistarOIB(oib:any) {
    return this._http.get('https://sudreg-api.pravosudje.hr/javni/subjekt_detalji?tipIdentifikatora=oib&identifikator='+oib+'&expand_relations=true', this.httpOptions)
      .pipe(map((res: any) => res ));
  }

  sudskiRegistarMBS(mbs:any) {
    return this._http.get('https://sudreg-api.pravosudje.hr/javni/subjekt_detalji?tipIdentifikatora=mbs&identifikator='+mbs+'&expand_relations=true', this.httpOptions)
      .pipe(map((res: any) => res ));
  }

}

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

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { map } from 'rxjs/operators';

@Injectable({

providedIn: 'root'

})

export class ApiService {

httpOptions = {

headers: new HttpHeaders({

'Ocp-Apim-Subscription-Key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

})

};

constructor(private _http: HttpClient) { }

sudskiRegistarOIB(oib:any) {

return this._http.get('https://sudreg-api.pravosudje.hr/javni/subjekt_detalji?tipIdentifikatora=oib&identifikator='+oib+'&expand_relations=true', this.httpOptions)

.pipe(map((res: any) => res ));

}

sudskiRegistarMBS(mbs:any) {

return this._http.get('https://sudreg-api.pravosudje.hr/javni/subjekt_detalji?tipIdentifikatora=mbs&identifikator='+mbs+'&expand_relations=true', this.httpOptions)

.pipe(map((res: any) => res ));

}

HTML forma

Kreiram formu sa poljima:
– oib – dužina 11 znakova. Obavezno polje.
– mbs – dužina 9 znakova. Obavezno polje.
– nazivtvrtke – Obavezno polje.
– ulica – Obavezno polje.
– grad – Obavezno polje.
– e-mail

Prilikom unosa OIB-a ili MBS-a odmah se vrši provjera na API putem funkcije provjera(angularForma). Tek nakon što se forma ispuni podacima tj. kada se zadovolji unos obaveznih polja moguće je kliknuti na gumb “Spremi”.

 <form class="form-content" id="angularForma" [formGroup]="angularForma" (ngSubmit)="spremi()">
       <div class="form-header">
                 <h5 class="title">Unos poslovnog subjekta</h5>
            </div>
            <div class="form-body">
                <div class="form-group row">
                    <div class="col-sm-6">
                        <input class="form-control form-control-line" type="text" pattern="[0-9]{11}" minlength="11" maxlength="11" formControlName="oib" placeholder="OIB" (keyup)="provjera(angularForma)">
                    </div>
                    <div class="col-sm-6">
                        <input class="form-control form-control-line" type="text" pattern="[-+]?[0-9]*[.,]?[0-9]+" minlength="9" maxlength="9" formControlName="mbs" placeholder="MBS" (keyup)="provjera(angularForma)">
                    </div>
                </div>
                    <div class="form-group">
                        <input class="form-control form-control-line" type="text" formControlName="nazivtvrtke" placeholder="Naziv">
                    </div>
                    <div class="form-group">
                        <input class="form-control form-control-line" type="text" formControlName="ulica" placeholder="Adresa">
                    </div>
                    <div class="form-group">
                        <input class="form-control form-control-line" type="text" formControlName="grad" placeholder="Grad">
                    </div>
                    <div class="form-group">
                        <input class="form-control form-control-line" type="email" formControlName="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" placeholder="E-mail">
                    </div>
            </div>
            <div class="form-footer justify-content-between">
                <div class="text-center">
                    <button class="btn btn-primary btn-rounded" [disabled]="!angularForma.valid" type="submit">Spremi</button>
                </div>
       </div>
</form>

<h5 class="title">Unos poslovnog subjekta</h5>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<button class="btn btn-primary btn-rounded" [disabled]="!angularForma.valid" type="submit">Spremi</button>

</div>

</form>

Funkcionalnost forme

Unutar ngOnInit() funkcije radim inicijalizaciju forme. Ovdje odmah dodajem i Validators kako bi mogao validirati potrebna polja i spriječiti klik na gumb “Spremi” pomoću [disabled]="!angularForma.valid" u slučaju kada forma nije ispravno ispunjena.

Kada se unutar polja forme unesu OIB ili MBS poziva se funkcija provjera(angularForma). Prvo vršim provjeru koja vrsta identifikatora (OIB ili MBS) je unesena jer ću kasnije na osnovu toga pozivati pripadajući API Sudskog registra iz ApiService i paralelno provjeravam da su ispravne dužine. Nakon toga provjeravam da unutar unesenih znakova nema slova tj. da su samo brojevi match(/^[0-9]+$/). Kada su svi navedeni uvjeti zadovoljeni pozivam this._apiService.sudskiRegistarOIB ili this._apiService.sudskiRegistarMBS te prikazujem dobivene podatke console.log(res) i odmah popunjavam formu.

Kada je forma ispravno validirana podaci će se uspješno dohvatiti.

Ne međutim, ostaje problem kod popunjavanja forme sa nasumičnim brojevima koji će ispravno biti validirani prema dužini iako ne postoje u Registru. Npr. netko za OIB može unijeti 11 nula ili za MBS 9 nula i forma će biti validna te će se taj poslovni subjekt moći spremiti u bazu podatka.

To mogu spriječiti koristeći setValue ili patchValue. Znači, ako mi API Sudskog registra ne vrati podatke neću dopustiti da forma prođe kao validna i da se uopće može kliknuti na “Spremi”.

– this.angularForma.controls['oib'].setValue(null);
– this.angularForma.controls['oib'].patchValue(null);

Što se adrese tiče stavio sam uvjet da se prikaže ispravna vrijednost neovisno o tome ima li prikazana adresa uz broj i podbroj tj. slovo (res.sjedista[0].kucni_podbroj ? (res.sjedista[0].kucni_podbroj) : '') .

Npr. u adresi Dragutina Žanića Karle 27a je ‘a’ podbroj .

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { ApiService } from './api.service';

import * as toastr from 'toastr';

@Component({
  selector: 'app-angular-forma',
  templateUrl: './angular-forma.component.html',
  styleUrls: ['./angular-forma.component.css'],
  providers: [ApiService]
})
export class AngularFormaComponent implements OnInit {

  angularForma: FormGroup;

  constructor(private _fb: FormBuilder,
              private _apiService: ApiService) { }

  ngOnInit() {
    //Inicijalizacija forme
    this.angularForma = this._fb.group({
      oib: ['', [Validators.required, Validators.minLength(11), Validators.maxLength(11), Validators.pattern('[-+]?[0-9]*[.,]?[0-9]+')]],
      mbs: ['', [Validators.required, Validators.minLength(9), Validators.maxLength(9), Validators.pattern('[-+]?[0-9]*[.,]?[0-9]+')]],
      nazivtvrtke: ['', Validators.required],
      ulica: ['', Validators.required],
      grad: ['', Validators.required],
      email: ['', Validators.email]
    }); 
  }

 provjera(angularForma){
      //OIB
      if(angularForma.value.oib && angularForma.value.oib.length == 11){
        if(angularForma.value.oib.match(/^[0-9]+$/)){
          this._apiService.sudskiRegistarOIB(angularForma.value.oib).subscribe(res => {
            console.log(res);
            if(res){
                this.angularForma = this._fb.group({
                  oib: res.oib,
                  mbs: res.mbs,
                  nazivtvrtke: res.skracene_tvrtke[0].ime,
                  ulica: res.sjedista[0].ulica + ' ' + res.sjedista[0].kucni_broj + (res.sjedista[0].kucni_podbroj ? (res.sjedista[0].kucni_podbroj) : ''),
                  grad: res.sjedista[0].naziv_naselja,
                  email: ''
                });
            } else {
              toastr.error("Neuspješno dohvaćanje podataka prema OIB!");
              this.angularForma.controls['oib'].setValue(null);
            }
          });
        } else {
          toastr.error("OIB mora biti u obliku broja!");
        }
      //MBS
      } else if(angularForma.value.mbs && angularForma.value.mbs.length == 9){
        if(angularForma.value.mbs.match(/^[0-9]+$/)){
          this._apiService.sudskiRegistarMBS(angularForma.value.mbs).subscribe(res => {
            console.log(res);
            if(res){
                this.angularForma = this._fb.group({
                  oib: res.oib,
                  mbs: res.mbs,
                  nazivtvrtke: res.skracene_tvrtke[0].ime,
                  ulica: res.sjedista[0].ulica + ' ' + res.sjedista[0].kucni_broj + (res.sjedista[0].kucni_podbroj ? (res.sjedista[0].kucni_podbroj) : ''),
                  grad: res.sjedista[0].naziv_naselja,
                  email: ''
                });
            } else {
              toastr.error("Neuspješno dohvaćanje podataka prema MBS!");
              this.angularForma.controls['mbs'].setValue(null);
            }
          });
        } else {
          toastr.error("MBS mora biti u obliku broja!");
        }
      } else {
        //
      } 
  }

  spremi(){
    console.log(this.angularForma);
  }

}

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

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { ApiService } from './api.service';

import * as toastr from 'toastr';

@Component({

selector: 'app-angular-forma',

templateUrl: './angular-forma.component.html',

styleUrls: ['./angular-forma.component.css'],

providers: [ApiService]

})

export class AngularFormaComponent implements OnInit {

angularForma: FormGroup;

constructor(private _fb: FormBuilder,

private _apiService: ApiService) { }

ngOnInit() {

//Inicijalizacija forme

this.angularForma = this._fb.group({

oib: ['', [Validators.required, Validators.minLength(11), Validators.maxLength(11), Validators.pattern('[-+]?[0-9]*[.,]?[0-9]+')]],

mbs: ['', [Validators.required, Validators.minLength(9), Validators.maxLength(9), Validators.pattern('[-+]?[0-9]*[.,]?[0-9]+')]],

nazivtvrtke: ['', Validators.required],

ulica: ['', Validators.required],

grad: ['', Validators.required],

email: ['', Validators.email]

});

}

provjera(angularForma){

//OIB

if(angularForma.value.oib && angularForma.value.oib.length == 11){

if(angularForma.value.oib.match(/^[0-9]+$/)){

this._apiService.sudskiRegistarOIB(angularForma.value.oib).subscribe(res => {

console.log(res);

if(res){

this.angularForma = this._fb.group({

oib: res.oib,

mbs: res.mbs,

nazivtvrtke: res.skracene_tvrtke[0].ime,

ulica: res.sjedista[0].ulica + ' ' + res.sjedista[0].kucni_broj + (res.sjedista[0].kucni_podbroj ? (res.sjedista[0].kucni_podbroj) : ''),

grad: res.sjedista[0].naziv_naselja,

email: ''

});

} else {

toastr.error("Neuspješno dohvaćanje podataka prema OIB!");

this.angularForma.controls['oib'].setValue(null);

}

});

} else {

toastr.error("OIB mora biti u obliku broja!");

}

//MBS

} else if(angularForma.value.mbs && angularForma.value.mbs.length == 9){

if(angularForma.value.mbs.match(/^[0-9]+$/)){

this._apiService.sudskiRegistarMBS(angularForma.value.mbs).subscribe(res => {

console.log(res);

if(res){

this.angularForma = this._fb.group({

oib: res.oib,

mbs: res.mbs,

nazivtvrtke: res.skracene_tvrtke[0].ime,

ulica: res.sjedista[0].ulica + ' ' + res.sjedista[0].kucni_broj + (res.sjedista[0].kucni_podbroj ? (res.sjedista[0].kucni_podbroj) : ''),

grad: res.sjedista[0].naziv_naselja,

email: ''

});

} else {

toastr.error("Neuspješno dohvaćanje podataka prema MBS!");

this.angularForma.controls['mbs'].setValue(null);

}

});

} else {

toastr.error("MBS mora biti u obliku broja!");

}

} else {

}

spremi(){

console.log(this.angularForma);

}

*ngFor u Angularu 101

Cilj blog posta “*ngFor u Angularu za početnike” je napraviti uvod u ngFor Angular direktivu jer ona je osnova koju svaki, Angular, developer treba i mora znati.

*ngFor direktiva se primarno koristi za prikaz niza podataka (array) i početnicima može predstavljati poseban izazov. Također, može se koristiti i za prikaz objekata uz pomoć KeyValuePipe.

Prije nego krenem s izradom primjera trebam kreirati Angular projekt, a to činim naredbom:

$ ng new AngularNgFor
$ cd AngularNgFor
$ ng serve

$ ng new AngularNgFor

$ cd AngularNgFor

$ ng serve

Projekt je vidljiv na adresi http://localhost:4200/

Uvod

*ngFor direktiva u Angularu, osim što služi za prikaz niza podataka, je optimizirana da minimalno utječe na DOM (Document Object Model).

To će se najbolje vidjeti u nastavku kada budem koristio let i = index pri čemu ću uklanjati elemente niza bez da ga cijelog ponovno osvježavam.

Angular će se pobrinuti za to da samo taj jedan element izbaci dok sve drugo ostaje isto. Isti slučaj bi bio i kada bi htio dodati novi element u niz.

U slučaju kada podatke dohvaćamo putem nekog API-ja dogodit će se, u slučaju kada se neki podataka obriše ili doda, da Angular više neće znati što treba biti na kojoj poziciji. U tom slučaju koristim trackBy putem čega Angularu mogu reći koji parametar da koristi kako bi identificirao elemente.

*ngFor – prikaz niza podataka

Ako npr. imam sljedeći niz podatka za pretpostaviti je da ih želim na ekranu prikazati kao popis. U ovom će slučaju to biti jednostavan popis osoba. Podaci su fiksno određeni unutar niza, ali logika je ista čak i da stižu putem nekog API-ja.

simpleArray = [
    {
      id: 4,
      name: 'Tomislav',
      country: 'Croatia'
    },
    {
      id: 5,
      name: 'Jomislav',
      country: 'Croatia'
    },
    {
      id: 6,
      name: 'Valsimot',
      country: 'Croatia'
    },
  ]

simpleArray = [

{

id: 4,

country: 'Croatia'

{

id: 5,

country: 'Croatia'

{

id: 6,

country: 'Croatia'

]

Gore navedeni popis podataka želim prikazati na sljedeći način:

<ul>
  <li>Tomislav, Croatia</li>
  <li>Jomislav, Croatia</li>
  <li>Valsimot, Croatia</li>
</ul>

<ul>

<li>Tomislav, Croatia</li>

<li>Jomislav, Croatia</li>

<li>Valsimot, Croatia</li>

</ul>

To znači da nekako moram postići da se za svaki objekt unutar niza kreira novi <li></li> element.

Upravo tu uskače *ngFor sa vrlo jednostavnom sintaksom *ngFor="let <value> of <collection>" pri čemu <value> označava naziv varijable koji proizvoljno određujem, dok <collection> označava izvor podataka što je u ovom slučaju niz simpleArray.

<ul>
  <li *ngFor="let data of simpleArray">{{data.name}}, {{data.country}}</li>
</ul>

<ul>

<li *ngFor="let data of simpleArray">{{data.name}}, {{data.country}}</li>

</ul>

Konačni rezultat je sljedeći:

Ako želim imati redne brojeve mogu koristiti ol tag. Ovo spominjem samo iz razloga što ću u nastavku pokazati kako je redne brojeve moguće dobiti i pomoću indexa elementa.

ngFor + element index*

index se definira kao varijabla let i = index i uvijek počinje od 0. Mogu ga koristiti kako bi prikazao redne brojeve elemenata.

<ul>
  <li *ngFor="let data of simpleArray; let i = index">{{i+1}} - {{data.name}}, {{data.country}}</li>
</ul>

<ul>

<li *ngFor="let data of simpleArray; let i = index">{{i+1}} - {{data.name}}, {{data.country}}</li>

</ul>

Na ekranu to izgleda ovako:

index mogu, ali i ne moram prikazati na ekranu. U oba ga slučaja mogu koristiti kako bi pristupio pojednom elementu niza.

U sljedećem ću primjeru pomoću funkcije removeByIndex(i) ukloniti neke elemente iz niza.

removeByIndex(i){
   console.log(i);
   this.simpleArray.splice(i,1);
   console.log(this.simpleArray);
}

removeByIndex(i){

console.log(i);

this.simpleArray.splice(i,1);

console.log(this.simpleArray);

}

Funkciju pozivam klikom na pojedini element.

<ul>
  <li *ngFor="let data of simpleArray; let i = index" (click)="removeByIndex(i)">{{i}} - {{data.name}}, {{data.country}}</li>
</ul>

<ul>

<li *ngFor="let data of simpleArray; let i = index" (click)="removeByIndex(i)">{{i}} - {{data.name}}, {{data.country}}</li>

</ul>

U praksi to izgleda ovako:

ngFor + trackBy*

trackBy se definira kao ; trackBy: id.

<ul>
  <li *ngFor="let data of simpleArray; let i = index; trackBy: id" (click)="trackElement(i,data.id)">{{data.name}}, {{data.country}}</li>
</ul>

<ul>

<li *ngFor="let data of simpleArray; let i = index; trackBy: id" (click)="trackElement(i,data.id)">{{data.name}}, {{data.country}}</li>

</ul>

Pomoću funkcije trackElement(i,data.id) dohvaćam unikatni ID svakog elementa niza.

trackElement(i: number, element: any) {
    console.log("index:" + " " + i + ", " + "trackBy ID:" + " " + element);
}

trackElement(i: number, element: any) {

console.log("index:" + " " + i + ", " + "trackBy ID:" + " " + element);

}

U praksi to izgleda ovako:

*ngFor – prvi i zadnji element niza

*ngFor direktiva u Angularu nudi još jednu zanimljivu mogućnost, a to je dohvaćanje prvog i zadnjeg elementa niza pomoću ; let first = first; let last = last.

<ul>
  <li *ngFor="let data of simpleArray; let first = first; let last = last" [ngClass]="{ firstClass: first, lastClass: last }">{{data.name}}, {{data.country}}</li>
</ul>

<ul>

<li *ngFor="let data of simpleArray; let first = first; let last = last" [ngClass]="{ firstClass: first, lastClass: last }">{{data.name}}, {{data.country}}</li>

</ul>

Na taj se način prvi i zadnji element mogu npr. urediti CSS-om.

.firstClass {
    color: red;
}
.lastClass {
    color: blue;
}

.firstClass {

color: red;

}

.lastClass {

color: blue;

}

U praksi to izgleda ovako:

Iako ovo još nisam koristio u nekoj produkcijskoj aplikaciji izgleda vrlo zanimljivo.

*ngFor – parni i neparni elementi niza

Kada već spominjem uređivanje elementata CSS-om, postoji još jedna zanimljiva funkcionalnost korištenjem ; let even = even; let odd = odd.

<ul>
 <li *ngFor="let data of simpleArray; let even = even; let odd = odd" [ngClass]="{ evenClass: even, oddClass: odd }">{{data.name}}, {{data.country}}</li>
</ul>

<ul>

<li *ngFor="let data of simpleArray; let even = even; let odd = odd" [ngClass]="{ evenClass: even, oddClass: odd }">{{data.name}}, {{data.country}}</li>

</ul>

Na taj se način parni i neparni elementi mogu npr. urediti CSS-om.

.evenClass {
    color: red;
}
.oddClass {
    color: blue;
}

.evenClass {

color: red;

}

.oddClass {

color: blue;

}

U praksi to izgleda ovako:

*ngFor – niz unutar niza

Osim prikaza osnovnog niza mogu prikazati i napredni niz tj. countryList niz unutar nestedArray niza.

nestedArray: any[] = [
    {
      id: 4,
      name: 'Tomislav',
      countryList: [
        {
          shortCode: 'HR',
          fullName: 'Croatia'
        },
        {
          shortCode: 'UK',
          fullName: 'United Kingdom'
        }
      ]
    },
    {
      id: 5,
      name: 'Jomislav',
      countryList: [
        {
          shortCode: 'HR',
          fullName: 'Croatia'
        },
        {
          shortCode: 'UK',
          fullName: 'United Kingdom'
        }
      ]
    },
    {
      id: 6,
      name: 'Valsimot',
      countryList: [
        {
          shortCode: 'HR',
          fullName: 'Croatia'
        },
        {
          shortCode: 'UK',
          fullName: 'United Kingdom'
        }
      ]
    },
]

nestedArray: any[] = [

{

id: 4,

countryList: [

{

shortCode: 'HR',

fullName: 'Croatia'

{

shortCode: 'UK',

fullName: 'United Kingdom'

}

]

{

id: 5,

countryList: [

{

shortCode: 'HR',

fullName: 'Croatia'

{

shortCode: 'UK',

fullName: 'United Kingdom'

}

]

{

id: 6,

countryList: [

{

shortCode: 'HR',

fullName: 'Croatia'

{

shortCode: 'UK',

fullName: 'United Kingdom'

}

]

U ovom slučaju *ngFor ide unutar <ul>.

<ul *ngFor="let data of nestedArray">
   <li>{{data.name}}</li>
      <ul>
        <li *ngFor="let country of data.countryList">
            {{country.fullName}}
        </li>
      </ul>
</ul>

<ul>

</li>

</ul>

U praksi to izgleda ovako:

Zaključak

U ovom blog postu, pod nazivom “*ngFor u Angularu za početnike“, naveo sam osnovne funkcionalnosti *ngFor direktive s kojom svaki developer može napraviti funkcionalno rješenje. Sve dalje ovisi o specifičnim potrebama projekta.

P.S. Struktura projekta prema package.json:

{
  "name": "angular-ng-for",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.9",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

{

"name": "angular-ng-for",

"version": "0.0.0",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "~7.2.0",

"@angular/common": "~7.2.0",

"@angular/compiler": "~7.2.0",

"@angular/core": "~7.2.0",

"@angular/forms": "~7.2.0",

"@angular/platform-browser": "~7.2.0",

"@angular/platform-browser-dynamic": "~7.2.0",

"@angular/router": "~7.2.0",

"core-js": "^2.5.4",

"rxjs": "~6.3.3",

"tslib": "^1.9.0",

"zone.js": "~0.8.26"

"devDependencies": {

"@angular-devkit/build-angular": "~0.13.0",

"@angular/cli": "~7.3.9",

"@angular/compiler-cli": "~7.2.0",

"@angular/language-service": "~7.2.0",

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

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

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

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

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

"karma": "~4.0.0",

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

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

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

"protractor": "~5.4.0",

"ts-node": "~7.0.0",

"tslint": "~5.11.0",

"typescript": "~3.2.2"

}

Angular & Ionic 4 – PayPal mobilno plaćanje

Cilj ovog blog posta je pokazati kako implementirati PayPal plaćanje unutar Ionic 4, PWA, aplikacije koristeći Smart Payment Button (Checkout).

Osim Smart Payment Buttons, PayPal omogućava sljedeće vrste plaćanja:

PayPal Smart Payment — PayPal Developer: https://developer.paypal.com/

Primjeri u ovom blog postu temelje se na dokumentaciji dostupnoj na poveznici https://developer.paypal.com/.

Iako u testnom okruženju, plaćanje kreirano na ovaj način biti će uspješno provedeno što će se moći vidjeti unutar PayPal testnog sučelja i prikazano u nastavku ovog blog posta.

Ipak, kako je vidljivo u službenoj dokumentaciji potrebno je napraviti i serverski tj. backend dio koji će služiti kao potvrda uspješnog plaćanja. Serverski dio u ovom blog postu neće biti detaljnije obrađen.

Smart Payment Buttons funkcionira na sljedeći način:

Gumb za plaćanje prikazan je na web/mobilnoj aplikaciji
Kupac klikne na gumb
Poziva se PayPal Orders API koji priprema transakciju
Prikazuje se PayPal Checkout forma za prijavu/plaćanje
Kupac odobrava plaćanje
Poziva se PayPal Orders API koji izvršava transakciju
Kupcu se prikazuje poruka o uspješnoj transakciji

PayPal Sandbox & App Name

Kako bi mogao testirati PayPal naplatu potrebni su mi: testni PayPal korisnički račun na koji će sredstva biti uplaćena, testni PayPal korisnički račun koji će izvršavati plaćanje kao i profil aplikacije putem koje će se plaćanje izvršavati.

PayPal Sandbox

S obzirom da već imam postojeći PayPal račun ne moram ga sada kreirati nego je dovoljno otići na adresu https://developer.paypal.com/developer/accounts/ kako bi kreirao Sandbox račun.

Moguće je kreirati testni račun fizičke ili pravne osobe tj. tvrtke. U ovom ću primjeru kreirati poslovni PayPal račun.

Valuta tog računa biti će u američkim dolarima (USD), a plaćanje ću kasnije izvršavati u dolarima i eurima (EUR). PayPal automatski radi konverziju valuta.

Klikom na „Create Account“ kreiram Sandbox PayPal račun fortuno@example.com.

My Apps & Credentials

Nakon toga na adresi https://developer.paypal.com/developer/applications kreiram profil aplikacije putem koje ću izvršavati plaćanje.

Klikom na „Create App“ dolazim do ekrana gdje je potrebno unijeti naziv aplikacije i odabrati Sandbox račun s kojim će ta aplikacija biti povezana.

Nakon toga dobijem Client ID koji će mi biti potreban kasnije i bez kojega ne mogu izvršiti plaćanje.

Smart Payment Buttons & Ionic 4

Sada ću kreirati novi Ionic 4 projekt. To činim naredbom:

$ ionic start Ionic4PayPal blank

1	$ ionic start Ionic4PayPal blank

Fokus će biti na početnom ekranu koji će se sastojati samo od gumba za plaćanje tako da koristim blank temu.

Detaljnije o kreiranju Ionic 4 aplikacije moguće je pronaći u blog postu pod naslovom „Ionic 4 CRUD aplikacija“.

PayPal Checkout tj. Smart Payment Buttons omogućava brzu i jednostavnu implementaciju plaćanja u bilo koju aplikaciju na siguran način.

Implementacija počinje dodavanjem sljedeće skripte unutar index.html datoteke:

<script src="https://www.paypal.com/sdk/js?client-id=CLIENTID"></script>

1	<script src="https://www.paypal.com/sdk/js?client-id=CLIENTID"></script>

Kao što se može vidjeti, ovdje mi je potreban ranije kreiran Client ID. Ako drugačije ne navedem zadana valuta biti će USD. U jednom od primjera kao valutu ću dodati EUR, parametar currency.

Popis svih dostupnih parametara moguće je vidjeti na poveznici https://developer.paypal.com/docs/checkout/reference/customize-sdk/.

index.html datoteka sada izgleda ovako:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8" />
  <title>Ionic 4 - PayPal</title>
 
  <base href="/" />
 
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
 
  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
 
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 
  <script src="https://www.paypal.com/sdk/js?client-id=CLIENTID"></script>
  <!-- <script src="https://www.paypal.com/sdk/js?client-id=CLIENTID&currency=EUR"></script> -->
</head>
 
<body>
  <app-root></app-root>
</body>
 
</html>

<!DOCTYPE html>

<head>

<title>Ionic 4 - PayPal</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

Prikaz gumba na ekranu vrši se putem ID-a.

<div id="paypal-button-container"></div>

1	<div id="paypal-button-container"></div>

Sve zajedno to sada izgleda ovako:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic 4 - PayPal
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <ion-row *ngIf="!placanjeUspjesno" text-center>
      <ion-col size-lg="4" offset-lg="4">
          <ion-card padding>
         <div id="paypal-button-container"></div>
          </ion-card>
      </ion-col>
  </ion-row>
  <ion-row *ngIf="placanjeUspjesno">
     <ion-col size-lg="4" offset-lg="5" text-center>
        <ion-card padding>
        <p>Thank you for your payment. Your transaction has been completed, and a receipt for your purchase has been emailed to you. Log into your PayPal account to view transaction details.</p>
      </ion-card>
      </ion-col>
  </ion-row>
</ion-content>

<ion-header>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 - PayPal

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-row *ngIf="!placanjeUspjesno" text-center>

<ion-col size-lg="4" offset-lg="4">

<ion-card padding>

</ion-card>

</ion-col>

</ion-row>

<ion-row *ngIf="placanjeUspjesno">

<ion-col size-lg="4" offset-lg="5" text-center>

<ion-card padding>

<p>Thank you for your payment. Your transaction has been completed, and a receipt for your purchase has been emailed to you. Log into your PayPal account to view transaction details.</p>

</ion-card>

</ion-col>

</ion-row>

</ion-content>

Koristim ngIf direktivu kako bi nakon uspješnog plaćanja umjesto gumba za plaćanje prikazao odgovarajuću poruku.

S obzirom da je u pitanju demo aplikacija na ekranu se neće nalaziti ništa drugo osim gumba za plaćanje na vrhu ekrana. U suprotnom bi se više moralo razmisliti o optimalnom mjestu za postavljanje gumba. Više o tome na poveznici https://developer.paypal.com/docs/checkout/best-practices/feature-paypal/#

Inicijalizacija transakcije vrši se klikom na gumb “PayPal” tj. funkcijom createOrder unutar koje ću proslijediti samo iznos koji želim na/platiti.

createOrder: function (data, actions) {
   return actions.order.create({
          purchase_units: [{
            amount: {
              value: _this.paymentAmount
            }
          }]
   });
},

createOrder: function (data, actions) {

return actions.order.create({

purchase_units: [{

amount: {

value: _this.paymentAmount

}

}]

});

Kada kupac odobri transakciju poziva se funkcija onApprove.

onApprove: function (data, actions) {
           return actions.order.capture()
             .then(function (details) {
               console.log(details);
               if(details.status == "COMPLETED"){
                // Show a success message to the buyer
               //alert('Transaction completed by ' + details.payer.name.given_name + '!');
                  _this.placanjeUspjesno = true;
               } else {
                 alert("Neuspješno plaćanje!");
               }
             })
             .catch(err => {
               console.log(err);
             })
}

onApprove: function (data, actions) {

return actions.order.capture()

.then(function (details) {

console.log(details);

if(details.status == "COMPLETED"){

// Show a success message to the buyer

//alert('Transaction completed by ' + details.payer.name.given_name + '!');

_this.placanjeUspjesno = true;

} else {

alert("Neuspješno plaćanje!");

}

})

.catch(err => {

console.log(err);

})

}

Kompletna funkcionalnost izgleda ovako:

import { Component } from '@angular/core';
 
declare var window: any;
 
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
 
  paymentAmount: string = "10";
  placanjeUspjesno: boolean = false;
 
  constructor() {
     this.paymentOptions();
  }
 
  paymentOptions(){
    let _this = this;
    setTimeout(() => {
      // Render the PayPal button into #paypal-button-container
      window.paypal.Buttons({
 
        // Set up the transaction
        createOrder: function (data, actions) {
          return actions.order.create({
            purchase_units: [{
              amount: {
                value: _this.paymentAmount
              }
            }]
          });
        },
 
        // Finalize the transaction
         onApprove: function (data, actions) {
           return actions.order.capture()
             .then(function (details) {
               console.log(details);
               if(details.status == "COMPLETED"){
                // Show a success message to the buyer
               //alert('Transaction completed by ' + details.payer.name.given_name + '!');
                  _this.placanjeUspjesno = true;
               } else {
                 alert("Neuspješno plaćanje!");
               }
             })
             .catch(err => {
               console.log(err);
             })
         }
 
      }).render('#paypal-button-container');
    }, 500)
}
 
}

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

declare var window: any;

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

paymentAmount: string = "10";

placanjeUspjesno: boolean = false;

constructor() {

this.paymentOptions();

}

paymentOptions(){

let _this = this;

setTimeout(() => {

// Render the PayPal button into #paypal-button-container

window.paypal.Buttons({

// Set up the transaction

createOrder: function (data, actions) {

return actions.order.create({

purchase_units: [{

amount: {

value: _this.paymentAmount

}

}]

});

// Finalize the transaction

onApprove: function (data, actions) {

return actions.order.capture()

.then(function (details) {

console.log(details);

if(details.status == "COMPLETED"){

// Show a success message to the buyer

//alert('Transaction completed by ' + details.payer.name.given_name + '!');

_this.placanjeUspjesno = true;

} else {

alert("Neuspješno plaćanje!");

}

})

.catch(err => {

console.log(err);

})

}

}).render('#paypal-button-container');

}, 500)

}

Demo prikaz

Sada ću proći kroz čitav proces naplate i prikazati ga slikama.

Klikom na žuti gumb „PayPal“ pokrećem postupak plaćanja. Prijavljujem se pomoću PayPal Sandbox računa.

Biram na koji način želim platiti navedeni iznos. To mogu učiniti sa svojeg ukupnog balansa, kreditnom ili debitnom karticom koje su povezane s PayPal računom.

Klikom na “Pay Now” potvrđujem plaćanje. Plaćanje je uspješno izvršeno ako dobijem (Order) ID. U ovom slučaju to je "id": "99D86747XH516732E".

PayPal će mi vratiti sljedeći odgovor, u kojemu imam sve potrebno kako bi kasnije mogao raditi provjeri plaćanja, nakon što je plaćanje uspješno prošlo:

{
  "create_time": "2019-06-03T09:43:05Z",
  "update_time": "2019-06-03T09:43:05Z",
  "id": "99D86747XH516732E",
  "intent": "CAPTURE",
  "status": "COMPLETED",
  "payer": {
    "email_address": "tomislavstankovic1-buyer@gmail.com",
    "payer_id": "FW4BEH8QAPTEG",
    "address": {
      "country_code": "US"
    },
    "name": {
      "given_name": "test",
      "surname": "buyer"
    },
    "phone": {
      "phone_number": {
        "national_number": "4083320878"
      }
    }
  },
  "purchase_units": [
    {
      "reference_id": "default",
      "amount": {
        "value": "10.00",
        "currency_code": "USD"
      },
      "payee": {
        "email_address": "fortuno@example.com",
        "merchant_id": "RMF4F2P7GMT84"
      },
      "shipping": {
        "name": {
          "full_name": "test buyer"
        },
        "address": {
          "address_line_1": "1 Main St",
          "admin_area_2": "San Jose",
          "admin_area_1": "CA",
          "postal_code": "95131",
          "country_code": "US"
        }
      },
      "payments": {
        "captures": [
          {
            "status": "COMPLETED",
            "id": "9V075368A1755811N",
            "final_capture": true,
            "create_time": "2019-06-03T09:43:05Z",
            "update_time": "2019-06-03T09:43:05Z",
            "amount": {
              "value": "10.00",
              "currency_code": "USD"
            },
            "seller_protection": {
              "status": "ELIGIBLE",
              "dispute_categories": [
                "ITEM_NOT_RECEIVED",
                "UNAUTHORIZED_TRANSACTION"
              ]
            },
            "links": [
              {
                "href": "https://api.sandbox.paypal.com/v2/payments/captures/9V075368A1755811N",
                "rel": "self",
                "method": "GET",
                "title": "GET"
              },
              {
                "href": "https://api.sandbox.paypal.com/v2/payments/captures/9V075368A1755811N/refund",
                "rel": "refund",
                "method": "POST",
                "title": "POST"
              },
              {
                "href": "https://api.sandbox.paypal.com/v2/checkout/orders/99D86747XH516732E",
                "rel": "up",
                "method": "GET",
                "title": "GET"
              }
            ]
          }
        ]
      }
    }
  ],
  "links": [
    {
      "href": "https://api.sandbox.paypal.com/v2/checkout/orders/99D86747XH516732E",
      "rel": "self",
      "method": "GET",
      "title": "GET"
    }
  ]
}

{

"create_time": "2019-06-03T09:43:05Z",

"update_time": "2019-06-03T09:43:05Z",

"id": "99D86747XH516732E",

"intent": "CAPTURE",

"status": "COMPLETED",

"payer": {

"email_address": "tomislavstankovic1-buyer@gmail.com",

"payer_id": "FW4BEH8QAPTEG",

"address": {

"country_code": "US"

"name": {

"given_name": "test",

"surname": "buyer"

"phone": {

"phone_number": {

"national_number": "4083320878"

}

"purchase_units": [

{

"reference_id": "default",

"amount": {

"value": "10.00",

"currency_code": "USD"

"payee": {

"email_address": "fortuno@example.com",

"merchant_id": "RMF4F2P7GMT84"

"shipping": {

"name": {

"full_name": "test buyer"

"address": {

"address_line_1": "1 Main St",

"admin_area_2": "San Jose",

"admin_area_1": "CA",

"postal_code": "95131",

"country_code": "US"

}

"payments": {

"captures": [

{

"status": "COMPLETED",

"id": "9V075368A1755811N",

"final_capture": true,

"create_time": "2019-06-03T09:43:05Z",

"update_time": "2019-06-03T09:43:05Z",

"amount": {

"value": "10.00",

"currency_code": "USD"

"seller_protection": {

"status": "ELIGIBLE",

"dispute_categories": [

"ITEM_NOT_RECEIVED",

"UNAUTHORIZED_TRANSACTION"

]

"links": [

{

"href": "https://api.sandbox.paypal.com/v2/payments/captures/9V075368A1755811N",

"rel": "self",

"method": "GET",

"title": "GET"

{

"href": "https://api.sandbox.paypal.com/v2/payments/captures/9V075368A1755811N/refund",

"rel": "refund",

"method": "POST",

"title": "POST"

{

"href": "https://api.sandbox.paypal.com/v2/checkout/orders/99D86747XH516732E",

"rel": "up",

"method": "GET",

"title": "GET"

}

]

}

]

}

"links": [

{

"href": "https://api.sandbox.paypal.com/v2/checkout/orders/99D86747XH516732E",

"rel": "self",

"method": "GET",

"title": "GET"

}

]

}

Osim toga, potvrdu o uspješnom plaćanju mogu vidjeti ako se prijavim unutar PayPal Sandbox računa na adresi https://www.sandbox.paypal.com/ sa korisničkim imenom tomislavstankovic1-buyer@gmail.com i pripadajućom lozinkom.

Ovdje mogu vidjeti koliki mi je trenutni tj. ukupni dostupan iznos na PayPal Sandbox računu kao i popis svih transakcija.

Klikom na „Informatika Fortuno’s Test Store“ mogu vidjeti detalje navedene transakcije.

Zaključak

Što se klijentskog dijela aplikacije tiče to bi bilo sve.

Ostaje još napraviti serverski, backend, dio gdje će se vršiti provjera plaćanja. Na taj API šaljem ranije spomenuti ID "id": "99D86747XH516732E".

// 1. Set up your server to make calls to PayPal
 
// 1a. Import the SDK package
const checkoutNodeJssdk = require('@paypal/checkout-server-sdk');
 
// 1b. Import the PayPal SDK client that was created in `Set up Server-Side SDK`.
/**
 *
 * PayPal HTTP client dependency
 */
const payPalClient = require('../Common/payPalClient');
 
// 2. Set up your server to receive a call from the client
module.exports = async function handleRequest(req, res) {
 
  // 2a. Get the order ID from the request body
  const orderID = req.body.orderID;
 
  // 3. Call PayPal to get the transaction details
  let request = new checkoutNodeJssdk.orders.OrdersGetRequest(orderID);
 
  let order;
  try {
    order = await payPalClient.client().execute(request);
  } catch (err) {
 
    // 4. Handle any errors from the call
    console.error(err);
    return res.send(500);
  }
 
  // 5. Validate the transaction details are as expected
  if (order.result.purchase_units[0].amount.value !== '220.00') {
    return res.send(400);
  }
 
  // 6. Save the transaction in your database
  // await database.saveTransaction(orderID);
 
  // 7. Return a successful response to the client
  return res.send(200);
}

// 1. Set up your server to make calls to PayPal

// 1a. Import the SDK package

const checkoutNodeJssdk = require('@paypal/checkout-server-sdk');

// 1b. Import the PayPal SDK client that was created in `Set up Server-Side SDK`.

/**

* PayPal HTTP client dependency

const payPalClient = require('../Common/payPalClient');

// 2. Set up your server to receive a call from the client

module.exports = async function handleRequest(req, res) {

// 2a. Get the order ID from the request body

const orderID = req.body.orderID;

// 3. Call PayPal to get the transaction details

let request = new checkoutNodeJssdk.orders.OrdersGetRequest(orderID);

let order;

try {

order = await payPalClient.client().execute(request);

} catch (err) {

// 4. Handle any errors from the call

console.error(err);

return res.send(500);

}

// 5. Validate the transaction details are as expected

if (order.result.purchase_units[0].amount.value !== '220.00') {

return res.send(400);

}

// 6. Save the transaction in your database

// await database.saveTransaction(orderID);

// 7. Return a successful response to the client

return res.send(200);

}

Struktura projekta prema package.json:

{
  "name": "Ionic4PayPal",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.8",
    "@angular-devkit/build-angular": "~0.13.8",
    "@angular-devkit/core": "~7.3.8",
    "@angular-devkit/schematics": "~7.3.8",
    "@angular/cli": "~7.3.8",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.5.1",
    "@types/node": "~12.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.1.0",
    "tslint": "~5.17.0",
    "typescript": "~3.1.6"
  },
  "description": "Ionic 4 PayPal project"
}

{

"name": "Ionic4PayPal",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

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

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

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

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

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

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

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

"@ionic-native/core": "^5.0.0",

"@ionic-native/splash-screen": "^5.0.0",

"@ionic-native/status-bar": "^5.0.0",

"@ionic/angular": "^4.1.0",

"core-js": "^2.5.4",

"rxjs": "~6.5.1",

"tslib": "^1.9.0",

"zone.js": "~0.8.29"

"devDependencies": {

"@angular-devkit/architect": "~0.13.8",

"@angular-devkit/build-angular": "~0.13.8",

"@angular-devkit/core": "~7.3.8",

"@angular-devkit/schematics": "~7.3.8",

"@angular/cli": "~7.3.8",

"@angular/compiler": "~7.2.2",

"@angular/compiler-cli": "~7.2.2",

"@angular/language-service": "~7.2.2",

"@ionic/angular-toolkit": "~1.5.1",

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

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

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

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

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

"karma": "~4.1.0",

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

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

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

"protractor": "~5.4.0",

"ts-node": "~8.1.0",

"tslint": "~5.17.0",

"typescript": "~3.1.6"

"description": "Ionic 4 PayPal project"

}

P.S. Ovaj je blog post originalno objavljen na adresi https://www.fortuno.hr/ionic-4-paypal-smart-payment-buttons/.

Pivot Grid prikaz podataka

Pivot Grid – promjena izgleda polja

Pivot Grid – prikaz null vrijednosti

Omogućiti klik na odabrano polje

Pivot Grid dohvaćanje vrijednosti polja

Pivot Grid uređivanje vrijednosti polja

Osvježavanje samo uređenog podatka

Zaključak

Android keystore!?

Priprema

Korištenje AndroidKeystoreBrute alata

1. metoda – Simply Bruteforce

2. metoda – Dictionary Attack

3. metoda – Smart Wordlist Attack (preporuka)

Uvod

Provjera rada API-ja

Kreiranje API servisa

HTML forma

Funkcionalnost forme

Uvod

*ngFor – prikaz niza podataka

*ngFor + element index

*ngFor + trackBy

*ngFor – prvi i zadnji element niza

*ngFor – parni i neparni elementi niza

*ngFor – niz unutar niza

Zaključak

PayPal Sandbox & App Name

PayPal Sandbox

My Apps & Credentials

Smart Payment Buttons & Ionic 4

Demo prikaz

Zaključak

ngFor + element index*

ngFor + trackBy*