Category: nativescript

NativeScript – Useful Resources ”; Previous Next The following resources contain additional information on NativeScript. Please use them to get more in-depth knowledge on this. Useful Links on NativeScript NativeScript @ NativeScript − NativeScript, its history and various other terms has been explained in simple language. NativeScript Wiki − Wikipedia Reference for NativeScript. Useful Books on NativeScript To enlist your site on this page, please drop an email to [email protected] Print Page Previous Next Advertisements ”;

NativeScript – Data Binding ”; Previous Next Data binding is one of the advanced concepts supported by NativeScript. NativeScript follows Angular data binding concept as closely as possible. Data binding enables the UI component to show/update the current value of the application data model without any programming effort. NativeScript supports two type of data binding. They are as follows − One-Way data binding − Update the UI whenever the model is changed. Two-Way data binding − Sync the UI and model. Whenever the model is updated, UI is updated automatically and also whenever the UI gets data from user (UI gets updated), the model will be updated. Let us learn both the concepts in this section. One-Way Data Binding NativeScript provides a simple option to enable one-way data binding in a UI component. To enable one-way data binding, just add square bracket in the property of the target UI and then assign it the necessary model’s property. For example, to update the text content of a Label component, just change the UI code as below − <Label [text]=”this.model.prop” /> Here, this.model.prop refers to the property of the model, this.model. Let us change our BlankNgApp to understand the one-way data binding. Step 1 Add a new model, User (src/model/user.ts) as follows − export class User { name: string } Step 2 Open UI of our component, src/app/home/home.component.html and update the code as below − <ActionBar> <Label text=”Home”></Label> </ActionBar> <GridLayout columns=”*” rows=”auto, auto, auto”> <Button text=”Click here to greet” class=”-primary” color=”gray” (tap)=”onButtonTap($event)” row=”1” column=”0”> </Button> <Label [text]=”this.user.name” row=”2” column=”0” height=”50px” textAlignment=”center” style=”font-size: 16px; font-weight: bold; margin: 0px 32px 0 25px;”> </Label> </GridLayout> Here, Label’s text is set to the user model’s property name. Button tap event is attached to onButtonTap method. Step 3 Open code of the home component, src/app/home/home.component.ts and update the code as below − import { Component, OnInit } from “@angular/core”; import { User } from “../../model/user” @Component({ selector: “Home”, templateUrl: “./home.component.html” }) export class HomeComponent implements OnInit { public user: User; constructor() { // Use the component constructor to inject providers. this.user = new User(); this.user.name = “User1″; } ngOnInit(): void { // Init your component properties here. } onButtonTap(args: EventData) { this.user.name = ”User2”; } } Here, user model is imported User object is created in component’s constructor onButtonTap event is implemented. Implementation of onButtonTap updates the User object and set name of the property as User2 Step 4 Compile and run the application and click the button to change the model and it will automatically change the Label text. The initial and final state of the application is as follows − Initial State One Way Data Binding Initial State is shown below − Final State One Way Data Binding Final State is shown below − Two-way Data Binding NativeScript also provides two-way data binding for advanced functionality. It binds the model data to UI and also binds the data updated in UI to model. To do two-way data binding, use ngModel property and then surround it with [] and () as below − <TextField [(ngModel)] = ”this.user.name”></TextField> Let us change the BlankNgApp application to better understand the two-way data binding. Step 1 Import NativeScriptFormsModule into the HomeModule (src/app/home/home.module.ts) as specified below − import { NgModule, NO_ERRORS_SCHEMA } from “@angular/core”; import { NativeScriptCommonModule } from “nativescript-angular/common”; import { HomeRoutingModule } from “./home-routing.module”; import { HomeComponent } from “./home.component”; import { NativeScriptFormsModule } from “nativescript-angular/forms”; @NgModule({ imports: [ NativeScriptCommonModule, HomeRoutingModule, NativeScriptFormsModule ], declarations: [ HomeComponent ], schemas: [ NO_ERRORS_SCHEMA ] }) export class HomeModule { } Here, NativeScriptFormsModule enables the two-way data binding. Otherwise, the two-way data binding will not work as expected. Step 2 Change the UI of the home component as given below − <ActionBar> <Label text=”Home”></Label></ActionBar> <GridLayout columns=”*” rows=”auto, auto”> <TextField hint=”Username” row=”0” column=”0” color=”gray” backgroundColor=”lightyellow” height=”75px” [(ngModel)]=”this.user.name”> </TextField> <Label [text]=”this.user.name” row=”1” column=”0” height=”50px” textAlignment=”center” style=”font-size: 16px; font-weight: bold; margin: 0px 32px 0 25px;”> </Label> </GridLayout> Here, Label component’s text property is set with one-way data binding. If the model user is updated, then its text property will automatically get updated. TextField component sets the ngModel as this.user.name. If the model user is updated, then it’s text property will automatically get updated. At the same time, if user changes the TextField’s value, then the model gets updated as well. If the model gets updated, it will trigger Label’s text property changes as well. So, if user changes data, then it will show in Label’s text property. Step 3 Run the application and try to change the value of text box. The initial and final state of the application will be similar as specified below − Initial State Two-way data binding – Initial state is given below − Final State Two-way data binding – Final state is shown below − Print Page Previous Next Advertisements ”;

NativeScript – Navigation ”; Previous Next Navigation enables users to quickly swipe in to their desired screen or to navigate through an app or to perform a particular action. Navigation component helps you implement navigation using simple button clicks to more complex patterns. Navigation differ substantially between core and angular version of NativeScript. While core framework navigation is foundation for navigation process, NativeScript’s Angular model adopts the core navigation concept and extends it to make it compatible with Angular framework. Let us see both core navigation concept and angular adoption of navigation in this chapter. Core Concepts Let us understand how the navigation works in core NativeScript in this chapter. In NativeScript, navigation is split into four different categories based on the direction it applies as specified below − Forward navigation Backward navigation Lateral navigation Bottom navigation Forward Navigation Forward Navigation refers to navigating users to the screen in the next level of hierarchy. It is based on two NativeScript components, Frame and Page. Frame Frame is the root level component for navigation. It is not a visible container but acts as a container for transitions between pages. A simple example is as follows − <Frame id=”featured” defaultPage=”featured-page” /> Here, Frame navigates to (or loads) the featured-page page component and renders it. Page Page is next to Frame component and it acts as a container for UI component. Simple example is defined below − <Page loaded=”onPageLoaded”> <ActionBar title=”Item” class=”action-bar”>&lt/ActionBar> <AbsoluteLayout> <Label text=”Label”/< <Button text=”navigate(”another-page”)” tap=”onTap”/> </AbsoluteLayout> </Page> Here, Initially, Page loads all the UI component of the screen and renders it. When user clicks the button, it will navigate the user to another-page page. Backward Navigation Backward navigation method enables backward movement through screens within one app or across different apps. It is the opposite direction of forward navigation. Simple goBack() method is used to navigate back to the previous page. It is defined below − <Page class=”page” loaded=”onPageLoaded”> <ActionBar title=”Item” class=”action-bar”></ActionBar> <StackLayout class=”home-panel”> <Button class=”btn btn-primary” text=”Back” tap=”goBack”/> </StackLayout> </Page> Here, goBack() method will be triggered when user taps the button. goBack() navigates the users to the previous page, if one is available. Lateral Navigation Lateral navigation refers to the navigation between screens at same levels of hierarchy. It is based on hub pattern. It is enabled through specific navigation components such as BottomNavigation, Tabs, TabView, SideDrawer and Modal View. A simple example is defined as below − <Page class=”page” xmlns=”http://www.nativescript.org/tns.xsd”> <ActionBar title=”Hub” class=”action-bar”></ActionBar> <StackLayout class=”home-panel”> <Button class=”btn btn-primary” text=”navigate(”featured-page”)” tap=”navigateToFeatured” /> <Button class=”btn btn-primary” text=”navigate(”search-page”)” tap=”navigateToSearch” /> </StackLayout> </Page> Here, navigateToFeatured function uses navigate() method to navigate the user to featured page. Similarly, navigateToSearch function will navigate the user to search page. The hub page can also be reached using navigate method available in page screen and one can move out of hub page using goBack() method. A simple example is as follows − <Page class=”page”> <ActionBar title=”Item” class=”action-bar”></ActionBar> <StackLayout class=”home-panel”> <Button class=”btn btn-primary” text=”navigate(”hub-page”)” tap=”navigateToHub” /> <Button class=”btn btn-primary” text=”goBack()” tap=”goBack” /> </StackLayout> </Page> Bottom and Tab Navigation The most common style of navigation in mobile apps is tab-based navigation. The Tab Navigation is arranged at the bottom of the screen or on the top below the header. It is achieved by using TabView and BottomNavigation component. Angular based navigation NativeScript extends its navigation concept to accommodate the Angular routing concept. NativeScript provides a new module, NativeScriptRouterModule by extending Angular RouterModule. NativeScript angular navigation concept can be categorized into section as below − page-router-outlet tag nsRouterLink attractive RouterExtension class Custom RouterReuseStrategy Let us learn all the above angular navigation in this section. Page Router Outlet As learned earlier, page-router-outlet is the replacement of Angular’s router-outlet. page-router-outlet wraps the Frame and Page strategy of Nativescript core navigation framework. Each page-router-outlet creates a new Frame component and each configured components in the outlet will be wrapped using Page component. Then, the native navigate method is used to navigate to another page / route. Router Link (nsRouterLink) nsRouterLink is the replacement of Angular’s RouterLink. It enables UI component to link to another page using route. nsRouterLink also provides below two options − pageTransition − It is used to set page transition animation. true enables default transition. false disables the transition. Specific values like slide, fadein, etc., set the particular transition. clearHistory − true clears the navigation history of nsRouterLink. A simple example code is as follows − <Button text=”Go to Home” [nsRouterLink]=”[”/home”]” pageTransition=”slide” clearHistory=”true”></Button> Router Extension NativeScript provides RouterExtensions class and exposes the navigation function of the core NativeScript. The methods exposed by RouterExtensions are as follows − navigate navigateByUrl back canGoBack backToPreviousPage canGoBackToPreviousPage A simple example code using RouterExtensions is as follows − import { RouterExtensions } from “nativescript-angular/router”; @Component({ // … }) export class HomeComponent { constructor(private routerExtensions: RouterExtensions) { } } Custom Route Reuse Strategy NativeScript uses a custom route reuse strategy (RouterReuseStrategy) to accommodate the architecture of a mobile application. A mobile application differs in certain aspects in comparison to a web application. For example, the page can be destroyed in a web application when user navigates away from the page and recreates it when the user navigates to the page. But, in mobile application, the page will be preserved and reused. These concepts are taken into consideration while designing the routing concept.

NativeScript – Introduction ”; Previous Next Generally, developing a mobile application is a complex and challenging task. There are many frameworks available to develop a mobile application. Android provides a native framework based on Java language and iOS provides a native framework based on Objective-C/Shift language. However, to develop an application that support both operating systems, we need to code in two different languages using two different frameworks. To overcome this complexity, mobile frameworks supports this feature. The main reason behind to use cross-platform or hybrid framework is easier to maintain a single code base. Some of the popular frameworks are NativeScript, Apache Cordova, Xamarin, etc. Overview of JavaScript Frameworks JavaScript is a multi-paradigm language. It supports functional programming, object-oriented and prototype based programming. JavaScript was initially used for the client-side. Nowadays, JavaScript is used as a server-side programming language as well. JavaScript frameworks are a type of tool that makes working with JavaScript easier and smoother. Using this framework, programmers can easily code the application as a device responsive. Responsiveness is one of the reasons behind why this framework is becoming very popular. Let us have a look at some of the popular JS frameworks − Angular One of the most powerful, efficient, and open-source JavaScript frameworks is Angular. We can build mobile and desktop applications. Google uses this framework. It is used for developing a Single Page Application (SPA). Vue.js VueJS is a progressive JavaScript framework used to develop interactive web interfaces. It is one of the famous frameworks used to simplify web development. It can be easily integrated into big projects for front-end development without any issues. It is dual integration mode is one of the most attractive features for the creation of high-end SPA or Single Page Application. React ReactJS is JavaScript library used for building reusable UI components. It is developed by Facebook. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it. Node.js Node.js is an open source, cross-platform runtime environment for developing server-side and networking applications. It is built on Google Chrome’s JavaScript Engine (V8 Engine). Node.js applications are written in JavaScript, and can be run on OS X, Microsoft Windows,and Linux. It provides a rich library of various JavaScript modules which simplifies the development of web applications. Overview of NativeScript NativeScript is an open source framework used for creating native iOS and android mobile applications. It is a JIT compiled framework. NativeScript code runs on JS virtual machine. It uses V8 engine runtime for both Android and iOS platforms. NativeScript uses XML, JS and CSS for development. It has a WebIDE known as PlayGround. This PlayGround supports easy working interface, easy to manage projects, hot reload and debug on devices. NativeScript allows developers to create native, cross-platform apps quickly and efficiently and save on the costs of development, testing, and training. Hence, Native apps will continue to be rich and strong for years to come to make better and easier to use. Features NativeScript has vibrant community support. Some of the salient features of NativeScript listed below − Extensible Hot Module Replacement Easy to setup We can build rich animations, graphs, charts and lists Developers can use any view as the root of an application Lazy coding Benefits NativeScript helps small or large scale companies to build cross-platform mobile apps. Some of the key benefits are − Developers can reuse existing tools and code Easy to modify, troubleshoot and update newer versions Development experience is good so we don’t have to spend time to learn new tools Platform-specific APIs from JavaScript, eliminating the need to learn Cordova plugins Ease authentication with different sign-on providers Print Page Previous Next Advertisements ”;

NativeScript – Plugins ”; Previous Next The npm package is used for adding native functionality. Using this package, we can install or search or delete any plugins. This section explains about plugins in detail. Commands add − It is used to install plugin. update − Updates specified plugin and modify its dependencies. remove − Removes the plugin. build − It is used to build plugin for iOS or android projects. create − Creates a plugin for your project. Adding Plugin Below syntax is used to add a new plugin − tns plugin add <plugin-name> For example, if you want to add nativescript-barcodescanner, you can use the following code − tns plugin add nativescript-barcodescanner You could see the following response − + [email protected] added 1 package from 1 contributor and audited 11704 packages in 8.76s You can also use npm module to add the above plugin − npm install nativescript-barcodescanner Now, NativeScript CLI downloads the plugin from npm and add inside your node_modules folder. If you want to add the plugin directly to your package.json and resolve all the dependency issues, you can use the below command instead of the previous one − npm i nativescript-barcodescanner If you want to install a developer dependencies during development, use the below code − npm i tns-platform-declarations –save-dev Here, tns-platform-declarations is a developer dependency required only for intelliSense during the development process. Importing Plugins Now, we have installed nativescript-barcodescanner plugin. Let us add inside your project using the below command − const maps = require(“nativescript-barcodescanner”); maps.requestPermissions(); Updating Plugins This method is used to update a specified plugin so it uninstalls previous one and installs new version and modify its dependencies. It is defined below − tns plugin update <Plugin name version> Removing Plugin If you want remove the plugin, if not required, you can use the below syntax − tns plugin remove <plugin-name> For example, if you want to remove the above installed nativescript-google-maps-sdk, then use the below command − tns plugin remove nativescript-barcodescanner You could see the following response − Successfully removed plugin nativescript-barcodescanner Building Plugins It is used to build the plugin’s Android-specific project files located in platforms/android. Let us build the nativescript-barcodescanner pugin using the below command − tns plugin build nativescript-barcodescanner Creating Plugins NativeScript plugins are simple JavaScript modules. It is defined inside your application srcpackage.json file. This module is used to create a new project for NativeScript plugin development. It is defined below − tns plugin create <Plugin Repository Name> [–path <Directory>] Print Page Previous Next Advertisements ”;

NativeScript – Native APIs Using JavaScript ”; Previous Next This section explains about the overview of accessing Native APIs using JavaScript. Marshalling The NativeScript Runtime provides implicit type conversion for both android and iOS platforms. This concept is known as marshalling. For example, NativeScript- iOS paltform can implicitly convert JavaScript and Objective-C data types similarly, Java/Kotlin can easily be mapped to JavaScript project types and values. Let us understand how to perform marshalling in each type one by one briefly. Numeric Values We can easily convert iOS and android numeric data types into JavaScript numbers. Simple numeric conversion for iOS into JavaScript is defined below − console.log(`max(7,9) = ${max(7,9)}`); Here, The native max() function is converted into JavaScript number. Android Environment Java supports different numeric types such as byte, short, int, float, double and long. JavaScript has only number type. Consider a simple Java class shown below − class Demo extends java.lang.Object { public int maxMethod(int a,int b) { if(a>b) { return a; } else { return b; } } } Here, The above code contains two integer arguments. We can call the above code object using JavaScript as shown below − //Create an instance for Demo class var obj = new Demo(); //implicit integer conversion for calling the above method obj.maxMethod(7,9); Strings Android strings are defined in java.lang.string and iOS strings are defined in NSSring. Let us see how to perform marshalling in both platforms. Android Strings are immutable but String buffers support mutable strings. Below code is an example for simple mapping − //Create android label widget var label = new android.widget.Label(); //Create JavaScript string var str = “Label1″; //Convert JavaScript string into java label.setText(str); // text is converted to java.lang.String Boolean class is defined in java.lang.Boolean. This class wraps a value of boolean in an object. We can easily convert boolean to String and vice-versa. Simple example is defined as given below − //create java string let data = new java.lang.String(”NativeScript”); //map java String to JavaScript string, let result = data.startsWith(”N”); //return result console.log(result);// true iOS environment NSString class is immutable but its subclass NSMutableString is immutable. This class contains a collection of methods for working with strings. It is declared as below − class NSString : NSObject Consider a simple objective-c declaration as shown below − NSString *str = @”nativescript”; //convert the string to uppercase NSString *str1; str1 = [str uppercaseString]; NSLog(@”Uppercase String : %@n”, str1 ); NSStrings can easily be mapped to JavaScript strings. Array This section explains about how to perform marshalling in arrays. Let’s take an example of iOS environment first. Array Declaration class NSArray : NSObject Here, NSArray is used to manage ordered collection of objects called arrays. It is used to create static array. Its sub class NSMutableArray is used to create dynamic arrays. Consider NSArray objects can be created using array literals as shown below − let array: NSArray = [“React”,”Vue”,”TypeScript”] Now, we can map this array into JavaScript as shown below − //create native array let nsArr = NSArray.arrayWithArray(“React”,”Vue”,”TypeScript”]); //create simple javascript array let jsArr = [“Hello,World”,”NativeScript”]; //Now compare the two arrays, let compare = nsArr.isEqual(jsArr); console.log(comapre); This will return the output as false. Android array declaration Java arrays are defined in java.util.Arrays. This class contains various methods for manipulating arrays. An example is shown below − //javascript array let data = [12,45,23,56,34,78,50]; //create java array let result = ns.example.Math.maxElement(data); console.log(result); Classes and Objects Classes and Objects are basic concepts of Object Oriented Programming. Class is a user defined prototype. Object is an instance of class. Class represents the set of properties or methods that are common to all objects of one type. Let us understand native classes and objects for both mobile development environments. Android Environment Java and Kotlin classes have unique identifiers denoted by the full package name. For example, android.view.View − It is a basic user interface class for screen layout and interaction with the user. We can access this class in JavaScript as shown below − const View = android.view.View; First, we import the class using the below statement − import android.view.View; Next create a class as given below − public class MyClass { public static void staticMethod(context) { //create view instance android.view.View myview = new android.view.View(context); } } In the above same class, we can access JavaScript function using the below code − const myview = new android.view.View(context); Similarly, we can access interfaces, constants and enumerations within java.lang packages. iOS Environment Objective-C classes are defined in two sections @interface and @implementation. Class definition starts with the keyword @interface followed by the interface(class) name. In Objective-C, all classes are derived from the base class called NSObject. It is the superclass of all Objective-C classes. Simple Circle class is defined as shown below − @interface Circle:NSObject { //Instance variable int radius; } @end Consider a class with one method as shown below − @interface MyClass : NSObject + (void)baseStaticMethod; @end This class can be converted to javascript using the below code − function MyClass() { /* native call */ }; Object.setPrototypeOf(MyClass, NSObject); BaseClass.baseStaticMethod = function () { /* native call */ }; JavaScript instanceof operator is used to verify, if an object inherits from a given class. This can be defined as − var obj = MyClass.alloc().init(); //

NativeScript – Testing ”; Previous Next Testing is a very important phase in the development life cycle of an application. It ensures an application quality. It needs careful planning and execution. It is also most time consuming phase of the development. NativeScript framework provides an extensive support for the automated testing of an application. Types of Testing Generally, three types of testing processes are available to test an application. They are as follows − Unit Testing Unit testing is the easiest method to test an application. It is based on ensuring the correctness of a piece of code (a function, in general) or a method of a class. But, it does not reflect the real environment and subsequently. It is the least option to find the bugs. Generally, NativeScript uses Jasmine, Mocha with Chai and QUnit unit testing frameworks. To perform this, first you need to configure in your project using the below command − tns test init Now, you get the following response − ? Select testing framework: (Use arrow keys) > jasmine mocha qunit Now, select jasmine framework and your screen looks similar to this − ? Select testing framework: jasmine + [email protected] added 90 packages from 432 contributors and audited 11944 packages in 8.753s + [email protected] added 2 packages from 1 contributor and audited 11946 packages in 7.299s > [email protected] postinstall /Users/workspace/NativeScript/NativeApp/node_modules/core-js > node -e “try{require(”./postinstall”)}catch(e){}” Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: > https://opencollective.com/core-js > https://www.patreon.com/zloirock Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -) npm WARN [email protected] requires a peer of webpack@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself. + [email protected] added 19 packages from 52 contributors and audited 12012 packages in 9.368s + [email protected] added 2 packages from 35 contributors and audited 12014 packages in 6.925s + [email protected] updated 1 package and audited 12014 packages in 7.328s + @types/[email protected] > [email protected] postinstall /Users/deiva/workspace/NativeScript/NativeApp/node_modules/nativescript-unit -test-runner > node postinstall.js + [email protected] added 1 package from 1 contributor and audited 12032 packages in 7.14s Successfully installed plugin nativescript-unit-test-runner. Example test file created in src/tests Run your tests using the “$ tns test <platform>” command. Now, the test file is created inside srctestsexample.ts. Create Your Tests Let us add a simple test inside example.ts file as shown below − describe(“NativeApp test:”, function() { it(“Check counter.”, function() { expect(mainViewModel.createViewModel().counter).toEqual(10); }); it(“Check message.”, function () { expect(mainViewModel.createViewModel().message).toBe(“10 taps left”); }); }); Here, First, check if the counter equals 10 and check if the message is 10 taps left. Let us run the test in next step. Run Your Tests Now, run the test in either android or iOS connected device using the below command − tns test android This will return the following status − ? To continue, choose one of the following options: (Use arrow keys) > Configure for Cloud Builds Configure for Local Builds Configure for Both Local and Cloud Builds Skip Step and Configure Manually Then choose the below option − ? To continue, choose one of the following options: Configure for Local Builds Running the setup script to try and automatically configure your environment. These scripts require sudo permissions ….. To execute your test suite in the android simulator, run the following command − tns test android –emulator Now, karma server prepares builds and deploy your project. End To End (E2E) Testing Unit tests are small, simple and fast process whereas, E2E testing phase multiple components are involved and works together which cover flows in the application. This could not be achieved by unit and integration tests. NativeScript Appium plugin is used to perform E2E automation testing. Well, Appium is an open source testing framework for mobile app. To add this framework in your project, you must have either latest version of XCode or Android SDK above 25.3.0. Install Appium Let us install Appium globally using npm module − npm install -g appium Now, you could see the following response − npm install -g appium /Users/.npm-global/bin/authorize-ios -> /Users/.npm-global/lib/node_modules/ appium/node_modules/.bin/authorize-ios > [email protected] install /Users/.npm-global/lib/node_modules/ appium/node_modules/appium-windows-driver > node install-npm.js Not installing WinAppDriver since did not detect a Windows system > [email protected] postinstall /Users/.npm- global/lib/node_modules/appium/node_modules/core-js > node -e “try{require(”./postinstall”)}catch(e){}” Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: > https://opencollective.com/core-js > https://www.patreon.com/zloirock Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -) > [email protected] postinstall/Users/.npm- global/lib/node_modules/appium/node_modules /appium-chromedriver > node install-npm.js …………………………………….. ……………………………………… + [email protected] added 671 packages from 487 contributors in 28.889s Add Plugin Let us add nativescript-dev-appium plugin as a devDependency to your project using the below command − $ npm install -D nativescript-dev-appium After executing this, choose mocha framework and you will get a response similar to this − > node ./postinstall.js ? What kind of project do you use ? javascript ? Which testing framework do you prefer? mocha + [email protected] Now, files are stored inside your project folder.

NativeScript – Templates ”; Previous Next NativeScript provides lot of readymade templates to create simple blank but fully functional application to complex Tab based application. Using template As learned earlier, new application can be created using create subcommand of tns command. tns create <app-name> –template <tns-template-name> Here, tns-template-name is the name of the template. If you want to create a template with one page and without any custom styles using JavaScript, use the below command − tns create <app-name> –template tns-template-blank The above same template can be created using TypeScript as follows − tns create <app-name> –template tns-template-blank-ts Navigation Template Navigation template is used to create moderate to complex application. It comes with pre-configured SideDrawer component with several pages. SideDrawer component contains a hidden view for navigation UI or common settings. Use the below command to create navigation based application − tns create <app-name> –template tns-template-drawer-navigation Tab Navigation Template Tab navigation template is used to create tab based application. It comes with pre-configured TabView component with several pages. Use below command to create tab based application − tns create <app-name> –template tns-template-tab-navigation Master-Detail Template Master-Detail template is used to create list based application along with detail page for every item in the list. tns create <app-name> –template tns-template-master-detail Custom Template To create simple customized template, we need to clone blank templates. As you know already, NativeScript supports JavaScript, TypeScript, Angular and Vue.js templates so you can choose any language and create your customized one. For example, clone simple and customized template from git repository using the below command − git clone https://github.com/NativeScript/template-blank-ts.git Now, it will create mobile app structure so you can do any changes and run your android/iOS device. This structure based on list of guidelines. Let us see the guidelines in brief. Structure Your customized template must meet the following requirements − Don’t place your code inside your app root folder. Create a separate folder and add feature area inside. Page, View models and service should be placed in feature area. This helps to create neat and clean code. Create page folder and place inside .ts, .xml, .scss/css, etc., files. package.json Place package.json file in the root folder of your app template. Provide a value for the name property using the format − { “name”: “tns-template-blank-ts”, displayName”: “template-blank”, } Assign a value for the version property. It is defined below − “version”: “3.2.1”, Assign a value for the main property specifying the primary entry point to your app. It is defined below − “main”: “app.js”, Assign a value for the android property. It is defined below − “android”: { “v8Flags”: “–expose_gc” }, The repository property should be specified inside your code as follows − “repository”: { “type”: “git”, “url”: “https://github.com/NativeScript/template-master-detail-ts” }, Style Import styles and themes in your app template using the below syntax − @import ”~nativescript-theme-core/scss/light”; We can also assign custom background color using the below code − /* Colors */ $background: #fff; $primary: lighten(#000, 13%); Print Page Previous Next Advertisements ”;

NativeScript – Creating an Application in iOS ”; Previous Next This chapter explains about how to publish your Native app in App Store. Go through the below steps to publish your app. Prerequisites To perform this, you must need the following prerequisites − Certificate for distribution Distribution provisioning profile Registered bundle ID in iOS Dev center App record in iTunes Connect Steps to publish your app Below are the steps to publish your app − Step 1: Open NativeScript Sidekick Launch NativeScript Sidekick and open your app in Sidekick. Step 2: Select publish Go to toolbar and select publish option from the toolbar. It is shown below − Now, select Apple App Store option. It looks similar to the below image − Step 3: Manage iOS provision and certificates Click the Apple App Store cogwheel icon and choose browse option and add the details. Step 4: Build your app Next, click build option and build your app and wait till the process to complete. Step 5: Provide credentials This is your final step. Specify Apple Username and Password in your account and click upload and check the confirmation message. If you want to submit your app for review, then go to iTunes Connect and submit it. Print Page Previous Next Advertisements ”;

NativeScript – Quick Guide ”; Previous Next NativeScript – Introduction Generally, developing a mobile application is a complex and challenging task. There are many frameworks available to develop a mobile application. Android provides a native framework based on Java language and iOS provides a native framework based on Objective-C/Shift language. However, to develop an application that support both operating systems, we need to code in two different languages using two different frameworks. To overcome this complexity, mobile frameworks supports this feature. The main reason behind to use cross-platform or hybrid framework is easier to maintain a single code base. Some of the popular frameworks are NativeScript, Apache Cordova, Xamarin, etc. Overview of JavaScript Frameworks JavaScript is a multi-paradigm language. It supports functional programming, object-oriented and prototype based programming. JavaScript was initially used for the client-side. Nowadays, JavaScript is used as a server-side programming language as well. JavaScript frameworks are a type of tool that makes working with JavaScript easier and smoother. Using this framework, programmers can easily code the application as a device responsive. Responsiveness is one of the reasons behind why this framework is becoming very popular. Let us have a look at some of the popular JS frameworks − Angular One of the most powerful, efficient, and open-source JavaScript frameworks is Angular. We can build mobile and desktop applications. Google uses this framework. It is used for developing a Single Page Application (SPA). Vue.js VueJS is a progressive JavaScript framework used to develop interactive web interfaces. It is one of the famous frameworks used to simplify web development. It can be easily integrated into big projects for front-end development without any issues. It is dual integration mode is one of the most attractive features for the creation of high-end SPA or Single Page Application. React ReactJS is JavaScript library used for building reusable UI components. It is developed by Facebook. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it. Node.js Node.js is an open source, cross-platform runtime environment for developing server-side and networking applications. It is built on Google Chrome’s JavaScript Engine (V8 Engine). Node.js applications are written in JavaScript, and can be run on OS X, Microsoft Windows,and Linux. It provides a rich library of various JavaScript modules which simplifies the development of web applications. Overview of NativeScript NativeScript is an open source framework used for creating native iOS and android mobile applications. It is a JIT compiled framework. NativeScript code runs on JS virtual machine. It uses V8 engine runtime for both Android and iOS platforms. NativeScript uses XML, JS and CSS for development. It has a WebIDE known as PlayGround. This PlayGround supports easy working interface, easy to manage projects, hot reload and debug on devices. NativeScript allows developers to create native, cross-platform apps quickly and efficiently and save on the costs of development, testing, and training. Hence, Native apps will continue to be rich and strong for years to come to make better and easier to use. Features NativeScript has vibrant community support. Some of the salient features of NativeScript listed below − Extensible Hot Module Replacement Easy to setup We can build rich animations, graphs, charts and lists Developers can use any view as the root of an application Lazy coding Benefits NativeScript helps small or large scale companies to build cross-platform mobile apps. Some of the key benefits are − Developers can reuse existing tools and code Easy to modify, troubleshoot and update newer versions Development experience is good so we don’t have to spend time to learn new tools Platform-specific APIs from JavaScript, eliminating the need to learn Cordova plugins Ease authentication with different sign-on providers NativeScript – Installation This section explains about how to install NativeScript on your machine. Prerequisites Before moving to installation, we need the following prerequisites − Node.js Android iOS Verify Node.js Node.js is a JavaScript runtime engine build on top of Google Chrome’s internal JavaScript engine, v8. NativeScript uses Node.js extensively for various purpose like creating the starter template application, compiling the application, etc., It is mandatory to have Node.js on your machine. Hopefully, you have installed Node.js on your machine. If it is not installed then visit the link, https://nodejs.org/ and download the latest LTS package and install it. To verify if Node.js is properly installed, type the below command on your terminal − node –version You could see the version. As of now, the current stable “LTS” version of node is 12.14.0. CLI setup NativeScript CLI is a terminal/command line based application and allows you to create and develop NativeScript application. Node.js package manager npm is used to install NativeScript CLI on your machine. Use the below command to install NativeScript CLI − npm install -g nativescript After executing this command, we could see the following output − setupcli We have installed the latest NativeScript CLI, tns in our system. Now, type the below command in your terminal − tns This will list out quick-start guide. You could see the following output − cli We can use tns to create and develop application even without any additional setup. But, we could not able to deploy the application in real device. Instead we can run the application using NativeScript PlayGround iOS / Android application. We will check it in the upcoming chapters. Installing NativeScript playground App Go to your iOS App store or Google Play Store and search NativeScript Playground app. Once the application is listed in the search result, click the install option. It will install the