{"id":5051,"date":"2018-03-04T19:47:30","date_gmt":"2018-03-04T17:47:30","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=5051"},"modified":"2019-01-05T19:50:27","modified_gmt":"2019-01-05T17:50:27","slug":"ionic3-wordpress-rest-api-blog-postovi","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-wordpress-rest-api-blog-postovi\/","title":{"rendered":"Ionic 3 i WordPress REST API – prikaz blog postova"},"content":{"rendered":"

U ovom \u0107u blog postu napraviti primjer Ionic 3<\/em> aplikacije koja \u0107e prikazivati popis blog postova sa ovog bloga koriste\u0107i WordPress REST API<\/strong><\/a><\/em>.<\/p>\n

Na po\u010detnoj stranici biti \u0107e popis blog postova (naziv, vrijeme objave, kategorije<\/a>, kratak sadr\u017eaj i slika<\/a>) te \u0107e se mo\u0107i pristupiti svakom blog postu pojedina\u010dno. <\/p>\n

Kreiranje aplikacije<\/h2>\n

Za po\u010detak kreiram novu Ionic<\/em> aplikaciju<\/a> i odmah dodajem Android<\/em> platformu<\/a> kako bi kasnije mogao aplikaciju pokrenuti na Android<\/em> mobilnom ure\u0111aju.<\/p>\n

$ ionic start Ionic3WordPressBlog blank\r\n$ cd Ionic3WordPressBlog \r\n$ ionic cordova platform add android<\/pre>\n
API provider<\/h2>\n
Sada \u0107u kreirati API Provider<\/em> koji \u0107e slu\u017eiti kao centralno mjesto svih WordPress<\/em> URL-ova koje \u0107u koristiti unutar Ionic<\/em> aplikacije. <\/p>\n
$ ionic g provider ApiProvider<\/pre>\n
Na URL-u<\/em> https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts<\/a> dohva\u0107am popis blog postova. Unutar ovog API-ja tako\u0111er imam dva vrlo bitna podatka, a to su  featured_media<\/span> i categories<\/span>  koji \u0107e mi poslu\u017eiti za dohva\u0107anje slike i kategorije svakog blog posta. <\/p>\n
\"Ionic<\/a><\/p>\n
import { HttpClient } from '@angular\/common\/http';\r\nimport { Injectable } from '@angular\/core';\r\nimport 'rxjs\/add\/operator\/map';\r\n\r\n@Injectable()\r\nexport class ApiProvider {\r\n\r\n  osnovniUrl: string = \"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/\";\r\n\r\n  constructor(public _http: HttpClient) {\r\n    console.log('Hello ApiProvider Provider');\r\n  }\r\n\r\n  blogPostovi(){\r\n    return this._http.get(this.osnovniUrl + 'posts')\r\n    .map(data => Object.keys(data).map(k => data[k]))\r\n  }\r\n\r\n  slikaBlogPosta(a:any){\r\n    return this._http.get(this.osnovniUrl + 'media' + a)\r\n    .map(data => Object.keys(data).map(k => data[k]))\r\n  }\r\n\r\n  kategorijaBlogPosta(){\r\n    return this._http.get(this.osnovniUrl + 'categories\/?per_page=100')\r\n    .map(data => Object.keys(data).map(k => data[k]))\r\n  }\r\n\r\n}<\/pre>\n
Prikaz blog postova<\/h2>\n
Aplikacija \u0107e na kraju izgledati ovako:<\/p>\n
\"Ionic<\/a><\/p>\n
Kao \u0161to se mo\u017ee vidjeti na po\u010detnom ekranu nalazi se popis zadnjih 10 blog postova. Svaki blog post ima naslov, sliku, kratak sadr\u017eaj i vrijeme proteklo od objave. Nekoliko preduvjeta je bilo potrebno zadovoljiti kako bi se sve to prikazalo na taj na\u010din. <\/p>\n
Struktura po\u010detne stranice izgleda ovako i ovdje je posebno zanimljiva funkcija  prikaziJedanBlogPost()<\/span>  pomo\u0107u koje proslje\u0111ujem potrebne podatke na stranicu za prikaz pojedina\u010dnog blog posta.<\/p>\n
<ion-header>\r\n  <ion-navbar>\r\n    <ion-title>\r\n      Ionic3WordPress\r\n    <\/ion-title>\r\n  <\/ion-navbar>\r\n<\/ion-header>\r\n\r\n<ion-content>\r\n \r\n  <ion-card *ngFor=\"let post of jedanBlogPost; let i = index\" tappable>\r\n    <div *ngFor=\"let slika of jednaSlika; let i = index\" (click)=\"prikaziJedanBlogPost({id:post.id, naslov:post.naslov, sadrzaj: post.sadrzaj, urlslike: slika.putanjaSlike, index: i})\">\r\n        <div *ngIf=\"post.id == slika.idBlogPosta\">\r\n         <img [src]=\"slika.putanjaSlike\">\r\n         <span class=\"vrijeme\"><ion-icon name=\"time\"><\/ion-icon> {{ post.vrijeme }}<\/span>\r\n         <span class=\"kategorija\"><ion-icon name=\"ios-bookmark-outline\"><\/ion-icon> {{post.kategorije | KategorijaPipe:kategorije}}<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <ion-card-content (click)=\"prikaziJedanBlogPost({id:post.id, naslov:post.naslov, sadrzaj: post.sadrzaj, urlslike: slika.putanjaSlike, index: i})\">\r\n          <ion-card-title [innerHTML]=\"post.naslov\">\r\n          <\/ion-card-title>\r\n          <div [innerHTML]=\"post.uvod\"><\/div>\r\n        <\/ion-card-content>\r\n<\/ion-card>\r\n\r\n<\/ion-content><\/pre>\n
Jo\u0161 jedna zanimljiva stvar u home.html<\/strong> je KategorijaPipe<\/span> koja slu\u017ei za dohva\u0107anje naziva kategorije na osnovu ID-a. <\/p>\n
$ ionic generate pipe KategorijaPipe<\/pre>\n
import { Pipe, PipeTransform } from '@angular\/core';\r\n\r\n@Pipe({\r\n  name: 'KategorijaPipe',\r\n})\r\nexport class KategorijaPipe {\r\n\r\n  transform(value, args) {\r\n    let output = '';\r\n    value.forEach(function(number){\r\n      output = output + ' ' + args[number]\r\n    })\r\n    return output;\r\n  }\r\n}<\/pre>\n
Naravno, potrebno je jo\u0161 o svemu tome obavijestiti app.module.ts<\/strong><\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\r\nimport { ErrorHandler, NgModule } from '@angular\/core';\r\nimport { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';\r\nimport { SplashScreen } from '@ionic-native\/splash-screen';\r\nimport { StatusBar } from '@ionic-native\/status-bar';\r\n\r\nimport { MyApp } from '.\/app.component';\r\nimport { HomePage } from '..\/pages\/home\/home';\r\nimport { ApiProvider } from '..\/providers\/api\/api';\r\n\r\nimport { HttpClientModule } from '@angular\/common\/http'; \r\nimport { KategorijaPipe } from '..\/pipes\/kategorija\/kategorija';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    MyApp,\r\n    HomePage,\r\n    KategorijaPipe\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    IonicModule.forRoot(MyApp),\r\n    HttpClientModule\r\n  ],\r\n  bootstrap: [IonicApp],\r\n  entryComponents: [\r\n    MyApp,\r\n    HomePage\r\n  ],\r\n  providers: [\r\n    StatusBar,\r\n    SplashScreen,\r\n    {provide: ErrorHandler, useClass: IonicErrorHandler},\r\n    ApiProvider\r\n  ]\r\n})\r\nexport class AppModule {}<\/pre>\n
Uz ne\u0161to malo CSS-a<\/em><\/p>\n
page-home {\r\n\r\n    .vrijeme {\r\n        position: relative;\r\n        color: #fff;\r\n        background-color: #3F9FCF;\r\n        padding: 1px;\r\n    }\r\n\r\n    .toolbar-background {\r\n        background-color: #3F9FCF;\r\n    }\r\n\r\n    .toolbar-title {\r\n        color: #fff;\r\n    }\r\n\r\n    .kategorija {\r\n        position: absolute;\r\n        right: 10px;\r\n        background-color: #3F9FCF;\r\n        color: #fff;\r\n        padding: 1px;\r\n    }\r\n\r\n}<\/pre>\n
Kao \u0161to se mo\u017ee vidjeti u home.ts<\/strong> za prikaz vremena u \u017eeljenom obliku koristio sam Moment.js<\/a><\/strong><\/em><\/p>\n
Poja\u0161njenje funkcija:<\/p>\n