Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

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..... :smile: :grin:   ).

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 :smile: :smile: ...enjoy :smile:

27 Comments
Labels in this area