Ionic is an open source mobile SDK, which helps us building hybrid mobile applications(Uses HTML, CSS and JavaScript). Ionic is built on top of Angular framework. Ionic uses cordova library to access native hardware features like access to camera, blue-tooth, etc.

ionic_logo

Setting Up Development Environment:

Following are the necessary tools required to set up Ionic development environment:

  • Node.js : Download the node.js from : https://nodejs.org/en/ Since the Ionic framework is built on top of Node, we need to install Node.js in order to develop  Ionic applications. Once the node is installed, we can check version of node by using command: node -v. Also to check installed npm – package manager, we can use the command npm -v.
  • Ionic CLI : Install Ionic CLI using command: npm install -g ionic. Once the Ionic CLI is installed, verify it using command: ionic -v.

Starting a new app:

Ionic CLI makes it easy to create Ionic applications. To create a new application, use the following command:

ionic start testApp

This command will generate ionic project in current directory. We can select a template to start with from available templates. Following are the few of the available official templates:

  • blank: Simple Template with a page.
  • tabs: A 3 tab layout
  • sidemenu: Layout with side menu.
  • super: A layout with different ready to use designs.
  • tutorial: Guided starter project.

To list all available templates, run the following command. This command will list all available starter templates:

ionic start –list

To check the created application, navigate inside the application directory and run the following command:

ionic serve

This will open the created application in the web browser.

Now, let’s test our testApp using browser. Navigate inside testApp directory, and run ionic serve command. This will open our app in the  default system browser. We should get the following ionic application page.

ionic_blank_template

Note: We have used ionic app starter template blank for our testApp.

Adding mobile platforms:

To view our app in emulator or devices, first we need to install respective device platforms. To add target platforms, navigate inside created ionic project directory, and use following command. Here platformname is android/ios/ windows:

ionic cordova platform add [platformname]

Previewing app on emulator: 

To view the app on an emulator, use the following command:

ionic cordova emulate [platformname] 

Previewing on Devices:

To view the app on real devices, we can use the following command:

ionic cordova run [platformname]

Following are the used versions details:

Ionic_version_dtls

In this post, we created a sample ionic app with blank starter template. We also saw how to test our created app using browser, emulator and on a real time device.