Build Your First Mobile App With The NativeScript and Angular2 - Part 2

Published on July 2, 2016

In the previous post, we have seen what is a NativeScript and Hybrid application. Why should we use NativeScript than building Hybrid applications?

In this post, we are going to set up our development environment for building mobile apps with NativeScript, Typescript, and Angular 2.

##Operating System You can use Windows, Linux or Mac OS X to build Android apps. However, if you want to build iOS apps, you’ll need OS X, which means you’ll need an iMac or MacBook.

I will be going through the setup of the development environment assuming you’re using Windows. For Linux and Mac also you will have almost similar setup steps.

Cmder (optional)

Cmder is a Linux or Mac Os terminal like console emulator on Windows. It spiced up with the Monokai color scheme and a custom prompt layout. Looking sexy from the start. It has many features like copy past shortcuts and multi-tabs support and so on. You can install it from

//cmder.net/

##Git Git is not only useful for code maintenance and version management but also to run few Linux commands on windows. Download git from here.

Visual Studio Code

Visual Studio Code is a free, Cross Platform code editor by Microsoft. Visual Studio is a great tool for developing TypeScript based Applications. We all loved Sublime text and Atom editors. Luckily Visual Studio Code also has same Plugins and Extensions we have for Atom and Sublime Text. So, It’s highly recommended editor for developing NativeScript applications.

Install it for free from here.

Once you install VS Code. You need to install few package to speed up your development.

press ctrl+p to open a command paddle.

ext install nativescript

ext install nativescript-xml-snippets

ext install nativescript-ng2-snippets

This Extinctions will superfast your application development.

NodeJs

Nowadays, everything depends on NodeJs. Even for NativeScript, we need NodeJS. Install andy Node.js 0.10.x, 0.12.x, 4.x, or 5.x stable official release. Preferably 4.x (LTS). When you install NodeJs. You will also have npm in it. Install node from here.

##Android SDK We need at least Android SDK 22 or a later stable official release. You can download either Android Studio or only SDK from here

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

You must also have the following two environment variables setup for Android development:

JAVA_HOME, ANDROID_HOME

Along with these installs Maven for Java dependency management. you can download it from here

Genymotion

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

Alternatively, you can also use this batch script to install all required software and setup the Environment variables. Copy this code and save it as a .bat file. Finally, Double-click on that file to run it. It will install all required software for you.

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
choco install jdk8
SETX JAVA_HOME "C:\Program Files\Java\jdk1.8.0_91\bin" /M
choco install android-sdk
SETX ANDROID_HOME C:\Program Files\Android\android-sdk"  /M
echo yes | "%ANDROID_HOME%\tools\android" update sdk --filter tools,platform-tools,android-23,build-tools-23.0.3,extra-android-m2repository,extra-google-m2repository,extra-android-support --all --no-ui

Native Script

Finally, We have to install NativeScript cli. It contains all the commands to create a new application, run the application on your device or emulator, Watch files for changes and so on.. To install nativescirpt run this command on your console.

npm install -g nativescript

Now you should be able to run

nativescript --version

tns --version

both are same but will be using tns through out the series.

In the next tutorial, we will see a few ES6/Typescript concepts.