Get familiar with Node, because that’s the framework that the Particle Cloud and the Photon SoftAP setup JS libraries come in. Abstracting a little further, get familiar with server-side JS. That’s basically the name of the game with those libraries, Meteor or no Meteor. And, well, also…
It’s another reason I’m proposing Meteor as a framework – it makes it really easy to communicate data from the server (like Particle Cloud callbacks corresponding to events being published from your Photons) to the client’s interface in realtime, with no extra code required – just write & read to the database as usual.
Let’s make a simple Meteor app that (a) listens for events coming from your Photons, and (b) displays that list of events in real time, along with when it was received and the serial number of the device that sent it.
First, we make a Meteor app, and then we add the meteorhacks:npm package which is what we use to bring node modules like spark into a Meteor app:
meteor create example
cd ./example
meteor add meteorhacks:npm
meteor
That last command will start Meteor, and will generate a packages.json file in your example/ directory. Make that file look like this:
packages.json
{
"spark": "1.0.0"
}
That’s all there is to it. You have a basic Meteor app, with the Spark Cloud JS included on your server. Now for the server and client business logic:
example.js
// Create a MongoDB collection to store event data from Photons
MyEvents = new Mongo.Collection("MyEvents");
if (Meteor.isServer) { // Server Logic
// (1) Invoke the Spark Cloud object from the NPM module we included
// in packages.json.
Spark = Meteor.npmRequire('spark');
// (2) Once we're all logged in, what's the plan?
Spark.on('login', Meteor.bindEnvironment( function(err, body) {
if (err) {
console.error(err);
} else {
// (4) Listen for device events with the name "someEventName":
Spark.onEvent('someEventName', Meteor.bindEnvironment( function (data) {
// Here's where the magic happens: take the data from the message
// and create a new Event object in our MongoDB collection.
MyEvents.insert({
device_id: data.coreid,
message: data.data,
timestamp: new Date()
});
}));
}
}));
// (3) Finally, login to the Spark Cloud to put everything into motion!
Spark.login({
accessToken: "put your Spark token here"
});
} else if (Meteor.isClient) { // Client Logic
// (1) This helper means when you write '{{getRealtimeEvents}}' anywhere in
// your app's HTML, you'll get a realtime array of events from the DB.
Template.registerHelper('getRealtimeEvents', function() {
return( MyEvents.find().fetch() );
});
}
example.html
<body>
{{#each getRealtimeEvents}}
<div>
<div>Event is from Photon #{{device_id}}.</div>
<div>Event arrived at {{timestamp}}</div>
<div>Event message content: {{message}}.</div>
</div>
{{/each}}
</body>
So your total project should look like (at minimum):
example/
| example.js
| example.html
| packages.json
Running meteor inside the example/ directory will launch your app. I haven’t actually run this code so there’s probably typos and such but I hope it serves to at least inform you how one would make a realtime Meteor app that works with the Particle cloud.
Probably the most esoteric aspect of this code are those Meteor.bindEnvironment() calls. Those wrappers are only necessary to do Meteor stuff inside the callback of third party code such as node modules.
The upshot here is that, merely by using MyEvents.insert() to add our event data to the database, the client is automatically notified and sent the new data simply because it is using a helper that contains MyEvents.find().fetch(). I.E. modifying MyEvents on the server will instantly update on any clients, mobile or PC, that are looking at HTML that also depends on MyEvents. Notice we have not written any code to send or request data. We just wrote it and read it. Meteor takes care of the rest.
The Meteor docs are also a fantastic resource.
Mark
