Build Your First Mobile App With The Ionic Framework - Part 2

In this post we are going to set up our development environment for building hybrid mobile apps with Cordova and the Ionic Framework.

==Update: This tutorial is for Ionic 1.x, you can find the Ionic 2 tutorial here.==

This post is part of a multi-part series: Part 1 - Introduction to Hybrid Mobile Apps
Part 2 - Set Up your Development Environment (this post)
Part 3 - Mockup with Ionic Creator
Part 4 - Test on Browsers, Emulators and Mobile Devices
Part 5 - Build out the App
Part 6 - Deploy to Testers with Ionic View

###Operating System You can use OS X, Windows and Linux to develop Android apps.

However, if you want to build iOS apps, you'll need OS X, which means you'll need an iMac or MacBook. If you don't have one and don't want to buy one, you can use PhoneGap Build or Telerik AppBuilder. These services will compile and sign your apps in the cloud.

I will be going through the setup of the development environment assuming you're using OS X.

If you're developing on another OS, there are some extra things you need to do. Read the official installation guide here.

###XCode XCode is the complete developer toolset for building Mac, iPhone, and iPad apps, including the Xcode IDE, performance analysis tools, iOS Simulator, and the OS X and iOS SDKs.

Install it for free from the Mac App Store.

###Android Studio Android Studio contains the Android IDE, Android SDK and Emulator. You can also just install the Android SDK on it's own because we won't be using the IDE for building our mobile app in this tutorial.

Before installing Android Studio or SDK, you'll need to install the Java Development Kit (JDK) 7.

Open Android Studio, if you get the message "Android Studio was unable to find a valid JVM", download and install this package.^[1]

###Genymotion The default Android Emulator is veeeeeeeeeery slooooooooow! Instead of the default emulator we can install the Genymotion emulator. Besides being fast, it also has 20 preconfigured mobile devices to emulate. You'll have to create an account (free) to be able to download it.

The Genymotion emulator uses VirtualBox, so install the latest version and then install Genymotion.

###Sublime Text You can use any text editor you like for developing your app but my favorite editor for HTML, CSS and JavaScript is Sublime Text. There are a lot of very helpful plugins/packages available that make this editor so amazing.

After installing Sublime Text, the first thing you should do is install Package Control, a package manager for Sublime Text.

Next, let's install a package that will help you write HTML code super-fast: Emmet. In Sublime Text press Command+Shift+P and type: Package Control: Install Package and press Enter. Then type Emmet and press Enter to install this package.

If you're not familiar with Sublime Text, have a look at this free course: Perfect Workflow in Sublime Text 2.

###Node Package Manager We will need the Node Package Manager (npm) command-line tool to install Cordova and the Ionic Framework. This tool is included in the Node.js installation.

###Cordova and Ionic We're almost done!

First we'll use npm to install Cordova:

$ sudo npm install -g cordova

And finally we'll install Ionic:

$ sudo npm install -g ionic

###Bower As a bonus, let's also install Bower, a package manager for Javascript libraries. You can use it to add libraries to your Ionic app or to update the Ionic JavaScript library itself.

$ sudo npm install -g bower

Now you're all set to start developing your mobile app! In Part 3 we'll have a look at how to mockup an app in Ionic Creator.

####References ^[1] Android Studio Mac OS X JDK Selection