Actions

RaspberryPi on SAP HCP – IoT blog series part 4: Create an SAPUI5 dashboard

January 8, 2015 | 1,389 Views |
 iotneopaasraspberry pisap hana cloud platformsaphcpsapui5
Follow

Table of Contents

In the third blog post of this blog post series around Raspberry Pi and the SAP HANA Cloud Platform we’ve provided our Raspberry Pi with a Java app that can retrieve the data from the external sensor and send it to the Java app on the SAP HANA Cloud Platform we’ve setup in the second blog post of this series.

In this blog post we’ll take care of the missing piece of our application: the user interface for the dashboard. We’ll create a dashboard  that can be used to monitor and keep track of the temperature sensors.

Screen+Shot+2014-11-12+at+14.20.26.png

Setup the app as an HTML5 app

In a first step we need to create an HTML5 app in your SAP HANA Cloud Platform account. That’s pretty straight forward and for those of you who are used to work with Git this will be a piece of cake.

Initialize your Git settings (for first-time-HTML5-app users)

In case you are creating an HTML5 app on the SAP HANA Cloud Platform you have to provide Git with some metadata first.

If you’ve already used the HTML5 apps on SAP HANA Cloud Platform you can jump to the next chapter around the creation of an HTML5 app in your account.

If you haven’t done that, yet, this is what you need to do:

Task Screenshot

1.    Start Eclipse and open the Eclipse Preferences (Window > Preferences). Once there click on Team > Git > Configuration

 Screen Shot 2015-01-08 at 13.09.43.png

2.    Click on “Add Entry” and add as the Key the text core.autocrlf and as a Value the text false

 Screen Shot 2015-01-08 at 15.15.48.png

3.    Click again on “Add Entry” and do the same for the following entries:

  • Key: core.filemode, Value: false
  • Key: user.email, Value: the email address that you use for your SAP HANA Cloud Platform account
  • Key: user.name, Value: your first and last name
4.    At the end of these steps your setup should look similar to the screenshot. Click on Apply and after that on OK. Screen Shot 2015-01-08 at 13.15.59.png

Create the app in your account

We need to create the app first on our account so that we get a Git repository for the app. Follow these steps:

Task
 Screenshot

1.  Open your cockpit for your trial account on SAP HANA Cloud Platform via the link https://account.hanatrial.ondemand.com/cockpit and switch to the HTML5 Applications navigation tab

 Screen Shot 2015-01-08 at 13.22.28.png

2.  Click first on the button New Application… , enter the application name fishdashboard and click on the Create button.
3.    Click on the name of the newly created app Screen Shot 2015-01-08 at 13.24.29.png
4.    Click on the tab Development and copy the link of the Git repository to your clipboard

Screen Shot 2015-01-08 at 13.25.16.png

Screen Shot 2015-01-08 at 13.26.35.png

Copy the code into your app

Task
 Screenshot

1.    Start Eclipse and switch to the Git perspective

Screen Shot 2015-01-08 at 13.40.32.png

Screen Shot 2015-01-08 at 13.41.45.png

2.    Click on Clone a Git Repository

 Screen Shot 2015-01-08 at 13.43.21.png

3.    Paste the Git-URL you’ve copied from your cockpit into the URI field of the popped-up window, provide your user name and password of your SAP HANA Cloud Platform trial account into the fields User and Password.

Don’t forget to click on the option Store in Secure Store so you don’t have to provide the credentials later on.


Click on Next, click on Next again and click on Finish.

 Screen Shot 2015-01-08 at 13.50.41.png

4.    Now right-click on the Git repository and select the command Import Projects

 Screen Shot 2015-01-08 at 13.52.01.png

5.    Select Import as general project, click on Next and after that on Finish

 Screen Shot 2015-01-08 at 13.53.45.png

6.    Switch to the Web perspective in Eclipse (similar to step 1)

7.    Create a file called index.html. To do that right-click on the project fishdashboard and click on New and on File. After that provide the file name index.html and click on Finish.

Screen Shot 2015-01-08 at 14.01.07.png

Screen Shot 2015-01-08 at 14.01.39.png

8.    Now you can copy and paste the code from the index.html file I’ve attached to this blog post to the newly created index.html file in your Eclipse project. Be aware that you need to unzip the index.html file first.

 Screen Shot 2015-01-08 at 14.08.06.png

9.    Save the index.html file

 Screen Shot 2015-01-08 at 14.09.44.png

10.    Repeat the  steps 7 – 10 for a file called neo-app.json.

 Screen Shot 2015-01-08 at 14.11.30.png

12.    Right-click on your Eclipse project fishdashboard and select Team and Commit.

 Screen Shot 2015-01-08 at 14.13.33.png

13.    Provide a short commit message, select all files and click on Commit and Push

 Screen Shot 2015-01-08 at 14.17.34.png

15.    As a result you should get a message as response with a done message at the end.

In case you get something different, something went wrong.

Press OK to finish the commit and push.

 Screen Shot 2015-01-08 at 14.27.47.png

With this last step you already have the code of your app in your HTML5 app on your SAP HANA Cloud Platform account. There are now only a few steps missing to have everything up-and-running.

Setup the destination

The last step that is missing is the setup of a destination that the app needs to use. This is necessary due to the Same-Origin-Policy of browsers which don’t let you call a resource in your Javascript-code that is outside of the domain space of your app.

Task Screenshot

1.    Now switch back to your cockpit for your trial account on SAP HANA Cloud Platform and click on your HTML5 app fishdashboard.

You should see your commit message above the initial commit.

As the neo-app.json file needs a destination you’ll notice that there is a message under the Referecenced Destinations… block telling you that a destination is missing. This is the next task we need to accomplish.

 Screen Shot 2015-01-08 at 14.36.44.png

2.    Switch to account level on your cockpit and click on the Destinations tab

 Screen Shot 2015-01-08 at 14.38.38.png

3.    Click on New Destination and provide the details for the destination.

Name: fishimportsensordata

Type: HTTP

Description: Fish import sensor data

URL: https://fishimport<your user account ID>.hana.ondemand.com/iotscenario1/

Proxy Type: Internet

Cloud Connector Version: 2

Authentication: NoAuthentication

At the end click on Save

 Screen Shot 2015-01-08 at 14.49.35.png

4.    Select again the tab HTML5 Applications, click on your HTML5 app fishdashboard and click on the Development tab.

As a result you should see now your new destination listed in your Destinations tab.

 Screen Shot 2015-01-08 at 15.13.27.png

7.    Now click on the link of the commit message you’ve created and a new tab will be opened in your browser. You should see the app up-and-running and displaying the temperature values in a nice SAPUI5 app.

 Screen Shot 2015-01-08 at 15.18.36.png

But the link you’ve clicked on is only accessible to you as the developer of the application. If you want to make it accessible to others we need to version our commit and activate the version.

Create your first version

What you need to do next is to go back to your HTML5 app in the cockpit. At the very right of your commit you’ll find an icon in the column Create Version. Click on that icon, provide a name like 1.0 and click on Add.

Start the dashboard

The last thing you need to do now is to switch to the tab Version Management and click on the symbol in the Activate column for the version you’ve created in the previous step. A popup will show-up and after confirming with clicking on Yes that you want to start the application you can access the app by clicking on the link under Application URL.

Screen Shot 2015-01-08 at 15.27.32.png

Now you can share that link with others and even try out how the app looks like on your smartphone or other devices.

Click on one of the tiles of the app and if you have followed the steps of the first, second and third blog post you can see the chart showing you the last 10 stored temperature values of a sensor that you’ve connected to the RaspberryPi.

Screen Shot 2015-01-08 at 15.38.38.png

What comes next?

Screen+Shot+2014-11-12+at+14.20.26.png

We have now our app up-and-running. In the next blog posts will tweak a bit here and there and we’ll look into other aspects of IoT around the SAP HANA Cloud Platform. Stay tuned.

Best,

Rui

To report this post you need to login first.

18 Comments

You must be Logged on to comment or reply to a post.

  2. Henning Duerholt

    Hi Rui,

    great blog, much apreciated!!!

    /wp-content/uploads/2015/01/23_01_630340.png

    Following since November and everything allways works exactly as described.

    Looking forward to the next edition!

    Henning

    (1) 
  3. P. Lans

    Hi Rui,

    It works like a charm.

    The only thing I had to do was to adjust the destination-URL.

    Great blog, enjoy following it.

    Regards,

    Peter

    (0) 
  4. Joao Estevao Schlemm

    Hello Rui,

    Nice work. When I found this blog I was decided in build my first lab using a rPi.

    But in my case, almost everything ran like a charm, because my dashboard doesn’t show any information. Can you give some help?

    Dashboard

    https://fishdashboard-s0003975848trial.dispatcher.hanatrial.ondemand.com/

    Data from rPi

    https://iotscenarios0003975848trial.hanatrial.ondemand.com/iotscenario/

    JAVA Dashboard

    Java Console.PNG

    HTML5 Dashboard

    HTML5 Console.PNG

    Another thing it’s that I cannot add values to other sensors (2, 3, …). Maybe I have done something wrong.

    SensorData.PNG

    (0) 
    1. Didier Heck

      Joao,

      If your servlet is running fine (you’re able to create sensors and measures and see the json output), than  just copy the servlet URL and paste it in the destination URL used by your HTML5 application.

      I can already see that your Java application name is iotscenario when Rui named it fishimport.

      Regards,

      Didier

      (0) 
  5. Mimi Blume

    Hello Rui!

    First at all, much thanks for this great Tutorial.

    Now, my problem is this:

    I’ve done all steps of this Tutorial from part1 to this part4, but i never get a sensor value on my Dashboard. I think it is a problem with the Destination but i followed the whole tutorial step by step and can’t find the error.

    This is the message i get in the my browser:

    ^1CABF3376D1371BA11847B6B5E653E9B7FFFD8254861C5845A^pimgpsh_fullsize_distr.jpg

    Thank you for your help!

    Regards Mimi

    (0) 
    1. dylan drummond

      I got the same error, it was because in step 3 the sample URL should refer to the same URL you used for your Java app, e.g. (if my java-app name would be “iotrui0” , and trial user account would be “p1234567890trial” , and the name of the java-project name that i deployed with the iotrui0 HCP server would be “iotscenario” , then the URL in the Destinations file should be:

      https://iotrui0p1234567890trial.hanatrial.ondemand.com/iotscenario/

      I’m assuming here that you are using an HCP trial account. Whereas the sample URL in step 3 is using hana.ondemand.com (non-trial), and i guess Rui had a java-project he deployed called “iotscenario1” rather than “iotscenario” (which was the initial project name).

      Try fixing the Destinations URL, and see if that enables the HTML5 app to look in the right place for your Raspberry Pi’s sensor data?

      Regards,

      -dylan

      (0) 
  7. Arush Saxena

    Hi,

    Thanks for the blog series. It works without any hassles. I was wondering how can business rules be applied to the incoming data. For ex, if a temperature value is above a certain threshold, then show in red/ alert the application user etc. I thought of using Decision tables, but I am getting error when I call the procedure for activation. Another way, I could think of is modifications with the UI5 code. Is there another way I could do it?

    I’d appreciate everyone’s valuable thoughts.

    Thanks and Regards

    (0) 
  8. Tara Bourke

    Hi,

    I got the SAPUI5 dashboard deployed to HCP and working a few weeks ago but now when I tried to repeat the process, all I’m getting is a HTTP Status 404 – Not Found page. I was wondering if you knew of a reason that this could be happening?

    Thank you,

    Tara

    (0) 
  9. Anurag Kulkarni

    Hi Rui,

    Great  blog, can you show another demo on Raspberry pi using node.js  and SAP HCP .

    Another demo would be great using node.js for IOT .

    Thanks,

    Anurag

    (0) 
  10. Vaibhav Swami

    I guess, I left a message to moderator instead of submitting comment.

    I am unable to see the attachments. Can you please attach the index.html and neo-app.json from part 4.

    Thank you.

    (1) 
    1. Michael Appleby

      Hi Vaibhav,
      Please leave a comment in the future for discrepancies in blogs.  Only the author can fix missing content.  We moderators are busy enough already!  😀

      Cheers, Mike (Moderator)
      SAP Technology RIG

      (0) 

Leave a Reply