Capacitor General example

Requirements: #

Capacitor 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 Capacitor, you'll need to meet certain requirements:

Node.js and npm #

Ensure you have Node.js installed on your machine. Capacitor 8 requires Node.js 22 or later. npm (Node Package Manager) is also required. It usually comes with Node.js.

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 #

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

Command Line Interface (CLI) #

Capacitor 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:

For iOS development: Xcode (available on macOS)

For Android development: Android Studio, with JDK 21 (Capacitor 8 builds with Java 21)

Here are the basic steps:

Install Capacitor: #

npm install @capacitor/core
npm install -D @capacitor/cli
npx cap init "My App" com.example.myapp --web-dir dist/my-app/browser

Run these in your Angular app's folder (a new one: npx @angular/cli new my-app). Give npx cap init your app's name and ID. --web-dir is the folder ng build writes to: dist/<project name>/browser.

Add platforms #

npm install @capacitor/android @capacitor/ios
npx cap add android
npx cap add ios

Open IDE and Start Coding: #

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

Build and Run: #

Build the web app and copy it into the native projects (again after every change), then open them in Android Studio or Xcode and run:

npm run build
npx cap sync
npx cap open android
npx cap open ios

Install barkoder #

npm install barkoder-capacitor
npx cap sync

Install barKoder 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

• Paste the folder in app directory ex. myApp/barkoder-capacitor (this is the new name of the download plugin folder)

Finally:

npm install "/your-path/myApp/barkoder-capacitor"

Using the plugin #

Angular #

In your component's ts file (the imports at the top, the rest inside the component class):

import { ElementRef, ViewChild } from '@angular/core';
import { Barkoder, BarkoderResult, BarcodeType } from 'barkoder-capacitor';

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

   constructor() {
     Barkoder.addListener('barkoderResultEvent', (data: any) => {
       console.log('barkoderResultEvent was fired');
       const barkoderResult = new BarkoderResult(data);
       if (barkoderResult) { 
         barkoderResult.decoderResults.forEach((result, index) => {
            console.log(`Result ${index + 1}: ${result.textualData}`);
         });
       }
     });
   }

   ngAfterViewInit() {
    Barkoder.registerWithLicenseKey({ licenseKey: "YOUR_LICENSE_KEY" });
    setTimeout(() => {
      const boundingRect = this.barkoderViewRef.nativeElement.getBoundingClientRect() as DOMRect;
      Barkoder.initialize({
        width: Math.round(boundingRect.width),
        height: Math.round(boundingRect.height),
        x: Math.round(boundingRect.x),
        y: Math.round(boundingRect.y),
      });
      this.setBarkoderSettings();
      this.setActiveBarcodeTypes();
    }, 200);
  }

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

   setBarkoderSettings() {
    Barkoder.setRegionOfInterestVisible({value: true});
    Barkoder.setRegionOfInterest({ left: 5, top: 5, width: 90, height: 90 });
    Barkoder.setImageResultEnabled({ enabled: true});
    Barkoder.setBarcodeThumbnailOnResultEnabled({ enabled: true});
   }

   startScanning() {
    Barkoder.startScanning();
   }

In your 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;
}