Integrating Barcode Scanner functionality in SAPUI5 (or cordova ) application
In this blog I will be concentrating more on creating and adding plugins (barcode scanner) to a cordova applications, rather than explaining SAPUI5 coding (I am sure that nobody needs simple button click functionality to be taught in sapui5….. 🙂 😀 ).
For packaging of sapui5 application with phoneGap refer my previous blog Packaging sapui5 application using phoneGap for Android .
There are some confusion about phoneGap and cordova, as far as codebase is concerned there is no difference between them. Phonegap is a command that encapsulates cordova, major difference is that phonegap has a remote build capability whereas cordova supports local builds, you can find more information about this here . In this blog I will create cordova application and add barcode scanner plugins to it.
Download and install nodejs from here.
Open command prompt (or terminal ) and execute command npm you should see the following screen
all possible npm related commands are listed here. To install cordova execute “npm install -g cordova”.
Guys behind proxy, to set proxy parameters ,execute following command :
set HTTP_PROXY=http://user:password@proxy.domain.com:port
set HTTPS_PROXY=http://user:password@proxy.domain.com:port.
now you can execute “cordova” command to see if it is installed properly, you should see all the cordova related commands.
Once cordova installation is confirmed, execute following command to create cordova project.
cordova create E:\programs\barcodeScanner com.enterprisemobility.barcodeScanner barcodeScanner
now do “cd barcodeScanner” and execute the command “cordova platform add android”, this command adds specified platform (i.e., android) to the cordova project. Folder structure can be seen as follows :
Execute command “cordova run –device” or “cordova run –emulator”, application should start on device(or emulator) as shown in the following screen shot.
Now coming to the barcode part, you can download barcode scanner from here, supported barcode formats are listed in the same page.
To install barcode scanner in your project execute this command:
“cordova plugin add PATH”
where PATH is a location of barcodeScanner plugin,it may be downloaded location or it can be git repository location.
To copy it from a git repository “GIT” command line tool should be installed in your system.
You can install it by executing the command “npm install git”.
After installing barcode scanner plugin, you can call the following function to scan the barcode from openUI5 or sapui5 code.
cordova.plugins.barcodeScanner.scan(
function (result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
function (error) {
alert("Scanning failed: " + error);
}
);
this is my modified index.html code
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”format-detection” content=”telephone=no” />
<!– WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 –>
<meta name=”viewport” content=”user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi” />
<link rel=”stylesheet” type=”text/css” href=”css/index.css” />
<title>Hello World</title>
</head>
<body>
<div class=”app”>
<h1>Apache Cordova</h1>
<div id=”deviceready” class=”blink”>
<p class=”event listening”>Connecting to Device</p>
<p class=”event received”>Device is Ready</p>
</div>
<input type=”button” value=”scan” onclick=”scan()”></input>
</div>
<script type=”text/javascript” src=”cordova.js”></script>
<script type=”text/javascript” src=”js/index.js”></script>
<script type=”text/javascript”>
function scan(){
cordova.plugins.barcodeScanner.scan(
function (result) {
alert(“We got a barcode\n” +
“Result: ” + result.text + “\n” +
“Format: ” + result.format + “\n” +
“Cancelled: ” + result.cancelled);
},
function (error) {
alert(“Scanning failed: ” + error);
}
);
}
</script>
<script type=”text/javascript”>
app.initialize();
</script>
</body>
</html>
on click of a scan button, application starts looking for a barcode
To package your sapui5 application, simply copy index.html and related .js files from www folder of your sapui5 application and paste it in a www folder within barcodeScanner folder and add reference to cordova.js file in index.html.
your barcode scanner app is ready 🙂 🙂 …enjoy 🙂
I tried to put the WebContent of the fiori tutorial (10 exercices) in the cordova www folder, added the reference to cordova.js in the index.html, but all I get is a blank screen. Any ideas?
Hi joao,
Its probably a reference issue, copy and paste the index.html in www folder (out of webcontent) of cordova, and also change the reference of all the files as webcontent\view\viewName.view.js .In fiori tutorial they are referring to local resources, in that case copy resources from sapui5-static.zip into www folder.
For debugging, execute the command "cordova serve 8000", now you can access your application in browser using http://host-ip:8000/android/www/index.html.
Use chrome developer tool (press F12),it shows the error in console.
Let me know if it works 🙂
And haven't got it working yet, but you were right, the sap-ui-core.js was missing.
In the debug window I can see the 404 error code.
Hi Joao,
I was added fiori 10 exercise file into cordova www file and I too getting blank page.
Any update in your cordova? Do you got output?
Thanks,
Mathan
Hi Vijay,
Very Helpful. Thank you so much for sharing this blog.
Regards,
Sid
awesome Blog, Thanks for Sharing 🙂
Hi,
Nice Blog! I have successfully installed node.js and cordova. But when I try to create a cordova project, I get an error like
Error: tunneling socket could not be established, cause=Parse Error
at ClientRequest.onError
Could you please help? I am behind a proxy. I have also set the registry using
set registry = http://registry.npmjs.org/ But no luck.Thanks
Vishnupriya
Hi Vishnupriya,
I doubt if it is a proxy issue, as you are able to install node and cordova. "cordova create" command will not make any request to the repository, instead it will copy the project structure from a installed files.
Try executing command cordova, it should give you a bunch of command suggestions, let me know if you are able to execute this.
Regards,
Vijay.
Hi Vijay,
Yes, I am able to execute cordova command and it does give me a bunch of command suggestions. Attaching the screenshot herewith.
Regards,
Vishnupriya
Hi,
Looks like some issue with the cordova installed file, try uninstall and installing cordova again.Use npm uninstall cordova -g
and to install it in a perticular directory (not global-this might help you in understanding cordova structure), cd into that directory and execute npm install cordova
omitting "-g". Try creating cordova project from this.
Let me know..
Regards,
Vijay.
Hey Vijay,
I followed your instructions but still no luck. Getting the same issue.
Cordova intallation gave me 200 ok and 304 codes...didnt get any ERR!! Hopw it is a successful installation.
Thanks
Vishnupriya
Hi,
Open your .npmrc file in notepad and check if proxy setting is proper there.
Regards,
Vijay.
Hi Vijay,
I dont see the proxy setting in my .npmrc file. I searched for the extn and found 3 files. i searched in npmrc.md - but not finding anything here. Not sure if i am looking at the correct file. can u pls help.
Hi,
Thanks for your help.
I followed your steps now, even copied all files to www folder from SAPUI5 application, but i am getting SAPUI5 Libraries conflict i.e. 'sap-ui-core.js' and 'sap' is not defined.
Please help.
Regards,
Rauf
Hi Rauf,
This error usually occurs if sapui5 library is not available to the cordova app, just check if you have added resources folder in your assets folder and also check if these resources have been referenced properly in your index.html
Do let me know..
Regards,
Vijay.
Dear Vijay,
Thanks for your reply.
I have copied everything from WebContent folder of SAPUI5 application to www folder of cordova application.
I guess my 'resources' is missing many files. Can you please tell from where I can download 'resources' folder?
Regards,
Rauf
Hi Rauf,
Download openUI5 resources from here
OpenUI5 - Download
Regards,
Vijay
Dear Vijay,
Thanks. Its working now 🙂
Regards,
Rauf
Thanks Vijaykumar Ratnakar for this blog, it looks very promising!
I wonder: have you or Ferry Gunawan ever user phoneGap Build for this kind of feature?
I am looking to include a bar-code scanner in an iOS app, but as I don't own a Mac I cannot use the command "cordova platform add ios", like you did for android.
Are you aware of how we could use the barcode scanner plugin for phonegap build to produce the same results you have above (and in Ferry's article) but for an iOS application built on a windows machine?
I believe one of the difficulties is that we need an iOS signing key, but it seems that you can generate a key in this way, without need for a Mac. If this is the only thing we needed in order to build an iOS app, then we don't need a Mac, if we can use phoneGap build rather than building the app locally, as you have shown above.. is this your understanding too or have I misunderstood?
Does this make sense? Is this something either of you have tried before? I would really appreciate your comments on this.
I have very much enjoyed both of your posts, which give me hope that it is possible for iOS as well as Android (I mean, I know it is possible, but I hope it is possible without needing a Mac)
Thank you,
Lindsay
PhoneGap Build (PGB) expects a zip file with config.xml and index.html at the root of the folder structure. Any plugin could be added to config.xml, for example to add barcodeScanner plugin add following line in config.xml,
<gap:plugin name="com.phonegap.plugins.barcodescanner" />
Don't have to add any plugin related code to your zip as phoneGap build takes care of downloading the code during packaging process. This one line in config.xml is sufficient, you can start calling plugin related functions in your index.html file. I have put together a small example for barcodeScanner (PGB ready) you can clone the app from here
vijayk036/barcodeScanner-phonegap-build · GitHub
A simple answer is yes you can build iOS apps without MAC using PGB, but still you would have to purchase developer license from apple and convert it to P12 file. Finally upload P12 file to your PGB account.
Regards,
Vijay.
Thanks so much for your quick reply Vijay! I will have a go at this now 🙂
Thank you!
Lindsay
Hi, Vijaykumar Ratnakar
I have followed this steps and try to create Cordova Project and getting error as "cordova.js" not found if I directly add this then get error like "
ReferenceError: require is not defined
var channel = require('cordova/channel');I need to use Bar code scanner in my simple SapUI5 mobile app. Can you please give me the proper index.html and related .js files?
Thanks & Regards,
Meenakshi I
Hi Meenakshi,
To use require module you will have to include require.js in index.html intead of thet you can also include cordova.js as follows :
<script type="text/javascript" src="cordova.js"></script>Can you try remove and add platform, it looks like your platform files are not copied or generated properly. Do let me know.
Regards,
Vijay.
Hi Vijay,
Thanks for the reply.
Can It possible to use this "Cordova" plugin with simple "Sapui5" web app just for mobile devices?
My main requirement is to implement scan functionality to simple "Sapui5" web app for mobile devices.
May be previously "BarcodeScannerButton" is already present in Sapui5, but in new versions it might be removed.
BarcodeScannerButton - sap.ndc
I have also referred below link
Using Camera as Barcode scanner on your mobile device in SAPUI5 app
Thanks & Regards,
Meenakshi
Hi Vijay,
I followed the steps which is mentioned in this blog, but i am only getting the image which shows Device is ready. I tried using browser and also through apk file.
Please let me know where i am missing.
Hi Vijay,
I try to barcode scanner with cordova and sapui5 but I couldn't submit project Sap Server as BSP App.
Can I do this?
Thanks & Regards,
Kaan,
Hi Vijay
I have a doubt
Is it possible for me to use blutooth enabled barcode reader with your application ?
Kindly hepl me in this regard .
Regards
Ashwin