Smart Coffee Machine – SAP IoT Thing Modeler & IoT Ui5 App
Welcome to the “SAP IoT Thing Modeler & IoT Ui5 App” blog.
In the previous blog Wouter Lemaire talked about the Interceptors on the IoT Edge and how to develop and deploy them on your gateway. With these interceptors you can perform checks on your data and decided what your next steps will be. Send them to the Cloud or don’t send them at all, or even predict the coffee type in this case.
The topic of this blog is especially about mapping your sensors from the SAP IoT Service Cockpit to their digital twin in the SAP IoT Thing Modeler. Here you create your digital twin so later you can expose your IoT data through OData services. Next we will focus on how you can generate a IoT UI5 web application based on your IoT Data.
This blog is part of the blog series about our Smart Coffee Machine.
|Smart Coffee Machine Overview|
|How we started building a Smart Coffee Machine|
|From Sensor to the Cloud including the installation of the IoT Edge Gateway|
|SAP IoT Service Cockpit config and Edge Processing|
|SAP IoT Thing Modeler with a custom IoT UI5 app on top (current blog)|
|Integration with SAP backend|
SAP IoT Thing Modeler
Thing and Device Model
The mapping overview of the SAP IoT Service Cockpit and the SAP IoT Thing Modeler:
As you can see the device in the Device model is considered as a real standalone device that has nothing to do with the mapping itself. The mapping starts at the point where the sensor and the thing comes in.
The thing is an instance of a thing type while the sensor is an instance of a sensor type. Notice that when you map the capabilities to the property sets that it is an implicit mapping and it is name-based.
So far for the mapping architecture of the SAP IoT Service Cockpit and the IoT Thing modeler. Let’s have a look at our Coffee Machine its Property Set. Cause we’re still talking about our smart coffee machine right.
Thing Modeler – Property Set
SAP Smart Coffee Machine Thing Modeler Property Set:
Our Property set contains the following properties:
|CoffeeTakenTimeStamp||When the coffee was taken.|
|CoffeeType||What type of coffee it is. Decided by Wouter Lemaire his interceptors!|
|MaxFlow||The water maxflow measured while taking the coffee.|
|MaxFlowTimeStamp||When the water maxflow was measured.|
|TotalMiliLiter||The amount of milliliter the coffee contains.|
|WaterFlowDuration||How long it took to make the coffee.|
With this coffee property set we can create a thing type. The use for this thing type is creating a bundle that will push all this properties into the created thing of this thing type.
Thing type “coffee” -> Thing (of type coffee) -> contains all the properties of property set x.
Thing Modeler – Thing Type
Our coffee machine Thing Type:
As mentioned before you can place the created property set under your sensor type. In this scenario this means that every waterflow meter sensor (thing) that will be created out of the sensor type “waterfowmeter_SAP” will contain all our property set its properties.
So, let’s jump over to our created thing “coffee sensor”.
Thing Modeler Thing
Our coffee machine watersensor Thing:
As you can see our thing (coffee sensor) has been created and is showing the currently last taken coffee, in the table. This data and all the previous data is accessible through OData Services for your UI5 web application.
When you created your new thing, you will see the mapping status of the device its properties. These statuses are also available after creation.
You can check this by clicking the following connection symbol in the upper right corner:
As you can see it does not only contains your mapping statuses but also your sensor and thing id. With this thing id, you can perform specific OData calls to get your specific thing IoT data.
Later when we want to generate out UI5 application we will show our thing on a world map. Therefor we need to give the thing a long and latitude. Since our solution is running at the SAP Center in Brussel Belgium we will give it the following coordinates:
At this point you have a setup and a clear high-level overview of the IoT Thing Modeler. OData ready to be consumed so let’s get started with generating our SAP UI5 IoT Dashboard.
SAP UI5 IoT Web-Application:
Before we start generating the UI5 IoT Application, be sure you activated the IoT Application Enablement Service in the feature options.
When you confirmed this feature is activated, you can start generating by right-clicking the Workspace > New > Project from Template. Here you select the IoT Application.
Fill in the basic information for your application and next select your “Data Source”.
This will be the Things OData Service.
The following set is selecting the desire thing type and select the property sets you want to use in your application.
All the other steps are about selecting and providing data for the fields in your application.
When you finish all these steps you finished generating your UI5 IoT application.
Time to run this coffee machine!
As our solution is working at SAP Brussels you see it used previous provided geo-locations in the Thing Modeler, to locate the thing on the map.
This application contains more screens like a table overview with the sensor data, charts with the data and a thing list. All accessible by navigating through the application.
With these cool steps you mapped the IoT sensor to a thing and you display it on a map with all its given data in a few minutes!
What did we do in this blog
We learned a lot of things about the SAP IoT Thing Modeler and the SAP IoT UI5 Web-applications.
Some bullets to recap our learning path and what we’ve learned:
- We created Property Sets with their Property fields.
- We created a Thing Type.
- We created a Thing
- We checked, maintain and update a Thing.
- We generated your own IoT UI5 web-application from scratch.
We really hope this blog was interesting and helpful to you and we really enjoyed working on this project!
We are happy to announce our next blog about Cloud Platform Integration which will cover the scenario of putting the IoT-data into your SAP Backend.
A big thanks to the Flexso Digital company for making this project possible!