barKoder Installation Guide for Cordova Barcode Reader SDK

Requirements #

cordova is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android and the web. To get started with building apps using cordova, you'll need to meet certain requirements:

Node.js and npm #

Ensure you have Node.js installed on your machine

Text Editor or IDE #

Choose a text editor or an integrated development environment (IDE) for coding. Popular choices include Visual Studio Code, Atom, or any other editor of your preference.

Git #

Cordova projects are often managed with Git, so having Git installed on your machine is recommended.

Command Line Interface (CLI) #

Cordova commands are executed via the command line. Make sure you have a command line interface (CLI) installed and accessible on your system.

Mobile Development SDKs #

To build and run apps on specific platforms, you'll need the corresponding SDKs

iOS development: XCode (available on macOS)

Android development: Android Studio

Cordova Project #

Install Cordova: npm install -g cordova
Add Platforms: cordova platform add ios cordova platform add android
Open IDE and Start Coding: Open your chosen IDE or text editor and start building your app using web technologies.
Open your chosen IDE or text editor and start building your app using web technologies.
Build and Run: Use Capacitor commands to build and run your app on different platforms. cordova build ios cordova build android
Use Capacitor commands to build and run your app on different platforms.

Install #

                cordova plugin add barkoder-cordova

Install Manually #

If you would like to install from a local folder you will need to follow these steps:

Download zip
Unpack zip file
Rename folder to your liking (ex. barkoder-cordova)
Move the folder to your liking but not in the project directory
Finally:

                cordova plugin add “/your-path/barkoder-cordova”

Using the plugin #

Angular #

In your ts file:

                declare var Barkoder: any;
import { BarcodeType } from 'plugins/barkoder-cordova-plugin/www/BarkoderConfig';

@ViewChild('barkoderView') barkoderViewRef!: ElementRef;

  setActiveBarcodeTypes() {
   Barkoder.setBarcodeTypeEnabled(BarcodeType.code128, true);
   Barkoder.setBarcodeTypeEnabled(BarcodeType.ean13, true);
  }

  setBarkoderSettings() {
   Barkoder.setRegionOfInterestVisible(true);
   Barkoder.setRegionOfInterest(5, 5, 90, 90);
   Barkoder.setCloseSessionOnResultEnabled(false);
   Barkoder.setImageResultEnabled(true);
   Barkoder.setBarcodeThumbnailOnResultEnabled(true);
   Barkoder.setBeepOnSuccessEnabled(true);
   Barkoder.setPinchToZoomEnabled(true);
   Barkoder.setZoomFactor(2.0);
  }

  async startScanning() {
   const boundingRect = this.barkoderViewRef.nativeElement.getBoundingClientRect() as DOMRect;
   Barkoder.registerWithLicenseKey("your_license_key");
   await Barkoder.initialize(
       Math.round(boundingRect.width),
       Math.round(boundingRect.height),
       Math.round(boundingRect.x),
       Math.round(boundingRect.y))

   this.setBarkoderSettings();
   this.setActiveBarcodeTypes();

   Barkoder.startScanning((barkoderResult: any) => {
     console.log("Result: " + barkoderResult.textualData);
   }, (err: any) => {
     console.log(err);
   });
  }

In your HTML file add the barkoderView div id:

                <div id="barkoderView" #barkoderView >

In your scss file set the desired barkoderView height:

                #barkoderView {
  height: 400px;
}

Cordova Examples