All Collections
User Guides
Integrate Bubble with Ubidots: Creating a sample web app for end users
Integrate Bubble with Ubidots: Creating a sample web app for end users

This is the second of a series of articles that illustrate how you can use Ubidots as the backend for any custom developed app in Bubble.

S
Written by Sergio M
Updated over a week ago

Scope

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.

Requirements

1. Create the layout to display device's data

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.

  • Name: The device name.

  • Last Activity: The last time the device sent data.

  • Health: A variable on the device.

  • Connectivity: A variable on the device.

  • City: A property on the device.

  • Tags: The device's tags.

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.

2. Display the device's labels

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.

3. Display devices' last activity

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:

4. Display devices' Health variable

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:

Health Variable value

Displayed message

Indicator color

1

Healthy

Green

2

Warning

Yellow

3

Unhealthy

Red

Another value

Unknown

Black

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:​

5. Display devices' Connectivity variable

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

Health Variable value

Displayed message

Indicator color

0

Offline

Yellow

1

Online

Green

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:

6. Display devices' properties: City

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:

7. Displays devices' Tags

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:

8. Displays device's health status bar

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:

9. Add icons to each device

This is the result:

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

Did this answer your question?