Getting Started with the i4scada App Template
Check out this article to start preparing the environment, install the needed tools and set up i4scada App Template.
Preparing the environment
Considering the requirements of the i4scada App Template, the development environment on which the template will be used must be set up. This process has to be followed only one time, for the initial usage of the template. Future i4scada App Template projects developed in the same environment will use the tools installed in this process and won't require new a setup.
There are three main steps that need to be taken when setting things up for the first time:
Installing a modern web browser
Installing Visual Studio and it's tools
Installing i4scada
Installing a modern web browser
As stated in the requirements section, the i4scada App Template based applications requires a modern web browser, that supports all the current web standards (HTML5, CSS3 and JavaScript). Choose one of the three recommended browsers and install it on your development system. You will need it for previewing and debugging your HTML5 application.
Browsers
Internet Explorer (version 10 or higher)
Follow the browser's specific installation instructions to get it up and running.
If using Internet Explorer, the application debugging can also be done using Visual Studio.
Installing Visual Studio and it's tools
Install your preferred Visual Studio version on the development machine. The installed Visual Studio will host the i4scada App Template and will be the development IDE for your HTML5 application.
After the Visual Studio installation is complete, make sure that the NuGet Package Manager extension, which comes by default in Visual Studio 2019, is up to date:
Go to the Extensions toolbar tab and select the Manage extensions option.
In the Manage Extensions dialog, go to the Updates side-bar menu and select Visual Studio Marketplace.
Check if there are any updates available for the NuGet Package Manager. If updates are available, click the button Update, otherwise the message "All of your extensions are up to date" will be displayed.
Next, the Node.js JavaScript run time must be installed on the development machine. Download and install Node.js using this link: https://nodejs.org/.
After the Node.js run time is installed, use the Node.js package manager (npm) to download and install Gulp.js:
Open Command Prompt with administrative privileges:
locate the Command Prompt shortcut in the Start Menu;
right-click on it and select Run as Administrator.
Important
If the computer is connected via the internet through a proxy, the following settings must be applied to Node.js packet manager (npm):
Configure the proxy setting of Node.js to use the proxy address and port:
npm config set proxy http://proxy.company.com:8080Configure the https-proxy setting of Node.js to use the proxy address and port:
npm config set https-proxy http://proxy.company.com:8080
In the Command Prompt window, type "npm install gulp g" to install Gulp.js using the Node.js package manager.
npm / g gulp install
After installing all the above software on the development machine, the environment is ready for developing the i4scada App Template based applications. However, there are other optional tools and extensions from which the i4scada App Template based application development can benefit. Check out the next section for more details.
Optional Visual Studio tools and extensions
Optionally, you can install Web Essentials 2019 which enhances CSS, HTML, JavaScript, and TypeScript development. This optional extension can be downloaded and installed using the Manage Extensions dialog of Visual Studio.
Note
Not using optional extensions does not limit the usage of i4scada App Template in any way!
Web Essentials 2019
Installing i4scada
In order to be able to receive online field-level data in the HTML5 application, the latest version of the i4scada 3.8 must be installed. i4scada must run on the same machine that hosts the HTML5 application (the HTML5 application and i4scada web service must be on the same Internet Information Services (IIS) web server) in order to retrieve the field-level data from the i4scada Server.
Setting up the i4scada App Template
After setting up the required software, the development machine is ready to use the i4scada App Template. This template will be installed as a normal Visual Studio template and will provide the starting point of the new application.
i4scada App Template
The i4scada App Template is available in the Visual Studio folder, under Templates \ ProjectTemplates\Visual C#.
C:\Users\[UserName]\Documents\Visual Studio 2017\Templates\ProjectTemplates\Visual C# for Visual Studio 2017
C:\Users\[UserName]\Documents\Visual Studio 2019\Templates\ProjectTemplates\Visual C# for Visual Studio 2019
WEBfactory App Template
The i4scada App template will be available when creating a new Visual Studio project, as follows:
Open Visual Studio.
Select the Create a new project option.
The Create a new project dialog is opened. Use the scroll-bar to find the WEBfactory i4scada App or search for it.
Open the WEBfactory i4scada App project by proceeding via Next button.
Configure the new project, by filling in a Project name, a Location and a Solution name.
Click the button Create to proceed.
The WEBfactory i4scada App is opened in the Solution Explorer of Visual Studio.
