In this post we have explained about how to build an Ionic 2 App for both android and IOS.  Ionic 2 is a free open source. Ionic 2 used to develop hybrid mobile applications.

See our demo video on Youtube:

Let’s see the installation steps of Ionic 2.

Open your command line or git bash and run this command

$ ionic start phpexpertise tutorial --v2

In above line, tutorial is a type of template which is provided by Ionic team.

Listed out their other templates names and choose it as your wish.

• tabs : a simple 3 tab layout
• sidemenu: a layout with consists menu on the side
• blank: a basic template page
• super: starter project with over 14 ready to use page designs
• tutorial: a guided starter project.

See the installations process image,

Once you have installed ionic 2. Open Visual Code editor and see their folder structure.

Run the ionic 2 app. Use below command

$ ionic serve
or 
$ ionic serve -ls

Here -ls means, this provide the output in terms of three platforms are Android, Windows and IOS.

For example we have explained about how to integrate wordpress blog feeds into Ionic mobile app.

Step 1:

Click here to Install WordPress REST API  plugin.

Step 2:

If your wordpress is less than 4.5 please add this line in wp-includes/meta.php

function get_registered_meta_keys( $object_type ) {
    global $wp_meta_keys;
 
    if ( ! is_array( $wp_meta_keys ) || ! isset( $wp_meta_keys[ $object_type ] ) ) {
        return array();
    }
 
    return $wp_meta_keys[ $object_type ];
}

Step 3:

• Review your api response
• For getting all posts – www.yourdomain.com/wp-json/wp/v2/posts
• For all categories – www.yourdomain.com/wp-json/wp/v2/categories
• For category by Id – www.yourdomain.com/wp-json/wp/v2/categories/{id}
• For post by Id – www.yourdomain.com/wp-json/wp/v2/posts/{id}

Step 4:

Implement dynamic category edit the file in pages > list > list.ts

Update this line in your file.

export class ListPage {
  selectedItem: any;
  items: Array<{title: string}>;
  posts: any;
  url: string = "http://www.yourdomain.com/wp-json/wp/v2/categories";

  constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');
    this.posts = this.http.get(this.url).map(res => res.json()).subscribe(data => {
      this.posts = data;
      this.items = [];
      for (let i=0; i< this.posts.length; i++) {        
        this.items.push({
            title: this.posts[i].name
        });
      }
    });
  }

Step 5:

Implement above logic in template file too. Open  template file in pages > list > list.html

Replace this line.

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="feedTapped($event, item)" color="category">
      {{item.title}}
      <div class="item-note" item-right>
        {{item.note}}
      </div>
    </button>
  </ion-list>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>
</ion-content>

Step 6:

See the Output is

Step 7:

Implement your blog feeds in home page of app. Edit the file in Pages > hello-ionic > hello-ionic.ts

Update this line in that file.

export class HelloIonicPage {  
  posts: Array<{title: string, content: string, target: string}>;
  response: any;
  url: string = "http://www.yourdomain.com/wp-json/wp/v2/posts";

  constructor(public navCtrl: NavController, public http: Http) {
    // If we navigated to this page, we will have an item available as a nav param    
    this.response = this.http.get(this.url).map(res => res.json()).subscribe(data => {
      this.response = data;
      // console.log(this.response[0].link);
      this.posts = [];
      for (let i=0; i< this.response.length; i++) {        
        this.posts.push({            
            title: this.response[i].title.rendered,
            content: this.response[i].content.rendered,
            target: this.response[i].link,
        });
      }      
    });    
  }

Step 8:

In home page, we have title, image and content (only show around 50 words).

In our response does images means, you may filter that from the lists also limit your content to display in the front page.

So following code added in your Pages > hello-ionic > hello-ionic.ts

 getImage(content) {
      var myRegexp = new RegExp(/<img.*?src="(.*?)"/);
      var match = myRegexp.exec(content);
      if (match){
          return match[1];
        }
  }

  getContentSnippet(str) {
      return str.split(/\s+/).slice(0, 50).join(" ")+"...";
  }

Step 9:

Update that template file in pages > hello-ionic > hello-ionic.html.

Here we have used <ion-card> </ion-card> for display post title, image and content.

<ion-content padding>
  <ion-card *ngFor="let article of posts" (click)="itemTapped($event, article)">
     <ion-item class="item-text-wrap">
        <h4 class="wrap">{{article.title}}</h4>
        <p>{{article.date | date}}</p>
    </ion-item>
    <img src="{{getImage(article.content)}}" *ngIf="getImage(article.content)">
    <ion-card-content>
      <p [innerHTML]="getContentSnippet(article.content)"></p>      
    </ion-card-content>
</ion-card>

</ion-content>

See the output like this.

Hope you this post will create an impact to you. Develop your first mobile app.