Web Dev and Particle / advice needed


Is like what Particle.io do for their web front ends and sits. Like the dashboard, etc.

I need to learn a new framework/language for my web interfaces for my devices. I have experience with languages like objective c and swift, but not much JavaScript.

So… In your experience what should I learn that will help me develop good responsive Uis… In real time… With a good bet for framework longevity.

If node… What frameworks, can you recommend a tutorial?

If angular… Same question…


Any help welcomed!! And appreciated!

What are the particle.io engineers using for their websites?

Well, I’m not a Particle engineer, but at the risk of making two Meteor-centric posts today:

Learn Meteor.

It comes with “real-time” UI for free – they call it Reactivity. If you’re just starting out it’s also not a bad way to become familiar with the general concept of web development because the Meteor tool will run a development server and database for you! All you do is write code, and it will update in real time in your browser.

The steps I would take are very simple.

  1. Install Meteor
  2. Follow the tutorial.

That’ll be a nice dose of reactive HTML (aka Blaze), CSS and JavaScript, but in a way that you can see how and why it works.

They also have a package ecosystem, not dissimilar to Node, that will provide you tons and tons of functionality that you can summon with a single command.

So, to integrate Particle, you would just call on the Meteor NPM integration package and then declare the the Spark Cloud NPM module as one of your dependencies.

Then you’ll get access to the Spark object and all of the fun that comes with it right inside your Meteor JS.

1 Like


Any other tips?

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

That last command will start Meteor, and will generate a packages.json file in your example/ directory. Make that file look like this:

  "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:


// 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) {
    } 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.
          device_id: data.coreid,
          message: data.data,
          timestamp: new Date()

  // (3) Finally, login to the Spark Cloud to put everything into motion!
    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() );


  {{#each getRealtimeEvents}}
      <div>Event is from Photon #{{device_id}}.</div>
      <div>Event arrived at {{timestamp}}</div>
      <div>Event message content: {{message}}.</div>

So your total project should look like (at minimum):

| 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.


1 Like

Thank you so much for such a detail example and explanation!

I tried to do the example code, however, although it runs fine, I can’t get past the login.

I don’t get the callback. Not even an error or otherwise. I tried this in the .on Event:

Spark.on('login',  Meteor.bindEnvironment( function(err, body) {
    if (err) {
    } else {
       console.log("Logged In");
   } .....

Access token are correct and all. I even try to put a bad access token to see if I can provoke an error… But nothing.

Thanks for the help!

Well, right off the top of my head, what about switching the order of (2) and (3). Run Spark.login after Spark.on('login' ... );.

That fixed it… Now I am working out why not displaying events on template… Even though server is sending events.

Oh, that’s easily explained dude: I forgot to add a return in the template helper! Too much time in CoffeeScript land :wink:

The helper should read:

  Template.registerHelper('getRealtimeEvents', function() {
    return MyEvents.find().fetch();

I’ll update the example code above with these changes.

LOL!! :stuck_out_tongue_winking_eye:

Its now working as it should…

Thanks for the help… Will continue to learn!

Do you have a working example using the current particle-api-js?