Vue JS external Android library interaction (Zebra)

Question

I'm a relatively new dev when it comes to vue.js. My company started developing a set of tools based on Laravel + Jetstream, which use Vue on the front-end.

We also use Zebra scanners to move stock around, and I'm working on integrating their callback functionality into Laravel via Vue component.

Zebra's documentation is used as a reference: zebra (I must note - it works on our current scanners, but that's because current setup doesn't have laravel/Vue - just vanilla JS).

Here is the integration file that I made:

<template>
    
</template>

<script>
    export default {
        data () {
            return {
                chars: [], 
                barcode: ''
            }
        },
        methods: {
            //Zebra integration is described here: 
            //https://help.android-kiosk.com/en/article/zebra-tc-series-integration-barcode-scanner-16ox5x7/
            registerForBarcodeScanResults(status) {
                console.log("Registered the zebra thingy");
                if (typeof Android != 'undefined') {
                    //tell KB to return results via JS function
                    Android.useJavaScriptCallbackZebraScanner(status);
                }
            },
            barcodeScanResult(data) {
                this.$emit('scannedBarcode', data)
            }

        },
        created() {
            window.addEventListener('keypress', this.inputCapture);
            this.registerForBarcodeScanResults(true);
        },
        destroyed() {
            window.removeEventListener('keypress', this.inputCapture);
        },
    }
</script>

When created, registerForBarcodeScans works as intended and outputs to console. However, when scan is performed, the console says:

Uncaught ReferenceError: barcodeScanResult is not defined at :1:1 (anonymous)@VM14:1

So I think the reason is that when scan is done, the callback starts on the Android device but doesn't know how to reach vue.js framework from which it was initially called.

I must note that I don't have access to the Android documentation for this function - it's a black box for me.

So my question is - is there any way to point the external code in the direction of methods declared in my vue.js file? Do I need to wrap the Android registration into some virtualisation layer?

I've looked at a lot of similar questions, but the problem is that this android function is not an API, so Axios is inapplicable here. Importing doesn't seem to work either because it's not a concrete file that I'm importing, but an Android library. Plus I don't know it's structure.

Thank you in advance!

I would expect barcodeScanResult was invoked by that Kiosk software at the window level so stackoverflow.com/questions/54166847/… looks relevant to me — Darryn Campbell
– Darryn Campbell, Commented Apr 20, 2021 at 7:53

kleverdd · Accepted Answer · 2021-04-20 12:56:47Z

0

The final solution involved adding

created() {
        window.addEventListener('keypress', this.inputCapture);
        this.registerForBarcodeScanResults(true);
        window.barcodeScanResult = this.barcodeScanResult;
    }

to the above code - apparently, there's a disconnect between registering barcodeScanResult functions on Android and on Page and they have to be linked manually. Once the scope is explicitly set - it works.

edited Apr 20, 2021 at 12:56

answered Apr 20, 2021 at 10:13

kleverdd

14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue JS external Android library interaction (Zebra)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related