A picture is worth 140 characters

It's no secret that we're pretty huge fans of Instagram, so I won't spend too much time waxing lyrical about its potential (Tim is probably your man for that) instead, I'd like open up something that we've been working on to allow us to rapidly develop real-time Instagram-fed web apps.

Since the API was announced in February, only a few (albeit fantastic) real-time Instagram apps have surfaced. Which is pretty strange; this innovation could, and should, finally push us away from the photo-bank model, and into the stream.

But it hasn't, and after spending a while working with it, I've started to realise why: the available open source code just isn't abstracted enough to encourage technological creativity; there are too many new technologies involved, the learning curve is just that little bit too steep. I understand that there may be some contention around this point, but abstraction, and the copy+paste culture, is another post entirely, so, I give you the alpha release of Insta.Platform…

Insta.Platform

For those sick of reading already, here's the demo.

Getting stuck into the official real-time demo was a great place to start, but it was only really created to demonstrate a portion of the API's functionality. Insta.Platform aims to take this further by mashing it up with some other really nice libraries to give us a simple, extensible platform that allows us to concentrate on the idea, and not the code dependencies.

That said, most of the technology used is shamelessly stolen from the official real-time demo, so all credit to the Instagram team; we simply ran with their idea. So, in the spirit of releasing stuff early and often, you can head over to the github repo to grab yourself a copy of the platform-in-progress.

How it works

In order to tame the asynchronous nature of Node.js and Socket.io everything server-side is based on the Pubsubhubub protocol. Using the Redis Pub/Sub framework this has been extended to the client so that front-end developers can easily subscribe to channels and start receiving asynchronous updates from the server thusly:

  // Subscribe to a channel
  socket.send('tags:subscribe:cats')
  
  // Listen for an event signalling new media from this channel
  $(document).bind("newMedia", function(update) { 
    // Give/render the media to the user
    if(update.media.channel=='cats') {
      alert('Oh hai');
    }; 
  });

What does this actually mean?

Put simply, this means that, without much effort on your part, users of your app will be able to create real-time streams for #tags, locations (e.g. "London"), places (based on Foursquare's database), arbitrary geographical areas (e.g. for use with 'nearby' geolocation apps), or simply for a specific user.

This is all accessible via a simple front-end subscription-based API, and hopefully, at some point, a nice JavaScript/HTML5 library to make it even easier to create slick real-time applications.

Next steps

Insta.Platform is very much a work-in-progress and I'd love some help from the Instagram API developer community, so, please, contribute on github, submit your app ideas to made.byideas.co.uk, or just start building something on the platform, and let me know what's missing. If you need a few app ideas, there have been plenty posted up on made.byideas:

• Insta-nt-weather
• A "What would Instagram sound like?" App
• Instagram Project - "Nearly Everything I Saw Today"