Beginner guide to build "Hybrid Mobile Application" Using "Ionic Framework"

Welcome!,

  This is my first post so sorry for the "English" but suggestions are highly accepted. Today i am going to show how you can develop mobile application without knowledge of  Android and objective c that is IOS.

  The prerequisites for this post is that you need to know two most popular JavaScript angular and nodejs. Also you need following tools

• Node Js
• Any Text Editor that you prefer for javascript development ( I prefer WebStorm)

     

      Before we begin it is important to know what is ionic.

• What is the IONIC?

                  IONIC is open-source Framework built on the top of angularjs. it  helps you to build native feeling mobile apps all with web technologies like HTML, css and JavaScript. its specifically built for cordova native apps. 
    
        The main focus of ionic is look and feel, and UI integration of your app. it doesn't replace hybrid mobile development framework like Phonegap but it simply fit with this kind of framework. more you can find on ionic documentation.

Lets get started with the development. i assume that you have pre-installed node js. now i will show you how to install ionic framework using node. For this open command prompt and run following command.

• npm install ionic -g

this command will install ionic framework for you and '-g' indicates that it will install globally so you don't need to install again and again for each of your project.

now install the cordova to do this run following command.

• npm install cordova -g

now we are ready with ionic and cordova, now lets start new project with the help of following command.

• ionic start ProjectName blank

 This command create blank project for you. Here start is command line feature provided by ionic framework, there are many other command line feature available like

• serve - this will start local development server
• platform - this will set the target platform for your app (android/ios)
• build - this will locally build your app
• emulate - this will emulate your app in simulator 
• run - to run your app

i am going to create HelloWorld using the above command, when you run the command it will start downloading of master template from git repository as shown in following screenshot.

 and create new folder "HelloWorld" in your given path. Find directory and you will find some folder and configuration files in it like 

this is the default pattern for developing app using ionic framework. so if your are planning to develop your customized app then you have to follow this pattern.

• hooks - this contains information related to the platform of your app
• plugins - this contains plugins that were used in your app like "ionic keyboard" etc.
• scss - this contains style sheet "ionic.app.scss" is the styler provided by the ionic framework.
• www - this will contains main application files.

ionic provide three ways to test your application

• serve - using this command you can test your application in local browser
• emulate - using this you can test your app in local simulator (android-sdk must be installed)
• device - it means you can test your app on device by the help of the run command.

now go into "www" directory you will find start page of your app that is "index.html" add following snippet in to body tag

 <ion-pane>

      <ion-header-bar class="bar-stable">

        <h1 class="title">Ionic Blank Starter</h1>

      </ion-header-bar>

      <ion-content>

 <label>Hello World!</label>

      </ion-content>

    </ion-pane>

to run your app in local browser use following steps

• go to the project directory my is "c:\workspace\Helloworld"
• run ionic serve command

for example : c:\workspace\Helloworld > ionic serve

this command will start local development server for your app and you will see the output in your local browser as shown in below image.

i hope this is help full to you for quick start up with ionic framework.