Kako napraviti REST API koristeći JSON Server

Iako sam ranije već objavio jedan sličan blog post pod nazivom “Izrada RESTful API-ja koristeći Node.js i Express.js” sada ću obraditi nešto slično za što vjerujem da bi vam moglo biti jednostavnije i brže za napraviti.

U najvećem broju slučajeva kada počnete raditi na novom projektu u nekoj novoj tehnologiji napravit ćete CRUD aplikaciju, a kako bi to bilo moguće potreban vam je API s podacima. Tu u priču ulazi JSON Server.

JSON Server je npm paket i sve što uz njega trebate je obična JSON datoteka.

Instalacija

JSON Server možete instalirati globalno (u ovom primjeru koristim globalnu instalaciju)

ili lokalno

Više o npm-u možete saznati u službenoj dokumentaciji.

Nakon instalacije provjerite jeste li ispravno instalirali JSON Server json-server -v. Ako jeste možete krenuti na sljedeći korak.

JSON Server verzija

JSON datoteka

Ako već nemate pri ruci nekakvu JSON datoteku možete napraviti nešto slično ovome. Znači, imamo primjer imenika koji se sastoji od tri objekta. Datoteka neka se zove db.json

Pokretanje JSON Servera

Pokrećemo ga koristeći naredbu

JSON Server pokretanje

I kao što se može vidjeti API je pokrenut na adresama

JSON Server pokretanje u web pregledniku

CRUD operacije

I napokon se možemo prebaciti na ono zbog čega smo ovdje. Za potrebe pozivanja API-ja koristit ćemo Postman.

GET

JSON Server GET

POST

JSON Server POST

PUT

JSON Server PUT

DELETE

JSON Server DELETE

Zaključak

Sve gore navedeno su samo osnovni primjeri. Više o ostalim, naprednijim, mogućnostima potražite u službenoj dokumentaciji.

Ionic 2 – prikaz JSON-a sa API-ja

Iako su neke aplikacije same sebi dostatne ipak je više onih koje ovise o podacima s vanjskih izvora, a to su javni ili privatni API-ji. U ovom blog postu prikazat ćemo primjer dohvaćanja JSON (JavaScript Object Notation) podataka s javnog API-ja RandomUser.Me.

Zašto baš RandomUser? Zato što na jednostavniji način, bez da kreirate i pokrećete svoj API možete napraviti i testirati svoju Ionic 2 aplikaciju što je posebno korisno u procesu učenja.

Kreiranje Ionic 2 projekta

Za početak ćemo kreirati novi Ionic 2 projekt koristeći blank predložak.

Aplikacija u web pregledniku sada izgleda ovako. Znači, ništa posebno.

Ionic2 Blank RandomUser

Ako želite saznati nešto više o strukturi Ionic 2 aplikacije proučite moj prethodni blog post.

Ionic 2 provides (servisi)

Prije nego krenemo s izradom sučelja aplikacije i logike za prikaz podataka idemo napraviti servis koji će nam dohvaćati potrebne podatke. Koristiti ćemo sljedeći URL https://randomuser.me/api/?results=10. Ako kliknete na link vidjet ćete JSON sa 10 korisnika.

Servis nam služi za dohvaćanje podataka s JSON API-ja koristeći HTTP protokol. I ovdje ćemo koristiti Ionic 2 CLI pa ćemo servis kreirati pomoću naredbe $ ionic g provider RandomUserProvider.

Servisi se automatski kreiraju u mapi providers.

Ionic2Provider

U random-user-provider.ts dodat ćemo sljedeće:

Pozivanje servisa

Servis sada moramo pozvati u komponentu koja će činiti logiku naše aplikacije. Prvo je potrebno pozvati servis import { RandomUserProvider } from '../../providers/random-user-provider'; kako bi ga mogli koristiti.

Iako smo sada pozvali servis to i dalje ne znači da ga možemo koristiti. Kako bi to omogućili moramo ga navesti kao dio naše komponente @Component, a to činimo sa providers: [RandomUserProvider] .

Sljedeći korak je kreirati konstruktor _randomUser za RandomUserProvider.

Sada možemo kreirati funkciju getUsers() koja će nam prikazati korisnike.

U konačnici to izgleda ovako:

Označene linije dodali smo u našu HomePage komponentu.

P.S. Ako se odkomentira linija 16 podaci će se automatski prikazati bez potrebe za klikom na gumb GET Users.

Sučelje za prikaz

Logiku aplikacije smo napravili i sada se možemo pozabaviti sučeljem za prikaz koji će biti običan popis.

*ngFor direktiva će proći kroz popis korisnika i za svakog kreirati po jedan red u popisu.

Konačan izgled aplikacije

$ ionic serve daje nam konačan izgled naše aplikacije s uspješno dohvaćenim JSON-om.

Get Random User

Zaključak

U ovom blog postu imali ste priliku vidjeti kako u Ionic 2 aplikaciju dohvatiti JSON podatke s javnog API-ja te ih prikazati u obliku popisa.

Jednako tako, da smo htjeli, mogli smo koristiti i naš NodeJS API kako bi prikazali korisnike iz naše baze podataka. Rezultat bi bio isti.