Integrating Your Project with Initial State

One of the common needs for IoT is visualizing sensor data. There are many cloud-based data visualization services and Initial State is among the more sophisticated ones.

Overview

You only need to put together a few components before seeing your sensor data on Initial State.

  1. Create an Initial State account.
  2. Create a MODE project.
  3. Implement a webhooks handler that converts MODE events into an Initial State API requests.
  4. Configure Initial State to receive and render your data.
  5. Create a device that generates events periodically.

Create an Initial State Account

You are sending data to Initial State and visualizing them. Let’s start by creating an account on Initial State.

Create a MODE Project

You are going to have a device and a Webhooks Smart Module to feed data to Initial State. These are organized under a project.

Follow the instructions provided in the following tutorials:

  1. Create a Project.
  2. Define a Device Class
  3. Instantiate a Device

After these steps, you will have a device that is attached to a home. You can use that device to trigger events that are delivered to the webhooks handler you are going to launch.

Deploy Webhooks Handler to Heroku

To send data from the MODE cloud to Initial State, you need to convert the data to match Initial State’s API requirement. For this tutorial, we have implemented a sample webhooks handler doing just that. We will deploy the code to Heroku.

(If you are not familiar with the use of webhooks with MODE, check out this tutorial.)

To run the webhooks handler code on Heroku, create a Heroku account or sign in to Heroku. Then click the purple Deploy to Heroku button below:

Deploy to Heroku

You will land on Heroku’s app deployment screen. Pick a unique App Name for your Heroku app. Then under the Config Variables section, replace (YOUR_APP_NAME) in the EVENT_URL field with the app name you just chose. If your app name is initial-state-adaptor, EVENT_URL will be https://initial-state-adaptor.herokuapp.com/evt.

Before clicking the Deploy for Free button, open the MODE Developer Console in another browser window and set up a Webhooks Smart Module.

Set up a Webhooks Smart Module on MODE

On the Developer Console, go to the Smart Modules section of your project and click the +NEW button at the top of SMART MODULE LIST. Locate the Webhooks Smart Module type, and click ADD.

Fill in the settings for your Smart Module. You can specify any module ID and description. But make sure in the Event Webhook section, fill in the URL field with the same URL you used for EVENT_URL in the previous step. For the Key field, click GENERATE to create one. Once you are done, click SAVE.

Now you can see your new Webhooks Smart Module in SMART MODULE LIST. Click the entry and you can see its settings and other important information.

Launch the Webhooks Handler

Back to the Heroku’s app deployment screen. Note the event webhook key you generated earlier on the MODE console and copy-and-paste that into the EVENT_KEY field under the Config Variables section.

To call the Initial State API, we need a Streaming Access Key from your Initial State account. The key looks something like EfRf1111AbcdefgaUb3FNO9xxxxxxxxx. Copy-and-paste the key into the INITIAL_STATE_ACCESS_KEY field under the Config Variables section.

Now you are ready to launch the webhooks handler. Click the Deploy for Free button.

Configure Initial State

Initial State organizes data by buckets. Let’s create a bucket for the data we will send from MODE. The webhooks handler we just launched actually can do that for you.

Open https://(YOUR_APP_NAME).herokuapp.com/create_bucket. You will see the text A bucket created on InitialState. Opening the link tells the server to make an API call to Initial State and create a bucket called test_bucket.

Test the Webhooks Handler

Now, you can send an event from a device and receive it with the webhooks handler.

From the MODE Developer Console, select a device instance and start Device Simulator. On the Device Simulator, type the following values to the Event section and press the Trigger Event button.

  • Event Type: data
  • Event Data: {temperature: 70.4}

When you send an event from a device or Device Simulator, you should receive an event webhook call (/evt) on your server (You can see the server log on Heroku with the command heroku logs).

$ heroku logs

2015-08-10T05:12:06.717550+00:00 app[web.1]: /evt is called:{"homeId":3,"timestamp":"2015-08-10T05:12:06.434380499Z","eventType":"data","eventData":{"temperature":71},"originDeviceId":3}
2015-08-10T05:12:07.000050+00:00 app[web.1]: InitialState response code:204

If everything is configured correctly, you will see the event on Initial State:

Initial State Data

Conclusion

You have now integrated your MODE project with Initial State and their visualization capability. Webhooks Smart Modules provide a way to deliver events from devices to third party web services. All they need to do is converting the data format to the appropriate API requests to the destination. You can integrate MODE with other services in a similar fashion.