SAP HCP IoT2

SAP HANA CLOUD PLATFORM – IOT SERVICES Connecting a JAVA HTML UI5 GUI

Aaron Williams / PM SAP HCP & SAP IOT Twitter: @aarondonw, SCN: Aaron Williams Description This tutorial will show you have to set up a JAVA HTML UI5 application that will serve as a simple GUI for our IoT project System prerequisites • Have an SAP HCP Trial Account • You have completed the “Getting Started with the IoT Services” • Some Java experience • Have Eclipse, Github set up

Target group • Application developers • People interested in the SAP HANA Cloud

Platform- IoT Services

Target group requirements • Basic programming language, ideally in Java. • Basic knowledge in using an Eclipse

development environment.

30 min

Connecting a JAVA HTML UI5 GUI

2

Step 1: Clone the Git repository

Explanation Screenshot

1. Open eclipse and the Git Repository perspective

2. Click Clone a Repository

3. Use this URI for the repository: https://github.com/SAP/iot-starterkit.git

4. Click Next Location of the git is here: https://github.com/SAP/iot-starterkit

5. Select Master 6. Click next


3

7. Chose the directory location and click Finish

8. Select the repository at the highest level, right click, and select Import Projects

9. Select Import as general project, then click next and finish

10. Update the index.html file: Change the oSettingsModel so that it matches your account deviceID and deviceTypeID.

oSettingsModel.setData({ "deviceId" : "dcc6d8b5-fec2-43a2-96be-1a85b0a1912b", "deviceTypeId" : "a87bb50d9b3789aa4c2f", "fromDeviceMessageTypeId" : "1", "toDeviceMessageTypeId" : "2", });


4

We are going to change the values of the graph to suit our data

11. Search for “Slider Value” in index.html

12. In the function createMeasureFeed, change “Slider Value” to Temperature F

function createMeasureFeed() { return new sap.viz.ui5.controls.common.feeds.FeedItem({ "uid" : "primaryValues", "type" : "Measure", "values" : [ "Temperature F" ] }); }

13. In the function createDataSet, change Slider Value to Temperature F, and add in your column’s name

function createDataSet() { return new sap.viz.ui5.data.FlattenedDataset({ dimensions : [ { name : "Timestamp", value : "{sensor>G_CREATED}" } ], measures : [ { name : "Temperature F", value : "{sensor>C_TEMPERATURE}" } ],


5

If you have Maven, skip to step 12 below. To check to see if you have Maven: Windows: Go WindowàPreferencesàMavenàInstallations Mac: Go EclipseàPreferencesàMavenàinstallations

If you don’t have Maven, click on Helpà install new software. In the Work with line, start typing eclipse

Look for the version of your eclipse (Luna or Kepler)

When you select the version, eclipse will build a list of all of the items (this can take a moment or two

Open Collaboration, and look for “m2e-Maven Integration for Eclipse”


6

Then click next, next, agree to the terms, then finish.

14. In Eclipse, build the project using Maven. Click on the project name in the project explorer, right click à Run Asà Maven Build (your screen might look different than this)

15. For the goals, enter clean install

16. In the Cockpit, go to Java Applications, and then Click Deploy Applications


7

17. Find your .war file, give it a name and click deploy.

18. When it has been loaded, click Done (not Start)

19. In Eclipse, fine the iotmms file in the destinations file. We are going to import that into the HCP. Modify the file so that it uses your account.

20. Go to your HCP Cockpit, and click on your java application, and then go to Destinations.

21. Click on Import From File, and browse to your file

22. Add in your password

23. From the Cockpit, click Java Applications and your new application


8

24. Click on Data Source Bindings and then New Binding

25. Leave the Data Source as default and change the Schema ID to your iotmms (XXXX.iotmms.web) and click save

26. Click on Overview, and click the Start button under State. This will take a minute or two.

27. When it has started up, click on the URL that is under Application URLs

28. At the bottom of the page you will see some things to send a message to the device. If you go to the git hub page, you can read on how to add this functionality.


9


10

Citations/ Acknowledgements This is was based upon a post by Michael Ameling and the IoT Services Starter Kit. I also got a lot of help from Philip Mugglestone of the Hana Academy team.

© 2014 SAP SE or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.

Documents

SAP HCP IoT2