Mobile App Development Using NativeScript

Introduction

In this article, we will discuss how to develop a Mobile native app using NativeScript. It is useful for those who are not very experienced in mobile app development but have good web development experience. With the use of NativeScript, developers develop a web application and after the compilation, they are able to deploy it on Angular and iOS as a Native app. The NativeScript also helps to develop a mobile app which can be deployed on iOS and Android-based mobile. So, if you want to use any native programming skill to develop the mobile app you need to know about iOS and Android development and also need to put double effort into coding as well.

Multiple platforms are available to transform a web application into a native mobile app and, NativeScript is one of them. The other options available are like ApacheCordova, react native and Ionic.  

Here, I am going to discuss NativeScript.   

First, we are going to set up the development for developing the application.

So, open the NativeScript site - nativascript.org

NativeNativeWe does have two options to develop the mobile application.

• Web environment
• CLI

Web Environment 

1. First, click “Get Started” button
   
   You will be able to see the below screen now,
   
   
   
   
2. Now, if you are using an iOS or Android phone for testing your app, download Native Playground on your mobile phone and install it on your mobile.
3. Open Native Playground on your mobile phone
4. Scan the QR code from the mobile app
5. You need to download and install one more app, NativeScript app Preview, on your mobile.
6. After successful installation your web application will be connected with your mobile phone.
   
   Note
   This means whatever you are doing changes on your code after saving those get reflected on your mobile phone. It is very simple and there is no need to download any type of emulator for testing purpose. Within much less time our development and testing environment is ready.
   
   

Explorer Window

Here we are able to see the existing application files and also we are able to add new files as per the application's requirement.

Component Window

 

Component window has a list of all default components in nativascript so we can drag and drop the required component in the development window.

Development Window

In the main screen, we can do the actual application development.

Project Structure

The project structure is similar to Angular 2 applications. Those who are aware of Angular 2 can skip this part.

In the explore screen we can see the App folder. And in the App folder entire application files are saved.

App-routing.module.ts

This routing is basically helpful to redirect among multiple components.

We can create multiple components and we can import those components in this file and add them into route constants.

Please see the below code for reference,

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

const routes: Routes = [
   { path: "", redirectTo: "/home", pathMatch: "full" },
   { path: "home", loadChildren: "./home/home.module#HomeModule" }
];

@NgModule({
   imports: [NativeScriptRouterModule.forRoot(routes)],
   exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

app.component.html

This is default html page. We can add html code or can drag the components from component window.

Find the below default code,

<page-router-outlet></page-router-outlet>

This code is for embedding the selected component code through routes. You can remove that and add your own functionality for better understanding.

App.component.ts

The codebehind part is for the UI component. All required functionality is going to write here. Also we can call rest api from component also. So that we can retrieve or save data on server from our app.

The default code is below,

import { Component } from "@angular/core";

@Component({
   selector: "ns-app",
   templateUrl: "app.component.html"
})
export class AppComponent { }

We can write construct on this and and declare any variable with some default data and display it in html.

Run the application

Press the “Preview” button then you can see the actual mobile app on your mobile. 

Build and deploy

One can go through the below url and easily publish the app on Google Play Store for Android here.

For ioS follow the below link : https://docs.nativescript.org/sidekick/user-guide/publish-app/ios-publish

Cli

To develop NativeScript app we have one more option, installing CLI on your local machine.

The NativeScript CLI is available for installing as an npm package.

In the command prompt, run the following command.

Operating systems	commands
Windows	npm install nativescript -g
macOS	npm install nativescript -g
Linux	Sudo npm install nativescript -g

To create a new cross-platform project from the default JavaScript template, run the following command.

• tns create MyApp

You can add target platforms to your project. To be able to build your project into an application package for a selected target platform, you need to add the platform to your project. You can target Android and iOS with NativeScript projects.

• tns platform add android
• tns platform add ios 
• tns run android --emulator
• tns run ios --emulator

Run project with Emulator

After you have prepared your project, you can build it for your target mobile platforms.

• tns build android
• tns build ios

For more details you can visit here.

Build and deploy

You can go through the below url and easily publish the app on the Google Playstore for Android  https://docs.nativescript.org/sidekick/user-guide/publish-app/android-publish

For ioS publish please follow the below link here.

Conclusion

This article was about NativeSNativecript app development. For more information please visit here.