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.
We will start with the blank first.
ionic start IonicDemo blank
Now it might ask you to create ionic.io 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.