Though we are focused on Beckhoff technology, we need many other software and tools. For example, for developing HMI we need JavaScript which can be tested by Visual Studio Code to some extent. We need to integrate the Postgres database into our HMI, so we need Node JS. Here we keep some short and small tutorials for managing these.
Download Visual Studio Code:
https://code.visualstudio.com/download
=> We need nodeJS and NPM, check if we have already installed it with a command prompt
=> C:\software>node –version, will give you if a version if a nodeJS installed
If nodejs is not installed, we can install from https://nodejs.org/en/download npm is included in the package in general.
=> C:\software>npm –version will give you the installed npm version
=> On the Visual Studio Code software, Go to extension (Control + Shift + X)
=> Type javascript ES6 in the search box and find JavaScript (ES6) code snippets and install them.
=> Search for Code Runner (by Jun Han) and install it
=> Open a folder and create a new file and save it as a js file.
=> Run the code (Control + Alt + N), see if you have output in the terminal
=> Stop the code by (Control + Alt + M)
=> If we want to run a command prompt in JavaScript do the following:
=> In termina, type npm install prompt-sync and press enter
=> File | Preference | Settings and find, run in the terminal, and check the box as shown in the following figure.
=> Now function like prompt will work
Debug JavaScript with Visual Studio Code
=> Create a folder in a suitable place
=> Open the folder from VS code (Ctrl + K Ctrl + O)
=> Add new file to the folder and save as js file
=> Press on Run and Debug (select nodejs)
=> You can step the code and debug
Create a CRUD App
=> Create a folder and set the folder to VS Code
=> Execute npm init -y (more info about this command at https://docs.npmjs.com/cli/v9/commands/npm-init)
=> npm i –save express
=> https://expressjs.com/en/starter/installing.html
Web UI App
=> React framework https://react.dev/