mini-webui - Business view

At this point we assume you have gone through the device integration tutorial and now want to see the thing using a Web-based user interface.

Estimated time to go through: 5 minutes.

You will need to use the same credentials as in the previous example.

  • API Token
    In order to be allowed to submit any request to the HTTP API of Bosch IoT Things you will need an API token.
  • Basic Authentication
    In order to make sure that only rightful users are allowed to see things, the technical user ID gets related to the entities a user is allowed to work with.

In this tutorial, the UI solution will try to retrieve the thing created in tutorial mini-device-integration via the HTTP API.

In fact it asks for a specific Thing ID, fetches the user entries from a UI and re-directs the call to the Bosch IoT Things service.

  1. If your workspace requires a proxy to connect to our cloud service, please create the resource config.properties and store your proxy settings there. Add the file at scr/main/resources.
  2. Run As > Maven clean and Maven install
  3. Use the command line to run java -jar target/mini-webui.jar
  4. Browse to localhost:8080/mini-webui
  5. The UI should offer two text entry fields and a submit button.
    Minimal Web UI

The user authentication dialog will pop up only once - when you click the submit button. Please make sure to use the exactly same user as in the previous tutorial.

A thing with an Access Control List (ACL) entry looks like in following example:

  {
  "thingId": "org.example02:xxxx-xxxx-xxxx",
  "acl": {
    "8c36bc60-xxxx-xxxx-xxxx-4ed6ce7ed64c": {
      "READ": true,
      "WRITE": true,
      "ADMINISTRATE": true
    }
    },
    "features": {
      "counter": {
        "properties": {
          "value": 100
        }
      }
    }
  }
  1. The UI created with step B is available at localhost:8080/mini-webui/
  2. Set the API Token and the Thing ID
  3. Click Submit
  4. The application will require to authenticate
    |Basic Auth
    Note: The dialog provides only two fields for authentication.
    Therefore, you will need to set the tenant name in the same field as the username separated by a backslash:
    E.g. YourTenantName\YourUserName .
  5. Your Thing should now appear in the list.

minimal ui

As far as Auto refresh is checked, you can see live the thing counter increasing its value.

  • Restart the Java application from tutorial part mini-device-integration
  • Get the new thing ID
  • Set it in the Minimal Web UI
  • Submit

Now lean back and watch the “counter” increasing every 2 seconds from 0 to 100.

Congratulations,
and hopefully you had fun watching your first thing grow.