I have been using Node-RED as part of Bluemix for a while now, it is super easy to build some pretty powerful applications by just dragging, dropping, and configuring “nodes” right in your browser. 90% of the time you don’t need to write any code, and when you do, the code is very simplistic. I find Node-RED to be a great tool for getting something up an running quickly, for example when building a prototype or participating in a hackathon. In a couple weeks I will be doing a workshop on Node-RED at DeveloperWeek in San Francisco so I have been working on my slides and some examples for the workshop. For one of my examples, I wanted to show how easy it was to interact with web services using Node-RED and thought that making it relate to San Francisco would make for a really nice example for the workshop. I know BART (the subway system in San Franscisco) had some pretty robust APIs so I decided to check them out. After a couple minutes of looking at the APIs I thought it would be nice if I could drop pins on a Google Map for all the BART stations in San Fran. This has probably been done a million times before, but that wasn’t the point of this exercise, I wanted to show how easy it was to do in Node-RED.
The flow I came up with to accomplish this was to add a new HTTP endpoint called /mapstations and when that endpoint is called use a template node to respond back with some static HTML and JavaScript. The JavaScript would load a Google Map and then make a request to a websocket to get the station data. A websocket node in a separate Node-RED flow would then receive that request and make an HTTP request to the BART APIs to get the station data and respond back to the websocket request with that data. The JavaScript would then take the station data, and using the GPS coordinates put a pin on the map for each station. This ended up being surprisingly easy to do, and I thought it would be a good example to share. I shared the flow on the Node-RED site and you can find it here. You can just copy the JSON from that page and import it into any Node-RED sheet. Once it is deployed you can hit http://node-red-host/mapstations (replace node-red-host with the hostname for Node-RED) and you should see a Google Map with all the BART stations on it. Enjoy!
