Membuat aplikasi android untuk blog wordpress

Sekarang sangat mudah untuk membuat aplikasi android atau iOS

dan kali ini saja akan membuat tutorial cara membuat nya

Pertama kamu harus install ionic dan WordPress plugin WordPress REST API(Version 2), kalau kamu belum pernah install ionic kamu harus install dulu Setelah itu kamu buat project ionic dengan cara

ionic start appwp blank --v2

ketik itu di terminal/cmd, kalau anda memakai Windows kamu harus buka cmd dengan run as administrator

Setelah berhasil buat project sekarang kamu test, apakah project sudah bisa apa belum

Cara nya masuk ke directory project yang tadi kamu buat, karena tadi saya membuat nama project nya appwp jadi tulis

cd appwp

di terminal/cmd. setelah itu kamu ketik

ionic serve

Nanti kalau berhasil akan terbuka browser dengan tampilan ionic

Selanjutnya kamu buka lagi 1 termnial/cmd dan masuk ke directory project yang di buat tadi. Setelah itu kita buat provider dan ketik

ionic g provider api

Di terminal/cmd

Dan buka api.ts di dalam folder providers/api dan ganti isi dengan ini

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the Api provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class Api {

  constructor(private http: Http) {}

  index(id){
    return this.http.get('http://localhost/ionWordpress/wp-json/wp/v2/posts/?_embed&?filter[order]=DESC&filter[posts_per_page]=5&page='+id)
  }

}

Di baris 17 http://localhost/ionWordpress nya ganti dengan link blog anda

Setelah itu buka file home.ts dan ganti isi nya dengan ini

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Api} from '../../providers/api/api';

@Component({
  templateUrl: 'build/pages/home/home.html',
  providers: [Api]
})
export class HomePage {
  datas:any;
  constructor(public navCtrl: NavController, private api: Api) {
    api.index(1).subscribe( data => {
      this.datas = data.json();
    });
  }
}

Baris yang saya kasih tanda itu gunanya untuk memangil provider yang tadi kita buat

Setelah itu buka home.html dan ganti isi nya dengan ini

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <ion-card *ngFor="let data of datas">

    <ion-item *ngFor="let author of data._embedded.author">
      <ion-avatar item-left>
        <img src="{{author.avatar_urls['24']}}"/>
      </ion-avatar>
      <h2>{{author.name}}</h2>
      <p>{{data.date | date:'dd/MM/yyyy'}}</p>
    </ion-item>

    <div *ngFor="let thumbnail of data._embedded['wp:featuredmedia']">
      <img
        src="{{thumbnail.media_details.sizes.full.source_url}}"
        *ngIf="thumbnail.source_url"/>
    </div>

    <ion-card-content>
      <ion-card-title>{{data.title.rendered}}</ion-card-title>
      <div [innerHTML]="data.excerpt.rendered">
        {{data.excerpt.rendered}}
      </div>
    </ion-card-content>

    <button full primary padding>READ MORE</button>

  </ion-card>

</ion-content>

Video pembuatan: <a href='https://www.youtube.com/playlist?list=PLMEbEXZJWgoSKrHAAqPRhdL4DL56687AG'>https://www.youtube.com/playlist?list=PLMEbEXZJWgoSKrHAAqPRhdL4DL56687AG</a> Blog: <a href='http://ardyhim.com'>http://ardyhim.com</a>