Skip to Content
Technical Articles
Author's profile photo Wouter Lemaire

Communicate with IoT in your WebIDE project

This blog is outdated. HAT will no longer support the described functionality. There is now an alternative feature in SAP Web IDE Full-Stack called “IoT Enablement”. You can refer to the blog post here: https://blogs.sap.com/2018/01/15/how-to-build-an-iot-app-on-top-of-sap-cloud-platform-iot-application-enablement/

Hi all,

I recently posted blogs about the HANA Car: HCP IoT HANA Car v1.0 . The HANA Car is connected to IoT on HCP. To control the car I’ve created a Java Web application with a Java Servlet and UI5 web part as described here: HANA Car v1.0 – Java Webapp .

This was a good first working demo but I didn’t like the use of the Java servlet. Therefore I’ve searched and found a way to push messages from javascript (UI5) in the WebIDE to the IoT services without a Java Servlet .

Follow the next step to communicate from your WebIDE project with the IoT service:

1. Create the destination for the IoT service in you HCP cockpit

/wp-content/uploads/2016/04/destination_926621.png

The URL for iotmms:

https://iotmmsp935700trial.hanatrial.ondemand.com/com.sap.iotservices.mms/v1/api

URL for iotrdms:

https://iotrdmsiotservices-p935700trial.hanatrial.ondemand.com/com.sap.iotservices.dms/v1/api

2. Inject Internet of Things API library

Open your UI5 project in the WebIDE. Go to the folder where you want to implement the IoT library. Right click and click on “Inject Internet of Things API library”

iot right click.png

You’ll now have a new file “IOT.js” in the folder where you’ve added the library.

iot lib.png

Change the namespace of the IOT library to the namespace of your project:

iot namespace.png

3. Configure neo-app.json

Configure the destination of iotmms in the neo-app.json. The following configuration will redirect every request to iotmms. It will also replace “iotmms” to “http”.

neo app.png

4. Use the IOT library

Include the library in your controller:

/wp-content/uploads/2016/04/include_926633.png

Call the function “pushData” and pass the following parameters:

  • Device ID
  • Method (“http” or “ws”)
  • Sender name ( you can choose this, I used “HANA Car Control”)
  • Messagetype ID
  • Messages
  • response function
  • error function

/wp-content/uploads/2016/04/push_926628.png

5. Result

Now I can control my HANA car from my WebIDE project. No need for a Java Servlet 🙂

10-04-2016 19-41-29.png

Good luck!

Kind regards,

Wouter

Assigned tags

      31 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jonathan El-haddad
      Jonathan El-haddad

      Hi Wouter,

      I am following your guide to set up the iosmms services to my webide, but i do not have the option to "Inject Internet of Things API library" within by webide. is this a recent roll-out that maybe not all users have access to yet?

      Any Suggestions will Help.

      Best Regards

      Jon

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      It's indeed a recent roll-out but I would expect that everyone should have access. Are you using a productive HCP account? I'm using a trial account. New features always come first in the trial accounts so that could be the difference.

      Kind regards,

      Wouter

      Author's profile photo Jonathan El-haddad
      Jonathan El-haddad

      No it is a Trial Account but i am using an "s-user" whereas i noticed you are using a "p", is it a necessary step to be able to access data within iotmms?

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Maybe browser caching?

      You need the code in the IOT.js for sending requests to the service. The library is just a set of functions that you can use but it will in the end just create an ajax call. You could write it yourself... I'll try to add the IOT.js lib as attachment when I have the time.

      Kind regards,

      Wouter

      Author's profile photo Former Member
      Former Member

      Hi, is there a chance to get IOT.js code somewhere? Inject doesnt work for me somehow.

      Author's profile photo Anton Levin
      Anton Levin

      Please, familiarise yourself with the Community Rules of Engagements [1] and especially #9 - do not cross post. You have already started a thread here [2]. Regards, Anton (moderator)

      [1] https://www.sap.com/community/about/rules-of-engagement.html

      [2] https://answers.sap.com/questions/205276/index.html

      Author's profile photo Ludo Noens
      Ludo Noens

      Hi all,

      I regret to inform you that this feature is actually still in development and mistakenly went live on the trial landscape in March. We will remove this in the April release of Hybrid Application Toolkit.

      After internal review we plan to publish this again.

      Sorry for any inconvenience caused. Stay tuned for updates on this (follow).

      Thanks,

      Ludo Noens

      Author's profile photo Jonathan El-haddad
      Jonathan El-haddad

      Hi Ludo,

      Do you know when it will be brought back to the hybrid application plugin?

      Author's profile photo Ludo Noens
      Ludo Noens

      Hi all,

      After internal review and some adaptations regarding authentication, we are going to release this feature again with Hybrid Application Toolkit on the trial landscape. You can expect this to be available on 15 June 2016 (our 1606 release).

      Thanks,

      Ludo Noens

      Author's profile photo Harshit Kumar
      Harshit Kumar

      Eagerly waiting for this inject IOT API Library!!!

      Author's profile photo Marcus Schiffer
      Marcus Schiffer

      this does not seem to work for me with  the post service. Getting an 401 unauthiorizrd error.

      Are there similar experiences and maybe a solution ?

      Author's profile photo Former Member
      Former Member

      postData is protected by OAuth, you need add the device oauth token in the header of your request, like below:

      IOT.postData(

          sDeviceId, "sync", sMessageTypeId,

          oMessage,

          {

              headers: {

                  "Authorization": "Bearer " + oAuthToken

              }

          }

          ......       

      );

      Author's profile photo Marcus Schiffer
      Marcus Schiffer

      Thanks !  It seems I am getting one step further.

      The header of the request now looks like

      1. Accept:*/*
      2. Accept-Encoding:gzip, deflate, br
      3. Accept-Language:de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4
      4. Authorization:Bearer 89519d45701e115d2b8975c22393a82
      5. Connection:keep-alive
      6. Content-Length:103
      7. Content-Type:application/json

      8. The response however tells me
      9. "Note: Your browser does not support JavaScript or it is turned off. Press the button to proceed."

      10. Do I still miss something ?
      11. The URL of the call also seems wrong to me. After applying all the mentioned settings it looks something like this:
      12. https://useretc.dispatcher.hanatrial.ondemand.com/iotmms/data/9de1cded-0721-47d4-b1b3-e59841018f7a
      Author's profile photo Thomas Zang
      Thomas Zang

      Please also re-inject the new version of IoT lib supporting oAuth authorization.

      Regards,

      Thomas

      Author's profile photo Marcus Schiffer
      Marcus Schiffer

      Thanks, how do I get the newest version ? I am on cloud trial.

      Author's profile photo Thomas Zang
      Thomas Zang

      This feature has been released to hana trial, you can just re-inject the lib again to overwrite the existing one.

      Regards,

      Thomas

      Author's profile photo Marcus Schiffer
      Marcus Schiffer

      Thanks Thomas,

      now it works ! (I also needed to be more carefull with the path names and settings in neo-app.json. )

      Author's profile photo SHADAAN QUAISER
      SHADAAN QUAISER

      hi marks,

       

      can u share your neoapp.json and HCP destination configuration details,

       

       

      Regards

      Syed

      Author's profile photo Former Member
      Former Member

      Thanks wouter for the blog ,

      i followed this tutorial step by step , but i couldn't link between the web ide and the iot services : when i want to add some devices or delete message types the "done" funtion is executed but there's no device added or a message type deleted. It seems that the destinations are misconfigured.
      so i want to ask if i have to change the variable _dmsurl and _mmsurl to the url : https://iotmms<hanaaccount>.hanatrial.ondemand.com/com.sap.iotservices.mms

      and

      https://iotrdmsiotservices-<hanaaccount>.hanatrial.ondemand.com/com.sap.iotservices.dms.

      same question for the neo-app.json in the path of the destinations.

      Author's profile photo Former Member
      Former Member

      first of all, you don't need to change anything in code.

      but you have to make sure you use the correct target URLs to configure iotmms and iotrdms destinations in HCP cockpit.

      I think your 2 URLs are too short which are incorrect.

      the target URL for iotmms destinations is:

      https://iotmms<hanaaccount>.neo.ondemand.com/com.sap.iotservices.mms/v1/api/http/

      replace <hanaaccount> with your actual account

      for iotrdms destination, it is

      https://iotrdmsiotservices-<hanaaccount>.hanatrial.ondemand.com/com.sap.iotservices.dms/api/

      Author's profile photo Narasimha Murthy Balla
      Narasimha Murthy Balla

      Hi All,

      I am facing the 401 Unauthorized response when trying to post data to the device

      URL : https://webidetesting566566-<mytrialaccount>trial.dispatcher.hanatrial.ondemand.com/iotmms/data/5749dadc-d077-410b-9444-6eabd631213a

      IOT.postData(

          sDeviceId, "sync", sMessageTypeId,

          oMessage,

         successCallBack,

         errorCallBack,

          {

              headers: {

                  "Authorization": "Bearer " + oAuthToken

              }

          }     

      );

       

      Where as IOT.pushData working without any issues.

       

      I have maintained the destination properly in HCP cockpit.

      when I am using the same auth token on the direct URL (other than destination) https://iotmms<mytiralaccount>trial.hanatrial.ondemand.com/com.sap.iotservices.mms/v1/api/http/data/5749dadc-d077-410b-9444-6eabd631213a

      in postman plugin POST call was successfull.

      Please advise where else the error would be.

      Regards

      Murthy

      Author's profile photo SHADAAN QUAISER
      SHADAAN QUAISER

      hi Narasimha,

      i am also facing the same issue. have u got any solution for this.

       

       

      Regards

      Syed

      Author's profile photo Former Member
      Former Member

      Same problem here but I'm attempting to use to getData method. Do you also get an authorization error from using getData as well?

       

      Author's profile photo SHADAAN QUAISER
      SHADAAN QUAISER

      Hi Garett,

      I haven't tried yet for get data. Let me try with get data also.

       

      Regards

      Syed Shadan

      Author's profile photo SHADAAN QUAISER
      SHADAAN QUAISER

      Hi Garrett,
      I found the issue. Now for me post data is working.i don't know whether it's a right approach.
      I only changed destination on hcp for iotmms to no authentication from basic authentication.
      then it started working.

      Regards
      Syed Shadan

      Author's profile photo Former Member
      Former Member

      I'm still having trouble, unfortunately. Even with no authentication being set in the hcp.

      Does your hcp iotmms destination url end in "/v1/api/http/ and your neo-app.json file specifies the iotmms entryPoint as "/http"? I have a hunch I messed up that step. I'm getting some additional help this week so I'll report back here if I resolve my issue with a different method.

      Thanks!

      Author's profile photo Former Member
      Former Member

      Alright, I made a separate post regarding this issue if anyone else is having similar troubles. https://answers.sap.com/questions/185527/unable-to-connect-iot-message-management-service-t.html

      Author's profile photo Former Member
      Former Member

      I know this is not the right place to post this comment but I try. I am currently developing an application based on iot application template and I am bolque at the level of the configuration please help me 

      What I need to set to porperty set type and property set??????

      Author's profile photo Anton Levin
      Anton Levin

      Hello,

      yes correct, this is not the right place to ask this question since this particular blog has nothing to do with the IoT Application Enablement [1]. Please, familiarise yourself with the Community Rules of Engagements [2] and especially with points #13 and #3 - Search before you post. A similar thread to your question is already there [3]. Feel free to simply upvote that question.

      Regards,

      Anton (Moderator)

      [1] https://blogs.sap.com/2017/01/09/sap-iot-application-enablement-jump-page

      [2] https://www.sap.com/community/about/rules-of-engagement.html

      [3] https://answers.sap.com/questions/168248/problem-creating-iot-application-on-webide.html

      Author's profile photo Ludo Noens
      Ludo Noens

      Hi Wouter,

      Our SAP Web IDE feature called Hybrid Application Toolkit has come of age and although it is still relevant for developing hybrid apps, the IoT integration is no longer relevant and not up-to-date.

      We will remove the functionality from HAT as described in your blog.

      My request to you: can you update your blog and indicate (on top) that it is outdated. HAT will no longer support the described functionality. There is now an alternative feature in SAP Web IDE Full-Stack called “IoT Enablement”. You can refer to the blog post here: https://blogs.sap.com/2018/01/15/how-to-build-an-iot-app-on-top-of-sap-cloud-platform-iot-application-enablement/

      Thanks,
      Ludo

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Done!