I was recently given the task to build a responsive web application that would be accessible from the mobile barcode readers used to track items in two standard warehouses. The way this had been done in the past had been to develop a program with custom mobile layout, let it run on a PC, and every client had to connect to it through a TS (terminal server) session. This can be quite expensive, especially considering the cost of TS licenses. The more clients that need to connect, the higher the required fees are in terms of licenses—and the two warehouses this application was being designed for needed about 70 total mobile devices each. Plus, the original application was developed for a desktop PC. Even though its layout was optimized for mobile, the end user experience was poor.
Working with the latest in web development technologies, however, allows for the easy creation of a beautiful and responsive user interface through new CSS3 style definitions. This led me to to consider the idea of using HTML5 for industrial web applications while working on an internal project. Here is what I chose for each component needed to build an industrial web application, and why.
3. Communication Channel. A protocol to transmit data between client and server is required, and Web Socket is a great way to allow such bidirectional communication. Applications may need to send a request to the server (NodeJS) and receive a response. Other messages may need to be broadcast, without sending any request (for example a timer to upgrade a meter). Web Socket is also useful for identifying warehouse operators using IP addresses, because the Web Socket connection requires a handshake. NodeJS provides a module called Socket.IO to implement this communication channel.
4. Responsive User Interface. A set of frameworks to integrate dynamic variables into HTML pages allows for less writing of code and more functionality. These are my favorite client side frameworks:
- Bootstrap originated as a set of CSS styles to build responsive websites with modern layout. Many web developers use it because of its grid system and simple layout. Its integration with platforms like Wordpress makes it easily accessible and commonly used.
With the appropriate integration of these three libraries, a modern and maintainable client side can be developed. AngularJS is developed by Google, so it is easy to find support and suggestions from other people using it for their projects. This can also be said for the other libraries I use. In my experience, the quality of support and the strength of a developing community are very important.
Another benefit is that you don’t need a server to run it, you can just use a desktop PC and manage it like a process. This is useful in case of error, because you can automatically force a restart. More experienced users can use the extension provided by NodeJS to install it on an IIS server, letting IIS supply the web page while NodeJS processes everything else, as in the case of Web Socket requests.
Using the simple tools mentioned above, it is possible to develop each of the four separate components of a custom web application. In a very short period of time, I was able to develop a web application with clean client and server sides. The client was so satisfied that they have asked us to develop another new module in the same way.
Alberto Ziliotto is a software developer for Autoware, a Certified Control System Integrators Association member based in Vicenza, Italy. For more information about Autoware, visit the Autoware profile on the Industrial Automation Exchange.