At present we are in a world that is become very technical and modern. Things change every day and people are looking at different approaches for things. This applies everywhere and also in the technological world. A plethora of concept and new technology are coming up each day and one and to live up to it. Some of them make things much easier and one is the NativeScript.
Introduction
The NativeScript is something that is completely a cross-platform mobile application framework which works with the current technology trends like Angular, Vue.js, JavaScript and even Typescript if we prefer it.
It is a great tool and people love it for a reason that it is very simple to learn and that makes it a very good choice with all levels of people from beginner to an expert and hence this is a very popular option at present in the development world. One can easily master this if good knowledge of JavaScript, CSS, and there.
Also, one can easily access the complete list of APIs and we can reuse all the codes which are there and that makes the process very simple. One can very easily find plugging, templates, and application online without too many problems and that makes it a preferred choice.
It gives us a very good platform-native UI and we can adapt to run it anywhere without any problems. This can be made for UI to specific devices. This is one of the major reasons why an organization likes SAP using NativeScript.
NativeScript is backed by Progress which has got decades of experience in coding and that makes it a very good choice for one and all. There is lots of Mission-critical enterprise support in the market. This is completely open-source and hence you do not need to worry about buying it and hence it is a very good choice for one and all.
Installation
So let’s learn the steps in installing NativeScript on Windows 10. These installation steps are also applicable for Windows 7 or later OS versions.
1. Install Chocolatey
Chocolatey is a popular package manager for Windows. We can install all the packages and dependencies required to install NativeScript using Chocolatey. So at first, we need to install it on our system.
To install Chocolaty, Open Command Prompt with administrator privileges and run the command below.
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
2. Install Nodejs
Now we can install the LTS version of Nodejs using Chocolatey.
choco install -y nodejs-lts
3. Install JDK 8
NativeScript requires Java Development Kit(JDK) to be installed on our system. The recommended version is JDK 8 and this can be installed with the command below.
choco install adoptopenjdk --version 8.192
4. Install Android SDK
The next thing we want to install is the Android SDK and this can also be installed on our system using Chocolatey.
choco install -y android-sdk
5. Install the packages for Android SDK
So we have installed Android SDK in the previous step but it also requires some packages to be installed for with it. Install all packages for the Android SDK Platform 28, Android SDK Build-Tools 28.0.3 or later, Android Support Repository, Google Repository and any other SDKs that we may need. The below command will take care of it.
"%ANDROID_HOME%\tools\bin\sdkmanager" "emulator" "platform-tools" "platforms;android-28" "build-tools;28.0.3" "extras;android;m2repository" "extras;google;m2repository"
6.Install NativeScript CLI
NativeScript CLI helps us to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
It can simply be installed using NPM. So install the NativeScript CLI with the below command.
npm i -g nativescript
7. Check the system is configured properly
We can check that our system is configured properly to work with NativeScript projects.
tns doctor
If we see “No issues were detected” we can start working with NativeScript projects.
8.Creating new application
We can start creating a new NativeScript application with the below command.
tns create MyApp --template tns-template-blank
This will create a NativeScript project with the name MyApp.
9. Previewing the app
Now, the app we created can be previewed on our Android/iOS device with NativeScript Playground application.
For Android, we can download the app from Playstore.
NativeScript Playground app for Android
For iOS devices, the app can be downloaded from the App Store.
NativeScript Playground app from iOS
Download NativeScript Playground application from the respective stores first.
Now enter into our project directory and run tns preview.
cd MyApp tns preview
This will generate a QR code.
Now just open NativeScript Playground app on our device and scan the QR code using it. Now we can preview the NativeScript app we have created on our device.
10. Running the App on Our Android Device
So we have created a NativeScript application and previewed it our device. But it has some limitations.
So tns run command allows us to build our app locally run on an Android/iOS device.
10.1 Setting Up Our Android Device
Because we are working on Windows OS, the app can only be run on an Android device.
For this, it needs to set up our mobile device first.
So from our Android device,
Go to Settings -> About
We can see a Build Version menu there. Continually click the option until it enables the Developer options
Now, return to Settings. we can see the Developer options menu there. Enable it. Also, enable the USB debugging option in it.
Note:- Alternatively we can set up a virtual android device on our system. It is explained in the below link.
Setting Up Android Virtual Device(AVD) on Windows 10
10.2 Check the Device is Configured Correctly
Connect our mobile device with our Windows system using the USB cable. Type the below command to verify whether our mobile device is connected or not.
tns device android
We can alternatively use adb devices to list all connected devices.
adb devices
If it shows our Android device on the list, go ahead with the next steps.
10.3 Run the App
Now we can run the app we created. So the below command will take care of it.
tns run android
Note:- This version of NativeScript also support HMR(Hot Module Replacement), a web pack feature which enables updating contents on the application screen without reloading the page.
So, to run our app with HMR facility, run the command below instead of tns run android.
tns run android --hmr
TechoTip: We recommend using Visual Studio code as the source-code editor for working with NativeScript projects.
Have a nice code !
