Arhiva API - Tomislav Stanković

Dohvaćanje podataka s API-ja Sudskog registra data.gov.hr

Prije nekoliko godina objavio sam blog post o prikazu podataka API-ja Sudskog registra – pravosudje.hr.

API se tada nalazio na adresi https://sudreg-api.pravosudje.hr, dok će se od 1. travnja nalaziti na adresi https://sudreg-data.gov.hr/.

Više o detaljima i razlozima prebacivanja API-ja na novu adresu možete saznati na https://data.gov.hr/ckan/dataset/sudski-registar.

Ukratko, to znači da se osim URL-a putem kojega će se pozivati API mijenjaju i parametri potrebni za pristup tim podacima.

“Portal otvorenih podataka Sudskog registra namijenjen je razvojnim inženjerima koji u svoja aplikativna rješenja žele preuzimati podatke Sudskog registra (https://sudreg.pravosudje.hr) u strojno čitljivom obliku.

Za pristup podacima potrebno je napraviti registraciju. Nakon uspješno predanog registracijskog obrasca korisnik će dobiti e-mail za potvrdu svog korisničkog računa. Verifikacijom računa korisnik će biti preusmjeren na stranice aplikacije te će mu se dodijeliti Client ID, Client Secret i link za dohvat tokena koji omogućuju pristup RESTapi sučeljima.”

Registracija i aktivacija

Prije registracije potrebno je prijaviti se, a to je moguća napraviti korištenjem e-građana te putem servisa Facebook, Google i Microsoft na linku https://data.gov.hr/ckan/dataset/sudski-registar i klikom na ‘Prijava’ u gornjem desnom kutu ekrana.

Nakon prijave mogu se vidjeti detalji o postupku registracije i što se njome dobije. Klikom na “Registracija” pokreće se postupak.

Klikom na “Registracija” otvara se jednostavna forma gdje se navodi naziv i opis projekta u kojemu će se koristiti API.

Klikom na “Predaj zahtjev” otvara se sljedeći ekran gdje se vide detalji poput parametara Client Id i Client Secret koji će biti potrebni za slanje upita na API tj. dobivanje tokena.

Prije nego se prikazani podaci mogu koristiti potrebno je potvrditi tj. verificirati e-mail klikom na “Potvrdi”.

Nakon toga preostaje još kliknuti na “Aktivacija” i to je to što se registracije tiče.

I konačno, podaci su spremni za korištenje.

Provjera rada API-ja

Kako je i navedeno u dokumentaciji API mogu provjeriti koristeći Curl (Client for URL) naredbu i to želim napraviti prije nego krenem s postavljanjem Angular forme.

Naredba se upisuje u naredbeni redak (CMD) u sljedećem obliku: curl -i -k --user ClientId:ClientSecret --data "grant_type=client_credentials" https://sudreg-data.gov.hr/api/oauth/token

Iz navedenog mogu vidjeti u kojem obliku i koje parametre će mi API vratiti. U ovom slučaju najvažniji mi je parametar access_token koji će mi trebati prilikom pozivanja drugih API-ja.

Također vidim da token vrijedi 6 sati (21600 sekundi) od trenutka kreiranja.

Dohvaćanje tokena testirat ću i koristeći Postman.

Odmah ću, također putem Curl naredbe, isprobati jedan API u kojem ću proslijediti access_token da bi dobio podatke. Želim se uvjeriti da sve radi prije nego počnem s kreiranjem API servisa u Angularu.

Pokretanjem Curl naredbe curl --location "https://sudreg-data.gov.hr/api/javni/sudovi?expand_relations=true" ^ --header "Content-Type: application/json" ^ --header "Authorization: Bearer access_token" dobijem sljedeće:

Kako se može vidjeti iz gornje naredbe ovdje prosljeđujem samo dva parametara u headeru i već sam dobio “osjećaj” kako će funkcionirati svi ostali API pozivi.

Nadam se bez grešaka koje neki od njih trenutno imaju. 🙂

API detalji_subjekta

S obzirom da me API detalji_subjekta trenutno najviše zanima više ću pažnje obratiti na njega što se tiče dokumentacije.

Na adresi https://sudreg-data.gov.hr/api/OpenAPIs/OpenAPIJavni se nalaze sve dostupne API točke. Između ostalog tu je i detalji_subjekta.

Iz dokumentacije vidim da se radi o get metodi i koje obavezne parametre trebam slati.

Kreiranje API servisa

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

Obavezni parametri za dobivanje tokena:

Content-Type (string) / header – ‘application/x-www-form-urlencoded’
Authorization (string) / header – ‘Basic ‘ + btoa(‘ClientId:ClientSecret’)
grant_type (string) / body – client_credentials

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

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

  sudregURL: string = "https://sudreg-data.gov.hr/api/";

  constructor(
    private _http: HttpClient
  ){}

  getToken(){
    const headers = new HttpHeaders({
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Basic ' + btoa('ClientId:ClientSecret')
    });

    const body = new URLSearchParams();
    body.set('grant_type', 'client_credentials');

    return this._http.post(this.sudregURL + 'oauth/token', body.toString(), { headers });
  }

  detaljiSubjekta(access_token: string, tip_identifikatora: string, identifikator: string){
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + access_token
    });

    return this._http.get(this.sudregURL + 'javni/detalji_subjekta?expand_relations=true&tip_identifikatora='+tip_identifikatora+'&identifikator='+identifikator, { headers })
          .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 {

sudregURL: string = "https://sudreg-data.gov.hr/api/";

constructor(

private _http: HttpClient

){}

getToken(){

const headers = new HttpHeaders({

'Content-Type': 'application/x-www-form-urlencoded',

'Authorization': 'Basic ' + btoa('ClientId:ClientSecret')

});

const body = new URLSearchParams();

body.set('grant_type', 'client_credentials');

return this._http.post(this.sudregURL + 'oauth/token', body.toString(), { headers });

}

detaljiSubjekta(access_token: string, tip_identifikatora: string, identifikator: string){

const headers = new HttpHeaders({

'Content-Type': 'application/json',

'Authorization': 'Bearer ' + access_token

});

return this._http.get(this.sudregURL + 'javni/detalji_subjekta?expand_relations=true&tip_identifikatora='+tip_identifikatora+'&identifikator='+identifikator, { headers })

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

}

Obavezni parametri za dohvaćanje detalja tvrtke:

Content-Type (string) / header – ‘application/json’
Authorization (string) / header – ‘Bearer ‘ + access_token
tip_identifikatora (string) / query – ‘oib’ ili ‘mbo’
identifikator (string) / query – 0000000000 ili 000000000

Angular forma

Forma će biti jednostavna. Nakon unosa OIB-a ili MBS-a popunit će se polja naziv, adresa i grad. API naravno dohvaća puno više od toga.

<div class="page-content">
    <form class="modal-content" id="angularForma" [formGroup]="angularForma">
      <div class="modal-header p-4">
        <h5 class="modal-title">Provjera poslovnog subjekta</h5>
      </div>
      <div class="modal-body p-4">
        <div class="form-group row">
          <div class="col-sm-6">
            <label for="oib">OIB:</label>
            <input class="form-control form-control-line" id="oib" type="text" pattern="[-+]?[0-9]*[.,]?[0-9]+" minlength="11" maxlength="11" formControlName="oib" (keyup)="dohvatiDetalje(angularForma)">
          </div>
          <div class="col-sm-6">
            <label for="mbs">MBS:</label>
            <input class="form-control form-control-line" id="mbs" type="text" pattern="[-+]?[0-9]*[.,]?[0-9]+" minlength="9" maxlength="9" formControlName="mbs" (keyup)="dohvatiDetalje(angularForma)">
          </div>
        </div>
        <div class="form-group">
          <label for="naziv">Naziv:</label>
          <input class="form-control form-control-line" id="naziv" type="text" formControlName="nazivtvrtke">
        </div>
        <div class="form-group">
          <label for="adresa">Adresa:</label>
          <input class="form-control form-control-line" id="adresa" type="text" formControlName="ulica">
        </div>
        <div class="form-group">
          <label for="grad">Grad:</label>
          <input class="form-control form-control-line" id="grad" type="text" formControlName="grad">
        </div>
      </div>
    </form>
</div>

<h5 class="modal-title">Provjera poslovnog subjekta</h5>

</div>

</div>

</div>

<label for="naziv">Naziv:</label>

</div>

<label for="adresa">Adresa:</label>

</div>

</div>

</form>

</div>

Što se funkcionalnosti tiče i s obzirom da je ovo samo demo prikaz neću ići previše u detalje.

Unutar ngOnInit() funkcije pozivam API za dohvaćanje tokena. U produkcijskom okruženju ne bih to radio na ovaj način nego bih spremio token i novi ne bih tražio sljedećih 6 sati dok trenutni ne istekne.

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

import { ApiService } from './api.service';
import { CommonModule } from '@angular/common';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit {

  angularForma!: FormGroup;
  
  title = 'API - Sudreg';
  access_token: string = '';

  constructor(
    private _fb: FormBuilder,
    private _apiService: ApiService
  ){
    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: new FormControl({ value: '', disabled: true }),
        ulica: new FormControl({ value: '', disabled: true }),
        grad: new FormControl({ value: '', disabled: true })
    });
  }

  ngOnInit(){
    this._apiService.getToken().subscribe((res: any) => { this.access_token = res.access_token; });
  }

  dohvatiDetalje(angularForma: FormGroup){
    if(angularForma.value.oib && angularForma.value.oib.length == 11){
      console.log("Dohvaćam detalje...");
      this._apiService.detaljiSubjekta(this.access_token, 'oib', angularForma.value.oib).subscribe(res => {
        console.log("Detalji tvrtke:");
        console.log(res);
        if(res){
            this.angularForma = this._fb.group({
              oib: res.oib,
              mbs: res.mbs,
              nazivtvrtke: res.skracena_tvrtka['ime'],
              ulica: res.sjediste['ulica'] + ' ' + res.sjediste['kucni_broj'] + (res.sjediste['kucni_podbroj'] ? (res.sjediste['kucni_podbroj']) : ''),
              grad: res.sjediste['naziv_naselja']
            });
        } else {
          alert("Neuspješno dohvaćanje podataka prema OIB-u!");
          this.angularForma.controls['oib'].setValue(null);
        } 
      });
    } else if (angularForma.value.mbs && angularForma.value.mbs.length == 9){
        this._apiService.detaljiSubjekta(this.access_token, 'mbs', angularForma.value.mbs).subscribe(res => {
          if(res){
              this.angularForma = this._fb.group({
                oib: res.oib,
                mbs: res.mbs,
                nazivtvrtke: res.skracena_tvrtka[0].ime,
                ulica: res.sjediste['ulica'] + ' ' + res.sjediste['kucni_broj'] + (res.sjediste['kucni_podbroj'] ? (res.sjediste['kucni_podbroj']) : ''),
                grad: res.sjediste['naziv_naselja']
              });
          } else {
            alert("Neuspješno dohvaćanje podataka prema MBS-u!");
            this.angularForma.controls['mbs'].setValue(null);
          }
        });
    }
  }

}

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

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

import { RouterOutlet } from '@angular/router';

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

import { CommonModule } from '@angular/common';

import { FormControl } from '@angular/forms';

@Component({

selector: 'app-root',

standalone: true,

imports: [CommonModule, RouterOutlet, ReactiveFormsModule],

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

styleUrl: './app.component.scss'

})

export class AppComponent implements OnInit {

angularForma!: FormGroup;

title = 'API - Sudreg';

access_token: string = '';

constructor(

private _fb: FormBuilder,

private _apiService: ApiService

){

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: new FormControl({ value: '', disabled: true }),

ulica: new FormControl({ value: '', disabled: true }),

grad: new FormControl({ value: '', disabled: true })

});

}

ngOnInit(){

this._apiService.getToken().subscribe((res: any) => { this.access_token = res.access_token; });

}

dohvatiDetalje(angularForma: FormGroup){

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

console.log("Dohvaćam detalje...");

this._apiService.detaljiSubjekta(this.access_token, 'oib', angularForma.value.oib).subscribe(res => {

console.log("Detalji tvrtke:");

console.log(res);

if(res){

this.angularForma = this._fb.group({

oib: res.oib,

mbs: res.mbs,

nazivtvrtke: res.skracena_tvrtka['ime'],

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

grad: res.sjediste['naziv_naselja']

});

} else {

alert("Neuspješno dohvaćanje podataka prema OIB-u!");

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

}

});

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

this._apiService.detaljiSubjekta(this.access_token, 'mbs', angularForma.value.mbs).subscribe(res => {

if(res){

this.angularForma = this._fb.group({

oib: res.oib,

mbs: res.mbs,

nazivtvrtke: res.skracena_tvrtka[0].ime,

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

grad: res.sjediste['naziv_naselja']

});

} else {

alert("Neuspješno dohvaćanje podataka prema MBS-u!");

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

}

});

}

U praksi to izgleda ovako. Unosom OIB-a ili MBS-a poziva se funkcija za dohvaćanje detalja poslovnog subjekta.

Jednom kada access_token istekne dobit će se poruka

I to je to. Istovremeno vrlo jednostavan i vrlo koristan API koji može poboljšati funkcionalnosti nekog programskog rješenja.

Nodemailer & NodeJS – API za slanje emaila

Cilj ovog blog posta je pokazati kako napraviti API za slanje emaila. To ću postići koristeći NodeJS, ExpressJS, Nodemailer i naravno Gmail.

Postavljanje projekta

Kreiram mapu za projekt i unutar nje pokrećem naredbu

$ npm init --yes

1	$ npm init --yes

i odmah nakon toga instaliram potrebne NPM pakete:

– Express.js: $ npm install express --save
– Nodemailer: $ npm install nodemailer--save
– bodyParser: $ npm install body-parser -save

Struktura projekta prema package.json sada izgleda ovako:

{
  "name": "NodemailerAPI",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Tomislav Stanković",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "nodemailer": "^4.6.7"
  }
}

{

"name": "NodemailerAPI",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

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

"keywords": [],

"author": "Tomislav Stanković",

"license": "ISC",

"dependencies": {

"body-parser": "^1.18.3",

"express": "^4.16.3",

"nodemailer": "^4.6.7"

}

Sada imam sve spremno za kreiranje datoteke unutar koje će se nalaziti logika API-ja.

'use strict';
var nodemailer = require('nodemailer');
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
 
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
 
var port = process.env.PORT || 8080;
 
var apiRoutes = express.Router();
 
apiRoutes.get('/', function(req, res) {
    res.json({ message: 'API radi!' });   //ako je sve ispravno postavljeno kao odgovor dobijem ovu poruku
});
 
app.use('/api', apiRoutes);
 
app.listen(port);
console.log('API je pokrenut na portu:' + ' ' + port);

'use strict';

var nodemailer = require('nodemailer');

var express = require('express');

var app = express();

var bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: true }));

app.use(bodyParser.json());

var port = process.env.PORT || 8080;

var apiRoutes = express.Router();

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

res.json({ message: 'API radi!' }); //ako je sve ispravno postavljeno kao odgovor dobijem ovu poruku

});

app.use('/api', apiRoutes);

app.listen(port);

console.log('API je pokrenut na portu:' + ' ' + port);

API sada mogu i pokrenuti te se uvjeriti da radi. Pokrećem ga naredbom u kojoj riječ “index” označava naziv .js datoteke.

$ node index

1	$ node index

To je mogla biti i npr. server.js datoteka. U tom bi slučaju API pokrenuo naredbom $ node server.

Na adresi http://localhost:8080/api mogu vidjeti da je API uspješno pokrenut.

Slanje testnog e-maila

Unutar datoteke index.js sada ću kreirati API za slanje e-maila.

var transporter = nodemailer.createTransport('smtps://GmailKorisnickoIme:GmailLozinka@smtp.gmail.com');

apiRoutes.post('/posaljiEmail', function(req, res) {
    nodemailer.createTestAccount((err, account) => {
	var smtpTransport = nodemailer.createTransport({
    host: "smtp.gmail.com",
	secureConnection: false,
    port: 587,
    auth: {
        user: "GmailKorisnickoIme",
        pass: "GmailLozinka"
    }
});

    let mailOptions = {
        from: '"NodemailerAPI" <demo@example.com>', // pošiljatelj
        to: '*s*a*k*@efos.hr, t*m*s*a*s*a*k*v*c*@gmail.com', // popis primatelja
        subject: 'Email poslam putem Nodemailera', // naslov
        text: 'Ovo je sadržaj maila.', // sadržaj poruke
        html: '<h2>Pozdrav!</h2><br><b>Ovo je formatiran sadržaj maila!</b>' // formatiran sadržaj poruke
    };

    transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
            return console.log(error);
        }
        console.log('E-mail poslan: %s', info.messageId);
    });
});
});

var transporter = nodemailer.createTransport('smtps://GmailKorisnickoIme:GmailLozinka@smtp.gmail.com');

apiRoutes.post('/posaljiEmail', function(req, res) {

nodemailer.createTestAccount((err, account) => {

var smtpTransport = nodemailer.createTransport({

host: "smtp.gmail.com",

secureConnection: false,

port: 587,

auth: {

user: "GmailKorisnickoIme",

pass: "GmailLozinka"

}

});

let mailOptions = {

from: '"NodemailerAPI" <demo@example.com>', // pošiljatelj

to: '*s*a*k*@efos.hr, t*m*s*a*s*a*k*v*c*@gmail.com', // popis primatelja

subject: 'Email poslam putem Nodemailera', // naslov

text: 'Ovo je sadržaj maila.', // sadržaj poruke

html: '<h2>Pozdrav!</h2><br><b>Ovo je formatiran sadržaj maila!</b>' // formatiran sadržaj poruke

};

transporter.sendMail(mailOptions, (error, info) => {

if (error) {

return console.log(error);

}

console.log('E-mail poslan: %s', info.messageId);

});

S obzirom na parametar secureConnection: false vrlo je važno da omogućim dopuštanje nesigurnijim aplikacijama da pristupe računu na adresi https://myaccount.google.com/security?pli=1

Jer ako to ne napravim dobit ću poruku o grešci što znači da e-mail neće biti poslan/primljen. Ovaj dio mi je zadavao najviše problema prije dvije godine kada sam prvi put radio Nodemailer API. U pitanju je bila funkcionalnost vezana uz resetiranje lozinke.

Ako sada putem Postmana pokrenem POST zahtjev na adresu http://localhost:8080/api/posaljiEmail vrlo brzo će mi stići e-mail.

Zašto se u slici iznad kao adresa primatelja nalazi drugačija adresa od one navedene gore u API-ju? To je zbog postavki unutar Gmaila gdje je navedeno da je adresa k*n*a*t@tomislavstankovic.com zadana adresa pošiljatelja. S obzirom da ovdje koristim Gmail kao servis za slanje e-maila jasno je da će on uzeti te zadane postavke.

E-mail sa “pravim” podacima

U gornjem sam se primjeru uvjerio da moj Nodemailer API uredno radi, a sada želim imati mogućnost određivanja na koju adresu i koji sadržaj želim poslati.

API sada izgleda ovako:

apiRoutes.post('/posaljiEmail', function(req, res) {
 if(req.body.emailPrimatelj == "" || req.body.naslov == "" || req.body.poruka == ""){
     return false;
 } else {
    nodemailer.createTestAccount((err, account) => {
        var smtpTransport = nodemailer.createTransport({
        host: "smtp.gmail.com",
        secureConnection: false,
        port: 587,
        auth: {
            user: "GmailKorisnickoIme",
            pass: "GmailLozinka"
        }
    });
    
        let mailOptions = {
            from: '"NodemailerAPI" <demo@example.com>', // pošiljatelj
            to: req.body.emailPrimatelj, // popis primatelja
            subject: req.body.naslov, // naslov
            text: req.body.poruka, // sadržaj poruke
            html: '<b>' + req.body.poruka + '</b>' // formatiran sadržaj poruke
        };
    
        transporter.sendMail(mailOptions, (error, info) => {
            if (error) {
                res.json({ 
                    poruka: "Nisu uneseni potrebni podaci! E-mail nije poslan!",
                    greska: error,
                    status: false }); 
                return console.log(error);
            } else {
                return console.log(info);
            }
            console.log('E-mail poslan: %s', info.messageId);
        });
    });
 }  
});

apiRoutes.post('/posaljiEmail', function(req, res) {

if(req.body.emailPrimatelj == "" || req.body.naslov == "" || req.body.poruka == ""){

return false;

} else {

nodemailer.createTestAccount((err, account) => {

var smtpTransport = nodemailer.createTransport({

host: "smtp.gmail.com",

secureConnection: false,

port: 587,

auth: {

user: "GmailKorisnickoIme",

pass: "GmailLozinka"

}

});

let mailOptions = {

from: '"NodemailerAPI" <demo@example.com>', // pošiljatelj

to: req.body.emailPrimatelj, // popis primatelja

subject: req.body.naslov, // naslov

text: req.body.poruka, // sadržaj poruke

html: '<b>' + req.body.poruka + '</b>' // formatiran sadržaj poruke

};

transporter.sendMail(mailOptions, (error, info) => {

if (error) {

res.json({

poruka: "Nisu uneseni potrebni podaci! E-mail nije poslan!",

greska: error,

status: false });

return console.log(error);

} else {

return console.log(info);

}

console.log('E-mail poslan: %s', info.messageId);

});

}

});

Ovdje se može vidjeti da podatke šaljem kroz req.body i upravo je to razlog zbog kojeg koristim body-parser. U slučaju da nisam koristio body-parser dobio bi sljedeću grešku.

Također, ako ne unesem sve potrebne podatke body-parser neće imati s čime raditi i opet ću dobiti grešku. U ovom slučaju nisam poslao e-mail adresu primatelja.

Nakon što unesem sve potrebne podatke, body-parser će odraditi svoje i e-mail će biti uspješno poslan/primljen.

Uvod u Google Sheets API

Nedavno mi je pala na pamet ideja korištenja Google Sheetsa kao baze podataka za nekakvu jednostavniju web ili mobilnu aplikaciju pa sam išao malo istražiti koje sve mogućnosti Google Sheets API ima i kako ih koristiti. U nastavku se može vidjeti nekoliko primjera na osnovu jednog dokumenta s dvije kartice podataka.

Google Developer konzola

Na URL-u https://console.developers.google.com/ kreiram novi projekt.

Nakon toga klikom na ‘Enable Apis And Services‘ krećem u odabir Google Sheets API-ja kako bi ga aktivirao.

Nakon aktivacije kreiram API key koji mi je potreban za slanje upita na API.

Bez njega bi dobio poruku o grešci:

{
  "error": {
    "code": 403,
    "message": "The request is missing a valid API key.",
    "status": "PERMISSION_DENIED"
  }
}

{

"error": {

"code": 403,

"message": "The request is missing a valid API key.",

"status": "PERMISSION_DENIED"

}

Korištenje API-ja

Na sljedećoj se slici može vidjeti koji su mi upiti dostupni

Prikaz podataka

Na sljedećoj adresi https://docs.google.com/spreadsheets/d/1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M/ nalazi se moja proračunska tablica. Njezin ID je 1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M.

Ako, prema dokumentaciji na slici iznad, odem na Services > Google Sheets API v4 > sheets.spreadsheets.get i unesem ID svoje proračunske tablice dobit ću rezultat s hrpom, meni trenutno nepotrebnih, meta podatka.

S obzirom da se moja proračunska tablica sastoji od dva lista posebno ću pozvati API za svaki list.

Na URL-u https://sheets.googleapis.com/v4/spreadsheets/1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M/values/Zadaci?key={YOUR_API_KEY} dohvaćam podatke iz lista ‘Zadaci’.

Dok na URL-u https://sheets.googleapis.com/v4/spreadsheets/1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M/values/Podaci?key={YOUR_API_KEY} dohvaćam podatke iz lista ‘Podaci’.

Dodavanje podataka

Na sljedećoj adresi https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/append nalazi se dokumentacija vezana uz dodavanje sadržaja.

Ovo još moram testirati u Postmanu.

Zaključak

Ovo je samo uvod u mogućnosti Google Sheets API-a. Za sada je ovo dovoljno čisto da se vidi kako stvar funkcionira, a dalje sve ovisi o specifičnim potrebama. Možda na kraju zaključim da ovo i nije najsretnije rješenje za korištenje unutar web ili mobilne aplikacije.

nodemon – automatski restart NodeJS aplikacije

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

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

Novu ću aplikaciju kreirati naredbom

$ npm init --yes

1	$ npm init --yes

i odmah instalirati ExpressJS.

$ npm install express --save

1	$ npm install express --save

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

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

{

"name": "NodemonPrimjer",

"version": "1.0.0",

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

"main": "index.js",

"scripts": {

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

"keywords": [],

"author": "Tomislav Stanković",

"license": "ISC",

"dependencies": {

"express": "^4.16.2"

}

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

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

var express = require('express');

var app = express();

var port = process.env.PORT || 1337

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

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

});

// pokretanje API-ja

app.listen(port);

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

API pokrećem naredbom $ node index.js

U web pregledniku sada mogu vidjeti sljedeće

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

nodemon instalacija

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

Sljedećom naredbom instaliram nodemon lokalno unutar projekta

npm install nodemon --save

1	npm install nodemon --save

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

npm install -g nodemon

1	npm install -g nodemon

Datoteka package.json sada ima jedan novi redak.

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

{

"name": "NodemonPrimjer",

"version": "1.0.0",

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

"main": "index.js",

"scripts": {

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

"keywords": [],

"author": "Tomislav Stanković",

"license": "ISC",

"dependencies": {

"express": "^4.16.2",

"nodemon": "^1.15.0"

}

Projekt sada pokrećem naredbom

$ nodemon index.js

1	$ nodemon index.js

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

Zaključak

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

Ionic 3 – Slanje podataka na API

Ovim blog postom želim pokazati kako na jednostavan i brz način možete napraviti Ionic aplikaciju koja će slati podatke na API. U ovom ću slučaju koristiti jednostavan JSON Server, ali jednako samo tako mogao koristiti i NodeJS API, API koji podržava slanje datoteka ili Google Drive API. Ali kao što sam i rekao, kako bi zadržao jednostavnost i kako ne bi otišao previše u širinu u ovom ću primjeru koristiti jednostavan JSON Server API.

Postavljanje aplikacije

Kreirati ćemo novi Ionic projekt, i dodati podršku za Android platformu

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

$ ionic start Ionic3API blank

$ cd Ionic3API

$ ionic cordova platform add android

Izrada i pokretanje API-ja

API se nalazi u datoteci db.json sa sljedećim sadržajem

{
  "Imenik": [
    {
      "id": 1,
      "ime": "Ivan Ivanović",
	  "telefon" : "0038501555444",
	  "vrsta": "PO"
    },
    {
      "id": 2,
      "ime": "Mate Matić",
	  "telefon" : "0038501555333",
	   "vrsta": "PO"
    },
	{
      "id": 3,
      "ime": "Pero Papar",
	  "telefon" : "0038501555222",
	  "vrsta": "PR"
    }
  ]
}

{

"Imenik": [

{

"id": 1,

"ime": "Ivan Ivanović",

"telefon" : "0038501555444",

"vrsta": "PO"

{

"id": 2,

"ime": "Mate Matić",

"telefon" : "0038501555333",

"vrsta": "PO"

{

"id": 3,

"ime": "Pero Papar",

"telefon" : "0038501555222",

"vrsta": "PR"

}

]

}

Pokrećemo ga naredbom

$ json-server --watch db.json

1	$ json-server --watch db.json

Servis za API

Sada ćemo napraviti servis koji će u našoj Ionic aplikaciji služiti za pozivanje API-ja.

$ ionic generate provider api

1	$ ionic generate provider api

Servis za API će izgledati 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');
  }

getUsers(){
    return this._http.get('http://localhost:3000/imenik')
      .map(res => res.json());
  }

postUser(a:any){
    return this._http.post('http://localhost:3000/imenik', a)
      .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');

}

getUsers(){

return this._http.get('http://localhost:3000/imenik')

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

}

postUser(a:any){

return this._http.post('http://localhost:3000/imenik', a)

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

}

Znači, imamo funkciju getUsers(); koja će dohvaćati popis svih osoba u imeniku, kao i funkciju postUser(a:any); za dodavanje nove osobe u imenik.

Forma za unos

Sada možemo napraviti formu za unos sadržaja. Forma će se sastojati od samo tri polja. Jedno polje za ime i prezime, drugo za broj telefona, a treće polje tj. padajući izbornik s opcijama za odabir poslovnog ili privatnog broja. Ispod svega toga prikazat ćemo popis svih osoba.

Forma nema nikakvih specijalnih uvjeta i provjera niti je bilo koje polje označeno kao obavezno. Osim toga, ispod forme imamo popis do sada dodanih osoba.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 3 - API
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 
<ion-item>
  <ion-label floating>Ime i prezime</ion-label>
  <ion-input type="text" [(ngModel)]="imenik.ime" [ngModelOptions]="{standalone: true}"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Broj telefona/mobitela</ion-label>
  <ion-input type="number" [(ngModel)]="imenik.broj" [ngModelOptions]="{standalone: true}"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Poslovni ili privatni broj</ion-label>
  <ion-select [(ngModel)]="imenik.vrsta" okText="Odaberi" cancelText="Odustani">
    <ion-option value="PR">Privatni</ion-option>
    <ion-option value="PO">Poslovni</ion-option>
  </ion-select>
</ion-item>

<button ion-button full outline (click)="dodajOsobu(imenik);">Dodaj</button>

<h3>Popis osoba:</h3>
<ion-list *ngIf="popisOsoba">
  <ion-item *ngFor="let popis of popisOsoba">
     - {{ popis.ime }}
  </ion-item>
</ion-list>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic 3 - API

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-item>

<ion-label floating>Ime i prezime</ion-label>

<ion-input type="text" [(ngModel)]="imenik.ime" [ngModelOptions]="{standalone: true}"></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Broj telefona/mobitela</ion-label>

<ion-input type="number" [(ngModel)]="imenik.broj" [ngModelOptions]="{standalone: true}"></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Poslovni ili privatni broj</ion-label>

<ion-select [(ngModel)]="imenik.vrsta" okText="Odaberi" cancelText="Odustani">

<ion-option value="PR">Privatni</ion-option>

<ion-option value="PO">Poslovni</ion-option>

</ion-select>

</ion-item>

<button ion-button full outline (click)="dodajOsobu(imenik);">Dodaj</button>

<h3>Popis osoba:</h3>

<ion-list *ngIf="popisOsoba">

<ion-item *ngFor="let popis of popisOsoba">

- {{ popis.ime }}

</ion-item>

</ion-list>

</ion-content>

Funkcionalnost će se nalaziti u home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ApiProvider } from './../../providers/api/api';

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

  imenik:any = {};
  popisOsoba:any;

  constructor(public _navCtrl: NavController,
              public _api: ApiProvider) {

   this.imenik.ime = '';
   this.imenik.broj = null;
   this.imenik.vrsta = '';

  }

  ionViewWillEnter(){
     this.prikaziOsobe();
  }


  dodajOsobu(imenik){
   console.log(imenik);
  } 

  prikaziOsobe(){
     this._api.getUsers().subscribe(res => {
       this.popisOsoba = res;
       console.log(this.popisOsoba);
   })
  }

}

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

import { NavController } from 'ionic-angular';

import { ApiProvider } from './../../providers/api/api';

@Component({

selector: 'page-home',

templateUrl: 'home.html',

providers: [ApiProvider]

})

export class HomePage {

imenik:any = {};

popisOsoba:any;

constructor(public _navCtrl: NavController,

public _api: ApiProvider) {

this.imenik.ime = '';

this.imenik.broj = null;

this.imenik.vrsta = '';

}

ionViewWillEnter(){

this.prikaziOsobe();

}

dodajOsobu(imenik){

console.log(imenik);

}

prikaziOsobe(){

this._api.getUsers().subscribe(res => {

this.popisOsoba = res;

console.log(this.popisOsoba);

})

}

Sada možemo provjeriti radi li uopće naša forma za unos.

Kada smo zaključili da forma ispisuje podatke koje smo upisali možemo dovršiti funkciju za unos osobe dodajOsobu(); koja će sada izgledati ovako

 dodajOsobu(imenik){
   console.log(imenik);

   this._api.postUser(imenik).subscribe(res => {
        //Osvježi popis osoba
        this.prikaziOsobe();
   })

  }

dodajOsobu(imenik){

console.log(imenik);

this._api.postUser(imenik).subscribe(res => {

//Osvježi popis osoba

this.prikaziOsobe();

})

}

I konačni rezultat izgleda ovako

Zaključak

Primjer koji ste ovdje imali priliku vidjeti najosnovnija je verzija i samo jedan od načina kako slati podatke iz Ionic aplikacije na API i ne preporučujem da ovaj način slanja podataka koristite u produkcijskim verzijama aplikacije. Zapravo, ako ga i koristite neće se dogoditi ništa loše, ali samo želim naglasiti da postoje i bolji načini o kojima ću nekom drugom prilikom.

{
    "name": "Ionic3API",
    "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": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "cordova-android": "^6.2.3",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "3.6.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.1.3",
        "@ionic/cli-plugin-ionic-angular": "1.4.1",
        "ionic": "3.9.2",
        "typescript": "2.3.4"
    },
    "description": "Ionic3API",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android"
        ]
    }
}

{

"name": "Ionic3API",

"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": "4.1.3",

"@angular/compiler": "4.1.3",

"@angular/compiler-cli": "4.1.3",

"@angular/core": "4.1.3",

"@angular/forms": "4.1.3",

"@angular/http": "4.1.3",

"@angular/platform-browser": "4.1.3",

"@angular/platform-browser-dynamic": "4.1.3",

"@ionic-native/core": "3.12.1",

"@ionic-native/splash-screen": "3.12.1",

"@ionic-native/status-bar": "3.12.1",

"@ionic/storage": "2.0.1",

"cordova-android": "^6.2.3",

"cordova-plugin-console": "^1.0.5",

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

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

"cordova-plugin-statusbar": "^2.2.2",

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

"ionic-angular": "3.6.0",

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

"ionicons": "3.0.0",

"rxjs": "5.4.0",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.12"

"devDependencies": {

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

"@ionic/cli-plugin-ionic-angular": "1.4.1",

"ionic": "3.9.2",

"typescript": "2.3.4"

"description": "Ionic3API",

"cordova": {

"plugins": {

"cordova-plugin-console": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-statusbar": {},

"cordova-plugin-whitelist": {},

"ionic-plugin-keyboard": {}

"platforms": [

"android"

]

}