Integrate and use a native module

How-to Discussions
1

Hello everybody,

I’m trying to integrate a native module to scan QR-Codes into my app: (https://github.com/zean00/fuse-qreader)
This is what I did to integrate and use the module:

  • Download and put the code into the libraries directory: /libraries/fuse-qreader
  • Add the module to the .unoproj file:
{
  "RootNamespace":"stentle.app",
  "Packages": [
    "Fuse",
    "FuseJS",
    "Fuse.Scripting"
  ],
  "Includes": [
    "*"
  ],
  "Projects": [
    "libraries/fuse-qreader/fuse-qreader.unoproj"
  ]
}
  • Import and use the module into my JS code as follows:
function scan() {
        var qreader = require('libraries/fuse-qreader/Qreader');
        qreader.scan().then(function (res) {
	        console.log("Scan result: " + res);
        }).catch(function(error) {
	        console.log("Error scanning QR code");
        });
}

This is the error printed on the console when the application starts:

Error: : Error message: Uncaught require(): module not found: libraries/fuse-qreader/Qreader
File name: components/js/ScanButton.js
Line number: 15
Source line: var qreader = require('libraries/fuse-qreader/Qreader');
 in Fuse.Reactive.DiagnosticSubject<components/js/ScanButton.js:15>
Error: : Error message: Uncaught require(): module not found: libraries/fuse-qreader/Qreader
File name: components/js/ScanButton.js
Line number: 15
Source line: var qreader = require('libraries/fuse-qreader/Qreader');
 in Fuse.Reactive.DiagnosticSubject<components/js/ScanButton.js:15>

I tried to change import line as well to var qreader = require('Qreader'); but I got the same error.

Does anybody see what I’m doing wrong here?

Thanks,

Andrea

2

Yeah, the instructions on that repository clearly state that you need to add a Qreader instance in UX <Qreader ux:Global="Qreader" /> to later use it in JS: var qreader = require('Qreader');.

That is so, because the qreader library hasn’t been made with [UXGlobalModule] and can’t be directly used in JS without being instantiated in UX first. I would suggest you to log a ticket on the repository to let the author know that they could make this improvement.

Hope this helps!

3

Sorry, I forgot to mention this part. I’m actually initializing the UX into the .ux component file.

ScanButton.ux:

<Panel ux:Class="stentleapp.ScanButton" BackgroundColor="stentleapp.color.Main" TextColor="stentleapp.color.White"   Margin="20,20,0,0" Alignment="BottomRight">

	<Router ux:Dependency="router"/>
	<JavaScript File="js/ScanButton.js"/>

	<float4 ux:Property="TextColor" />
	<float4 ux:Property="BackgroundColor" />
	<string ux:Property="Number" />

	<Qreader ux:Global="Qreader" />

	<Circle ux:Name="btn" Height="56" Width="56" Color="{Property this.BackgroundColor}" Margin="16" Clicked="{scan}">	
		<stentleapp.icons.Scan FontSize="40" Color="{Property this.TextColor}" />
	</Circle>
	
	<WhilePressed>
		<Change btn.Color="{Resource stentleapp.color.DarkGrey}" Duration=".2" DurationBack=".2" />
	</WhilePressed>
	<DropShadow />
</Panel>

The ScanButton.js file imported into the component contains the code described into my first post of this thread.

Andrea

4

Does it help if you move <Qreader ux:Global="Qreader" /> to your MainView.ux?

5

Hi Uldis,

no I didn’t, but it helped to change the import of the module from

var qreader = require('libraries/fuse-qreader/Qreader');

to

var qreader = require('Qreader');