Cordova General example

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:

1. Node.js and npm #

Ensure you have Node.js installed on your machine.

2. 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.

3. Git #

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

4. 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.

5. Mobile Development SDKs #

To build and run apps on specific platforms, you'll need the corresponding SDKs (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):

• For iOS development: Xcode (available on macOS)
• For Android development: Android Studio

6. Install Cordova and create a project #

npm install -g cordova
cordova create myApp com.example.myapp MyApp
cd myApp

7. Add Platforms #

cordova platform add ios   
cordova platform add android

8. Open IDE and Start Coding #

Open your chosen IDE or text editor and start building your app using web technologies.

9. Build and Run #

Use Cordova commands to build and run your app on different platforms.

cordova build ios   
cordova build android

Installation #

Install from npm #

Most users will use this method to install the plugin as it provides the easiest straight forward path to obtaining the software.

cordova plugin add barkoder-cordova

Install Manually #

There will be situation where you would want to install it manually. In this case 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"

Angular app in the Cordova project #

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>

Examples of using the plugin #

Angular #

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 { BarkoderResult, BarcodeType } from 'barkoder-cordova/www/BarkoderConfig';

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

  ngAfterViewInit() {
    // Cordova's deviceready: the plugins are loaded (window.Barkoder)
    document.addEventListener('deviceready', () => {
      Barkoder.registerWithLicenseKey("YOUR_LICENSE_KEY");
      setTimeout(() => {
        const boundingRect = this.barkoderViewRef.nativeElement.getBoundingClientRect() as DOMRect;
        Barkoder.initialize(
          Math.round(boundingRect.width),
          Math.round(boundingRect.height),
          Math.round(boundingRect.x),
          Math.round(boundingRect.y)
        );
        this.setBarkoderSettings();
        this.setActiveBarcodeTypes();
      }, 200);
    });
  }

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

   setBarkoderSettings() {
    Barkoder.setRegionOfInterestVisible(true);
    Barkoder.setRegionOfInterest(5, 5, 90, 90);
    Barkoder.setImageResultEnabled(true);
    Barkoder.setBarcodeThumbnailOnResultEnabled(true);
   }

   startScanning() {
    Barkoder.startScanning((data: any) => {
      console.log("startScanning results called");
      const barkoderResult = new BarkoderResult(data);
      if (barkoderResult) {
         barkoderResult.decoderResults.forEach((result, index) => {
            console.log(`Result ${index + 1}: ${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