One question that I get very often form my customers is: “How can I use all this mobile device functions like camera, GPS and all the other stuff in a Web Application?”.

As you might know the browser runs the Webpage in a sandbox for safety reasons. Direct access to devices like camera is not possible. Because of that reason we need to run the webpages in a native app.

This is exactly was Apache Cordova does. You can run your Webpages in a native app and access all devices via JavaScript. One other big advantage is, that all pages are on your device, so the performance is higher than in a browser.

For a prove of concept I choose the SAP Fiori like App from this great tutorial:

Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises

The Idea

After finishing this Exercises I have a nice Fiori like app that is running in a browser. What I want to do is to use the camera of my iPad as a Barcode scanner. This are two tasks in one step. First we have to use the camera to scan the barcode an second the barcode must be translated from a picture to a value. That seems to be a good testcase.

I was surprised how easy it was to build this function. I will show the steps and the needed code.

At the end the application will look like this:

Barcode2.jpg

After pressing the Camera next to the Search Field, the Camera will be started and you can start to scan the Barcode. The result will be written into the Search Field and filter the list.

Barcode3.jpg

The Environment

Some information of my environment. I run Eclipse on a Mac. We bring the App on an iPad and using the camera of the iPad. To do this you need to install Xcode on you Mac and you need a membership of the Apple Developer Program, what costs 80 Euro for one year.

This app won’t run in the simulator of Xcode, because you can’t use the camera in the simulator.

I expect that the shown solution also runs on android or other devices, but I didn’t test it. I would be happy for every feedback.

Create a Cordova Project from our SAP Fiori like App

We start at the point when you finishing the development of the SAP Fiori liked App. The next step is to install Apache Cordova. How to do this and how to create a Cordova Project is described on the following page:

Installing and running the command line interface of Apache Cordova

The next steps are very easy and straight forward. Copy all files of the “WebContent” folder of your Eclipse project into the “WWW” Folder of your Cordova project. Furthermore we need the resource files of SAPUI5. What I have done is to download the OPENUI5 runtime from OPENUI5 on GITHub.This project is able to run with OPENUI5, what is even more cooler.

Copy the recource Folder of OPENUI5 into the “WWW” Folder of the Cordova project. There are probably better solutions than to copy the folder in every project, but for this proof we use this very easy solution.

We are already at the point, where you can run out Fiori like app as a native app on your device. With the following command Cordova will build an iOS Xcode project:

$ cordova platform add ios

Open the new Xcode project that is created in the folder “platforms” of your Cordova project and run it. You can run it direct on your iPad or in the simulator. At this point we can run it in the simulator, because we don’t use the Camera so far.

If you want to build a native app on other platforms you can create it in the same way.

If you added the platform once, you should never change the source in the platform folder. After changing the source in the “WWW” folder of your Cordova project, you can update the platform depended code with:

$ cordova build ios

The Barcode scanner

Now we can start to develop the Barcode scanner. Actually we don’t develop it by our own, we use a Cordova plugin. First of all you have to add the Plugin into your Cordova project. The following page is a good starting page, if you need a Barcode scanning example that is running on its own:

GitHub Barcode Example

As described on this page, we add the needed Plugin to our Cordova project with the following command line

$ cordova plugins add https://github.com/wildabeast/BarcodeScanner.git

Now we are at the most interesting part. We want that our SAP Fiori like App and the Barcode Scanner are playing together.

First we have to change the index.html. We have to add the Cordova Script

Barcode_indexhtml.jpg

The next step is to add the Button next to the Search field. We do this in the Master.View.xml

Barcode_MasterViewXML.jpg

The last but important changes are in Master.Controller.js.

– We build a handle for the Camera button

– We separate the filter in an own function, that it can be called after the scan

– We use sap.m.message.toast to output messages

Here are the changes of Master.Controller.js form the top

First we add the sap.m.MessageToast library

Barcode_MasterController1.jpg

Second we change the handleSearch, that it calls our new function doFilter. The app should run without this change, but I love clean code:

Barcode_MasterController2.jpg

Next we build the new handleCamera, that is called after pressing the Camera button. Here you can see that most of the work is done by the Plugin.

Barcode_MasterController3.jpg

And last we build our new function doFilter that is called by handleSearch and handleCamera

Barcode_MasterController4.jpg

That’s it!

Copy all that changes into your Cordova project, build the platform depended code again as describe, start Xcode and run this project on your iPad.

Have fun!

To report this post you need to login first.

20 Comments

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

  1. Meenakshi I

    Hi Renald Wittwer,

    Its very nice blog. But I am new in using Sapui5 and also don’t have any knowledge on corvoda.

    Can you plz share your “Cordova” and “Sapui5” project code? Its very help full to me.

    Thanks & Regards,

    Meenakshi I

    (0) 
  2. UmaMaheswaraRao Surapaneni

    Hi Renald Wittwer,


    it is really nice blog.

    I have a question: is this bar code scanner will scan long distance bar codes,

    i.e in ware house,operator is standing  and trying to read a bar code which is 6 to 10 meters  on top of him.


    is it depends on Camera zoom  or cordova plugin has any capability of  reading long distance bar codes.


    Thanks.

    Uma

    (0) 
    1. Renald Wittwer Post author

      Hello Uma,

      to be honest, I don’t know if the bar code scanner will scan long distances.

      I think 6 to 10 meters could be a problem. But this depends on the camera and the size of the barcode.

      Best regards

      Renald

      (0) 
      1. Vojtech Licka

        Hi Kenzi,

        I m apologize for my late response,  bud I just used the steps, which Renald descriped in that blog. I only needed cordova android platform for my hybrid apps.

        but Now I would recommend to you use HANA Cloud Platform WebIDE, where you can develope a hybrid app via HAT (Hybrid app Toolkit).

        look at the Open SAP  Course “Developing Mobile Apps with SAP HANA Cloud Platform”

        Developing Mobile Apps with SAP HANA Cloud Platform – Jeff Gebo and Dhimant Patel

        (0) 
  3. Padmindra Gurung

    Hello Renald,

    I used the Xcode to developed the same example and it is running fine from the iPad. when we moved the same code into the SAP Fiori client 1.6 it doesnot work.

    Please guide us how to move the Xcode code into the ABAP Repository and can used through Launchpad.

    Thanking you.

    Thanks,

    Pad

    (0) 
  4. Chetan Mahamune

    Hello Renald,

    I have tried the same code for android platform and its working fine. It triggers my camera and scan the code as well. but it just shows the code in MessageToast after that it doesn’t take the input to filter in search filed. I have created the code exactly as u have shown. Please suggest what am i missing?

    (0) 
    1. Dhruv Shah

      Hello Chetan,

      I am trying same with Android, but when i am executing it is giving me the below image only. I have used cordova on android platform.

      Can you please help me to execute this App

      (0) 
  5. Firoz Ashraf

    HI,
    I have followed the guidelines to create a bar code scanner application that should look like

    The steps that I have followed are:

    1. Installed Node.js (version 6.9.2),  Cordova (version 6.4.0), Android Studio (version 2.2.3) for Android SDK and Java 1.8

    2. Created one cordova project “hello” on D drive in a particular folder.
    3. Added phonegap barcode scanner plugin.
    4. Added Android platform and did the build phase (cordova build android)
    This resulted in the following file structure getting created


    When I run this from Cordova CLI I am getting the expected file on my android emulator.


    All is fine till here.

    However, after adding my SAPUI5 code into www folder

    and running the cordova project, I start getting a blank screen on the emulator.


    Although on Eclipse my SAPUI5 app shows the fist screen

    Following are my Eclipse Codes (Index, view & controller):

    To figure out what went wrong I tried to run the index file in web browser (chrome & firefox both). Here the file gives 3-4 pop up messages and hangs up.

    What could be missing??

    Regards,
    Firoz.

    (1) 
  6. Michael Dräyer

    Very nice blog, thank you.

     

    Are u also familiar with generating a barcode in a UI5-App running on the FLP? I have a string and I need to generate a barcode (code 128) out of this string.

     

    Any suggestions would be nice!

     

    Regards,

    Mike

    (0) 

Leave a Reply