Build Cordova Barcode Scanner for SAP Screen Personas

In my previous blog http://scn.sap.com/community/gui/blog/2014/10/03/create-qr-barcode-scanner, I have described how to create the barcode scanner functionality in SAP Screen Personas. In that application, the webcam is needed in order to work. In this blog, I would like to share the “proof of concept” barcode scanner in SAP Screen Personas using the Apache Cordova plugin in Android device, WebSocket server in SAP HANA Cloud Platform and SAP Screen Personas connected to WebSocket server along with HTML5 Local Storage.

How it works?

Firstly, we need to establish the WebSocket server in the SAP HANA Cloud Platform. The SAP Screen Personas and Barcode Scanner are connected to the server via websocket connection. The barcode value from the scanner will be sent to the WebSocket server. The SAP Screen Personas listens to the incoming message (containing barcode number) from the WebSocket server. Once the message is available, it will be saved into the HTML5 local storage. Finally, user can retrieve the barcode number when clicking the “Get Barcode” button. Get Barcode function will retrieve the barcode number from the HTML5 local storage.

How to Setup ?

We need to setup three components in order to work:

• WebSocket Server in SAP HANA Cloud Platform
• Apache Cordova Barcode Scanner in Android device with WebSocket Client
• SAP Screen Personas with WebSocket Client

WebSocket Server in SAP HANA Cloud Platform

You need to install and configure the SAP HANA Cloud Platform in your Eclipse. Please refer to to SAP Community Network on how to do this.

Import the WebSocketBarcode project into your Eclipse and click Finish.

This WebSocket server that listens to the incoming message from the client and distribute the message to each connected clients.

package wa;
import java.io.IOException;
import java.util.Collections;
import java.util.HashSet;
import java.util.Set;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/websocket")
public class WebSocket {
  private static Set<Session> clients =
    Collections.synchronizedSet(new HashSet<Session>());
  @OnMessage
  public void onMessage(String message, Session session)
    throws IOException {
    synchronized(clients){
      for(Session client : clients){
        if (!client.equals(session)){
          client.getBasicRemote().sendText(message);
        }
      }
    }
  }
  @OnOpen
  public void onOpen (Session session) {
    clients.add(session);
  }
  @OnClose
  public void onClose (Session session) {
    clients.remove(session);
  }
}

Once you have imported the project, let’s deploy this to SAP HANA Cloud Platform.

• Export to a WAR file: WebSocketBarcode.war.
  
• Open your command prompt and cd to the location of <Java_6_EE_Web_Profile>/tools. Execute the following command:
  

  neo deploy -s WebSocketBarcode.war -b websocketbarcode -h hanatrial.ondemand.com –java-version 7 -a <account_name>  -u <username>

  Where account_name is your SAP HANA Cloud account name, for example: p057134trial and username is your account name without ‘trial’ (i.e., p057134) .

• Go to the SAP HANA Cloud Platform Cockpit to check the status of the application. Just start the app if it is not started. If no error you will see the green status.
  
• Also note down the URL given in the Application URL. This is our WebSocket server’s URL in the format: wss://websocketbarcodep057134trial.hanatrial.ondemand.com/WebSocketBarcode/websocket
  

Apache Cordova Barcode Scanner in Android device with WebSocket Client

• Create a folder c:\programs.
• Download the Cordova barcode scanner plugin from https://github.com/wildabeast/BarcodeScanner, and extract to c:\programs.  
• Create the Cordova project by execute the following command:
  

• cordova create C:\programs\barcodeScanner com.enterprisemobility.barcodeScanner barcodeScanner
• cd barcodeScanner
• cordova platform add android
• cordova plugin add C:\programs\BarcodeScanner-master

• Edit index.html in folder www and add the scan() function to connect to WebSocket server and send the barcode number to the server via web socket.
  

  
  function scan() {
  ws = new WebSocket('wss://websocketbarcodep057134trial.hanatrial.ondemand.com/WebSocketBarcode/websocket'); // Connect to WebSocket server
  ws.onmessage = function() {
  ws.close();
  };
  ws.onopen = function() {
  cordova.plugins.barcodeScanner.scan(function(result) {
  ws.send(result.text); // Send the barcode number to the server.
  alert("We got a barcode\n" + "Result: " + result.text + "\n"
  + "Format: " + result.format + "\n" + "Cancelled: "
  + result.cancelled);
  }, function(error) {
  alert("Scanning failed: " + error);
  });
  };
  ws.onerror = function() {
  alert(evt.data);
  };
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

• Finally we need to build the project. Execute the below command. If it’s successful, you will get the debug APK file (barcodeScanner-debug.apk) in C:\programs\barcodeScanner\platforms\android\ant-build. Install this apk in your Android device.
  
  

  cordova build

SAP Screen Personas with WebSocket Client

Copy the MM03 screen and name it as ZMM03_Barcode_Scanner and create two Personas scripts: Enable Barcode Scanner and  Get Barcode.

• Enable Barcode Scanner
  
  Add “Calculate in Javascript” with the following codes:

  
  var wsUri = "wss://websocketbarcodep057134trial.hanatrial.ondemand.com/WebSocketBarcode/websocket";
  websocket = new WebSocket(wsUri);
  websocket.onopen = function(evt) { onOpen(evt) };
  websocket.onmessage = function(evt) { onMessage(evt) };
  websocket.onerror = function(evt) { onError(evt) };
  function onOpen(evt) {
  alert("Connected");
  }
  function onError(evt) {
  alert(evt.data);
  }
  function onMessage(evt) {
  console.log('Response:' + evt.data);
  localStorage.setItem("barcode", evt.data); // save the barcode number received from the WebSocket server into the HTML5 Local Storage "barcode"
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  The above javascirpt codes will listen to the incoming message (barcode number) from the WebSocket server and save the barcode number received from the WebSocket server into the HTML5 local storage “barcode”.

• Get Barcode
  Get Barcode function is to retrieve the barcode number from the HTML5 local storage, put in the material number textfield and clear the local storage.
  

How to use?

Ensure the WebSocket server in SAP HANA Cloud Platform is up and running.

1. Go to your SAP Screen Personas “ZMM03_Barcode_Scanner” and click “Enable Barcode Scanner” button to connect to the WebSocket server. Once it is connected to the server, you will get the “Connected” message as per below screenshot.
   
2. Now perform the barcode scanning using your Android device. Launch the Barcode scanner app that you have installed previously. Wait until the status is “Device is ready” and click “Scan”. Perform scan a barcode label, If it is successful, you will get the barcode number.
   
   
3. Now go back again to your SAP Screen Personas and click “Get Barcode”. The result will be printed out in the material number textfield.
   
   

Demo Video

Source Code

All source codes attached in the blog. Just rename .txt to .zip.

Summary

With help from WebSocket in HANA Cloud Platform, Cordova Barcode Scanner and HTML5 Local Storage, we can build a simple barcode scanner app in SAP Screen Personas without need to use a computer’s webcam. This will give an app more flexible and increase mobility. This “proof of concept” app still far away from perfect. A lot of improvements need to be done especially when handling the multiple socket connections and also on the security part for example only authorized client can be connected to the server.

I hope you enjoy this blog and feel free to drop any comment/feedback. Thank you.

References

• Build SAPUI5 Cordova Barcode Scanner with OData Service
• Real Time Dashboard with WebSocket & SAP HANA Cloud Platform