Getting started with Ionic

Of late, I have started working on hybrid mobile application development using Cordova, HTML5, JS, CSS. I was quite fortunate to have started my learning with this awesome framework called ionic. Ionic is a framework built on top of angular js, and is purely meant for hybrid mobile applications development. Ionic offers different components like angular extensions for commonly used/required mobile UI controls, CSS which creates a percentage based layout, and icons which offers a rich icon set primarily for ios and android.  Apart from all of these, the most useful and the powerful component from ionic is the Ionic CLI (command line utility). They have painstakingly taken care of most of the developer productivity concerns and addressed them. In this post, I will walk through some of the basic commands and options available in ionic CLI to get started.

Installing ionic:

Ionic is available as a node package. So, getting started with ionic is as simple as installing the package using npm. The latest available version as of this post is 1.3.3.

$ npm install -g ionic

Ionic requires cordova under the hood for building the application for multi-platform. So install cordova using the below command

$ npm install -g cordova

Creating Projects with ionic:

Creating projects using ionic is much more simpler, as it offers seed projects/templates for the most frequently used mobile UI layouts. To name a few,

1. blank – a vanilla angular js based seed application
2. sidemenu – brings out an application with a side menu bar view
3. tabs – bring out an application with a tabbed view

$ ionic start <app-name> blank|sidemenu|tabs

If no options are provided, “tabs” is considered by default.

Running the project:

Ionic offers multiple options to run the application.

Run in the browser

To run the application in a browser, navigate to the application’s root directory and run the below command. Make sure “www” folder is present inside the directory from where this command is triggered.

$ ionic serve

The output of the above command will be like this, it also shows other options that are available when the application is running.

Running dev server: http://localhost:8100
Running live reload server: http://localhost:35729
Watching : [ ‘www/**/*’, ‘!www/lib/**/*’ ]
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit

This will serve the application under a node server. This would also start a live reload server, which I found is another great value addition. Live reload server will watch for any changes inside “www” folder and automatically reload the same in the browser. So, as you make any change and click save in your favourite editor, the change would get automatically refreshed in the browser(s).

Another cool feature about “ionic serve” is the side by side android/ios view of the application. Running the below command just does that.

$ ionic serve --lab

In the below screenshot, the left is iOS and the right is android’s view of the sample ionic tabs application.

Adding platforms to the project:

Adding platforms to the project is similar to the Cordova command

$ ionic platform add android
$ ionic platform add ios

Building for android platform requires android SDK/build tools to be available in the machine as pre-requisite. Building for iOS requires Mac OS X machine with XCode

Building for specific platforms is done via the below commands

$ ionic build android
$ ionic build ios

Running in the emulator:

Android emulation requires AVDs be configured appropriately in the machine, if it’s not configured, run the below commands to configure the same.

$ android list targets
$ android create avd -n name -t targetID 

targetID – the id of the target (listed by the first command) based on which the AVD needs to be created.

iOS simulation is possible only in MAC and it requires another node package to be installed. Run the below command to install the same

$ npm install -g ios-sim

Now you are all set to emulate your ionic application using the below commands.

$ ionic emulate android
$ ionic emulate ios

Running in the device:

If an android/ios device is plugged in via USB to the machine, then “ionic run” commands will deploy the application to the device directly. Make sure the target device is detected by the machine before running these commands. In case of android, run the following command to confirm the device is detected by the machine

$ adb devices -l

In case of iOS, the appropriate developer certificate and the provisioning profile need to be set for the application. These can be set by opening “yourprojectname.xcodeproj” once in XCode.

Below command runs the application in their corresponding devices

 
$ ionic run android 
$ ionic run ios

So, that’s a quick sneak peek of the basic yet powerful commands that ionic offers. There are still a lot more useful commands that ionic offers. These would be a good to know stuffs to get started with ionic. And of course Ionic’s documentation is a very comprehensive one covering all the aspects making it very easy and smooth for anyone to learn. A lot of working examples are available in codepen as well.