Getting Started With Ionic

May 6, 2015

In this blog post we will explore the Ionic Framework for building the Hybrid Mobile Applications. Before we jump into the actual framework let's briefly understand what a Hybrid Mobile application is and why it is becoming more and more popular approach for building the Cross Platform Mobile Applications.

What is Hybrid Mobile Application ?

As we all know, there are three major Mobile Ecosystem are widely popular these days. iOS, Android and Windows and than there are rest of them. And I am sure you have switched between at least 2 of these major Ecosystems in last few years. And while switching the platform you expect that the apps you love on one platform is available on other one. Which is a fair expectation but if you are developer you what that means.

  • You need to learn Objective C, Java and C# to build your application on three major platforms.
  • Continue enhancing, upgrading your applications as the new version are released by platform vendors.
  • Take this approach to an Enterprise and they are faced with even bigger challenges.

In order to solve these type of problems Developer community in general has come up with the idea of building Hybrid applications. Hybrid application is the approach of building your mobile apps using Native Device features along with Web Technologies and deliver them in a Native shell so it just feels like any other regular app. The benefits..

  • Reuse existing Web Technologies/skills HTML5,CSS3,JavaScript
  • Write your code only in JavaScript
  • And still run your application on wide range of devices from different vendors
  • Utilizing the Native Device specific features like Camera,Mic and other sensors (And that is possible through the Cordova platfrom.)

So hopefully this gives you some idea of what a Hybrid application is. There are numerous frameworks out there helping you build these types of apps but Ionic seems to be getting a lot of popularity in the community. So I decided to explore that a bit and this blog post series is a result of that.

Prerequisites for Ionic

Ok so it's not so much of a prerequisite but if you have some idea about following technologies it certainly make life litter easier while learning Ionic framework. So it's good to have basic idea about,

  • NodeJS
  • AngularJS
  • Corodova
  • Web API (At a later point in the series I will show you how to connect your Ionic App with .Net Web API)
  • Basic Sublime Text

Installing Ionic

First things first, in order to work with Ionic you need to have NodeJS installed. If you already have it installed great, if not you can read the blog post I did for on how to install NodeJS on Windows 8.

Once NodeJS is installed, we will use the npm packages provided by Ionic framework to download and setup the Ionic Framework.

Install Ionic & Cordova globally.

npm install -g cordova ionic

And that's it. We are now ready to build our first Ionic application. The framework comes with a very powerful CLI so we can pretty much stay with the command line tool and build our Ionic application right form there, let's do it.

Create Ionic Blank Application

That's right. Ionic out of the box gives you template to create one of the 3 Types of application.

  • Tabs
  • Sidemenu
  • Blank

We will start with the blank first.

ionic start IonicDemo blank

Now it might ask you to create account. You can go ahead and create one if you don't have or simply say no if you have one.

Next navigate into the Project directory for our application. We need to add platforms for which we are building the application. For this blog we will only add the Android platform.

ionic platform add android

Next, let's build the application for android.

ionic build android

You might get the error saying "Command failed with exit code 2 You may not have the required environment or OS to build this project".

One of the reason this might happen is that you do not have Android SDK installed or it's not configured properly. To fix this issue, visit this site and download the Android SDK installer.

Again, this could be just one of the reasons. Other reasons might be, not having proper environment variables setup up, version conflict on Andorid build tools. So you will have to do little digging on the web to find the solution.

Getting Started With Ionic

Ok, once that is fixed we can go ahead and run the build command again. If everything builds fine, you can go to the project folder and you will find the actual .apk compile which you can now install on your Android Device for testing.

For now, let's just run the application in the emulator. For the emulator I would like to use Genymotion but for now you can just use the default emulator that comes with Android SDK. so go ahead and run following command. Depending on the machine you have, it will take good amount of time before you can see the application running.

ionic emulate android

If you happen to have Genymotion configured you need to run slightly different command.

ionic run android

You can learn more about configure Geneymotion here.

Getting Started With Ionic

That's it. You have built your first Hybrid application using Ionic framework. Let's also configure the Sublime Text 3, as we will be using that as our primary Editor for this series.

I have already done a separate blog post on how to setup a Sublime Text Project so please refer to this post.

After successfully following above post, you should be able to easily open and close the entire Ionic application as one project just using Sublime Text IDE.

Writing Code

Now that all the plumbing work is done, let's go ahead and explore code a little bit. Particularly the folder we are interested in is www it's sub folders and files inside those folders.

Getting Started With Ionic

  • style.css : You will add your application specific styles here
  • app.js: This is the main JavaScript file which contains our AngularJS application
  • index.html : This is one and only View of our application as of now.

Let's go ahead and update the index.html view to make it look like a login page. From here on, the code changes we will be making requires knowledge of AngularJS and little of Angular directives for Ionic.

Getting Started With Ionic

We have two sections on the page. Header and the View. And than there are Ionic specific classes inside a form tag. The ultimate result looks like below.

Getting Started With Ionic

You might have noticed that this screen shot is not using an Emulator but instead its running on Google Chrome browser. This is another great feature of Ionic CLI.

If you are making UI changes and want to quickly validate the result you do not have to run Emulator all the time. There is a live reload feature built right into it. Meaning you can run following command and there will be live reload of your app. Any changes you make on .html,.css,.js files, it will reload the applicatino in the browser.

ionic serve --server localhost

Ok, once you get this running let's quickly check how the live reload works. Make a simple change in our login page's header section to have css class bar-assertive instead of bar-stable.

Getting Started With Ionic

Go back to the browser where the app was running and you will see the style of the header has been changed as below.

Getting Started With Ionic

Okey, this seems like a good stoping point. In the next few articles we will see how to extend the application and setting up the SCSS for Ionic framework in case you decide to use color other than provided by Framework out of the box.