NativeScript Installation

Before you start #

Environment Setup for NativeScript #

Before you begin building NativeScript apps, make sure your development environment is properly configured. 

Make the app with the NativeScript CLI (ns, from the setup guide) and its TypeScript template; the code below goes into its app/main-page.xml, app/main-page.ts and app/main-view-model.ts:

ns create BarkoderApp --ts
cd BarkoderApp

1. Add the package #

Add our barkoder-nativescript package #

You can integrate the barkoder-nativescript package into your project in two ways:

Option A – Install from npm #

If your project uses npm, run:

npm i barkoder-nativescript

Option B – Install from a Local Package #

• Download the package from the barKoder Developer Portal.
• Unzip the archive.
• Add the package to your project by specifying its local path:

tns plugin add <path to barkoder-nativescript package>

Type checking #

The package comes as TypeScript sources, which ns build type-checks with your app; it stops on errors in the package's own files (barkoder-nativescript 1.7.2). To report only the errors in your own code, add the chainWebpack lines to webpack.config.js:

const webpack = require("@nativescript/webpack");

module.exports = (env) => {
	webpack.init(env);

	// barkoder-nativescript comes as TypeScript sources: type-check only your own files
	webpack.chainWebpack((config) => {
		config.plugin('ForkTsCheckerWebpackPlugin').tap(([options]) => [{ ...options, issue: { exclude: [{ file: '**/node_modules/**' }] } }]);
	});

	return webpack.resolveConfig();
};

Import package #

Import the Barkoder Constants in your project with:

import { BarkoderConstants } from 'barkoder-nativescript/barkoder-nativescript.common';

2. Allow the camera #

Camera permissions #

Our SDK requires camera permission to be granted in order to use scanning features. On Android, you specify the permissions in App_Resources/Android/src/main/AndroidManifest.xml. However, this plugin specifies the required permissions for you. @nativescript/camera. For iOS you need to specify camera permission in Info.plist file inside your project

<key>NSCameraUsageDescription</key>
 <string>Camera permission</string>

3. Add the scanner view #

BarkoderView #

At this point the barkoder-nativescript package is installed and imported in your project. Next step is to add the BarkoderView in your layout. In app/main-page.xml, declare the plugin's namespace on the Page (xmlns:Barkoder: the module that exports BarkoderView) and put the view in your layout:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:Barkoder="barkoder-nativescript/barkoder-nativescript.common" navigatingTo="navigatingTo">
   ...

   <Barkoder:BarkoderView id="barkoderView"  class="scanner-container" width="100%" height="70%"/>

   ...
</Page>

Init BarkoderView in ViewModel and set the License Key #

In app/main-view-model.ts (this class replaces the template's HelloWorldModel), find the BarkoderView of the layout and set the license key:

export class HelloWorldModel extends Observable implements BarkoderConstants.BarkoderResultCallback {
private barkoderView : any
constructor(args) {
 super()

 this.barkoderView = args.object.page.getViewById('barkoderView');
 this.barkoderView.setLicenseKey("License_Key")

}
scanningFinished(results: any[], thumbnails: any[], resultImage: any): void {
 console.log(`${results[0].textualData}`)
 console.log(`${results[0].barcodeTypeName}`)
}
}

The constructor takes the page's navigatingTo event; in app/main-page.ts, pass it on:

import { EventData, Page } from '@nativescript/core'
import { HelloWorldModel } from './main-view-model'

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  page.bindingContext = new HelloWorldModel(args)
}

4. Set the license key and barcode types #

Licensing #

Turn on the barcode types you scan, in the constructor after setLicenseKey (the SDK starts with every type off):

this.barkoderView.setBarcodeTypeEnabled([
  BarkoderConstants.DecoderType.QR,
  BarkoderConstants.DecoderType.Code128
])

5. Start scanning and read results #

Ready to Scan Event #

SDK is fully initialized and ready for configuration or to start the scanning process. Start scanning at the end of the view model's constructor (the plugin waits until the view is ready) or from a button's tap handler; each result comes to scanningFinished:

this.barkoderView.startScanning(this)

For the complete usage of the barkoder-nativescript package please check our sample.

Build and run the app on a device or an emulator (ns run ios for iOS):

ns run android