Table of Contents
In the last blog post of this blog post series we've setup the IoT Service for our scenario.
No Java code footprint in the cloud
With the functionality available on the HCP IoT Services we'll now reduce the code footprint of our overall application. We no longer need the Java app on our free developer account, but we'll leverage the OData service provided by the IoT Services and use that inside our HTML5 application.
Along with the IoT Services we'll also be able to add a security feature to our app as the Raspberry Pi will have to provide an oAuth token together with each sensor value it will send to our IoT Service. So let's get started.
1. Updating the Java app on the Raspberry Pi
In a first step we'll update the Java code on the Raspberry Pi.
| Step | Screenshot |
|---|---|
1. Connect to your Raspberry Pi via ssh or any other proper way | |
2. Open the file Temperature.java that you've used in blog post 3 of this blog post series. cd /home/pi/myscripts nano Temperature.java | |
3. Substitute the code with the code I've attached to this blog post called Temperature.java.txt.zip. Remember that you'll have to unzip the file first prior being able to copy-and-paste the code into nano. | |
4. Adapt the following variables to your account and device type
Set also the following variables to the values you've setup in the last blog post when you've setup the IoT service
Save the file (press Ctrl and X and confirm with y) |  |
| 5. Compile Temperature.java by entering the command javac Temperature.java |  |
| 6. If you are interested, look into the code to find out how it sends the data to the IoT endpoint. |
2. Setting up destinations
Our app needs to access the list of devices, device types and, as well, the actual sensor data. For that you'll have to create to additional destinations pointing you to the corresponding API.
2.1 Destination for devices and device types
| Step | Screenshot |
|---|---|
| 1. For the devices and device types you can copy-and-paste the URL from your IoT cockpit. Just click on your user info at the top right and click on the "About" menu. |  |
2. Once you do that you'll get a pop-up window with that link. Just copy and paste the link that you find under Device Types Endpoint. |
|
| 3. Switch to your SAP HANA Cloud Platform account cockpit and click on the Destinations tab on the right. |  |
4. Click on the New Destination link and create the destination
Name: iot_devices_odata Type: HTTP URL: Copy and paste the URL you've gotten from step 2 and remove the devicetypes at the end of the url. So the URL should end with ....dms/api Proxy Type: Internet Authentication: Basic Authentication User: Your user name (e.g. s1234567890) Password: Password for your user
Click on Save |  |
2.2 Destination for the data
To retrieve the data from your IoT service we'll need a new destination. You can find the API description for OData consumption in the online help of the SAP HCP IoT Services.
| Step | Screenshot |
|---|---|
1. Click on the New Destination link and create the destination
Name: iot_devices_odata Type: HTTP URL: https://iotmmsXXXXXXXXXtrial.hanatrial.ondemand.com/com.sap.iotservices.mms/v1/api/http/app.svc where XXXXXXXXX is your username (e.g. s1234567890) Proxy Type: Internet Authentication: Basic Authentication User: Your user name Password: Password for your user
Click on Save |  |
| 2. Now check if your 2 new destinations are there. It should look similar to the screenshot on the right. There should be an iot_devices_odata and an iot_sensordata_odata. |  |
2.3. Important! Enable Basic Auth for iotmms application
In the documentation there is a note that we are authenticated with Basic Auth. Currently this needs to be enabled for the iotmms application by you manually.
Just follow the corresponding instructions in the documentation.
3. Update the HTML5 app
Now most of the work is done and we can look into the last part finalizing our app. We'll adapt the code of our HTML5 dashboard app we've created in blog post 4 of this series. But this time we'll use the Web IDE to do that.
| Step | Screenshot |
|---|---|
| 1. Go back to your account cockpit and click on the HTML5 Applications tab and click on the pencil icon next to the row of your fishdashboard application. |  |
2. The Web IDE opens up.
If necessary please enter your account credentials if the system asks you to do so.
Once your project opens up double-click on the index.html file so that the code editor opens-up index.html |  |
3. Now substitute the code of index.html with the code I've attached in the file index.html.zip at the end of this bolg post (you have to unzip the file before :-)
After you have done that save your changes by clicking on the Save icon at the top left. |  |
| 4. Do the same for the neo-app.json file by substituting it with the content of the attached neo-app.json.zip file. |  |
| 5. Deploy the app now. Right-click on the fishdashboard folder and click Deploy> Deploy toSAP HANA Cloud Platform |  |
| 6. In case you are asked for it provide your credentials and click on Login. |  |
7. A pop-up window shows up and if you scroll down a bit in the window you'll see the version number that will be used to deploy the app on your account. Click on RaspberryPi on SAP HCP - IoT blog series part 4: Create an SAPUI5 dashboard. |  |
8. If everything worked out fine you should get a window telling you that you've successfully deployed your app.
Now click on the link to Open the active version of the application. |  |
| 9. If all worked fine you should see your app now. |  |
4. Send your sensor data to the app
The last missing part is now to actually send the sensor values from the Raspberry Pi to your IoT Service.
To do so, go to your Raspberry Pi command line and enter
java Temperature
and you should see in your browser how the data is coming-in and changing. Congratulations!!
5. Summary
What you see now in this little app is that you no longer need a Java application providing the data to your HTML5 app. Instead you can use the OData service from the IoT services directly to do that job.
I propose you look into the index.html file to better understand how I've used the OData services to fetch all the information I've needed for the app. You'll notice that I'm working with some filtering and sorting to get the information the way I needed. The corresponding documentation is very helpful and might provide you with some additional insights.
And now that we can access the data via an OData service, why not using some templates in the Web IDE to created other apps like a Fiori Master Detail application without having to code one line of code :-) ?
Have fun.
Best,
Rui