Building a mobile web app on Node-RED

Having adopted Node-RED (NR) as our control and integration platform. I’m now porting all our pure node solutions to NR. One thing we need is a mobile web app to configure, monitor and control Things.  You can do a lot out of the box with Node-RED but it isn’t obvious how to build a web app.  Fortunately for me Dave CJ one the Node-RED developers sent me a flow template to get me going.Below is the Node-RED IDE and mobile web app running in an emulator on mobiletest.me.

The web app is served via a HTTP: [Request]–[Template]–[Response] flow at the top of the work-space. The Template node contains single page web app built using  jquerymobile and highcharts. Once the web app is loaded into the browser all communications is done via web sockets.

In the example flow all actions on the web app are passed back to an UI dispatch Javascript function which handlers events like turn on a light using EnOcean wireless or operate a PI Face relay. [Webscoket in]–[UI dispatcher]–[your devices].

Having to move to NR has provided the opportunity to simplify the way web app communicates with the server. The solutions uses a simple JSON format using the HTML ID of the widget being updated or being clicked on along with a value. All communication is over SSL/TLS NR supports Basic Authentication but most mobile browsers won’t save passwords or support passing credentials via the URL. So we are thinking best how we implement user authentication.

Node-RED IDE and mobile web app via mobiletest.me

Example flow

I’ve built an example flow which Node-REDers can use to build their own solutions. However there is some very basic documentation on the Git page! But the flow should be easy to follow for someone with a bit NR experience. https://github.com/industrialinternet/Node-red-flows-mobile-web-app

A quick demo video

Sorry not the best of quality movie maker was groaning a wee bit..

CyberChimps