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:

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

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

Sada imam sve potrebno za kreiranje API-ja.

Kreiranje API-ja

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

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

ExpressJS Rate Limit – zaštita API-ja

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):

Njima pristupam putem URL-ova:

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

ExpressJS Rate Limit – zaštita API-ja

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.

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

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

ExpressJS Rate Limit – zaštita API-ja

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.

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.

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.

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.

Ionic 3 Market

U ovom ću blog postu pokazati kako unutar Ionic aplikacije direktno pristupiti nekoj drugoj aplikaciji koja se nalazi na Google Play Store ili Apple Store koristeći Ionic Native Market plugin.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

Pristup trgovini aplikacija

Prema službenoj dokumentaciji, Market plugin instaliram sljedećim naredbama:

Navodim ga unutar app.module.ts

Sada ću na početnoj stranici home.ts kreirati funkciju pokaziAplikaciju() koja će biti aktivirana prilikom klika na gumb. Toj funkciji proslijedim jedan parametar, a to je ID aplikacije.

Na ekranu će se nalaziti samo jedan gumb.

Konačan rezultat vidi se na sljedećoj slici:

Ionic 3 Market

Zaključak

Ovaj plugin na vrlo jednostavan način rješava potrebu otvaranja Google Play Store tj. Apple Store trgovine unutar Ionic aplikacije.

Struktura aplikacije prema package.json

Ionic 3 Skeleton Screen – stvaranje dojma brzine

Jedan od detalja koji je jako bitan kod mobilnih aplikacija je brzina ili barem dojam brzine. Brzina se može postići tehničkim poboljšanjima u samom kodu koristeći npr. Lazy Loading, ali opet ostaje onaj dio na koji kao developer ne mogu direktno utjecati, a to je brzina kojom će mi server poslati podatke koje trebam prikazati na ekranu mobilnog uređaja.

A skeleton screen is essentially a blank version of a page into which information is gradually loaded. – Mobile Design Details: Avoid The Spinner

Dok se podaci učitavaju korisnik je prisiljen čekati a ja kao developer trebam odlučiti kako pristupiti tom čekanju na način da korisniku zadržim pažnju, da mu dam do znanja da se u pozadini ipak nešto događa.

Tri su glavna pristupa:

– prikazati prazan ekran
– prikazati loader animaciju
– prikazati skeleton screen

Ionic 3 Skeleton Screen - kako aplikaciju učiniti nevjerojatno brzom
Izvor: A Bone to Pick with Skeleton Screens

Izrada Skeleton Screena

Definiram varijablu popisKorisnika koja će sadržavati popis korisnika koji dohvatim s API-ja https://jsonplaceholder.typicode.com/users, ali dok podaci ne stignu koristiti ću varijablu privremeniPopisKorisnika koja je zapravo niz (array) od šest stavki.

setTimeout će mi simulirati zastoj na mreži i podatke ću u ovom slučaju čekati tri sekunde za vrijeme kojih će biti prikazan skeleton screen.

Izgled ekrana sastoji se od najobičnijeg popisa korisnika i funkcionalnosti iza koje stoji *ngIf.

I za kraj tu je malo CSS-a.

Na kraju to izgleda ovako:

Ionic 3 Skeleton Screen – stvara dojam brzine

Zaključak

Skeleton screen je odličan način za stvaranje dojma brzine. U kombinaciji s ostalim tehničkim poboljšanjima performansi mobilne aplikacije može napraviti čuda, a sve u svrhu boljeg korisničkog iskustva.

Struktura aplikacije prema package.json

Ionic 3 – Barcode QR skener

Zahvaljujući Ionic Native pluginovima moguće je u vrlo kratkom vremenu napraviti konkretnu Ionic aplikaciju koja će služiti svrsi. U ovom slučaju riječ je o aplikaciji za skeniranje barkoda što je posebno korisno u skladištima trgovina.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

Barcode Scanner

Prema službenoj dokumentaciji, Barcode Scanner plugin instaliram sljedećim naredbama:

Ovim je pluginom moguće skenirati sljedeće formate: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, CODE_93, CODABAR, ITF, RSS14, RSS_EXPANDED, PDF_417, AZTEC i MSI.

Nakon toga referencu na plugin dodajem i unutar app.module.ts datoteke

Tek sada mogu implementirati funkcionalnost za skeniranje barkoda.

Ekran će se sastojati od gumba za pokretanje skeniranja i prostora iznad njega za prikaz skeniranih podataka.

Funkcionalnost se sastoji od jedne funkcije.

U praksi to izgleda ovako:

Ionic 3 – Barcode QR skener

Prilikom klika na gumb za skeniranje aplikacija traži pristup kameri kako bi mogla skenirati barkod, nakon odobrenja prikazuje se ekran kamere uz poruku “Place a barcode inside the viewfinder to scan it.“. Nakon uspješnog skeniranja čuje se glasan beep zvuk i na dnu ekrana kratko se prikaže sadržaj skeniranog barkoda nakon čega se ekran kamere zatvara i aplikacija se vraća na početni ekran.

Ali to nije sve. Moguće je koristiti objekt za dodatnim opcijama pomoću kojih se ponašanje plugina može prilagoditi.

Ionic 3 – Barcode QR skener

Zaključak