Now after installing the required tools which will enable us to compile our projects, its our turn now to create our first android project in ionic.

We can create ionic apps using ready made ionic app templates or start a fresh from scratch and come with our own user interface design.Also,you can head to market Ionic.io  to have an overlook of more templates you can use.There are several templates you can use to build your mobile app when you are a starter.These include tabs,complex-lists,maps,side-menu,Sales-force and blank template.You can also check the available templates in your ionic version, go to command prompt and type, ionic start –-list as seen below.
How to create a simple mobile apps using html5 part 2
We will start by creating a folder where you want your projects to be stored. In the command prompt, type cd (name of your folder)  to set the directory of your projects and then type ionic start demoapp tabs as shown below.
How to create a simple mobile apps using html5 part 2
The ionic start demoapp tabs command means that our project name will be  "demoapp" and we will use tabs template as provided by Ionic.Also if you don’t specify your type of template, the ionic framework will assign you a default template which is tabs.

Now after the project has downloaded the required packages from GitHub repositories. If you are creating your project for the first time, you will see a query like  this the one below.

How to create a simple mobile apps using html5 part 2

This query would like you to verify if you have an ionic account with the frame and if you don’t have it, just type Y and you will be directed to a main ionic site to sign up for a ionic account .
This account will allow you enjoy some ionic services when you start hosting your app.After that, we can start our project in new development mode by typing ionic serve and there we will be presented with GUI with several local addresses, select localhost  because is the best option to use as seen below 

How to create a simple mobile apps using html5 part 2
Choosing the localhost address we are presented with another GUI which has the UI of our app as generated by tabs template As seen below.You can hover the app and click on each feature as its clickable.
How to create a simple mobile apps using html5 part 2

Now after that you can customize the template to suit your needs by opening it in sublime as seen below.

How to create a simple mobile apps using html5 part 2

The most important part here is index.html as it hosts the homepage of our application.Also find the javascript file inside js folder which contains the controllers and services of our app.
Finally, you can build the application and deploy it in Google play store or AppStore. To do this, we need to add platforms for ios and android by typing ionic platform add android or ionic platform add ios As seen here below.

How to create a simple mobile apps using html5 part 2
After that type ionic build Android and when its already compiled, you will see a  message seen like the one here below.
How to create a simple mobile apps using html5 part 2
Follow that directory in project folder to get the. Apk file which you will install in you phone gadget.Have fun

Post a Comment Blogger

  1. Thank you so much for sharing the information. The App developers in Kenya know the best strategies to develop the complex apps with ease.

    ReplyDelete

 
Top