SAP Mobile App Development

Barcode scanner using device camera in SAPUI5 hybrid app

         This is a step by step tutorial showing how to use your device camera as a barcode scanner in  SAPUI5 Hybrid Mobile App with SAP Web IDE and hybrid app toolkit.We make use of kapsel barcode scanner plugin.This plugin enables Hybrid SDK applications to scan and decode a barcode using the device camera.The plugin support android and ios platforms.For more information and list of supported barcode types visit https://github.com/wildabeast/BarcodeScanner.

       We will continue with our previous tutorial app here How to Create SAPUI5 Hybrid Mobile App with SAP Web IDE?.

Pre-requisites

  1. Windows system setup with SAP Mobile Platform SDK installed and Hybrid App Toolkit configured.(If not setup already visit my  blog post Windows System Setup for Developing Mobile Apps with SAPWebIDE and SAP Mobile SDK )
  2. Created basic SAPUI5 Hybrid Mobile App(If you haven't created one yet follow previous blog How to Create SAPUI5 Hybrid Mobile App with SAP Web IDE).


Steps

  1. Start HAT Connector ,Open SAP Web IDE and check HAT connectity is avialable.If not familiar follow pre-requisites 2 section.
  2. Right click on project folder and choose Project Settings.Go to Hybrid App Toolkit->Hybrid App Configuration.Under Plugins section tick mark Kapsel Barcode Scanner plugin and press save button.
  3. Time to code.Open View1.view.xml file(Your file name may be different if you have changed name of view).In the view add two sap.m.Button controls.One for scanning barcode and one for encoding a predefined text to QR code.Then add one sap.m.Textcontrol to show the scanned barcode value.My view code is below.The button's press event is used for calling the scan and encode methods of Kapsel Barcode Scanner api.

  4. <core:View
     xmlns:core="sap.ui.core"
     xmlns:mvc="sap.ui.core.mvc"
     xmlns="sap.m" controllerName="myFirstMobileApp.view.View1"
     xmlns:html="http://www.w3.org/1999/xhtml">
     <Page title="BarCodeReader">
      <content>
       <HBox justifyContent="SpaceAround">
        <items>
         <Button text="Scan" press="onScan"></Button>
         <Button text="Encode" press="onEncode"></Button>
        </items>
       </HBox>
       <HBox width="100%" justifyContent="Center">
        <items>
         <Text text="" id="myBarCode"></Text>
        </items>
       </HBox>
      </content>
     </Page>
    </core:View>
    

  5. Open View1.controller.js.Inside onScan method  we will call scan method of cordova barcode scanner plugin.Below is my controller logic.In the success handler set the Text control's text attribute by using setText() method.

  6. sap.ui.controller("myFirstMobileApp.view.View1", {
    
    
        oView: null,
        onInit: function() {
            oView = this.getView();
        },
        onScan: function() {
            var options = {
                preferFrontCamera: false, // iOS and Android
                showFlipCameraButton: true, // iOS and Android
                showTorchButton: true, // iOS and Android
                torchOn: true, // Android, launch with the torch switched on (if available)
                prompt: "Place barcode inside the scan area", // Android
                resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
                formats: "QR_CODE,PDF_417,UPC_A", // default: all but PDF_417 and RSS_EXPANDED
                orientation: "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
                disableAnimations: true // iOS
            };
            cordova.plugins.barcodeScanner.scan(this.onScanSuccess, this.onScanError, options);
        },
        onScanSuccess: function(result) {
            var oText = oView.byId("myBarCode");
            oText.setText("barcode is " + result.text + " and format is " + result.format);
            alert(JSON.stringify(result));
        },
        onScanError: function(error) {
            alert("error" + JSON.stringify(error));
        },
        onEncode: function() {
            cordova.plugins.barcodeScanner.encode(cordova.plugins.barcodeScanner.Encode.TEXT_TYPE, "http://www.techippo.com", this.onEncodeSuccess,
                this.onEncodeFail
            );
        },
        onEncodeSuccess: function(success) {
            alert("encode success: " + JSON.stringify(success));
        },
        onEncodeFail: function(fail) {
            alert("encoding failed: " + JSON.stringify(fail));
        }
    
    
    
    });
    

  7. To test the App Right Click ->Run->Run on Local Device/Simulator->Android Device.Testing on emulator may not work properly because of lack of camera in emulator.
  8. See screenshots taken before and after scanning a barcode and see generated QRcode also.





Note:The encode method's success handler method is never called.We can just see the generated QR code image only.Since the success handler is never called I was not able to get the generated image in my app.This may be a bug of cordova barcode scanner plugin.
If you enjoyed this post, Please Share!!

15 comments :

  1. Hi,

    I am able to use barcode scanner in webide. But when i deploy the application to Fiori launchpad, cordova is undefined.

    can anyone help :(

    Thanks,
    Chandrasen

    ReplyDelete
    Replies
    1. Try using it with fiori client.The plugin will work only in mobile devices.

      Delete
  2. Nice to be visiting your blog again, it has been months for me. Well this article that i’ve been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share. portable scanner for photos

    ReplyDelete
  3. Hi there! Nice post! Please tell us when I will see a follow up! 안전놀이터

    ReplyDelete
  4. Hi there! Nice stuff, do keep me posted when you post again something like this! 안전놀이터

    ReplyDelete
  5. The development of barcode scanners has made it easier to scan items and keep inventory in many business locations.
    토토사이트

    ReplyDelete
  6. This blog is really great. The information here will surely be of some help to me. Thanks!. 먹튀검증

    ReplyDelete
  7. Attractive, post. I just stumbled upon your weblog and wanted to say that I have liked browsing your blog posts. After all, I will surely subscribe to your feed, and I hope you will write again soon! BizOp

    ReplyDelete
  8. Efficiently written information. It will be profitable to anybody who utilizes it, counting me. Keep up the good work. For certain I will review out more posts day in and day out. source

    ReplyDelete
  9. You have done a great job on this article. It’s very readable and highly intelligent. You have even managed to make it understandable and easy to read. You have some real writing talent. Thank you. 안전놀이터

    ReplyDelete
  10. Hello I am so delighted I located your blog, I really located you by mistake, while I was watching on google for something else, Anyways I am here now and could just like to say thank for a tremendous post and a all round entertaining website. Please do keep up the great work. 안전놀이터

    ReplyDelete
  11. You have performed a great job on this article. It’s very precise and highly qualitative. You have even managed to make it readable and easy to read. You have some real writing talent. Thank you so much. 무료릴게임

    ReplyDelete
  12. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. 온라인릴게임

    ReplyDelete

Powered by Blogger.