Ship IoT with LittleBits and bip.io

Jul 2015/ Posted By: wotio team

<h2 id="setup">Setup</h2>
For this tutorial you will need to sign up for a set of accounts:
<ul>
<li><a href="https://shipiot.net/">Ship IoT</a></li>
<li><a href="http://control.littlebitscloud.cc/">LittleBits Cloud Control</a></li>
<li><a href="http://slack.com">Slack</a></li>
</ul>
You will also need to acquire a <a href="http://littlebits.cc/bits/cloudbit">CloudBit</a>, based around a Freescale i.MX23 ARM 926EJ-S processor, from <a href="https://littlebits.cc">LittleBits</a>. The parts we will use for this tutorial are:
<ul>
<li>a 5V 2amp USB power supply</li>
<li>a micro USB cable</li>
<li>p3 usb power</li>
<li>i3 button</li>
<li>w20 cloud</li>
<li>o9 bargraph</li>
</ul>
They should be assembled in series as follows:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/littlebits.JPG" alt="" />
Instructions for connecting the Cloudbit to your local WiFi network for the first time can be found on the <a href="http://littlebits.cc/cloudstart">Cloudbit Getting Started page</a>. If you have already setup your Cloudbit, you can change the WiFi settings by going to <a href="http://control.littlebitscloud.cc/">your Cloudbit's page</a> and going to Settings and selecting the following option:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/Screen-Shot-2015-07-21-at-4-46-56-PM.png" alt="http://control.littlebitscloud.cc/" />
If you don't already have a Slack account, you can <a href="https://slack.com/create">create a new team</a> and setup your own #littlebits channel for testing:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/Screen-Shot-2015-07-21-at-4-50-57-PM.png" alt="" />
So by now, you have signed up for <a href="https://shipiot.net/">Ship IoT</a>, have a <a href="http://littlebits.cc/bits/cloudbit">CloudBit</a> sitting on your desk, a <a href="http://slack.com">Slack</a> channel, and are wondering what's next?
<h2 id="creatingourfirstbip">Creating our first Bip</h2>
When you first <a href="https://shipiot.net">Sign In to Ship IoT</a>, you will encounter a friendly green button that looks like this:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/Screen-Shot-2015-07-21-at-5-00-43-PM.png" alt="" />
Clicking that button will take you to a blank canvas onto which you can install an Event Source:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/blank.png" alt="" />
By clicking on the target in the middle, you will be presented with an Event selection screen:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/eventsource.png" alt="" />
We'll select "Incoming Web Hook" to provision a URL to which our CloudBit will send messages. In the field that say "Untitled":
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/Untitled.png" alt="" />
Enter a path of "littlebits" for our Event Source, and we should now have an event trigger on our canvas:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/trigger.png" alt="" />
Next we will "Add An Action" which will bring us to an action selection screen:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/actionselect.png" alt="" />
If you scroll down a bit you will find a Slack pod which we can activate. Your first time through, it will request you to sign into your Slack account and authorize Ship IoT to access your Slack account. In the background it will provision a new access token and send you an email notifying you of that. In the future, you can deactivate this token through the Slack interface.
After you have activated the pod, you will be asked to select an action to perform:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/postmessage.png" alt="" />
In this case, our only option is to "Post to Channel". Selecting this action will result in another node in our bip:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/two.png" alt="" />
Double click on the Slack icon to open up the action's preferences:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/options.png" alt="" />
We can give the bip.io bot a name of "LittleBits":
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/botname.png" alt="" />
We can select the "Channel ID" either using the "Use Preset" button which will attempt to discover the list of channels you have created, or you can supply a custom channel id:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/customchannel.png" alt="" />
Finally, we need to specify the "Message Text", and for this we will send the full message sent by the CloudBit by selecting "Incoming Web Hook Object":
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/msgtxt.png" alt="" />
After clicking OK, we can now link these together by dragging and dropping from the purple Event Source to the Slack action:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/draganddrop.png" alt="" />
Now whenever a message is sent to <a href="https://yourname.api.shipiot.net/bip/http/littlebits">https://yourname.api.shipiot.net/bip/http/littlebits</a> it will be sent to our "Post to Channel" action!
Well not exactly. We still need allow LittleBits to send us messages. Under the "Auth" header, we can change the authentication type to "None":
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/none.png" alt="" />
Turning off auth makes our URL a shared secret that we should only share with LittleBits. Anyone with that URL will be able to send messages to our Slack channel, so some care should be taken not to share it!
<h2 id="configuringalittlebitssubscription">Configuring a LittleBits Subscription</h2>
Configuring your CloudBit to talk to bip.io requires using the command line for a little bit. First we will need a little information from our <a href="http://control.littlebitscloud.cc/">Settings panel</a>:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/cloudbitsettings.png" alt="" />
We will need to record both the Device ID and the AccessToken. These are needed to setup the subscription to our bip.iob application.
To setup a subscription requires a bit more black magic on our part. The <a href="http://developer.littlebitscloud.cc/">CloudBit API Documentation</a> describes how to make a HTTP request to register our device with a 3rd party subscriber. In our case, we would like to register our Incoming Web Hook URL as a subscriber to our CloudBit. To do so, we'll write a small bash shell script use <a href="http://curl.haxx.se/docs/manpage.html">curl</a> in a script we'll name "subscribe":
<blockquote>
#!/bin/bash
DeviceID=$1
AccessToken=$2
URL=$3
EVENTS=$4
curl -XPOST \
-H "Accept: application/vnd.littlebits.v2+json" \
-H "Authorization: bearer $AccessToken" \
<a href="https://api-http.littlebitscloud.cc/subscriptions">https://api-http.littlebitscloud.cc/subscriptions</a> \
-d publisher_id=$DeviceID \
-d subscriber_id=$URL \
-d publisher_events=$EVENTS
</blockquote>
To use this script we need only make it executeable and run it:
<blockquote>
$ chmod u+x subscribe
$ ./subscribe yourDeviceId yourAccessToken yourUrl "amplitude:delta:ignite"
</blockquote>
This will cause the the URL you supply to be contacted each time the amplitude changes from low to high. If you want to have the value periodically reported instead you can just use the value of "amplitude" to get a message roughly every 750ms.
If the script works you will get a message back like:
<blockquote>
{"publisherid":"xxxxxxxxxx","subscriberid":"<a href="http://yourname.api.shipiot.net/bip/http/littlebits">http://yourname.api.shipiot.net/bip/http/littlebits</a>","publisher_events":[{"name":"amplitude:delta:ignite"}]
</blockquote>
This means your subscription has been registered and events are now flowing through the system.
<h2 id="testingitout">Testing it out</h2>
If you push the button now:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/push.JPG" alt="" />
A message should show up in your #littlebits channel:
<img src="http://idfiles.leveelabs.com/55bd0288af0b0930ba599bd0c4b7ca38/resources/img_new/labs_wot_io/slackoutput-1.png" alt="" />
You can use this same technique to drive any number of workflows through bip.io. All at the press of a button.

Blog

Blog

Ship IoT with LittleBits and bip.io

READY TO LEARN MORE ?

Ship IoT with LittleBits and bip.io

Related Content