Skip to Content

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

2.PNG


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

1.PNG

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 :

4.PNG

5.PNG

6.PNG

Execute command “cordova run –device” or “cordova run –emulator”, application should start on device(or emulator) as shown in the following screen shot.

Screenshot_2014-03-15-01-15-33.png

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”

8.PNG


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”.


7.PNG


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

Screenshot_2014-03-15-02-33-46.png

Screenshot_2014-03-15-02-34-16.png

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 🙂

To report this post you need to login first.

25 Comments

You must be Logged on to comment or reply to a post.

  1. Joao Sousa

    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.

    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?

    (0) 
    1. Vijaykumar Ratnakar Post author

      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 🙂

      (0) 
      1. Joao Sousa

        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.

        (0) 
        1. Mathan P

          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

          (0) 
  2. Vishnupriya Varadharajan

    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

    (0) 
    1. Vijaykumar Ratnakar Post author

      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.

      (0) 
        1. Vijaykumar Ratnakar Post author

          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.

          (0) 
          1. Vishnupriya Varadharajan

            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

            Vishnupriyacordova cmd.PNG

            (0) 
              1. Vishnupriya Varadharajan

                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.

                npmrc.PNG

                (0) 
  3. Rauf Shaikh

    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

    (0) 
    1. Vijaykumar Ratnakar Post author

      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.

      (0) 
      1. Rauf Shaikh

        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

        (0) 
  4. Lindsay Stanger

    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

    (0) 
    1. Vijaykumar Ratnakar Post author

      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?

      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

      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?


      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.

      (0) 
  5. Meenakshi I

    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

    (0) 
    1. Vijaykumar Ratnakar Post author

      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.

      (0) 
      1. Meenakshi I

        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

        (0) 
  6. Dhruv Shah

    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.

    (0) 

Leave a Reply