How To Build Ionic 2 App For Andorid and Ios

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.

how-to-build-ionic2-app

Open your command line or git bash and run this command

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,

ionic_installation

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

Ionic project structure

Run the ionic 2 app. Use below command

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

Ionic Output Viewer Platforms

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

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.

Step 5:

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

Replace this line.

Step 6:

See the Output is

Ionic 2 side menu

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.

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

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.

See the output like this.Ionic 2 home page feed

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

Comments

comments

phpexpertise

I’m Blogger and Programming Blog, Tutorials, PHP, MySQL, jQuery, Laravel, Wordpress and Codeigniter