Membuat Barcode Scanning di Nativescript 8 (Core Javascript)

Nativescript adalah sebuah kerangka kerja Javascript untuk membuat aplikasi mobile native, jika kamu pernah mendengar React Native atau Flutter, kurang lebih Nativescript itu berada sejajar dengan keduanya, hanya saja Nativescript kurang begitu terkenal karena di belakang Nativescript tidak ada Nama besar seperti React Native yang di belakangnya ada nama Facebook dan Flutter yang di belakangnya ada nama Google.

Itu hanya sedikit intermeso saja, mari kita masuk ke topik pembahasannya. Tapi sebelum itu, saya ingin memberi tahu bahwa untuk tutorial ini kemungkinan hanya akan berjalan dengan baik pada Nativescript 8 atau yang lebih baru.

Untuk membuat Barcode Scanning, kita dapat menggunakan plugin yang sudah di sediakan oleh Nativescript (https://docs.nativescript.org/plugins/mlkit-barcode-scanning). Untuk mempersingkat waktu kamu dapat mengikuti langkah berikut, coba salin kode di bawah kemudian coba pahami.

Tambahkan plugin ML-KIT (https://docs.nativescript.org/plugins/mlkit-core) di projek kamu dengan mengetikan peritntah :

ns plugin add @nativescript/mlkit-core

Jika sudah tambahkan juga plugin Barcode Scannernya :

ns plugin add @nativescript/mlkit-barcode-scanning

Jika kedua plugin sudah di tambahkan, cara implementasi nya kurang lebih seperti ini :

Kode untuk file JS

import { Observable } from '@nativescript/core';
import { DetectionType } from "@nativescript/mlkit-core";

var context, camera;

var context, framePage;

export function onLoaded(args) {
  framePage = args.object.frame;
}

export function onNavigatingTo(args) {
  const page = args.object;

  context = new Observable();

  context.set("detectorType", "No Data");
  context.set("barcode", "No Barcode");

  page.bindingContext = context;
}

export function backButton() {
  framePage.navigate({
    moduleName: "home/home-page",
    animated: true,
    clearHistory: true,
    transition: {
      name: "fade",
    },
  });
}

export function MLKITViewOnLoaded(args) {
  camera = args.object;
  camera.pause = !camera.pause;
  console.log(`onLoaded`, args.object);
  context.set("isPaused", camera.pause);
  context.set("torchOn", camera.torchOn);
}

export function onDetection(event) {
  console.log("onDetection", event.data, event.type);
  if (event.type === DetectionType.Barcode) {
    const barcodeData = event.data[0];
    console.log("bounds", barcodeData.bounds, barcodeData.rawValue);
    context.set("detectorType", event.type);
    context.set("barcode", barcodeData.rawValue);
  }
}

export function toggleCamera() {
  camera.toggleCamera();
}

export function toggleTorch() {
  camera.torchOn = !camera.torchOn;
  context.set("torchOn", camera.torchOn);
}

export function requestPermission() {
  camera.requestCameraPermission();
}

export function togglePause(args) {
  camera.pause = !camera.pause;
  context.set("isPaused", camera.pause);
}

Kode untuk file XML

<Page loaded="onLoaded" navigatingTo="onNavigatingTo" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:ui="@nativescript/mlkit-core">
    <ActionBar flat="true">
        <GridLayout columns="auto, *">
            <Label text="&#xf060;" class="fas" tap="backButton" col="0" />
            <Label text="Scanner" col="1" />
        </GridLayout>
    </ActionBar>

    <GridLayout rows="*,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto" height="100%">
        <ui:MLKitView pause="true" height="100%" rowSpan="3"  loaded="MLKITViewOnLoaded" cameraPosition="back" detectionType="barcode" detection="onDetection"/>
        <Button row="1" height="40" text="Toggle Camera" tap="toggleCamera" />
        <Label color="red" row="2" text="{{'TorchOn ' + torchOn }}"/>
        <Button row="3" height="40" text="Toggle Torch" tap="toggleTorch" />
        <Button row="4" height="40" text="Request Camera Permission" tap="requestPermission" />
        <Label row="5" text="{{'Detecting ' + detectorType }}"/>
        <Label row="6">
            <FormattedString>
                <Span text="Barcode: "/>
                <Span text="{{ barcode }}" class="text-green-500 font-bold text-lg"/>
            </FormattedString>
        </Label>

        <Label row="8" text="{{'isPaused : ' + isPaused }}"/>
        <Button row="9" height="40" text="Toggle Pause" tap="togglePause" />
    </GridLayout>
</Page>

Kurang lebih seperti itu