Ionic 3 i WordPress REST API - prikaz blog postova

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

Objavio

Tomislav Stanković

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *

Ova web-stranica koristi Akismet za zaštitu protiv spama. Saznajte kako se obrađuju podaci komentara.