Hardware components | ||||||
 |
| × | 1 | |||
| × | 1 | ||||
Building a device with the Particle Photon is a lot of fun because of the ease of getting started. Connect the device to WiFi, open the Web IDE, flash your code and you can see your project working right away!
Does the same ease of use exist for making simple web scripts that can interact with your Photon? If you need a dashboard that shows how many times a button was pressed? Or if you want a web form to change the color of the LED?
There are existing services like IFTTT that can help, but as soon as the logic requirements are more complicated, those are not sufficient. Deploying an application on a virtual server is way too complicated for simple scripts.
Enter hook.io, a simple way to program web microservices. Each program has its own HTTP hook url. You put your code on a public GitHub gist and it runs whenever the hook is called. That's it! No servers to configure!
Let's work through an example.
Counter dashboard
Let's link an event on a Particle device with a web script running on hook.io that will count the number of events. Then let's display the current event count on a web page.
Firmware
The Particle firmware for this example sends an event every time you press the Setup button. The code is in the code section at the end.
Counter hook
Let's create a new hook on hook.io called counter by going to https://hook.io/new
The code for the hook increments a counter in the cloud datastore (the hook.io database) when it receives an event and returns the result.
Because my hook.io username is monkbroc and I picked the name counter, the hook code will execute any time https://hook.io/monkbroc/counter is requested in a browser.
Let's test the new hook with the cURL command line tool.
curl https://hook.io/monkbroc/counter?name=magicButton
We should get an increasing number every iteration.
{
"result": 2}At this point, if something doesn't work in your code, you can addconsole.logcalls and see the logs athttps://hook.io/monkbroc/counter/logs
Finally let's make sure this hook is called when our Photon publishes a magicButton event:
particle webhook create magicButton https://hook.io/monkbroc/counter
Let's see if this works by monitoring the Particle events
particle subscribe mine
Subscribing to all events from my personal stream (my devices only)
Listening to: /v1/devices/events
{"name":"magicButton","data":"null","ttl":"60","published_at":"2015-11-06T18:22:56.740Z","coreid":"XXXXXXXXXXXXXXXXXXXXXXXX"}
{"name":"hook-sent/magicButton","data":"undefined","ttl":"60","published_at":"2015-11-06T18:22:58.285Z","coreid":"particle-internal"}
{"name":"hook-response/magicButton/0","data":"{\n \"result\": 3\n}\n","ttl":"60","published_at":"2015-11-06T18:23:00.644Z","coreid":"particle-internal"}
Dashboard
To create the page that shows the counter value, let's create another hook.io endpoint called dashboard and have it simply show the value of the counter.
In order to display the value in the browser, we'll provide a template HTML file to hook.io to use as the theme. In that template, the string {{hook.output}} will be replace by the output of our hook.
We'll host the template as a GitHub gist. We'll need the URL for the raw version of the file to paste that into hook.io
Putting it all together
If you flash the firmware code to your Photon, press the Setup button now and reload the dashboard page at https://hook.io/monkbroc/dashboard you'll be able to see the counter go up!
Here's what the dashboard looks like.
Now you know how to build simple web applications that connect to your Particle Photon!
What's next?
If you want to use the Particle API in your hook, you can import the sparkjs module into your code.
module['exports'] = function particle (hook) {
var Spark = require('spark');
Spark.login({ accessToken: hook.env.PARTICLE_API_TOKEN });
}
Make sure that you don't put your email, Particle account password or Particle API token in the source code since the code is public (you can see the code for my hook above at https://hook.io/monkbroc/counter/source). Put those secret credentials in environment variables on https://hook.io/env
What will you build now?
Comments