If you are an SAP Employee, please follow us on Jam
Contents
- Introduction.
- Overview.
- Prerequisites.
- IoT Service Setup.
- Insert test data into HANA table.
- Creating the XSJS Service.
- Android and OPEN XC.
- Display data with SAPUI5 Master Detail
- Possible useful information.
Introduction
In this blog post I want to demonstrate how you can create an SAPUI5 app consuming data from an XSJS Service for the internet of things (IoT). The data gets exposed from a real car through an ODB II device which can read basic car information like current speed, acceleration, odometer, fuel consumed and so on. An Android device consumes the ODB data and sends it to the Hana Cloud Platform (HCP) that it can be inserted into HANA.
Below you can get an idea how the SAPUI5 frontend will look like.
Overview
Since 1996 every car has an OBD II interface to expose basic car data. For more Information see https://en.wikipedia.org/wiki/On-board_diagnostics.
With the Open XC Library it became easy to receive car data from an ODB II device. The library exists for either Android or Linux devices. In this example an Android device is used. Visit http://openxcplatform.com/overview/ for more details.
A basic Android App sends the received ODB data with an http Post to the IoT Service. IoT Service, which is basically a Servlet, handles the request and inserts the information into the HANA database table. More information on IoT Service: https://help.hana.ondemand.com/iot/frameset.htm
An XSJS web service serves as an interface for the SAPUI5 application to access the car information from HANA database. In the service itself data can be processed to expose just the right information the frontend needs.
Prerequisites
- Android Studio is installed.
Hana trial account is created. (Also works on other instances like NEO but in this example I use Hana trial). If you haven’t created your account yet: https://account.hanatrial.ondemand.com
IoT Service Setup
There are great videos for [AW1] IoT Service available on YouTube by the HANA Academy.
Link to the full playlist: https://www.youtube.com/playlist?list=PLkzo92owKnVxzjoxwJdaa400E_UqkzE8J
Step 1: Set up IoT Services
Please set up IoT Services in your private Hana trial account like explained in this video.
“Getting Started”: https://www.youtube.com/watch?v=EiIInSB8pFk[AW2]
Step 2: Create a “Message Type”
The “Message Type” defines the data structure the IoT device, in this example the Android device, will send to the IoT Service. This is the basic car information received from the ODB device.
To do so go into the IoT Services cockpit (https://iotcockpitiotservices-<yourAccountID>trial.hanatrial.ondemand.com/com.sap.iotservices.cockpit) and choose “Message Types”.
I called the message type “ODBLive” but feel free to use another name. The fields of the message type are basically the columns of the Hana database table the IoT service will create for us.
Step 3: Create a device type
In the next step create a device type to define a group of devices interacting with the IoT services. In this example an Android device sends car data which is defined in the message type. I called the device type “AndroidDeviceType”.
Please choose the previously created message type, here “ODBLive”, for the message type.
Step 4: Create a device
When you create the device, make sure to set the previously created device type, here “AndroidDeviceType”, as the device type.
Insert test data into HANA table
Previously we only created the message type defining the Hana database table the IoT service will create for us. Up to now the table is not created yet.
IoT Service will create the table automatically for us when we try to insert the first data into the table with an HTTP Post Request (or Web Socket…). I used the chrome add-on Postman (https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop).
The HANA Academy provides a great video showing how to send an HTTP post with the Postman client to the IoT Service running on the HCP.
https://www.youtube.com/watch?v=WvMD5EDQrJE&index=6&list=PLkzo92owKnVxzjoxwJdaa400E_UqkzE8J
You can of course use a different Http client but Postman is pretty simple and straight forward. If you need a more professional tool you could use JMeter (http://jmeter.apache.org/).
This is how you do the Http Post request with Postman.
Step 1
Select „POST“ as http method
Set url to :
https://iotmms<yourAccountID>trial.hanatrial.ondemand.com/com.sap.iotservices.mms/v1/api/http/data/[device id]
Step 2
Set authentification to „OAuth2“
Step 3
Create Header Fields
1.
Field: „Authorization“ .
Value: „Bearer + <OAuth 2.0 access token>“
For the oAuth 2.0 access token go to IoT Services Cockpit > Devices to Generate oAuth 2.0 access token
2.
Field: „content-type“
Value: „application/json;charset=utf-8“
Step 4
Set selection to „raw“ and „JSON(application/json)“
Set body to :
{"mode":"sync", "messageType":"<MessageTypeID>", "messages": [ {"Speed":70, "FuelConsumed":15, "Odometer":2000, "Acceleration":70, "Gear":4,"GPSPosition":"37.461123, -122.137537","TripId":"Las Vegas"} ] } |
For the MessageTypeID go to IoT Services Cockpit > MessageTypes>Information .
Step 5
Send the http Post request.
If the response from the IoT Service looks like in the picture below you did everything right.
After the successfull request the hana database table should have been created. Besides checking in the Web-Based Development Workbench > Catalog you could also go to the Message Managment Cockpit (https://iotmms<yourAccountID>trial.hanatrial.ondemand.com/com.sap.iotservices.mms/).
You table should have been created and inserted records should be visible.
Creating the XSJS Service
In this section a XSJS Service is created in order to expose the car data from the Hana database tables. When created successfully, the service can be called by various Uri’s and responds with the car data.
To get a good overview about SAP Hana Extended Application Services you could take a look at this (http://scn.sap.com/community/developer-center/hana/blog/2012/11/29/sap-hana-extended-application-ser...) SCN Post.
But before the XSJS service can read data from the created Hana database table access has to be granted manually.
1. Grant access to Hana database table
Please follow those two videos from the Hana Academy to set up an XS OData service for your created table.
https://www.youtube.com/watch?v=k0gyLHt7ioE&list=PLkzo92owKnVxzjoxwJdaa400E_UqkzE8J&index=9
https://www.youtube.com/watch?v=SigA9SI8Xyc&index=10&list=PLkzo92owKnVxzjoxwJdaa400E_UqkzE8J
After you have successfully set up your XS OData service, you have also granted access to the database table, the XSJS service should read the data from.
2. Create XSJS Service
Create a new file with the ending .xsjs in the “Web-Based development Workbench” on the same level where the .xsodata file is located at. It does not matter how you call it, just make sure to set the ending to .xsjs. If you want to keep the .xsodata file it is fine but for this example it is not needed any more.
Your outline in the workbench now should look something like this:
To create the XSJS service, please paste the code from Github into your .xsjs file.
https://github.com/Danielfoehr/iotXsjsOBD2
Replace every occurrence of <table> and <schema> in SQL code with your own schema and table.
You can find your schema and table name in the catalog of the “Web-Based development Workbench” like it is explained in the videos of step 1.
3. Run the XSJS Service
The .xsjs file defines three methods which expose data from the Hana table. Each method can be called with a specific Uri defined in the XSJS service. Please replace <yourAccountID> and potentially “ODBService.xsjs” with your own .xsjs file.
The following response values may differ from the responses you will experience.
1. Retrieve Master Data
The response should be all your inserted trips in JSON format:
2. Retrieve Detail Data
https://s9hanaxs.hanatrial.ondemand.com/<yourAccountID>trial/iot/ODBService.xsjs?cmd=retrieveDetailD... Vegas
Response in JSON format for TRIPID = “Las Vegas”:
3. Retrieve Detail GPS Position
https://s9hanaxs.hanatrial.ondemand.com/<yourAccountID>trial/iot/ODBService.xsjs?cmd=retrieveDetailG... Vegas
Response in JSON format for TRIPID = “Las Vegas”:
If you experience errors, debugging can be quite helpful. This video explains how to enable debugging for your XSJS service.
https://www.youtube.com/watch?v=24GLegisPqY
Android and OPEN XC
To read car data through the OBD device, an Android app uses the Open XC library.
The Android project uses the Open XC library to read car data either from a real device or a prerecorded file. The app makes continuing Http Post requests to the IoT service servlet, running on the HCP, to insert the car data into Hana.
Refer to http://openxcplatform.com/overview/index.html and http://openxcplatform.com/android/getting-started.html for further information.
Step 1
Please clone this Android studio project from Github into your local Android Studio. Gradle is used to build the Open XC library as a dependency.
https://github.com/Danielfoehr/ioTAndroidSender
Step 2
Replace http Post request data in class WorkerThreath.java with your own specific information. You can basically take the same information you used to manually make a post request with the POSTMAN client described in chapter “Insert test data into Hana table”.
Set your oAuth2.0 token.
Set your Hana trial account id and the device id from your created device.
Set your message type id.
Step 3
Download the Open XC enabler Application from the Google Play Store.
https://play.google.com/store/apps/details?id=com.openxcplatform.enabler&hl=de
This example was created with Version 6.1.6 of the “Open XC Enabler Application”.
Step 4
Run the app on an emulator or your own physical device.
The following video shows how to use the application.
Display data with SAPUI5 Master Detail
The SAPUI5 application is the UI which is displayed to the end-user. It consumes the XSJS service with Ajax calls.
Step 1
Download the SAPUI5 project sources compressed to a .zip file from Github. If you want to use Eclipse you could of course also clone the repository instead.
https://github.com/Danielfoehr/iotSapui5OBD2
Step 2
Import the zipped SAPUI5 project sources into SAP WEB IDE or clone the repository to your local Eclipse installation. The WEB IDE is accessible through this link.
https://webide-<yourAccountId>trial.dispatcher.hanatrial.ondemand.com/
Follow the official documentation on how to import archive files in SAP WEB IDE.
https://help.hana.ondemand.com/SAP_RDE/frameset.htm?344e8c91e33b4ae8b4032709c45776a3.html
Step 3
Set your Hana trial account id in both classes Master.controller.js and Detail.controller.js. Those classes are located in folder MyTripsPublic>webapp>controllers within the SAPUI5 project sources.
Set your Hana trial account id in class Detail.controller.js.
Step 4
Run the application by selecting the index.html file in folder “webapp>index” and pressing the green “Run” – button.
You should see the application running with demo data. You can check in the development console of your web browser (F12 in chrome) for possible errors.
The AJAX call from SAPUI5 project to HCP XSJS service is not allowed because there is no 'Access-Control-Allow-Origin' header present on the HCP endpoint. Cross-origin resource sharing (CORS) is therefore not enabled.
To be able to actually consume the XSJS service from the SAPUI5 frontend the SAPUI5 project has to be deployed to Hana. If you use a productive version of the HCP you could deploy the UI within seconds by pressing a single button. In this example the trial version of the HCP is used where couple more steps are necessary.
Step 4
Please watch this video from the HANA Academy on how to deploy a SAPUI5 project to Hana with a HCP trial account. You can ignore the code change advices in this video. The application should work without the need for further changes.
https://www.youtube.com/watch?v=kP8LtKGrVfI&index=12&list=PLkzo92owKnVxzjoxwJdaa400E_UqkzE8J
After deploying the Sapui5 project to Hana the outline of the “Web-Based development Workbench” should look something like this:
Step 5
Run the Sapui5 application by navigating to index>index.html and pressing the green “run” button on the top left.
That’s it! The application should now display real car data from your XSJS service.
Possibly useful information
1. Use Android Studio instead of Eclipse for the Android development
Maybe you can get it running, but I spent a lot of time trying to add the OpenXc library to an Android project in Eclipse. In the end it did not work for me at all.
The reason for my problems is the version 6.1.6 of the OpenXC library which is only available through the dependency management system Gradle. There is a Gradle plugin for Eclipse but it caused problems together with an Android application project.
You could manually add every dependency to maven but better use Android Studio with integrated Gradle.
2. Decision between XSJS service and XS OData
There are couple tutorials out there on how to create an XS OData service and it is actually pretty easy and not much of an effort (In the end just couple lines of code). The other good thing about XS OData is the seamless integration with SAPUI5 which makes the data binding process more efficient.
Nevertheless I experienced that XSJS suited my needs best. For me it just looked more flexible because I could implement my needed business logic in the XSJS service which I could not in the XS OData service.
Another option would be writing a java servlet and deploying it to the HCP. Anyways, writing a XSJS service is, as I experienced it, by far less effort.
------------------------------------------------------------------------------------------------------------------------
Thanks for reading and please give feedback :smile:
Regards
- SAP Managed Tags:
2 Comments
