Mix Master 2000: Intel Edison, NodeJS, Apache Cordova App

[youtube_sc url=”dAp-6Htodkk”]

I got an Intel Edison with a breakout kit along with a SeeedStudio IoT kit. Getting the Edison up and running was straightfoward but once that was complete the next step was “what to build?”. How abut a temperature app? Or a sound sensor? Or a blinking light. None of those thrilled me. Plus I wanted to do something totally different. I am more of an “app” guy so I started thinking about ‘apps’ that can communicate with the Edison. What can I send over to the Edison? Hmmm.

So I started where I always start for brainstorming app ideas, Programmable Web and Mashery. I scoured their listing of API’s to find one that jumped out at me. I did find one. The Absolut Vodka Drink Recipe DB. I can get drink recipes and send them to the LCD screen. This could come in handy instead of fumbling through a recipe book, or even an app. Have the LCD attached to either the shaker or the base and scroll through the steps needed to make the drink.

Here are the steps I took to get the Mix Master 2000 running.

Sign up for the Absolut Drinks DB API

You can read more about the api and sign up here. It is basically straightforward, get categories and get drink details. There is a JS and .NET library but I rolled my own by using the REST calls. Sometimes I feel that is just easier. My goal was to get the categories and then show the results in the selected category, then when you click on a drink you get the details of the drink.

Set up your Intel Edison

Intel has a good guide on setting up the Edison. Software and drivers to download along with step by steps to set it up on WiFi. Jeremy Foster (fellow MSFT TE) built a nice blog post on it as well. He goes a bit deep on Cylon and deploying node to the Edison.

Download Visual Studio 2013 Community Edition

Obvisouly you can build apps with whatever tools you are comfortable with but I chose Visual Studio 2013 Community Edition to show off its power. I will be building a Windows Store app built on HTML5 and JavaScript. However it will be powered by AngularJS and I will use Apache Cordova to get this one app running on 3 platforms.

Download Apache Tools for Visual Studio

By downloading these tools, you know have the ability to build for Windows, iOS and Android. WOW! Visual Studio is a best in class editor and now it just got way more powerful with Apache Cordova integration. To get started after you download, perform a File -> New Project -> JavaScript -> Apache Cordova and you are ready to go!

Build app – lol. I used bootstrap for the UI and Angular.js for the backend.

Once Visual Studio was installed and my project was created, I can now use the NuGet package manager to install what I needed. Bootstrap for my UI and Angular for my back end. I am familar with Bootstrap when it comes to designing UI and I want to learn more about Angular JS so I chose that. Any JavaScript framework would be fine to use.

Not to make light of building the app, but more or less it is building an app. I had to create services that would call the Absolut Drink DB and return the data to an object. I first worked on getting my app to work. Before I even thought about sending data to the Edison, I wanted to build my app and get that working.

Build nodejs app on Intel Edison

Once I got my app working, I then needed to figure out how to recieve the data on the Edison. Sending the data should be straightforward, a post to the Edison. However, to recieve it I need to add a few libraries. I investigated Restify which is a REST libary for Node. PERFECT! I can create an endpoint and a handler to accept the info and perform any functions I need.

Once I got the detail screen of the app to send data to the Edison I was almost home. I now needed to get the data, store it in an array, and loop through it everytime someone pressed a button to show it on the LCD. The mraa library provided most of these functions but I ran into some snags. So I decided to use Cylonjs which worked perfectly (however, my scrolling is a bit off on the LCD). I then wrapped my Cylon calls around my restify methods and I was good to go.


Running had some of it’s issues.

1. No Apps are installed to open this type of link (unsafe)

You might notice that in a Windows Store app all of the links will error out or open up a popup looking for and app to open them. This is due the ms-appx that is being added by to the links that causes the problem. Add the following to your code to fix:

2. “JavaScript runtime error: Unable to add dynamic content.”

In Angular, you can replace some of your content with dynamic content. The templating part of Angular. Well, that cannot happen in Windows Store apps. You will need to download and add a javascript file that Microsoft Open Tech created to fix this issue.

Now Run! It works….not yet. Need to add the IP address and the API URL in the config.xml to allow access from the app.

Now it works! I was able to run this on my local, create app packages for another device. Publish to Android and iOS and it all works. See the video for more info!

Easy as that!

All of the code is out on GitHub