Over a million developers have joined DZone.

Connect a Mobile App and a Spark Core - An International IoT Day Project

DZone 's Guide to

Connect a Mobile App and a Spark Core - An International IoT Day Project

· IoT Zone ·
Free Resource

Written by Jen Looper

It’s the Fifth Annual International Internet of Things Day! If you’re not familiar with this worldwide celebration of all Things Internet, you can learn about it here. According to this website, “the time is now to start having the important conversations on the technologies, security, data privacy, and enormous potential that an ‘Internet of Things’ is capable of.”

In the spirit of showing one small thing that an internet of things device is capable of, I thought I’d demonstrate how to connect your Spark Core to a mobile app. In this demo, we’ll create a very simple ‘red light, green light’ game. Amaze your kids, or at least entertain your cat with these remotely-controlled flashing lights.

Here’s what we’re going to create:

Why a Spark Core?

Spark Core, with its sibling gadgets the Electron and Proton, are the products of Spark.io. The Core was originally a successful Kickstarter product, and was marketed as a ‘wifi-enabled Arduino’ board. It comes with its own IDE where you can connect to your Core, write Arduino-style code, and ‘flash’ it to your Spark over WiFi. Managing a Core is very easy, as it can be updated remotely; you don’t need to dismount the device and hook it up to your computer to update it. It also has solid integration withCylon.js, which we’ll also use for this demo.

Configure your Spark Core

If you’ve been using your Spark Core for various projects, you may have code already ‘flashed’ to the device. To use your Core remotely you need to wipe it clean and put it back into factory mode. To do that, follow the instructions here to put your Core into “listening mode”. Use the mobile app that is available for your Core to reset it.

In my case, as I already had code flashed to the device, I had to delete my ‘claimed’ Core from the mobile app and ‘reclaim’ it. Once the Core is cleaned of any old code and ready to be accessed externally, you’re ready to start wiring.

The final wired project will look like this:


Wire Up the LEDs and Breadboard

For our little game, we are going to wire up two LEDs, one red and one green. A good way to plan your wiring strategy is to use a Fritzing diagram. For this project use this ready-made Fritzing diagram to get your wiring right.

Diagram courtesy of Spark.io

Along with your Spark Core, you’ll need three male-to-male jumper cables, two 1K Ohm resistors, a breadboard (so you don’t have to worry about soldering), and red and green LEDs.

I have found the SideKick Basic Arduino Kit, available from Radio Shack, to be invaluable in my hardware hacking projects, but you can find good equipment at websites like Adafruit or Spark.io’s own store.

Install Cylon.js

Now we need to start a little install-fest to get Cylon.js up and running and ready to be used in a mobile app. Cylon.js was created by the same good folks who created KidsRuby and other robotics libraries for Ruby and Go. To install Cylon.js for Spark, follow the install instructions here. As it’s an npm module, you need Node.js and npm installed on your machine, after which you can install cylon and cylon-spark:

npm install -g cylon cylon-spark

Cylon.js is very interesting since it allows us to interact with robots and IoT devices by means of JavaScript. It’s a one-stop-shop for JS-powered IoT devices and it’s great! While it’s dependent on Node.js, it also is available, at least in part, for Cordova-powered hybrid mobile apps like the one I’m proposing to build.

Using the Browserify npm module, we can run Cylon.js in our app. Cylon offers limited support for the large number of IoT platforms that are able to be “Browserified” and run in a mobile app: a list of these platforms is available here. Luckily for us, Spark is one of those platforms! So let’s start “Browserifying” our Cylon implementation.

Note: Spark.io offers its own SparkJS library via which you can interact directly with your Spark device. I chose to use Cylon.js because I want to use it for other IoT devices and because it supports being used in mobile apps out of the box. Exploring SparkJS is on my list of interesting things to try with the Spark Core, however!


Now you’ll need to install the Browserify npm module if you don’t have it:

npm install -g browserify

Browserify is a neat tool that allows you to require modules in the browser, bundling up all the dependencies that are needed into one file that you can use in your app.

Once it’s installed, login to your account at Spark.io and grab your Spark Core’s Access Token from the menu:


Also write down the Device Id of the Core you’re using:


Next, we need to create a script to “browserify”.

var Cylon = require('cylon');

var robot = Cylon.robot({

  connections: {
    spark: { adaptor: 'spark', accessToken: 'my-access-token', deviceId: 'my-device-id' }

  devices: {
    red: { driver: 'led', pin: 'D0'},
    green: { driver: 'led', pin: 'D1'}

  work: function(my) {
    //start with both lights off

  lightUp: function(color) {
    if (color === "green"){
    else {


$( "#redBtn" ).click(function() {
$( "#greenBtn" ).click(function() {

Now, test to see if you can properly browserify your code.

browserify -r cylon-spark -r cylon-gpio spark-script.js > browser_script.js

What is going on here? We’re asking Browserify to require the cylon-spark (for Spark Core) and cylon-gpio (for the LEDs) modules as well as the code included in spark-script.js and combine it all into a file calledbrowser_script.js. Read more about how Browserify works here.

If everything worked, you should have a long browser_script.jsfile with a lot of cylon-related code in it. Let’s get ready to use the file we just generated in a mobile app.

Build the Mobile App

This app is extremely simple, consisting of only two buttons, which turn lights on when pressed. Download the very stripped-down Kendo UI Mobile app code here. Then use the AppBuilder CLI to simulate this app on your local computer.

For all of this to work, you’ll need to have a Telerik Platform subscription. If you don’t have one, you can sign up for a free trial.

If you don’t have Telerik AppBuilder CLI installed, you can get it as an npm module:

npm install -g appbuilder

Navigate to the app code you just downloaded and type:

appbuilder simulate

You should see the app:


It’s pretty basic. Add your Spark Core’s device ID and Access Token inspark-script.js in the root of this folder and browserify that script again, this time changing the location where the finalbrowser_script.js file will live:

browserify -r cylon-spark -r cylon-gpio spark-script.js > scripts/browser_script.js

Now, take a look at index.html. You see that we have added the following line at the bottom of the body, underneath the jQuery include and the buttons

<script src="scripts/browser_script.js"></script>

This allows the buttons to be available and manageable by jQuery before the Cylon.js code starts. We start the Cylon.js routine and then add jQuery underneath so that the buttons, on click, can manage the ‘robot’ that Cylon.js creates and runs for us.

var robot = Cylon.robot({

$( "#redBtn" ).click(function() {
$( "#greenBtn" ).click(function() {

The buttons can now control the LEDs if you click on them. Let’s test!

Note, don’t forget to re-browserify your spark-script.js file each time you need to make changes.

Have some fun!

Hardware hacking is a really cool way to learn new techniques and technologies. For example, building this demo has taught us about Cylon.js and Browserify – both tools worth exploring in more detail. You can create far more interesting demos than ‘red light, green light’ using the techniques outlined above, including, for example, using more sophisticated sensors to read temperatures and write data back to your mobile app. If you create something interesting with these tools, be sure to let me know!

mobile ,iot ,sparkcore

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}