Angular Integration Example

Start a Cordova Project #

1. Install Cordova:  npm install -g cordova
2. Create a New Cordova Project: cordova create my-cordova-app com.example.cordovaapp CordovaApp
3. Navigate into the Cordova Project: cd my-cordova-ap
4. Add Platforms:  cordova platform add ios or cordova platform add android
5. Open IDE and Start Coding: Open your chosen IDE or text editor and start building your app using web technologies.
6. Build and Run: Use Cordova commands to build and run your app on different platforms. cordova build ios or cordova build android

Installation #

1. Add barkoder-cordova Plugin:

                cordova plugin add barkoder-cordova

            

Install Manually #

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

1. Download the zip file from the barKoder Developer Portal repository
2. Unpack the zip file
3. Rename the folder to your liking (ex. barkoder-cordova)
4. Move the folder to your liking but not in the project directory
5. Finally:

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

Using the plugin with Angular #

1. Install Angular CLI Globally:

                npm install -g @angular/cli
            

• In your Cordova app folder, run the following command, that will create a new Angular application: 

                ng new angular_app
cd angular_app
            

• Configure Angular build output for Cordova

Update the angular.json file in your Angular project to output the build to the www directory used by Cordova.

                {
  ...
  "projects": {
    "angular_app": {
      ...
      "architect": {
        "build": {
          "options": {
            "outputPath": "../www",
            ...
          },
          ...
        },
        ...
      }
    }
  }
}
            

• Add the cordova.js script to src/index.html:

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

• Generate a new component for the barcode scanner:

                ng generate component BarcodeScanner
            

• 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;
}
            

• Build the Angular Application

                ng build
            

• Test and Run Your Cordova App

                cd ..
cordova build android
cordova run android