NativeScript 4 – Windows & Android Set Up Guide

This is a part of a post series. Part 2 can be found here

Intro

NativeScript is an open source framework that allows you to build native, cross platform, mobile apps using Javascript (and potentially Typescript, Vue.js and Angular).

While installing Nativescript itself is quite straight forward, managing its dependencies can get a little tricky, especially for developers who are new to the platform, doubly so when trying to use the Android emulator.

It’s important to note that NativeScript does offer its own installation guide / script – But, it’s a little outdated and doesn’t play well with the Android Studio (which we use to manage Android SDK / Emulators). This can cause some trouble or force you to install duplicate copies of the SDK so for the time being (the NativeScript team is working on a new solution) I recommend using a manual install.

In the next posts we will explore the capabilities of NativeScript Core while developing a simple quiz application – so good luck with the installation and stay tuned for the next parts of this tutorial.

* Linux and OSX can use the official NativeScript in the provided links.

Setting Up NativeScript and NPM

NPM (Node Package Manager) is our first prerequisite. Installation is very simple – go to https://nodejs.org/en/ and download the recommended version (LTS). Once you finish downloading the file simply run the installer which will guide you through the set up.

Once completed open the CLI (Command Line Interface by pressing the Windows key  and typing “cmd”. Select the first match and in the new window run “npm” just to verify that the installation went according to plan (as long as you don’t see “npm is not recognized…” we are good to go).

Now we can install NativeScript – run the following command which will install NativeScript globally “npm install -g nativescript”

To wrap this step run “tns” – tns is the NativeScript command line running it without further instructions brings up the help which should look something like this:

2

Setting Up – JDK (Java Development Kit)

NativeScript relies on JDK for Android development (Android apps are natively developer using Java). If

Download and install the Java Developer Kit – http://www.oracle.com/technetwork/java/javase/downloads/jdk10-downloads-4416644.html The installation is straightforward, just follow the instructions.

 

Setting Up Our Dev Environment – Android Studio

Android Studio allows us to manage the Android SDK and our AVD (Android Virtual Devices). To start, go to the following link https://developer.android.com/studio/ download a copy and run through the installation process.

After finishing the installation run Android Studio. There’s a few extra installation steps on the first run. Once you pass those, create an empty project (Start a new Android Studio Project link) – we just need to open the main interface so the details of the project are less important. The project creation process might take a minute or two as Android Studio will download / install a few extra dependencies.

* Once you create the project you might see a notification on the bottom right regarding pending updates – go ahead and install them as they often contain important bug fixes.

You should now see the following two icons on the top right corner 3The first manages your AVD (Android Virtual Devices) and the other manages the Android SDK.

We will start with the SDK manager (Second button) which opens a pane with 3 tabs – platforms, tools and update sites

4

In the Platforms tab ensure that you have the API installed (currently Android API 28) and the latest operating system version (Android 8.0 Oreo or API Level 27) – if they are not installed simply check the box next to them.

Then go to the SDK tools tab and ensure you’ve selected the Android SDK Build-Tools, Android Emulator, Android SDK tools and Intel x86 Emulator Accelerator (most / all of them should already be selected).

For the Android SDK Build – Tools we also need to select a specific version – so go ahead and select the Show Package Details on the bottom right, this will expand the list with specific SDK versions – select the latest 27 variation (currently 27.0.3)

Finally press apply to install everything that was missing.

Now go to the AVD manager (first button from previous step) and select “Create Virtual Device”. You can decide which phone to emulate (I suggest the Nexus 5, this is purely for display purposes) and then press next to select the SDK version.

5

There’s a list of recommended SDK versions -we generally use the latest (28 at the time of writing this blog post). Press the download button and wait while it installs (you will need to accept some T&Cs).

Once you’re done, press next to see the Emulator creation form, here you can change things like the name, orientation and a few other advanced options. For now, leave it as is and press finish.

Congratulations – you’ve created your first Android Emulator. Press the green arrow to lunch it and see that it’s working correctly.

* If the Emulator fails to start there’s probably an extra dependency which is still missing. Switch to the main Android Studio screen and in the bottom right corner you will find the Event Log with details of the error. In most cases you will also see a suggestion on how to fix it (link to a download).

 

Setting Up Environment Variables

Finally, we need to add an “environment variable” to allow NativeScript to find the Android SDK. To do that open the SDK manager again and copy the path of your SDK installation (you can see it in the top of the window)

Once you have the path press the windows key and type “system environment” then select the only option that comes up (edit the system environment variables).

Press the Environment Variables button then create a new system variable (lower option). The key is “ANDROID_HOME” and the value is your SDK path (for me the value was “C:\Users\IEUser\AppData\Local\Android\Sdk” but it may very well be different for you)

We also need to verify that Java correctly set up its own variables – if you can’t see a JAVA_HOME variable, you will need to add it yourself. Simply press the new button once more, and use “JAVA_HOME” as the key and the path to your Jave as the value (should be c:\program files\java\<jdk version>)

 

Wrapping things up

If everything went according to plan you should now have NativeScript installed and ready to use. To verify this, go back to your cli (from step 1) and run “tns doctor” this will run several tests to verify NativeScript is ready to use. The result should look similar to this:

6

This is a part of a post series. Part 2 can be found here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: