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
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 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 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.
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.
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
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
$ 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.