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!!

23 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. Very informative post! There is a lot of information here that can help any business get started with a successful social networking campaign. business texting services

    ReplyDelete
  3. 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
  4. The Master's Guide to text messaging platforms
    A large number of private companies use instant message advertising to empower expanded promoting commitment from possibilities and clients. As far as we can tell, most independent ventures use text showcasing to produce expanded client securing, convey advancements and warnings, augment client support viability, and increment inside productivity.
    From retail organizations and not-for-profit associations to land and eateries, text showcasing is utilized by more independent companies than at any time in recent memory.

    ReplyDelete
  5. Very nice article, I enjoyed reading your post, very nice share, I want to twit this to my followers. Thanks!. agence digitale Alsace

    ReplyDelete
  6. Texting is an extremely effective communication & marketing channel for tax preparation services. 98% of text messages are read within 3 minutes of receipt! That’s significant when you consider that 90% of emails are considered SPAM so email marketing for tax professionals just isn’t as effective anymore. Whether you are marketing an accounting firm or just software for tax preparers

    ReplyDelete
  7. We’re a tax preparation company in textellent in providing tax planning/tax filing, firm registration, and financial services. We are working with Individuals, Businesses, Charities in the world, and offering them professional tax services with their unique tax filing requirements tax preparation services

    ReplyDelete
  8. When you use a genuine service, you will be able to provide instructions, share materials and choose the formatting style. spy cam

    ReplyDelete
  9. Thanks for sharing the post.. parents are worlds best person in each lives of individual..they need or must succeed to sustain needs of the family. spy camera

    ReplyDelete
  10. I'm glad I found this web site, I couldn't find any knowledge on this matter prior to.Also operate a site and if you are ever interested in doing some visitor writing for me if possible feel free to let me know, im always look for people to check out my web site. WordPress Developer Brisbane

    ReplyDelete
  11. 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.
    click here

    ReplyDelete
  12. Along these lines, I anticipate that the requirement for individuals with logical (and designing) skill in the field of patent planning is on the expansion.TutuApp web

    ReplyDelete
  13. To make picture records more modest pretty much every advanced camera utilizes some type of pressure. This EasyShare computerized camera's goal of 5 megapixels, 3x optical zoom and an all-glass focal point consolidate for astonishing picture detail and clearness. Instant camera

    ReplyDelete
  14. TAXPRO is a chief expert administration firm enhancing the matter of its customers for over 30 decades. We do this by giving a wide array of administrations in the monetary space which ranges from Entry Level Strategy, Taxation consultancy administrations, GST, Audit and Assurance, Accounting, Corporate Compliance, Payroll Services, ESI/PF Consultancy, and part more. We are a group of expense experts that incorporates Chartered Accountants, Advocates, Company Secretaries, Financial counselors offering tax preparation software to the makers, Traders, Dealers, and specialist organizations of the business. Our administrations are looked for different business, lawful, and tax assessment confusions.

    ReplyDelete
  15. The article depicts a list of underlying KPIs (Key Performance Indicators) that help in determining an Kajabi vs clickfunnels position in the market and for owners to act upon to reach the targeted goals. While smartphones have become an undeniable part of every common man's life, it has also opened up multiple opportunities for businesses to engage with their consumers like never before.

    ReplyDelete
  16. There are numerous phone apps that will make the actor's life easier. An awareness of these tools can increase the efficiency of learning one's craft as well as improving marketing efforts. This article spotlights what basic types of Elyments App are available plus the benefits and caveats of using them.

    ReplyDelete
  17. Good website! I truly love how it is easy on my eyes it is. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your RSS which may do the trick? Have a great day! best cell phone spy apps

    ReplyDelete
  18. Positive site, where did u come up with the information on this posting? I'm pleased I discovered it though, ill be checking back soon to find out what additional posts you include.
    토토사이트

    ReplyDelete
  19. I like this post,And I guess that they having fun to read this post,they shall take a good site to make a information,thanks for sharing it to me.
    파워볼사이트

    ReplyDelete

Powered by Blogger.