i4scada App Template Overview
Read this article describing the i4scada App Template architecture and components along with a set of software requirements.
What is i4scada App Template
The i4scada App Template is a modular single page application framework that provides reusable HTML5 and JavaScript UI components. Used as a Visual Studio template, the i4scada App Template helps the user to build HTML5/JavaScript applications that bring the field-level online data to the screens of every device.
Some examples of devices
Since i4scada 3.8.6 release, the i4scada App Template is available within the i4scada Setup package along with a sample of the Single-Page Application (SPA).
Note
For the users of i4scada 3.8.5 or older, please contact our support team at support@webfactory-world.de, in order to obtain the i4scada App Template.
The i4scada App Template allows the user to create a cross-platform Single-Page Applications (SPA) with the minimum amount of effort or knowledge, using the default set of widgets available out of the box.
A single-page application (SPA) is a web application or website that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. In a SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.
The web applications based on the i4scada App Template work with the latest version of i4scada to publish data coming from a various range of PLCs in any browser.
PLCs example structure
The simplified i4scada Web Application and i4scada flow of data
The i4scada App Template's implementation is based on the popular Durandal open source library, which in turn relies on well established JavaScript libraries like jQuery, Knockout JS, Require JS and uses the class-leading Bootstrap UI framework. One of the most important advantages of Durandal is the usage of the market-proven MVVM architectural pattern.
Model View ViewModel (MVVM) is an architectural pattern for software development that abstracts a view's state and behavior.
MVVM pattern overview
Architecture and components
Built upon state-of-the-art libraries, the i4scada App Template brings its own components to simplify and streamline the HTML5 app building process for users with little or no programming experience.
Libraries
The i4scada App Template offers two important instruments for building your application: Widgets and Plugins.
The Widgets are reusable UI components of the i4scada App Template. They provide a fast and simple solution for creating manageable web applications with complex functionality, such as dynamically accessing online, historical and alarming data from i4scada.
The Plug-ins help you achieve that functionality by encapsulating the complex JavaScript code in simple structures. Their functionality is available to advanced users via a clean API, allowing them to develop their own reusable widgets in the shortest time possible.
These two essential instruments are based on the Durandal framework, Underscore JS framework, and various popular, open source JavaScript libraries (Moment JS, D3.js, C3.js, Bootstrap Datepicker, etc.).
Requirements
The i4scada App Template has only three requirements in order to power your HTML5 application development: a web browser to run in, Microsoft's Visual Studio for development, and i4scada to provide data.
A modern web browser
Your HTML5 applications built with the i4scada App Template will run in the web browser. The web browser must support the latest HTML5, CSS3 and JavaScript standards. This is why we recommend the following browsers:
Internet Explorer (version 10 or higher)
The debugging will be made also in the browser, using the browser's developer tools: Firefox's Web Developer tools, Chrome's Developer tools, Internet Explorer's F12 Developer Tools. If using Internet Explorer, the debugging can be also done using Visual Studio.
Visual Studio
The i4scada App Template is a Visual Studio project template. Due to the usage of TypeScript, the Visual Studio versions required for using the i4scada App Template start with Visual Studio 2017.
Check out the download links below for the supported Visual Studio versions:
The development of i4scada App Template based applications requires the following tools to be installed along with Visual Studio:
Node.js - JavaScript run time required to run JavaScript based applications like gulp.js
Gulp.js - for automating the tasks performed during the build process (for example, minification and compression of HTML, CSS, and JavaScript files).
TypeScript 3.5.3 for Visual Studio power tool, for compiling the existing TypeScript code into JavaScript.
Although not required for using the i4scada App Template, Ewon by HMS Networks also recommends the following Visual Studio plug-ins:
Web Essentials 2019 (can be installed for free directly in Visual Studio using the Extensions and Updates dialog)
i4scada version 3.8 with the latest Service Pack
In order to feed data to the i4scada App Template based applications, the i4scada version 3.8 is required, along with its latest Service Pack.
Because any i4scada App Template based application requires i4scada in order to present the data, all the i4scada requirements must be also met!