Cordova Installation

Before you start #

Requirements #

Apache Cordova is a cross-platform runtime that lets you build mobile apps using web technologies (HTML, CSS, JavaScript) and run them natively on iOS, Android, or the web. Before you start, ensure the following prerequisites are met:

Node.js and npm #

Cordova is installed through npm, which comes bundled with Node.js.

☑ Download Node.js and verify installation:

node -v  
npm -v

Text Editor or IDE #

Choose an editor to write your code. Popular options include:

☑ Visual Studio Code

☑ Atom, Sublime Text, or any other editor you prefer.

 Git (Recommended) #

Cordova projects are often version-controlled using Git.

git --version

Command Line Interface (CLI) #

Cordova commands are executed via your system’s terminal or command prompt.

Mobile Development SDKs #

Platform-specific SDKs are required to build and run apps (for Android, cordova build android also needs JDK 17 or later, with JAVA_HOME set, and Gradle: it runs the gradle command to make the project's Gradle wrapper):

• iOS: Xcode (macOS only)
• Android: Android Studio (cross-platform)

Verify Setup ( optional )  #

Once everything is installed, confirm your environment is ready:

# Install Cordova globally
npm install -g cordova  

# Verify Cordova installation
cordova -v  

# Create a test project
cordova create myApp com.example.myapp MyApp  
cd myApp  

# Add platforms (optional)
cordova platform add ios  
cordova platform add android  

# Build the app to ensure everything works
cordova build

If you see no errors during the build, your setup is complete.

Cordova Project #

Install Cordova #

Install Cordova globally so you can access it from anywhere:

npm install -g cordova

Add Platforms #

Add the platforms you want to build for:

cordova platform add ios  
cordova platform add android

Start Building #

Open your preferred IDE or text editor and begin developing your app using standard web technologies (HTML, CSS, JavaScript). Cordova will wrap these files into native mobile apps.

Build and Run #

Use Cordova commands to compile and launch your app:

cordova build ios  
cordova build android

This will generate platform-specific builds that you can test on emulators or physical devices.

1. Add the package #

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"

2. Set the license key and barcode types #

Licensing #

3. Start scanning and read results #

Using the plugin #

The code below is an Angular component. Make the Angular app in your Cordova project's folder (as on the Angular integration example), with its build going to the Cordova project's www folder:

npx @angular/cli new angular_app --style=scss --ssr=false
cd angular_app
npx ng config projects.angular_app.architect.build.options.outputPath '{"base":"../www","browser":""}'

In the Angular app's src/index.html, load cordova.js before </head>: it puts the plugin on window.Barkoder and fires deviceready.

<script src="cordova.js"></script>

Angular Example #

In your component's ts file (the declare and import lines at the top, the rest inside the component class):

declare var Barkoder: any;
import { ElementRef, ViewChild } from '@angular/core';
import { BarcodeType } from 'barkoder-cordova/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) => {
     barkoderResult.decoderResults.forEach((result: any) => console.log("Result: " + result.textualData));
   }, (err: any) => {
     console.log(err);
   });
  }

In your component's HTML file add the barkoderView element, and a button that starts scanning:

<div id="barkoderView" #barkoderView></div>
<button (click)="startScanning()">Start scanning</button>

In your scss file set the desired barkoderView height:

#barkoderView {
  height: 400px;
}

Build the Angular app into www, then build and run the Cordova app (again after every change):

npx ng build
cd ..
cordova build android
cordova run android