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.
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.
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..