Ionic 3 i WordPress REST API – prikaz blog postova

U ovom ću blog postu napraviti primjer Ionic 3 aplikacije koja će prikazivati popis blog postova sa ovog bloga koristeći WordPress REST API.

Na početnoj stranici biti će popis blog postova (naziv, vrijeme objave, kategorije, kratak sadržaj i slika) te će se moći pristupiti svakom blog postu pojedinačno.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu kako bi kasnije mogao aplikaciju pokrenuti na Android mobilnom uređaju.

API provider

Sada ću kreirati API Provider koji će služiti kao centralno mjesto svih WordPress URL-ova koje ću koristiti unutar Ionic aplikacije.

Na URL-u https://www.tomislavstankovic.com/blog/wp-json/wp/v2/posts dohvaćam popis blog postova. Unutar ovog API-ja također imam dva vrlo bitna podatka, a to su featured_media i categories koji će mi poslužiti za dohvaćanje slike i kategorije svakog blog posta.

Ionic 3 i WordPress REST API - prikaz blog postova

Prikaz blog postova

Aplikacija će na kraju izgledati ovako:

Ionic 3 i WordPress REST API – prikaz blog postova

Kao što se može vidjeti na početnom ekranu nalazi se popis zadnjih 10 blog postova. Svaki blog post ima naslov, sliku, kratak sadržaj i vrijeme proteklo od objave. Nekoliko preduvjeta je bilo potrebno zadovoljiti kako bi se sve to prikazalo na taj način.

Struktura početne stranice izgleda ovako i ovdje je posebno zanimljiva funkcija prikaziJedanBlogPost() pomoću koje prosljeđujem potrebne podatke na stranicu za prikaz pojedinačnog blog posta.

Još jedna zanimljiva stvar u home.html je KategorijaPipe koja služi za dohvaćanje naziva kategorije na osnovu ID-a.

Naravno, potrebno je još o svemu tome obavijestiti app.module.ts

Uz nešto malo CSS-a

Kao što se može vidjeti u home.ts za prikaz vremena u željenom obliku koristio sam Moment.js

Pojašnjenje funkcija:

  • prikazBlogPostova() – dohvaća popis blog postova i kreira niz (array) jedanBlogPost
  • dohvatiUrlSlike() – dohvaća URL slike pojedinačnog blog posta na osnovu parametra idslike: res[i].featured_media iz gornje funkcije
  • ucitajKategorije() – dohvaća kategorije za blog post

Klikom na naslov ili sliku blog posta otvara se jedan blog post. Stranica jednog blog posta kreirana je sljedećom naredbom

Dok je struktura ovakva

Funkcionalnost stranice za prikaz jednog blog posta ne radi ništa osim dohvaćanja proslijeđenih podataka s prethodne stranice s popisom svih blog postova pomoću objekta NavParams.

Zaključak

Struktura projekta prema package.json izgleda ovako

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.

Google Drive REST API & Ionic 2 – prikaz podataka

U ovom ćemo blog postu napraviti primjer Ionic 2 aplikacije koja prikazuje podatke izravno s Google Diska pomoću Google Drive REST API-ja.

Najveći fokus biti će na postavljanju Google Drive API-ja kako bi dobili URL, na koji ćemo slati GET zahtjev, koji se onda može koristiti u svim vrstama mobilnih i web aplikacija. Ovdje je sada slučajno ispalo da će se prikaz vršiti u Ionic 2 aplikaciji, ali isto tako mogli smo napraviti običnu Angular 2 web aplikaciju ili nešto treće.

Jedna od najvećih prednosti korištenja Google Drive API-ja je što ne morate raditi svoj API jer to ipak zahtjeva nešto više vremena i znanja kako bi se sve postavilo i bilo spremno za korištenje. U ovom slučaju Google se brine za sve, a na vama je samo da smislite način kako najbolje iskoristiti to što vam Google nudi unutar svoje web ili mobilne aplikacije.

Google API Manager

Na adresi https://console.developers.google.com/ ćemo kreirati aplikaciju za koju trebamo API key.

Google Developers API

Nakon što smo to napravili trebamo odobriti (Enable) Google Drive API.

Google Developers API Enable

Google Developers Drive API

Sada moramo kreirati pristupne podatke (Credentials) kako bi Google znao da imamo pravo pristupiti podacima unutar Google Drivea.

Google Developers API Create-credentials

U ovom slučaju mi ćemo koristiti API key. Više o ostalim vrstama autentifikacije možete saznati ovdje.

Google Developers API Create credentials

API key uspješno kreiran.

Google Developers API key created

Nakon što je API key kreiran imamo mogućnost pozabaviti se njegovom sigurnošću. U ovom primjeru opciju sigurnosti ćemo ostaviti kao None jer će ovaj blog post dobiti značajno na dužini i kompleksnosti ako krenem sve opcije detaljno objašnjavati. Također, nakon objave ovog blog posta API koji smo kreirali ću ugasiti tako da neće biti sigurnosnih problema. Vi nipošto nemojte svoj Google Drive API ostaviti tako nezaštićen.

Google Developers API key restriction

Google Drive API URL

Kako bi mogli prikazati podatke iz Google Drivea osim API keya trebamo i ID mape iz koje želimo vući podatke. Više o tome na API Reference.

Na Google Driveu sada imamo mapu ZaIonic2Aplikaciju unutar koje se nalaze još dvije mape, nekoliko fotografija i jedan Word dokument.

Iz URL-a https://drive.google.com/drive/folders/0BzVqFZUj1VDhYnk4dkZ1NGVRWUE ćemo izvući ID mape 0BzVqFZUj1VDhYnk4dkZ1NGVRWUE .

ZaIonic2Aplikaciju GoogleDrive mapa

Sada još samo trebamo postaviti u opcijama naše mape da je vidljiva javno.

Google Drive Folder Share

I konačno, naš API URL izgleda ovako https://www.googleapis.com/drive/v2/files?q='0BzVqFZUj1VDhYnk4dkZ1NGVRWUE'+in+parents&key=AIzaSyC6Ifro0MzucXPKM-LpKNB2M-dP6U1yPYU.

API sada možemo testirati koristeći Postman. Rezultat je array sa objektima.

GoogleDrive API rezultat

Ionic 2 aplikacija

Ovako to izgleda kada se API koristi unutar Ionic 2 aplikacije. Kako to postići možete saznati u jednom od prethodnih blog postova pod nazivom “Ionic 2 – prikaz JSON-a sa API-ja“.

Pomoću parametra mimeType možemo si filtrirati npr. samo mape, fotografije i dr.

GoogleDriveAPI Ionic2

Zaključak

Kada radite aplikaciju u kojoj želite prikazati neke podatke jedna od mogućnosti je korištenje Google Drive API-ja. U ovom ste blog postu mogli vidjeti koliko je jednostavno postaviti funkcionalan API o kojemu kasnije ne morate previše brinuti za razliku od opcije da radite svoj NodeJS & ExpressJS API.