Skip to content

IOT Web Development 101

This is an introduction to Web application development and is focused on the Spark.IO core device and the Spark Cloud API service.

What is IOT?

CaptureIOT is Short for Internet of Things.  It’s the notion that everything from your toaster to your car will someday communicate with you and each other via the internet.  Your fridge will re-order milk when you need it, your car will tell you it needs an oil change. The list of ideas here is endless.

IOT is seen as a huge new market for product development. Just about every big company name you know is looking for entry into this market.  I think it’s us Makers that will pave the way though. I want to monitor my garage door, to know when it’s open and to be able to close it from my smart phone. I can do that in a days project thanks to some new products.


Isn’t this easy? Just add Wi-Fi to an Arduino

Not quite that easy, for IOT to work your device needs to talk to the internet to send it’s data and it also needs to listen for commands.

A device in your home is protected and isolated from the net so that hackers can’t get to it.. This means you cant get to it when your not connected to your personal home network.  When you leave for work your phone is connected to the Internet and it too is isolated. These devices, IOT and cell phone, can connect out to the internet but not to each other. That is a problem.

We need a central control point. A system that all the devices you want to communicate with are able to transfer messages to and from each other. A server like a message board, everyone post messages to the server, everyone can read these messages and everyone is protected as they make the connections themselves.

So for IOT to work, with current technologies, IOT devices send their data to a central server. Other devices connect to that server to pick up the data. The IOT devices also listen to the server for commands which are forwarded from the controlling devices. For example…

One of my first project ideas is a garage door monitor.  This IOT device would watch the existing door sensor, reporting the door as closed or not. When it detects a change it sends a data message to the central server.  A smart phone has also talks to the server and gets data about the door.. it beeps or shakes to let me know the door is open. Maybe it does an alarm sound if the door stays open for more then 10 minutes. 

When my phone alarms at me, I look and notice the open door.  I press the application button to close the door and wait for it to show the door is closed. When I press that buttons the app sends a command to the central server.  The IOT device checks with the server and receives the command. It closes the door by pressing the door close button electronically as if I did it with my finger.  When the IOT device see the door close, it sends another data message which gets all the way back to my smart phone to show the door is closed.

Introducing the Spark Core

Spark has a neat solution to IOT development for us hobbyist. Spark Core is both ends, the hardware and the server side for an IOT project. The Core hardware module is small but has most of the I/O that an Arduino has, and it’s Ardunio compatible. It’s very simple, a few lines of code is all you need to make something like the garage door device described above.

The current core module cost $39/each, which is probably just fine for the maker community. It’s basically a souped-up Arduino with built in Wi-Fi, for not much more cost then the Arduino we all love to use in our projects.

They have a new model coming, preordering for the Photon is under way now. They are selling about 1000 units a day.  The Photon is slightly more powerful and cost only $19/each. It might just be low cost enough to be a good option for medium volume production.  When you consider the cost of FCC certification and Wi-Fi chip sets..

I’ve been playing with the Spark Core for a bit more then a week and I love the thing.  Here are some highlights…

  • Web based IDE
  • Easy to setup connection on your Wi-Fi network.
    • Serial or mobile application
  • Over the air firmware updates.
    • Device loads your code wirelessly via Wi-Fi.
  • Arduino compatible development
    • Same code, even libraries are compatible.
    • If you know Arduino you will be doing stuff in minutes.

IOT Web Development

In the garage door monitor example I described a Smartphone app. But this really could just be a web app that works with every web enabled smart device. Every smart phone, desktop PC, Mac, Linux, Windows, any device with a web browser.  If they have a web browser our garage door monitor can be interfaced.

Creating a web app means doing some coding HTML and JavaScript. There are lots of tools available for this and you can use other programming languages.  For this introduction, I will stick with the basics and use free tools.

What we need is an HTML file that when loaded in a browser shows us the garage door state and has a button to send the close command. All this functionality is provided by some JavaScript on the page which interacts with the IOT central server. This should work with any browser, on any system…

For the Spark Core firmware development, we will use the online IDE from  For the Web page development, we will use the new Adobe Brackets open source tool.

Adobe Brackets is an awesome tool and it’s a web app in-itself.  It’s written in JavaScript and you are welcome to hack and improve it.  It looks and feels like a standard application running on your PC (Mac or Linux too).  Awesome sauce…


What are you hiding? is not a good answer to the security question.  This example code does not address security issues with IOT and in fact is a good example of how you can put things at risk.  As you view the code you will see we put a device ID and an access code in our JavaScript which is loaded into the browser.  If someone knew what was going on, they could just view the page source to get access to your IOT device. Just be aware of this…

There are solutions, if you are making a product to sell, you will need keep this code only on a protected server. This server would proxy all communications with user level security. This way you don’t expose the keys…

Spark core access keys can be reset at any time. Just log in and click the reset button in the same area where you find your key.  If you share your code, and forget to edit out the key, go do this reset.

For home projects a simple level of security would be to host your web app on a web server where log in is required to get at it.  This should be easy to do on most web servers but I will not go into that here.

For our examples we will just ignore security issues in the interest of learning and getting things running quickly.  Probably ok as long as you don’t go around showing off your new DIY IOT gizmo..

Lets code… finally…

Ok the introduction is out of the way, lets do some real code work. For this work you need to have a basic understanding of HTML and JavaScript.  You will probably be fine if you have ever done a simple HTML file and/or done software development in just about any language.

You should have a good understanding of working with the IDE and flashing the code to your core. Once your core has some code and is online with the pulsing cyan LED you are ready to continue below.

To get a taste, try running this web app against my Spark Core. Don’t expect this to work after a few days, as I will reset my API Token soon…  This is the same app we will be working with below, just that it’s connected to my core.

First to prepare…

  1. Get your Spark Core powered up and online.
  2. Install Google Chrome, it’s used by Adobe Brackets for some awesome real time editing.
  3. Install Adobe Brackets.
  4. Pull the example source files from my GITHub dfowler7437/SparkCoreSimpleWebDemo
  5. Open the Spark Core Web IDE and start a new app.  Cut and past the source from firmware/SparkCoreSimpleWebDemo.cpp into your app. Replace all the text..
  6. Go ahead and flash your Spark Core with this code. After it’s done flashing, verify the breathing cyan LED.
  7. Find your device ID and your access token via the Spark IDE. You will need those two strings for the next steps.
  8. Use this helper page to test that you can pull data from your core.  Enter your device id and API token then “rssi” for a variable name and click the get button. You should see some value come back for the Wi-Fi signal quality.
  9. Open Adobe Brackets and use it’s Open Folder option to open the html folder. Then open the index.html file. Look around at the top of this file to find the Device ID and API Token strings we need to update.
  10. Edit the Device ID and API Token values in the HTML file (open in Brackets) so that the app can access your core.
  11. Run the web app by pressing the bolt symbol in the upper right. You should see Chrome load up and a simple web page with some buttons.. We will do a walk though of all this On a good note, the Spark core access key can be reset at any time. Just log in and click the reset button in the same area where you find your key.  If you share your code, and forget to edit out the key, go do this reset. If you want to be careful put your web app on a web server and require a log in to get at it.  This should be easy to do on most web servers but I will not go into that here.


The Spark Core uses a lot of power, 140mA. The metal shield gets warm after it’s been powered for a short time. Another possible issue is that a linear regulator is used for the 3.3V power. Due to linear regulation, when you power the device with 5V nearly half the power used is just heating up the regulator.

For battery powered applications, power management tricks will be required. For example, parts of the core can be put to sleep and woke later based on timers or external signals. There are several power saving modes to explore. One major consideration is that when the Wi-Fi is off (the major power consumer) your core will not be able to send or receive data.

Development Setup

You don’t need much to get started, just the steps above will work but I have found a few tweaks. 

In the picture below you can see that I do not have a cable connected to the Spark Core USB. This is because my PC gets aggravated every time the Spark Core resets, which is every time firmware is loaded on the device. Any connected terminal program finds it’s serial port ripped away and well it’s not always pretty. I just don’t like having to disconnect the terminal program, do the firmware load, then reconnect.

IMG_0561 You do have to connect Spark Core, I don’t.  Instead I power the core and connect to Serial1 via an FTDI cable. I use the 5V FTDI version and connect it’s 5V power signal (red) to vin on the core. The TXD line from the core is connected to RXD on the cable (yellow) and I have a problem free setup. Debug data shows up on my terminal program which can run constantly with out a hick-up on a firmware load.

The 3.3V FTDI cable might work as well but you would need to connect to the 3.3V power pin and when I tried that, the voltage was drawn down to around 3V. I did not feel that was reliable so switched to the 5V cable and connected power to vin.  Even with that, the core pulls the 5V power down to 4.8V. I’m just hoping the load is not an issue for the FTDI device in the long run.

The small black box under the breadboard is a 4X AA battery pack.  This works great for power but since the core consumes so much when in full power mode, I prefer to power from either the FTDI or a 5V wall wart.

There is also a Dallas 18B20 one wire temperature sensor on the right side of the breadboard.

Useful Links

All the links you need…

  • Serial Terminal – To connect to a serial port, mostly for debug use.
  • Web IDE

0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

Some HTML is OK

or, reply to this post via trackback.