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 newCSS3样式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.
1. Web服务器。Web服务器使网页可用于许多设备。NodeJS提供了用JavaScript编写的简单但完整的Web服务器。为了开发，您可以使用Visual Studio。它带有用于Visual Studio的Nodejs工具，该工具与Visual Studio环境完美集成。
2. Database Processing。An Interface is needed for an SQL database and for the server to process the results set. NodeJS offers modules that developers can install on their project with NodeJS Tools. One of these modules is the SQL driver for any SQL database provided by Microsoft. The Javascript language lets you create objects and arrays ready for broadcast to clients.
3.通信渠道。A protocol to transmit data between client and server is required, andWeb Socketis 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。将动态变量集成到HTML页面中的一组框架可以减少代码编写和更多功能。这些是我最喜欢的客户侧框架：
- Angularjs是一个JavaScript库，允许Web开发人员将变量和结构插入HTML页面，以执行各种功能，例如订购字段。我相信这代表了网页开发中的一个转折点，因为它复制了所有软件开发人员的想法。
- jQuery现在，在90％的网站上使用，以提供对DOM的清洁访问和操纵。这是一个JavaScript库，允许Web开发人员处理网页的事件和动画元素。
- Bootstrap起源于一组CSS样式，用于构建具有现代布局的响应式网站。许多Web开发人员由于其网格系统和简单的布局而使用它。它与WordPress这样的平台集成使其易于访问且常用。
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.
现在转到服务器端，nodejs在DOS中显示为命令提示符。这似乎看起来很旧学校，但是它可以轻松在JavaScript中开发，并允许进口各种模块。在DOS窗口中观察操作对于监视服务器实时执行的任务很有用。如果需要历史日志，则可以实现一个简单的函数来创建.txt文件以记录服务器的操作。
另一个好处是，您不需要服务器来运行它，您只能使用台式机PC并像流程一样管理它。这在错误的情况下很有用，因为您可以自动强制重新启动。经验丰富的用户可以使用nodejs提供的扩展名将其安装在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是软件开发人员Autoware, a CertifiedControl System Integrators Associationmember based in Vicenza, Italy. For more information about Autoware, visit theAutoware配置文件on the Industrial Automation Exchange.
