What you'll learn
After reading this article you'll learn how to configure your Bubble app so that it can use the Ubidots API to request devices, variables, etc. This will allow you to build custom frontends such as this one:
Motivation
Ubidots is an IoT platform designed to handle data collection, storage, visualization, and analysis. By combining the flexibility of Bubble's frontend design capabilities with the powerful backend capabilities of Ubidots, you can unlock a whole new level of functionality for your applications.
Introduction
In today's digital age, creating user-friendly and visually appealing applications is a top priority. Bubble is a no-code platform that empowers individuals and businesses to design stunning frontend interfaces without the need for extensive coding. However, when it comes to integrating real-time data, managing IoT devices, or implementing advanced data analytics, leveraging a robust backend platform becomes crucial. This is where Ubidots comes in.
Part two of this integration series: Integrate Bubble with Ubidots: Creating a sample web app for end users
Requirements
1. Install the API Connector plugin
Start by logging in to your Bubble account. Then, create a new Bubble app by clicking the button as shown below:
Once the browser finishes loading the resources, it will look like this:
Go to the Plugins section on the panel at the left side and then click the + Add plugins button.
Look for API Connector plugin and install it by clicking the Install button. Then click the Done button to continue.
Click the Add another API button.
A set of options will be displayed. Fill out the fields as follows:
API Name: Any name which helps you to identify this API, for example Ubi API is a suitable name.
Authentication: Set it to Private key in header from the drop-down menu.
Key name: Set it to Ubidots' authentication header, x-auth-token.
Key value: Set this to the token that you want to use to request the Ubidots API.
Finally, click the little expand button as shown below:
2. Create the API call to get devices from Ubidots
Upon clicking the expand button, the API call settings will be shown. Fill them out as described below:
Name: Set it to any name that you find appropriate, GET ALL Devices is a suitable name.
Use as: Set this to Data.
Data type: Set this to JSON.
Method: Set this to GET.
Headers:
Key: search_icontains → Value: A common device label.
URL: Set it to Ubidots' endpoint to request devices:
https://industrial.api.ubidots.com/api/v2.0/devices/
For example, suppose that you want your end user to visualize all the devices whose label starts with "HealthDevice", then the value of the search_icontains key in the headers should be "HealthDevice".
Click the Initialize call button. Upon doing so, a pop-up window like the one shown below will appear. There, in the results field, set the name of the API call being created.
In our example, since the API call was named GET ALL Devices in the previous step (as shown in the image above), that's what we'll call it in the results field.
After clicking the Save button, you'll be taken to the screen that corresponds to the image above.
3. Create the API call to get all variables from Ubidots
Follow exactly the same steps as in the previous section, only replacing the URL by the Ubidots endpoint to request variables:
https://industrial.api.ubidots.com/api/v2.0/variables/
Also, make sure to set the value of the search_icontains key to the common name of all the variables that you want to display.
For example, suppose that the devices considered in the previous section (whose label started with "HealthDevice") have a variable called Health and you want to display this variable's value for each device, then the value of the search_icontains key should be Health.
At last, make sure to Initialize the call as in the previous section.
4. Create the API call to get a variable's last value from Ubidots.
Follow exactly the same steps as the previous section, only replacing the URL for the Ubidots endpoint for requesting a variable's last value:
https://industrial.api.ubidots.com/api/v2.0/devices/[deviceId]/variables
Then, in the URL parameters section, set a key label to deviceId and set its value to that of any device on your Ubidots account.
As in the previous steps, make sure to Initialize the call.
5. Create the API call to get a variable's values from Ubidots
Follow exactly the same steps as the previous section, only replacing the URL to:
https://industrial.ubidots.com/api/v1.6/variables/[variableId]/values
Then, in the URL parameters section, set a key label to variableId and its value to the ID of any variable in your Ubidots account.
As in the previous steps, make sure to Initialize the call.
6. Install the Unix Timestamp plugin
You'll need to install this plugin to transform any timestamp sent from Ubidots into a date format. Head to the panel on the left side and click the Install more... option.
Search "unix timestamp" on the search bar and install the plugin. Then click the Done button.
7. Create the API call to authenticate your Bubble app against the Ubidots app
Note: This step is optional and only available for Enterprise license holders, who have access to the OAuth endpoints as part of its feature plan.
Create a new API call with the following settings:
Method: POST
Headers:
Key: Content-Type → Value: application/x-www-form-urlencoded
Body:
Key: grant_type → Value: password
Key: username → Value: The username of the Ubidots account who owns the app (admin).
Key: password → Value: The password of the Ubidots account who owns the app (admin).
Key: client_id → Value: See the note below.
Key: client_secret → Value: See the note below.
IMPORTANT NOTE: The client_id and client_secret must be provided by the Ubidots support team. Please contact us at the following email, support@ubidots.com.
As in the previous API call creation, make sure to initialize this call.
Part two of this integration series: Integrate Bubble with Ubidots: Creating a sample web app for end users