Getting started with Hybrid development with Ionic – Part 1: System Setup

So, let’s just dive in and get the dev machine setup. We are going to be using Apache Cordova, Ionic, and AngularJS frameworks. And we’ll get Jasmine and Karma setup for testing. We will also use npm (node package manager) to install these libraries, so let’s get that installed first.

Install nodejs using the install link at nodejs.org. Then let’s ensure we have the latest version by running this as administrator.

npm install npm -g

We also need the Java JDK (not just JRE). That can be downloaded and installed from here. Just follow the instructions, and ensure it’s in your PATH when complete.

Now let’s get Apache ANT from here, and install it.

Also required is the Android SDK. Just follow the instructions, and run the Android SDK Manager to install the latest SDK Platform. Cordova requires the ANDROID_HOME environment variable. This should point to the android-sdk directory.

Now that we have npm, let’s install cordova and ionic as administrator.

npm install -g cordova
npm install -g ionic

Now, navigate to the location you want to create your application. And generate a blank ionic app with

cd c:\source\
ionic start helloworld blank

NOTE: I had a problem here, I received the following error: “Unable to add plugins. Perhaps your version of Cordova is too old. Try updating (npm install -g cordova), removing this project folder, and trying again. (CLI v1.3.2)”. However, nothing I did solved the problem. Turns out, for some reason, my helloworld/config.xml was blank. You can fetch a new config.xml here, replace the empty one, and things should start working.

Open the helloworld folder and let’s add the android platform, and run the blank app

cd helloworld 
ionic platform add android
ionic serve

ionic_serve

Or connect your android device by usb, and load the application on it with

ionic run android

You can also run it in the Android emulator, but I don’t recommend it, as it’s slooooooow.

ionic build android
ionic emulate android

Next we’ll start adding some code and tests.

Website Pin Facebook Twitter Myspace Friendfeed Technorati del.icio.us Digg Google StumbleUpon Premium Responsive