Build

Turning IoT Sensor Data into Visualizations with Ubidots

12 min read Michael Carroll on Jun 20, 2017

Ubidots is an Internet of Things (IoT) data analytics and visualization company. They turn sensor data into information that matters for business decisions, machine-to-machine interactions, educational research, and increase economization of global resources.

Device friendly APIs (accessed over HTTP/MQTT/TCP/UDP protocols) provide a simple and secure connection for sending and retrieving data to and from their cloud service in real-time. Ubidots’ time-series backend services are performance optimized for IoT data storage, computation, and retrieval. Their application enablement platform supports interactive, real-time data visualization (widgets), and an IoT App Builder that allows developers to extend the platform with their own HTML/JS code for private customization when desired. Ubidots exists to empower your data from device to visualization.

We’re pleased to announce that Ubidots’ application enablement platform is now integrated with our Data Stream Network via Functions for a fast, reliable, and secure means to transmit data from a device to the cloud and then transform this data into insights for an end-user.

In this guide, you will learn how to manage data between PubNub and Ubidots using the customized PubNub BLOCK. This BLOCK is a customizable microservice that give developers a simple way to add code and deploy features for real-time applications. Before you get started, you’ll need a PubNub account and a Ubidots account.

Introduction

Before starting with PubNub, it is important to know some Key Concepts to become familiar BLOCKS and how to use them.

PubNub Channels: A channel represents a virtual path between publishing and subscribing clients in the PubNub Data Stream Network(DSN). The channel is similar to a topic.

Any message will have exactly one channel associated with it. As an example, in order to receive a message published on the channel UbidotsChannel, the client must be subscribed to [at least] the UbidotsChannel (a subscribing client may be subscribed to more than one channel at a time).

A channel doesn’t need to be declared, defined, or instantiated in any way, they can be considered unlimited and arbitrary in scope.

You can choose as many, or as few channels as you’d like to use in your app – consider the channel as metadata on the message itself. In BLOCKS, a specific Event Handler (written in Javascript) can be associated with one or more channels. Every message published on a given channel will be processed by its associated event handler (if defined).

API Keysets: The first level of partitioning data between PubNub accounts is via the PubNub API keysets. Keysets are managed by PubNub and created by users from their admin portal.

Each Keyset contains a Publish, Subscribe, and Secret Key. Secret keys are also unique to a keyset, and are used for management functions.

Consider a publish key, subscribe key, and channel name the composite identifier for any message over the PubNub network. In other words, any channel is namespaced by the subscribe and publish keyset used to publish it.

For example, anyone publishing with a PubNub instance defined against keyset-ubidots on channel-ubidots can be received only by subscribers defined against keyset-ubidots on channel-ubidots. To be more clear, consider channel-ubidots‘ real name in this case to be keyset-ubidots:channel-ubidots… if someone published in a different keyset, but same channel, then the channel is name space by the keyset, and there would be no collision.

Event Handlers: An Event Handler (EH) is the user-defined Javascript code which runs when triggered by a given event, against a given keyset and channel(s) – it is the logic to perform against a message meeting certain criteria.

Event Handler Types: When an EH runs, there are Event Handler types it can be run with respect to:

  • Before Publish or Fire – If your intent is to operate on, or mutate the message before it has been forwarded on to awaiting subscribers, this is the event handler type to use.
  • After Publish or Fire – If your intent is not to mutate, but in some way operate on the message after it has been forwarded on to awaiting subscribers, this is the event handler type to use.
  • After Presence – If your intent is not to mutate, but in some way operate on a Presence event after it has been forwarded on to awaiting subscribers, this is the event handler type to use.

Before Publish or Fire as well as After Publish or Fire events operate against a triggering message. After Presence events operate against a triggering presence event.

BLOCKS: BLOCK (uppercase) refers to the PubNub feature.

The grouping of Event Handlers (EH) that together provide features and functionality for your applications is called a block (regular case).

Now that you get an idea how everything works on PubNub, it is time to start!

Setting up the PubNub BLOCKS

  1. Sign in on the PubNub:

 

Sign in on the PubNub

2. Once you signed in to the account, scroll down to the end of the page and create a new app. Assigns a name of your choosing to the app, in this case I decided to call it: “My First App.”

My First App

3. To create the application you have to press the blue button “CREATE NEW APP.” This will be create the app automatically. Select the app to enter into it the below figures:

CREATE NEW APP

4. After “creating a new app,” another window will appear and be able to create or select a Keyset to better be able to manage data.

select a Keyset

In this case I decide to call the Keyset “Ubidots” as you can see on the image below:

Ubidots

NOTE: It’s important know how PubNub works, so prior to beginning I recommend you familiarize yourself with the menu on the left and take a look of the functions within it.

5. Once you select the Keyset called “Ubidots” you will be able to visualize the keys(Publish Key/Subscribe Key/Secret Key).

Publish Key/Subscribe Key/Secret Key

6. To be able to manage the data through the BLOCKS (publish) or Webhook(subscribe) you have assign the channels where you desire publish and subscribe data functions. To create or visualize the channels, select the last option of the menu called “Debug Console”.

debug console

Inside the debug console, create channels to publish and subscribe to the data. Assign the name “ubidots-DataPub” for the published page, and “ubidots-DataSub” for Ubidots subscription based pricing. The client named setted it automatice (if you desire, you can modify it).

ubidots-DataSub

Also, pressing the setting icon you will be able to visualize and edit the channel configurations (client, channels, security).

Client-mms7s

Now that you have the parameters required to manage the data, it is time to know how publish and subscribe the data to/from Ubidots.

Management of Published Data

Firstly, make sure that the BLOCK function is already ENABLED in the Keyset. To verify this, enter to the keyset “Ubidots” and scroll down until you see the BLOCK section. Please note that if the BLOCK is disabled you will not enable it to send data to Ubidots.

Application add-ons

Once the PubNub BLOCK is ENABLED, select the BLOCK section of the menu.

PubNub BLOCK is ENABLED
  1. Create a new BLOCK called “Ubidots API” and assign a description of your preference:
Create a new BLOCK

Once you’ve created the BLOCKS name and description press the blue button to create new BLOCKS. Then, enter the BLOCKS already created:

Create a new BLOCK

2. The following window let you know how the BLOCKS works, and the state of it (running, failed, stopped, or pending). Create the a new BLOCKS by pressing the blue button called “CREATE“:

Create a new BLOCK

3. Set the following parameteres to the create the Event Handler:

  • Name: ubidots
  • Event Handler Type: Before Publish or Fire
  • Publish Channel: ubidots-DataPub

Please, take a look of the image below to verify if it looks like yours!

Event Handler

If everything looks similar or the same, press “create.”

Now, your BLOCK will be created. It is important become familiar with the PubNub environment before starting with a BLOCKS configurations. As you can see on the image below:

  • The box #1 is the Event Handler Section where you can verify and edit the information of it, also you can verify the status of the block “Stopped“; “Running“; “Pending“.
  • The box #2 is the Code Section where the BLOCKS code is written in JavaScript. In this case, this is where you assign the Ubidots API code.
  • The box #3 is the Debug Console of the BLOCKS, where you can visualize the management of the data between PubNub and Ubidots.

 

 assigning the Ubidots API to the BLOCK

4. Now it’s time to assign the Ubidots API to the BLOCK and test how it works.

  • in the section below, erase the default BLOCKS and attached the one provided by Ubidots -> Ubidots API.

 

 assigning the Ubidots API to the BLOCK

Once you’ve pasted the code into the IDE, you will see something like this:

 assigning the Ubidots API to the BLOCK

5. Using the Test Payload from the Event Handler section we’re going to test the BLOCKS to verify how everything works:

 Test Payload

 Erase the default Test Payload and assigns the following one to test the Ubidots API:

{
  "token": "{Assign_your_Ubidots_token_here}",
  "labelDevice": "my-device",
  "action": "send-value",
  "url": "things.ubidots.com",
  "payload": {
    "temperature": 26,
    "humidity": 59.99,
    "pressure": 846.17
  }
}

 

Once you’ve assigned it into the Test Payload section, and it should look like the image below. Don’t forget save the event handler before running the block:

 Test Payload

6. Now that everything is ready, press “Start Block” at the upper right part of the page:

Start Block

To verify if the BLOCKS is running, take a look of the status at the event handler section:

Status of event handler

7. Once the BLOCKS is running press the button “PUBLISH” to publish the payload and make the request to Ubidots:

Test Payload

You’ll received the response in the debug console(#3) and you will see in the image below:

debug console

The message [ { "status_code": 201 } ]  means “Created – Successful request + an item was created”. The Ubidots API uses the following response codes; in each case you receive a different response, please reference this link to know where the problem may exist – if one exists.

8. Now that the BLOCK is running and you had a successful request, go to your Ubidots account and verify if the device called “my-device” was created?

Go to the device section to visualize the data received for the device named “my-device

Menu

As you can see the device was created automatically:

My-device

9. Click on the Device to visualize the variables created:

Variables

Management of Subscribed Data

Now that you are able to publish data to Ubidots, we are going to show you how to Subscribe it to a channel using a Ubidots’ WebHook. To do this you will have to set up an Event – Webhook in Ubidots.

Setting up the WebHook

Before starting with the WebHook configurations, you have to create a variable inside the device called “my-device,” This variable will be set to post its values to PubNub.

  1. To create the variable, go to my-device, press add variable > default, and assign the name “relay” to the variable:
Setting up the WebHook
Setting up the WebHook

2. Once the variable is created, go to the Dashboard section to add a control widgetwhich will be tasked with sending the different values to the variable. From the upper right side of the webpage, select add widget then select control > switch > my-device > relay > finish.

Setting up the WebHook

As you can see, the control widget is created on your dashboard, and now you can proceed with the WebHook configurations, once you’ve finished with this go back to the dashboard to change the status of the variable and visualize how the data is posting to PubNub.

Setting up the WebHook

3. Now that the variable and widget are created go to the Events tab and press + Add event:

Setting up the WebHook

4. Select the device, variable and the conditions for the event, in this case will be “my-devices > relay > less or equal > 0″, as you can see on the image below:

Setting up the WebHook

Once you finished the previous step, select “WebHook

Setting up the WebHook

Firstly, you have to assign the URL that will let you publish a JSON to a channel via POST. Following the structure below assign the PubNub parameters (Publish Key, Subscribe Key, the subscribe channel, client UUID):

Setting up the WebHook

URL example:

Setting up the WebHook

To get a better idea on how build the message, please reference to this link.

Once you’ve the URL, place it into the Webhook settings. Also, set the method POST. Next, build the payload that you want to send, in this case it will be
{"value": {{last_value}}} .

To finish with the WebHook setting press Add Header and assign the following parameters:

  • content-type
  • application/json

After assigns all the parameters required, press “Finish“.

Setting up the WebHook

In the Events tab you will be able to visualize the event already created; if you wish, event settings can be altered at your leisure.

Setting up the WebHook

This event will post a “0” to PubNub every time the variable is less than or equal to 0, so you have to set another event with the same parameters, to be able to send a “1“. After this step, you are able to Publish two different values to PubNub from Ubidots in case you need to control a variable.

5. Following the previous steps and using the same parameters to the WebHook settings, create a new event but with the conditions if relay is equal to 1.

Setting up the WebHook

6. Once both events exist (0 and 1), you will be able to visualize them in the Events section:

Setting up the WebHook

NOTE: You have to use the same Keyset to Publish and Subscribe to/from Ubidots, if you don’t do it this way, the channels will not see to each other because they are publishing on a different Keyset.

7. After setting up the Event-Webhook, change the status of the relay from the dashboard section and visualize the results in the Debug console on PubNub. As you can see you’ll be able to visualize the data published from Ubidots to PubNub:

Setting up the WebHook

Result

In this guide you learned how to setup a PubNub BLOCKS to the Ubidots API, also you’ve learned how to post data to PubNub from Ubidots using a WebHook. This will help you with the application that you desire to implement using PubNub. If you wish, you may reference the following article that shows how to manage data between a Electric Imp device, PubNub, and Ubidots.

0