Build Your First Mobile App With Ionic 2+ & Angular 2+ - Part 2
In this post we are going to set up our development environment for building hybrid mobile apps with Cordova and Ionic 2.
This tutorial is for Ionic 2, you can find the Ionic 1.x tutorial here.
This tutorial 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 - Introduction to TypeScript & ES6
Part 4 - Introduction to Angular 2
Part 5 - Build an Ionic 2 App
Part 6 - Navigating between Pages
Part 7 - Test on Emulators and Mobile Devices
###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 services like Ionic Package or PhoneGap Build. 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 very slow so instead of using that, we can install the Genymotion emulator. Besides being fast, it also has more than 3000 Android configurations to test with. You'll have to create an account (free for personal use) to be able to download it.
The Genymotion emulator uses VirtualBox, so check here which version to install and then install Genymotion.
###Visual Studio Code You probably already have a favorite code editor, in my case, it's Visual Studio Code. It's fast and has excellent support for TypeScript (which we'll be using later to build our app).
You can download it here, it's available for OS X, Linux, and Windows.
###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.
If you're on macOS, you'll run into issues with having to use sudo when you want to install packages with npm. The best way to install Node with the correct permissions, so you don't have to use sudo, is with HomeBrew.
$ brew install node###Cordova and Ionic First we'll use npm to install Cordova:
$ npm install -g cordovaAnd lastly we need to install the Ionic command-line tool, which we'll use to create Ionic projects.
$ npm install -g ionicNow you're all set to start developing your mobile app! In Part 3 we'll have a first look at TypeScript & ES6.
####References [1] Android Studio Mac OS X JDK Selection