Native mobile apps with NativeScript

I can almost hear your question “is it possible to develop native mobile apps with JavaScript?”, Yes in the meantime it is possible to develop native apps using JavaScript. There are some frameworks on the market to develop a native mobile app, such as NativeScript, React Native or Cordova + Microsoft Project ACE. In this article I’m going to cover the NativeScript part because it supports the most mobile APIs.

1. What is NativeScript?

A Brief Tour of NativeScript UI

2. Install the NativeScript CLI

Node.js must be installed on your machine.

Run in your terminal and follow shown instructions

npm install -g nativescript

Verify Installation

by typing the following command in your terminal: tns

2. Install iOS and Android requirements

Windows

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-objectnet.webclient).DownloadString(‘https://www.nativescript.org/setup/win'))"

For Windows user there is an executable Installer, which you can download from the following url.

NativeScript Installer Setup-Windows

MacOS

ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"

Verify

tns doctor

It could be that you get some warning messages after running tns doctor command like

The ANDROID_HOME environment variable is not set or it points to a non-existent directory. You will not be able to perform any build-related operations for Android.

To be able to perform Android build-related operations, set the ANDROID_HOME variable to point to the root of your Android SDK installation directory.

You need to set the ANDROID_HOME in your environment variables which points to the Android SDK home folder.

1. Getting started

Create your first app

tns create HelloWorld

• tns create AppName: Creates an app named “MyApp” using a basic hello world JavaScript template.
• tns create AppName --tsc: Creates an app using a basic hello world TypeScript template.
• tns create AppName --ng: Creates an app using a simple TypeScript and Angular template.

Run your first app

Switch to your project cd HelloWorld and type

for Android

tns run android

for iOS

tns run ios

Debugging

Just run the following command from your terminal to debug your app.

tns debug android

for iOS

tns debug ios

And you can set a breakpoint in the debugger of the NativeScript inspector by clicking on a line: