Sphero-Share

Conception

This project was born out of a collaboration between Microsoft and Orbotix. I, and a few other Microsoft Student Partners were chosen to develop and publish new, innovative applications for the Sphero 2.0. I decided to try to build a cross-platform mobile app which would allow users to share control of their Sphero. My ultimate goal was an app which could share with someone right next to you, or share via video across the globe.

To streamline publishing on as many platforms as possible, I chose to build a JavaScript based application which could run in Apache Cordova on mobile platforms and in Node.js with NW.js on desktops.

Getting Technical

I needed some way to communicate between the ‘clients’ (users the Sphero was shared with) and the ‘server’ (the user with direct Sphero control). The PeerJS library backed with Azure as a connection negotiator served a perfect solution. PeerJS served as a cleaner interface to the slightly messier WebRTC peer-to-peer communications spec.

To build the interface, I used one of the more recent libraries to come out of Google – Polymer. Polymer was designed to make highly modular and touch-centric web development easy. It also included a convenient set of pre-build UI elements which followed Google’s Material Design guidelines and expedited the design process.

Writing Code

During the first week of actual development, I implemented the connection broker on Azure and finished a proof-of-concept for PeerJS communication. The second week saw the composition of a JSON-based communications schema and the beginning of its implementation. The basic controls worked – color control and rolling – and the groundwork for calibration and user communication was laid. At the end of the third week, I had the entire schema implemented, working, and tested. I even had state-sync between multiple users working, plus a primitive security model. The fourth week focused exclusively on design. I needed an intuitive and beautiful UI, but because of my limited experience in the field I heavily relied on Google’s Material Design Guidelines. As the formal duration of my project drew to a close in the fifth and final week, I completely implemented my UI mockups from the previous week and fixed as many bugs as possible before launching.

To read more about my development process, the more technically detailed blog posts which I wrote during the development process are available here.

The End Result

This project is now over a thousand lines of open source code. From the beginning in learning Node.js and Sphero.js, to laying out the communication profiles and UI, to the final application – I’ve learned an unbelievable amount. Share Sphero is now multi-platform, multi-user, real-time control platform. It highlights the beauty of material design, the power of Azure, and the simplicity of Node. It brings me joy to watch my commands instantly take effect wirelessly through the web, and I hope you love it too.

Where to Next?

The next steps for this project lead toward integrating more of the Sphero’s SDKs – allowing a user to not only share control from their laptop, but from their phone as well. With the addition of the phone’s camera, the application could be made to work not only for users in the same room, but for users from across the globe. Contributions are welcome. Find that one odd bug in the app display on some obscure platform? Find a novel way to optimize the network traffic? Fork the repository and create a pull request; embrace the beauty of open source!