Daftar dan Belajar Sekarang!

Membuat aplikasi android untuk blog wordpress

foto ardyhim
289 Kontribusi 172 Coto
3 tahun yang lalu
https://skspace.sgp1.digitaloceanspaces.com/forums/images/home.png 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: https://www.youtube.com/playlist?list=PLMEbEXZJWgoSKrHAAqPRhdL4DL56687AG Blog: http://ardyhim.com

Jawaban
foto jamilr
8 Kontribusi 7 Coto
3 tahun yang lalu
Bolehlah dicoba. Terima kasih udah berbagi

foto ardyhim
289 Kontribusi 172 Coto
3 tahun yang lalu
sama2 mas

foto jamilr
8 Kontribusi 7 Coto
3 tahun yang lalu
Ilmu baru, terima kasih udah berbagi http://jamil21.blogspot.co.id/2016/09/kumpulan-web-belajar-pemograman.html

foto agungwiseso
3 Kontribusi 0 Coto
3 tahun yang lalu
ionic 2 ini pakai angular 2 ya gan

foto ardyhim
289 Kontribusi 172 Coto
3 tahun yang lalu
iya. tapi waktu bikin tutorial ini saya pakai ionic 2 beta, sedangkan sekarang ionic 2 sudah versi rc jadi ada sedikit perbedaan


Login untuk diksusi di forum sekolah koding