Real Time GPS Tracker using SAP HANA XS, SAPUI5, Cordova Geolocation Plugin and OData

Hello to all,

I would like to share how to build a simple Android app GPS tracker powered by SAP HANA using XS, SAPUI5 with Cordova Geolocation Plugin and ODATA. The idea is to send the latitude and longitude position from the Android phone to the SAP HANA. The backend web application will show  the current location in Google Map.

The app screenshots  will look like this:

• Android Client
  

• Backend Web App
  

Required Components

• Android phone with GPS and 3G/4G enabled. I am using Samsung Galaxy S4 for the demo.
• SAP HANA access. I am using the 30-days HANA version. Refer to http://scn.sap.com/docs/DOC-28191
• SAPUI5 with Cordova Geolocation plugin.

The Android Client

This client will send the current position via OData service to the SAP HANA.

• Create SAPUI5 index.html.
  In the onSuccess function, we’ll get the latitude & longitude position and pass these values to the oEntry array and create the OData request (Post method).

  
  function onSuccess(position) {
  var element = document.getElementById('geolocation');
  element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
  'Longitude: ' + position.coords.longitude + '<br />' +
  '<hr />' + element.innerHTML;
  jQuery.sap.require("sap.ui.model.odata.datajs");
  var sUrl = "hana2.vm.cld.sr:8000/tracker/info/service/GPSTracker.xsodata";
  var oModel = new sap.ui.model.odata.ODataModel(sUrl, true, "userid", "password");
  var oEntry = {};
  oEntry.STIMESTAMP = '/Date(0000000000000)/';
  oEntry.SDATE      = '/Date(0000000000000)/';
  oEntry.LAT =  position.coords.latitude.toString();
  oEntry.LONG = position.coords.longitude.toString();
  // oData Create
  oModel.create('/GPSTracker', oEntry, null,
  function() { success = true;},
  function() {  failure = true;}   );
  if (failure == true) {
  alert("Create failed");
  }
  else {
  alert("Data Saved!");
  }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  

• Create the Cordova Geolocation plugin
  Create a cordova project in C:\programs:
  

  – mkdir c:\programs

  – cd c:\programs

  – cordova create c:\programs\Geolocation com.enterprisemobility.Geolocation Geolocation

  – cd geolocation

  – cordova platform add android

  – cordova plugin add org.apache.cordova.geolocation

  Copy the index.html from the SAPUI5 project that we have created in previous step to c:\programs\geolocation\www and build the project:

  cordova build

  If the build is success, you will get the debug apk in the C:\programs\Geolocation\platforms\android\ant-build. Install this apk on your device.
  

The HANA XS

The key components in the HANA XS:

• The HANA table GPSTRACKER for storing the latitude and longitude position.
  
  

  table.schemaName = “GPSTRACKER”;

  table.tableType = COLUMNSTORE;

  table.description = “GPSTRACKER”;

  table.loggingType = NOLOGGING;

  table.columns = [

  {name = “STIMESTAMP”; sqlType = TIMESTAMP;  nullable = true;},

  {name = “SDATE”; sqlType = DATE; nullable = true;},

  {name = “LAT”; sqlType = NVARCHAR; length = 50; nullable = true;},

  {name = “LONG”; sqlType = NVARCHAR; length = 50; nullable = true;}

  ];

  table.primaryKey.pkcolumns = [“STIMESTAMP”];

• An OData service GPSTracker.xsodata with custom insert procedure.
  

  service namespace “tracker.info.service” {

  “GPSTRACKER”.”tracker.info.init::GPSTracker” as “GPSTracker”

  create using “tracker.info.service::InsertRowGPSTracker”;

  }

• An Insert procedure InsertRowGPSTracker.procedure for inserting the latitude and longitude position to GPSTRACKER table.
  

  insert into “GPSTRACKER”.”tracker.info.init::GPSTracker”

  values (current_timestamp, current_date,  lv_LAT,lv_LONG);

The Back-end Web App with Google Map

The back-end web app displays the timestamp, latitude & longitude coordinate in the table. User can select the item to display the exact location in the Google map. The “Refresh Data” button will update the information in the table with the new location received from the client.

In the GPS.view.js, we call the OData GPSTracker.xsodata/GPSTracker and bind it.

oController.oModel = new sap.ui.model.odata.ODataModel("hana2.vm.cld.sr:8000/tracker/info/service/GPSTracker.xsodata",true, "userid", "password");
vCol = "STIMESTAMP";
oControl = new sap.ui.commons.TextField({editable:false}).bindProperty("value",vCol);
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text: "Timestamp" }),
template: oControl,
sortProperty: vCol,
filterProperty: vCol
}));
vCol = "LAT";
oControl = new sap.ui.commons.TextField({editable:false}).bindProperty("value",vCol);
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text: "Latitude" }),
template: oControl,
sortProperty: vCol,
filterProperty: vCol
}));
vCol = "LONG";
oControl = new sap.ui.commons.TextField({editable:false}).bindProperty("value",vCol);
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text: "Longitude" }),
template: oControl,
sortProperty: vCol,
filterProperty: vCol
}));
oTable.sort(oTable.getColumns()[0]);
// Google Map
oTable.attachRowSelectionChange(function(oEvent) {
var currentRowContext = oEvent.getParameter("rowContext");
var lat = oController.oModel.getProperty("LAT", currentRowContext);
var lang = oController.oModel.getProperty("LONG", currentRowContext);
oController.actSearch(lat, lang);
});
oTable.setModel(oController.oModel);
oTable.bindRows("/GPSTracker");
oPanel.addContent(oTable);

The oTable.attachRowSelectionChange function calls the Google Map actSearch function with parameter lat and lang.

actSearch: function (lat, lang) {
this.geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(lat, lang);
var mapOptions = {
center: latlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map($('#map_canvas').get(0), mapOptions);
var marker = new google.maps.Marker({
position: latlng,
map: this.map,
title: 'You are here'
});
}

Source Code

You can find the complete source code in the GitHub: ferrygun/SAPHanaGPSTracker · GitHub

The final structure as per below screenshots:

Run the App

After you have installed the apk in your device, enable the GPS and tap the app to run it

Upon receiving the GPS signal, the app will display the longitude and latitude position and send this information to HANA server. You can stop it by clicking the Clear Watch button

To run the backend web app,  open the link http://hana2.vm.cld.sr:8000/tracker/info/index.html in Chrome browser. Replace “hana2.vm.cld.sr” with your HANA server’s address. You will get the current position from the client.

Thank you for reading my blog and I hope you also enjoy developing the SAP HANA XS application.

Please feel free to drop me any feedback/comment.

P.S: this blog was inspired by http://scn.sap.com/community/developer-center/hana/blog/2013/11/17/latest-share-price-google-finance-odata-crud