Arhiva Razvoj - Stranica 9 od 27 - Tomislav Stanković

Uvod u Ionic 4

Nakon Ionic 1, Ionic 2 i Ionic 3 vrijeme je za uvod u Ionic 4. Biti će dosta poznatih detalja od ranijih verzija, ali isto tako biti će i novih detalja kojih ranije nije bilo.

Manje više, sve o čemu ću u nastavku pisati može se pronaći u službenoj dokumentaciji na poveznici https://beta.ionicframework.com/docs

Postavljanje razvojne okoline

Za uspješno kreiranje Ionic 4 projekta potrebno je zadovoljiti nekoliko preduvjeta.

Potrebno je instalirati:

Node.js LTS
Ionic CLI pomoću naredbe: $ npm install -g ionic
TypeScript pomoću naredbe: $ npm install -g typescript

Gore navedeno potrebno je za razvoj iOS i Android hibridnih mobilnih aplikacija. Jedina razlika s kojom se moguće susresti je način instalacije jer na Windows baziranom računalu mogu se razvijati samo Android i Windows Phone aplikacije, dok je za iOS aplikacije potreban Mac.

Prije nastavka potrebno je provjeriti da je sve uspješno instalirano:

$ node -v
$ npm –v
$ ionic –v

Pokretanje Ionic 4 projekta

Ako je sve ranije navedeno uspješno instalirano već sada moguće je kreirati novi Ionic 4 projekt.

Ionic 4 beta zahtjeva oznaku --type=angular i verziju CLI-a 4.0.0 ili veću.

$ ionic start myApp sidemenu --type=angular

1	$ ionic start myApp sidemenu --type=angular

Osim sidemenu teme mogao sam birati još između blank i tabs.

Ubrzo na ekranu vidim sljedeću poruku:

Da je u pitanju Ionic 3 ovdje bi dodao Cordovu, ali kako Ionic 4 podržava i koristi Capacitor u ovom slučaju neću dodati podršku za Cordovu.

Nakon toga imam mogućnost instalacije Ionic Pro SDK-a što mi u ovom slučaju nije potrebno niti ga inače koristim pa ću i tu opciju preskočiti tj. odbiti.

Na kraju dobijem sljedeću strukturu projekta:

Od važnijih dijelova aplikacije mogu izdvojiti dio koji počinje sa “app”. U pitanju je root komponenta koja je u istom obliku postojala i u dvije prijašnje verzije Ionica.

app-routing.module.ts
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

app-routing.module.ts

app.component.html

app.component.spec.ts

app.component.ts

app.module.ts

Jedina novost ovdje je app-routing.module.ts koji sadržava:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule'
  },
  {
    path: 'list',
    loadChildren: './list/list.module#ListPageModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

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

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

{

path: '',

redirectTo: 'home',

pathMatch: 'full'

{

path: 'home',

loadChildren: './home/home.module#HomePageModule'

{

path: 'list',

loadChildren: './list/list.module#ListPageModule'

}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule {}

Naravno, u pitanju je Angular Routing o čemu se više može saznati na poveznici https://angular.io/guide/router

U web pregledniku projekt izgleda ovako:

Zaključak

Ovo je kratak pregled kreiranja Ionic 4 projekta koristeći Angular. U sljedećim blog postovima pokazati ću kako aplikaciji dodati nativne funkcionalnosti koristeći Capacitor jednako kao što sam to prije radio koristeći Ionic Native.

Node.js Cron Job – automatsko izvršavanje zakazanih zadataka

Do sada sam objavio nekoliko članaka korištenju NodeJS API-ja i svaki od njih ima istu poveznicu, a to je činjenica da se izvršavaju isključivo kada ih pozovem. U većini slučajeva to tako treba biti, ali postoje i slučajevi u kojima želim da se određeni zadatak izvrši bez da ga ručno moram pokrenuti pozivajući neki API endpoint. U tome će mi pomoći Cron Job.

Postavljanje projekta

Kreiram mapu naziva ExpressNodeCron i unutar nje pokrećem naredbu:

$ npm init --yes

1	$ npm init --yes

Odmah nakon toga instaliram Express.js i Node Cron pakete:

$ npm install express --save
$ npm install node-cron --save

1 2	$ npm install express --save $ npm install node-cron --save

Sada u mapi projekta mogu vidjeti datoteku package.json koja je osnova ovog projekta.

{
  "name": "expressnodecron",
  "version": "1.0.0",
  "description": "ExpressJS Cron exaple",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Tomislav Stanković",
  "license": "ISC",
  "dependencies": {
    "node-cron": "^1.2.1",
    "express": "^4.16.3"
  }
}

{

"name": "expressnodecron",

"version": "1.0.0",

"description": "ExpressJS Cron exaple",

"main": "index.js",

"scripts": {

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

"author": "Tomislav Stanković",

"license": "ISC",

"dependencies": {

"node-cron": "^1.2.1",

"express": "^4.16.3"

}

Kreiranje API-ja

Unutar datoteke index.js koju sam upravo kreirao kopiram sljedeći sadržaj:

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

var express = require('express');

var app = express();

var cron = require("node-cron");

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

var apiRoutes = express.Router();

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

//ako je sve ispravno postavljeno kao odgovor dobijem ovu poruku

res.json({ message: 'API radi!' });

});

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

app.listen(port);

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

API odmah testiram na putanji http://localhost:8080/api/

Cron Job funkcionalnost

Sada pratim dostupnu dokumentaciju na adresi https://www.npmjs.com/package/node-cron

Na sljedećem primjeru nalazi se osnova cron job funkcionalnosti.

cron.schedule("* * * * *", function() {
    console.log("izvršavanje zadatka svake minute");
});

cron.schedule("* * * * *", function() {

console.log("izvršavanje zadatka svake minute");

});

Na liniji 1 nalazi se "* * * * *" što označava odabrani interval u kojemu će se određeni zadatak izvršiti.

 # ┌────────────── sekunde (opcionalno), vrijednost: 0 - 59
 # │ ┌──────────── minute, vrijednost: 0-59
 # │ │ ┌────────── sati, vrijednost: 0-23
 # │ │ │ ┌──────── dan u mjesecu, vrijednost: 1-31
 # │ │ │ │ ┌────── mjesec, vrijednost: 1-12 (ili nazivi)
 # │ │ │ │ │ ┌──── dan u tjednu, vrijednost: 0-7 (ili nazivi, 0 ili 7 označava nedjelju)
 # │ │ │ │ │ │
 # │ │ │ │ │ │
 # * * * * * *

# ┌────────────── sekunde (opcionalno), vrijednost: 0 - 59

# │ ┌──────────── minute, vrijednost: 0-59

# │ │ ┌────────── sati, vrijednost: 0-23

# │ │ │ ┌──────── dan u mjesecu, vrijednost: 1-31

# │ │ │ │ ┌────── mjesec, vrijednost: 1-12 (ili nazivi)

# │ │ │ │ │ ┌──── dan u tjednu, vrijednost: 0-7 (ili nazivi, 0 ili 7 označava nedjelju)

# │ │ │ │ │ │

# * * * * * *

Na liniji 2 nalazi se zadatak koji će se izvršiti u zadanom intervalu.

Osim ranije spomenutog intervala moguće su i sljedeće kombinacije:

– više vrijednosti odvojenih zarezom

cron.schedule('1,2,4,5 * * * *', function(){
  console.log('izvršavanje nakon 1, 2, 4 i 5 minuta');
});

cron.schedule('1,2,4,5 * * * *', function(){

console.log('izvršavanje nakon 1, 2, 4 i 5 minuta');

});

– korištenje raspona vrijednosti

cron.schedule('1-5 * * * *', function(){
  console.log('izvršavanje zadatka od 1. do 5. minute');
});

cron.schedule('1-5 * * * *', function(){

console.log('izvršavanje zadatka od 1. do 5. minute');

});

– izvršavanje u koracima

cron.schedule('*/2 * * * *', function(){
  console.log('izvršavanje zadataka svake dvije minute');
});

cron.schedule('*/2 * * * *', function(){

console.log('izvršavanje zadataka svake dvije minute');

});

– korištenje naziva mjeseca i dana umjesto brojeva (moraju biti na engleskom jeziku)

cron.schedule('* * * August Sunday', function(){
    console.log('izvršavanje svake nedjelje u osmom mjesecu');
});

cron.schedule('* * * August Sunday', function(){

console.log('izvršavanje svake nedjelje u osmom mjesecu');

});

Svi ranije navedeni zadaci pokreću se prilikom startanja NodeJS servera, ali postoje još i dodatne metode pomoću kojih je moguće u određenom trenutku pokrenuti neki Cron Job, stopirati ga ili skroz ugasiti.

Start task.start();

var cron = require('node-cron');
 
var task = cron.schedule('* * * * *', function() {
  console.log('pokrenuto izvršavanje zadatka');
}, false);
 
task.start();

var cron = require('node-cron');

var task = cron.schedule('* * * * *', function() {

console.log('pokrenuto izvršavanje zadatka');

}, false);

task.start();

Stop task.stop();

Jednom stopirati zadatak moguće je ponovno pokrenuti.

var cron = require('node-cron');
 
var task = cron.schedule('* * * * *', function() {
  console.log('izvršava se svake minute do stopiranja');
});
 
task.stop();

var cron = require('node-cron');

var task = cron.schedule('* * * * *', function() {

console.log('izvršava se svake minute do stopiranja');

});

task.stop();

Primjer:

Pozivanjem putanje http://localhost:8080/api/stopiraj zaustavljam Cron Job.

var task =  cron.schedule("* * * * *", function() {
    console.log("izvršavanje zadatka svake minute", new Date());
});

apiRoutes.get('/stopiraj', function(req, res) {
    task.stop();
    res.json({ message: 'Zadatak zaustavljen!' });   
});

var task = cron.schedule("* * * * *", function() {

console.log("izvršavanje zadatka svake minute", new Date());

});

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

task.stop();

res.json({ message: 'Zadatak zaustavljen!' });

});

Destroy task.destroy();

Jednom prekinuti zadatak nije moguće ponovno pokrenuti.

var cron = require('node-cron');
 
var task = cron.schedule('* * * * *', function() {
  console.log('neće se više izvršavati, niti ga je moguće ponovno pokrenuti');
});
 
task.destroy();

var cron = require('node-cron');

var task = cron.schedule('* * * * *', function() {

console.log('neće se više izvršavati, niti ga je moguće ponovno pokrenuti');

});

task.destroy();

Ionic aplikacija sa SVG ikonama

Iako na https://ionicons.com/ postoji veliki broj odličnih ikona ipak je povremeno potrebno koristiti ikone koje su napravljene specijalno za određenu Ionic aplikaciju. SVG se nameće kao logično rješenje jer zadržava koncept korištenja <ion-icon name="icon-name"></ion-icon>.

Za korištenje SVG-a kao ikona nije bitno radi li se o Ionic 1, Ionic 2, Ionic 3 ili o Ionic 4 projektu. Važno je samo imati jednu mapu unutar koje će se držati SVG datoteke.

U ovom ću slučaju staviti nekoliko SVG datoteka unutar src/assets/imgs mape.

I to je sve što je potrebno kako bi se SVG datoteke koristile kao ikone unutar <ion-icon> komponente.

Ipak, postoje dva načina kako postići isti efekt.

Prvi način je navođenje putanje do SVG datoteke unutar same <ion-icon> komponente na sljedeći način:

<ion-icon src="/assets/eat.svg"></ion-icon>

1	<ion-icon src="/assets/eat.svg"></ion-icon>

Dok je drugi način kreiranje CSS klase za svaku ikonu unutar app.scss

ion-icon {
    &[class*="custom-"] {
      mask-size: contain;
      mask-position: 50% 50%;
      mask-repeat: no-repeat;
      background: currentColor;
      width: 1em;
      height: 1em;
    }
  
    &[class*="theplace"] {
      mask-image: url(../assets/imgs/theplace.svg);
    }
    &[class*="eat"] {
      mask-image: url(../assets/imgs/eat.svg);
    }
    &[class*="map"] {
      mask-image: url(../assets/imgs/map.svg);
    }
    &[class*="drink"] {
      mask-image: url(../assets/imgs/drink.svg);
    }
    &[class*="beaches"] {
      mask-image: url(../assets/imgs/beaches.svg);
    }
    &[class*="spa"] {
     mask-image: url(../assets/imgs/spa.svg);
    }
    &[class*="siren"] {
     mask-image: url(../assets/imgs/siren.svg);
    }
  }

ion-icon {

&[class*="custom-"] {

mask-size: contain;

mask-position: 50% 50%;

mask-repeat: no-repeat;

background: currentColor;

width: 1em;

height: 1em;

}

&[class*="theplace"] {

mask-image: url(../assets/imgs/theplace.svg);

}

&[class*="eat"] {

mask-image: url(../assets/imgs/eat.svg);

}

&[class*="map"] {

mask-image: url(../assets/imgs/map.svg);

}

&[class*="drink"] {

mask-image: url(../assets/imgs/drink.svg);

}

&[class*="beaches"] {

mask-image: url(../assets/imgs/beaches.svg);

}

&[class*="spa"] {

mask-image: url(../assets/imgs/spa.svg);

}

&[class*="siren"] {

mask-image: url(../assets/imgs/siren.svg);

}

nakon čega je moguće koristiti ikone na standardni način:

<ion-icon name="custom-eat"></ion-icon>

1	<ion-icon name="custom-eat"></ion-icon>

U praksi to može izgledati ovako:

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      IonicSvgApp
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding text-center>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-theplace"></ion-icon>   
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-eat"></ion-icon>   
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-map"></ion-icon>   
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-drink"></ion-icon>   
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-siren"></ion-icon>   
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-beaches"></ion-icon>   
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-icon name="custom-spa"></ion-icon>   
    </ion-col>
  </ion-row>
</ion-content>

<ion-header>

<ion-navbar color="primary">

<ion-title>

IonicSvgApp

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding text-center>

<ion-row>

<ion-col>

<ion-icon name="custom-theplace"></ion-icon>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-icon name="custom-eat"></ion-icon>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-icon name="custom-map"></ion-icon>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-icon name="custom-drink"></ion-icon>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-icon name="custom-siren"></ion-icon>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-icon name="custom-beaches"></ion-icon>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-icon name="custom-spa"></ion-icon>

</ion-col>

</ion-row>

</ion-content>

page-home {
   ion-icon{
     font-size: 10vh;
   }
   ion-content ion-row:nth-child(odd) {
    color: red;
   }
   ion-content ion-row:nth-child(even) {
    color: blue;
   }
}

page-home {

ion-icon{

font-size: 10vh;

}

ion-content ion-row:nth-child(odd) {

color: red;

}

ion-content ion-row:nth-child(even) {

color: blue;

}

ExpressJS middleware za ograničavanje ponovljenih zahtjeva na API-je

Jedna od najvažnijih komponenti svakog API-ja, osim mogućnosti upravljanja podacima, je sigurnost. A jedna od osnovnih komponenti te sigurnosti je mogućnost blokiranja prekomjernih upita koji se šalju na pojedini API endpoint.

U ovom ću slučaju za tu svrhu koristiti Express Rate Limit modul.

Postavljanje projekta

Kreiram mapu naziva ExpressRateLimit i unutar nje pokrećem naredbu:

$ npm init --yes

1	$ npm init --yes

Odmah nakon toga instaliram Express.js i Express Rate Limit pakete:

$ npm install express --save
$ npm install --save express-rate-limit

1 2	$ npm install express --save $ npm install --save express-rate-limit

Sada u mapi projekta mogu vidjeti datoteku package.json koja je osnova ovog projekta.

{
  "name": "ExpressRateLimit",
  "version": "1.0.0",
  "description": "ExpressJS Rate Limit API",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3",
    "express-rate-limit": "^2.12.2"
  }
}

{

"name": "ExpressRateLimit",

"version": "1.0.0",

"description": "ExpressJS Rate Limit API",

"main": "index.js",

"scripts": {

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

"keywords": [],

"author": "",

"license": "ISC",

"dependencies": {

"express": "^4.16.3",

"express-rate-limit": "^2.12.2"

}

Sada imam sve potrebno za kreiranje API-ja.

Kreiranje API-ja

Kreiram index.js datoteku unutar koje kopiram sljedeći sadržaj:

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

var express = require('express');

var app = express();

var RateLimit = require('express-rate-limit');

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

var apiRoutes = express.Router();

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

//ako je sve ispravno postavljeno kao odgovor dobijem ovu poruku

res.json({ message: 'API radi!' });

});

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

app.listen(port);

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

API mogu testirati na putanji http://localhost:8080/api/

Sada, nakon što sam se uvjerio da API ispravno radi, mogu implementirati Express Rate Limit modul.

Express Rate Limit modul

Kreiram dvije krajnje točke (endpoint):

apiRoutes.get('/putanja1', function(req, res) {
    res.json({ 
	success: true,
	message: 'Prvi API' });   
});
 
apiRoutes.get('/putanja2', function(req, res) {
    res.json({ 
	success: true,
	message: 'Drugi API' });   
});

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

res.json({

success: true,

message: 'Prvi API' });

});

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

res.json({

success: true,

message: 'Drugi API' });

});

Njima pristupam putem URL-ova:

http://localhost:8080/api/putanja1 i http://localhost:8080/api/putanja2

Prije nego ubacim sigurnosnu zaštitu URL-ovima je moguće pristupiti neograničeno mnogo puta. Ovo nije problem kada, kao u ovom konkretnom slučaju, šaljem mali json objekt, ali kada je u pitanju API koji dohvaća više podataka iz npr. SQL baze onda to već postaje problem jer može doći do zagušenja ili potpunog blokiranja servera.

Sada ću dodati apiLimiter objekt s nekoliko parametara.

var apiLimiter= new RateLimit({
  windowMs: 60*60*1000, // vremenski okvir od jednog sata unutar kojega vrijede ova pravila
  delayAfter: 1, // započeti usporavanje nakon prvog upita
  delayMs: 3*1000, // usporiti svaki sljedeći upit za 3 sekunde
  max: 5, // blokiranje API-ja nakon 5 upita
  message: "Previse zahtjeva s Vase IP, molimo pokusajte ponovno za jedan sat"
});

var apiLimiter= new RateLimit({

windowMs: 60*60*1000, // vremenski okvir od jednog sata unutar kojega vrijede ova pravila

delayAfter: 1, // započeti usporavanje nakon prvog upita

delayMs: 3*1000, // usporiti svaki sljedeći upit za 3 sekunde

max: 5, // blokiranje API-ja nakon 5 upita

message: "Previse zahtjeva s Vase IP, molimo pokusajte ponovno za jedan sat"

});

Ako želim da se ta pravila primjene na sve krajnje točke (endpoint) dodajem sljedeće:

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

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

Mogu vidjeti da je svaki sljedeći upit sporiji od prethodnog i da se nakon 5 poslanih upita prikazuje poruka iz apiLimiter objekta.

U slučaju da za svaku krajnju točku tj. svaki endpoint želim postaviti drugačiji uvijet to radim tako da kreiram toliki broj objekata koliko ima krajnjih čvorova. Npr.

var apiLimiter1 = new RateLimit({
  windowMs: 60000, // vremenski okvir od jednog sata unutar kojega vrijede ova pravila
  delayAfter: 10, // započeti usporavanje nakon prvog upita
  delayMs: 1000, // usporiti svaki sljedeći upit za 3 sekunde
  max: 50, // blokiranje API-ja nakon 5 upita
  message: "Previse zahtjeva s Vase IP, molimo pokusajte ponovno kasnije"
});

var apiLimiter2 = new RateLimit({
  windowMs: 60*60*1000, // vremenski okvir od jednog sata unutar kojega vrijede ova pravila
  delayAfter: 1, // započeti usporavanje nakon prvog upita
  delayMs: 3*1000, // usporiti svaki sljedeći upit za 3 sekunde
  max: 5, // blokiranje API-ja nakon 5 upita
  message: "Previse zahtjeva s Vase IP, molimo pokusajte ponovno za jedan sat"
});
 
apiRoutes.get('/', function(req, res, next) {
    //ako je sve ispravno postavljeno kao odgovor dobijem ovu poruku
    res.json({ message: 'API radi!' });   
});

apiRoutes.get('/putanja1', apiLimiter1, function(req, res, next) {
    res.json({ 
	success: true,
	message: 'Prvi API' });   
});
 
apiRoutes.get('/putanja2', apiLimiter2, function(req, res, next) {
    res.json({ 
	success: true,
	message: 'Drugi API' });   
});

var apiLimiter1 = new RateLimit({

windowMs: 60000, // vremenski okvir od jednog sata unutar kojega vrijede ova pravila

delayAfter: 10, // započeti usporavanje nakon prvog upita

delayMs: 1000, // usporiti svaki sljedeći upit za 3 sekunde

max: 50, // blokiranje API-ja nakon 5 upita

message: "Previse zahtjeva s Vase IP, molimo pokusajte ponovno kasnije"

});

var apiLimiter2 = new RateLimit({

windowMs: 60*60*1000, // vremenski okvir od jednog sata unutar kojega vrijede ova pravila

delayAfter: 1, // započeti usporavanje nakon prvog upita

delayMs: 3*1000, // usporiti svaki sljedeći upit za 3 sekunde

max: 5, // blokiranje API-ja nakon 5 upita

message: "Previse zahtjeva s Vase IP, molimo pokusajte ponovno za jedan sat"

});

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

//ako je sve ispravno postavljeno kao odgovor dobijem ovu poruku

res.json({ message: 'API radi!' });

});

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

res.json({

success: true,

message: 'Prvi API' });

});

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

res.json({

success: true,

message: 'Drugi API' });

});

Stigao je Ionic 4!

Prošlo je manje od godinu i pol kako sam objavio članak pod naslovom Stigao je Ionic 3!, a sada je već stigao Ionic 4. Iako je u pitanju beta verzija to ne mijenja činjenicu da nema povratka na staro i da će uskoro Ionic 4 iz bete doći u finalnu fazu svojeg životnog ciklusa.

Ionic 4 donosi značajna poboljšanja performansi, podršku za korištenja bilo kojeg frameworka (a ne samo Angulara kao što je bilo do sada), potpuno novu dokumentaciju i još mnogo toga o čemu ću više reći u nastavku.

Ovako na prvu sve to djeluje vrlo obećavajuće.

Web komponente

Web komponente su skup standarda ili tehnologija koji omogućavaju kreiranje cjelovitih HTML elemenata (Custom Elements, Shadow DOM, HTML imports, HTML Template).

U praksi to znači da se jednom kreirana komponenta može koristiti, neovisno o odabranom frameworku, unutar određene mobilne ili web aplikacije.

Iako se o web komponentama može čitati još od 2011. Ionic tim smatra da su sada postale dovoljno zrele za širu upotrebu. Za neke developere bi ovo mogla biti poprilična promjena, ali za nas koji radimo s Angularom ta bi tranzicija mogla proći skoro neprimjetno.

Kompatibilnost

Od samog početka Ionic je kreiran u kombinaciji s Angularom, iako je želja bila da Ionic bude UI Framework koji će moći raditi s bilo kojom tehnologijom, ali s popularizacijom web komponenti to više ne mora biti slučaj.

U praksi to znači da je od sada moguće koristiti bilo koji framework, bio to Angular, Vue ili React, s Ionicom.

Naravno, za nas koji radimo s Angularom i ovdje će se malo toga promijeniti.

For those using Angular, this means very little will change. Most of the APIs and tags continue to work as an Angular developer would expect, and Ionic’s core Angular services work just like they used to. We’ve worked hard to keep the experience for Angular developers largely the same. – Announcing the Ionic 4 Beta

Posebno zanimljiva je činjenica da nadogradnje koje redovno stižu za Ionic više ne ovise o verziji korištenog frameworka. To bi u praksi značilo – ako npr. u verziji 4.2 dođe nova funkcionalnost da mi njeno korištenje neće uvjetovati obavezna nadogradnja novije verzije frameworka kao što je do sada bio slučaj.

Ionic & Angular CLI

Ionic tim je odlučio, umjesto da samostalno razvijaju sve CLI funkcionalnosti, iskoristiti snagu Angular CLI-a.

$ npm install -g ionic@latest

1	$ npm install -g ionic@latest

Ionic 4 donosi novi Ionic tj. Angular CLI i pripadajući Router. Ovo opet znači da developeri koji inače koriste Angular mogu bez problema koristiti Angular CLI unutar Ionica kao što to rade i u web projektima.

$ ionic start appName blank --type=angular

1	$ ionic start appName blank --type=angular

Developere koji su Angular koristili isključivo prilikom razvoja Ionica aplikacija očekuje mini learning curve, ali dugoročno gledano mislim da je ovo dobar korak prema naprijed.

Ionic 3 -> Ionic 4

Iako migracija zahtjeva određene preinake to neće biti ništa strašno. Opet kažem, za nas koji inače koristimo Angular promjene ne donose ništa novo i jedino što je potrebno napraviti je prilagoditi određene dijelove Ionic 3 aplikacije da rade na Ionic 4 način. U prvom redu tu se radi o promjeni navigacije unutar aplikacije. Svi servisi, komponente i direktive radit će kao i do sada.

Kako bi se proces migracije maksimalno olakšao dostupan je Migration Tool.

Zaključak

Ionic 4 je još uvijek u beta verziji i zato treba oprezno pristupiti migraciji sa verzije 3 unatoč tome što je proces migracije jednostavan.

Na ovom ću blogu svakako i dalje obrađivati Ionic teme tako da će i Ionic 4 biti detaljno pokriven. Ako ih imate, prijedloge tema možete ostaviti u komentarima.