Thursday, March 16 2017
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 layoutsidemenu
: a layout with consists menu on the sideblank
: a basic template pagesuper
: starter project with over 14 ready to use page designstutorial
: 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:
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(https://www.phpexpertise.com/<img.*?src="(.*?)"https://www.phpexpertise.com/); 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>
Hope you this post will create an impact to you. Develop your first mobile app.