Build Your First Mobile App With Ionic 2 & Angular 2 - Part 2

http://gonehybrid.com/build-your-first-mobile-app-with-ionic-2-angular-2-part-2/

20 January 2016 on Cordova, Ionic 2, Angular 2 | 3 Comments

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

Cordova and Ionic

First we'll use npm to install Cordova:

$ npm install -g cordova

And lastly we need to install the Ionic command-line tool, which we'll use to create Ionic projects. Note that we are installing the beta version because only that one supports creating Ionic 2 projects at the moment. The beta version will still work fine for your Ionic 1 projects.

$ npm install -g ionic@beta

Now 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

Follow me on Twitter @ashteya and sign up for my weekly emails to get new tutorials.

If you found this article useful, could you hit the share buttons so that others can benefit from it, too? Thanks!