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:
Copy the index.html from the SAPUI5 project that we have created in previous step to c:\programs\geolocation\www and build the project:
- 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
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...
- SAP Managed Tags:
13 Comments
