This is a brief guide on what you can achieve by using Ubidots as the backend for an app whose frontend is developed on Bubble:

This article won't go in detail into all the components shown in the GIF above, however, it will give the necessary tools so you are able to reproduce it on your own.

This will be the UI displaying the device's information. In this particular example, the following data will be shown, however, you are free to modify this design according to your needs.

Go to the Design tab on the panel at the left side of the screen:

Drag and drop the required amount of Text elements, according to what you want to visualize, then double click on each element to open its settings and set the text that you want to display:

Drag and drop a Repeating group element into the blank area to create the "grid" to gather and display device's data.

Next, this Repeating Group has to be configured so that it can use the Ubidots API to request the required data. Double click on the Repeating group to display its settings and configure it as the following GIF shows:

Note that, in the configuration above, the configured API name might not be the same as the one you've used.

Lastly, it is advisable to un-check the Set fixed number of rows option if you do not require a fixed amount of rows.

Drag and drop a Text element inside the Repeating Group's first row. Make sure it gets duplicated to the other rows as shown below:

Double click the Text element to display it settings and configure it as the following GIF shows:

As the GIF above shows, the devices whose label start with "DeviceHealth" are being displayed upon hitting the Preview button.

First, drag and drop a Unix Timestamp element into the blank canvas. Resize it so that it fits into the repeating group's grid and drag it in. Make sure that, once placed in the repeating group, it gets duplicated to all the rows. After that, click on the Unix timestamp at the first row and configure it as the GIF below shows:

The Health variable on each device will be displayed, not as its numerical value, but as a message as well as a colored circular indicator, according to the following logic:

In order to do so, drag and drop a text element into the repeating group, making sure it gets repeated across all the rows. Then, double click the text element to display its settings. The following GIF shows how to set the logic so that, when the value of the Health variable is 1, the text element will display the text "Healthy":
​

Repeat the step above to set the logic for the remaining levels (in our case "warning", "unhealthy", and "unknown").

Pro tip: You can right click on the expression and click the copy expression option in order to easily replicate this step.

At last, this is how the settings should like:

That is all for displaying the message.

The next step is to configure the circular indicator. To do so, drag and drop a Dynamic circle element into the repeating group, at the very side of the message. The steps are exactly the same as those for configuring the message, the only difference being that this time the property to change is Color. Then double click on it and change its settings as shown below:

Repeat this step in order to cover the 4 logic levels:

Lastly, go to the Appearance tab and set value, minimum value and maximum value to 1:

Finally, this is how it looks:​

The Connectivity variable data will be displayed following the same rules as for the Health variable. This is the logic:

Follow the same steps as in the previous section to configure both the message and the circle indicator. You only need to take into account that instead of filtering by label "health" you should filter by "connectivity".

​Message settings:

Circle indicator settings:

Result:

The following GIF show how you can obtain and visualize the properties of a device.
Drag and drop a text element into the repeating group, making sure it gets duplicated in all the rows in the repeating group. Double click on the Text element to edit its settings as follows:

The following GIF shows how you can obtain and visualize the tags of a device.
Follow exactly the same steps as in section 6. The only thing that you need to take into account is that instead of selecting the properties_city key, you should select tags:

Start by adding a Shape element into the design area. Then, double click on it to open its settings. Modify the color, border style, border color, and shadow according to your requirements:

Add a Dynamic circle and an icon into the shape:​

Lastly, add two Text elements inside the shape that you just created. One holding plain text such as "Healthy devices:" and the other should hold the count of the devices whose Health variable is equal to 1, i.e "Healthy".

This is the result:

You can follow this same logic to show the different status for the Health and Connectivity variables and achieve something like:

This is the result:

This is as far as this tutorial gets. Now, it is up to you to customize your app at will!