Consuming WordPress Rest API with Ionic 2 -- Words (1289)

Consuming WordPress Rest API with Ionic 2

In this tutorial ,we are going to see how to build a cross platform mobile app and WordPress client for Android ,iOS and Windows Universal Platform using Ionic 2 or ,if you prefer ,Ionic 3 .

So if you have a WordPress website or blog and want to create a mobile version of it ,just follow with me . I'm going to cover all the required steps to build a mobile client which connects to and consumes the WordPress API .

Tutorial requirements


This tutorial has a few requirements ,you need to have the Ionic CLI installed .You also need to have a WordPress website installed either locally or remotely .

Prior to WordPress 4.7 ,you need to install the WordPress API plugin ,WP-API .For WordPress 4.7+ WP-API is integrated in the core so you don't have to do anything .

Generating a new Ionic 2 / Ionic 3 project


Lets get started by generating a new Ionic 2 / Ionic 3 project .Open your command prompt on Windows or your terminal on Linux/MAC and enter this :

ionic start wp-ionic blank --v2 

Wait until the command finishes and then enter into your project folder and serve it to make sure everything is OK .

cd wp-ionic 
ionic serve 

Integrating WordPress with Ionic 2


We are going to use a WordPress API client for JavaScript which is designed specifically to work with WordPress 4.7+ .If you are using WordPress 4.6 or a prior version with the old WP Rest API plugin some commands will not work .

First of all,get the client from this link .

Unzip the content of wpapi.zip into app/assets

Next open index.html of your Ionic 2 project and include the library before Ionic scripts .

<script src="assets/wpapi.js"></script>

That is all we need to do ,to be able to use the WordPress Rest API client within our Ionic 2 project .

Generating a provider


Now lets generate an Ionic 2 provider to encapsulate the WordPress Rest API client logic .Make sure you are under project directory then enter :

ionic g service WPService 

Open the generated provider from src/providers/wp-service.ts

To be able to access the client JavaScript API from TypeScript add

declare var WPAPI : any;        

Next lets connect to our WordPress API endpoint

@Injectable()
export class WPService {
wp : any ;

constructor(public http: Http) {

    console.log('Hello WPService Provider');
    this.wp = new WPAPI({ endpoint: 'http://localhost/wp-json' });
    console.log(wp);

}
//....
I'm using a local WordPress installation .If that is not your case you need to change the endpoint to point to your WordPress website domain name .

Make sure to add this provider to the list of providers at src/app/app.module.ts

import { WPService } from '../providers/wp-service';

@NgModule({
    /* .... */

providers: [
    StatusBar,
    SplashScreen,
    WPService,
    {provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule {}

Now lets generate a Posts page

ionic g page Posts 

Again include the page in src/app/app.module.ts

import { PostsPage } from '../pages/posts/posts';


@NgModule({
declarations: [
    MyApp,
    PostsPage
],
imports: [
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    PostsPage
],
providers: [
    StatusBar,
    SplashScreen,
    WPService,
    {provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule {}

Lets also add a menu to our app so we can access our page(s)

Open or add an app.html file in/from src/app and paste this code to create a menu which has links to all pages in our project

<ion-menu [content]="content">
<ion-header>
    <ion-toolbar>
    <ion-title>Menu</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-list>
    <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">

    </button>
    </ion-list>
</ion-content>

</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

You need to have the code at src/app.component.ts similar to this :

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { PostsPage } from '../pages/posts/posts';


    @Component({
    templateUrl: 'app.html'
    })
    export class MyApp {
    @ViewChild(Nav) nav: Nav;

    rootPage: any = PostsPage;

    pages: Array<{title: string, component: any}>;

    constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
        this.initializeApp();

        // used for an example of ngFor and navigation
        this.pages = [
        { title: 'Posts', component: PostsPage },
        ];

    }

    initializeApp() {
        this.platform.ready().then(() => {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        this.statusBar.styleDefault();
        this.splashScreen.hide();
        });
    }

    openPage(page) {
        // Reset the content nav to have just this page
        // we wouldn't want the back button to show in this scenario
        this.nav.setRoot(page.component);
    }
    }

Don't forget to add a button to toggle the menu on and off in your pages

<ion-header>
<ion-navbar>
    <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Posts</ion-title>
</ion-navbar>
</ion-header>
If you have generated your project based on the menu template ,you will have a menu already setup for you and you don't have to do all these steps .

The next step now is to inject the WPService provider via PostsPage provider :

Open src/pages/posts/posts.ts then add

/* ... */
import { WPService } from '../../providers/wp-service';

@Component({
selector: 'page-posts',
templateUrl: 'posts.html'
})
export class PostsPage {

constructor(public navCtrl: NavController, public navParams: NavParams ,private wpService : WPService) {}

ionViewDidLoad() {
    console.log('ionViewDidLoad PostsPage');
}
}

Go ahead and serve your project .

ionic serve 

You should see a console log printing the WPAPI object ,if everything goes right.

Consuming WordPress Rest API with Ionic 2

Displaying WordPress posts


After we have successfully integrated the WordPress Rest API client within our Ionic 2 app ,lets now fetch and display WordPress posts in our mobile app .

So go ahead and open app/providers/wp-service.ts and lets add a method to fetch posts using the Rest client API .

@Injectable()
export class WPService {
wp : any ;

constructor(public http: Http) {
    console.log('Hello WPService Provider');
    this.wp = new WPAPI({ endpoint: 'http://localhost/wp-json' });
    console.log(this.wp);

}
public posts(){
    return this.wp.posts().then(function( data ) {
        // do something with the returned posts
        //console.log(data);
        var paging = data._paging;
        var results = [];
        for(var i = 0; i < paging.total ; i++)
        {
            results.push(data[i]);
        }
        return results;
    }).catch(function( err ) {
        // handle error
        console.log(err);
        return err;
    }); 
}

}

Next open the PostsPage page and add this

@Component({
selector: 'page-posts',
templateUrl: 'posts.html'
})
export class PostsPage {
public posts ;

constructor(public navCtrl: NavController, public navParams: NavParams ,private wpService : WPService) {}

ionViewDidLoad() {
    console.log('ionViewDidLoad PostsPage');
    var that = this;
    this.wpService.posts().then(function(r){

        that.posts = r;
        console.log(that.posts);

    }) 
}
}

After fetching the posts ,we need to display them ,so open src/pages/posts/posts.html and add

<ion-content padding>
<ion-list>
    <button ion-item *ngFor="let post of posts" (click)="itemTapped($event, post)">
    <ion-icon name="list" item-left></ion-icon>
    { { post.title.rendered } }
    </button>
</ion-list>

</ion-content>

You should see a list of posts ,depending on the posts you have on your WordPress website .

Conclusion



That is the end of this tutorial ,It is just a basic demo showing how to use the WordPress Rest API in Ionic 2/3 apps but you can develop your app to include more advanced things such as fetching and displaying categories , add posts pagination and many other features .


I'm a web developer and technical writer. Passionate about modern JavaScript technologies and currently trying to develop all kind of apps (Web, Mobile and Desktop) with JavaScript.