Develop your own vApp: vf-Studio
The development of applications for manufacturing is often a strenuous process which requires good ideas and some programming skills. However, developing such applications from scratch may become much more hazardous. The vf-OS development environment not only provides a set of artefacts, libraries and built components that developers may use to integrate in their applications, but it also offers a complete suite of integrated tools that can be used to easily develop those applications. All were already described in previous articles. This post aims to help the reader in actually developing a simple vf-OS application (vApp) using the provided toolkit.
The core application to perform such development is the vf-Studio, an integrated development environment (IDE) that aims to help programmers to develop, test and publish their own virtual assets, simplifying and avoiding the headaches and pitfalls regarding the whole configuration process that needs to be performed to get in the development stage.
To start facilitating the initial development process, the vf-Studio includes pre-configured environments named Stacks. A Stack is a recipe that contains all the dependencies that must be installed to build the vApp (e.g., NodeJS, Git, or NPM), selectable when the developer hits the initial Workspace Creation button.
Upon the selection of the development stack for vf-OS, the vf-Studio allows the development of two types of vf-OS assets: Applications (vApps) or Input/Output (IO) Components. After setting the project name, the project structure is created on the developers’ workspace.
After the creation of the development environment, the user of the vf-Studio may create source files directly using different programming languages, but he/she may as well use other vf-OS tools, e.g. create information flows using the Process Designer Module and vApp User Interfaces using the vf-OS Front-end Module.
This example focuses on the development of a User Interface for a vApp, hence the user shall select the “Front-end Module” creation on the vf-Studio, which invokes the vf-OS Front-end editor. Upon doing so, the user may create some controls on the central frame of the editor, e.g., by tapping app → page → panel, and some text such as “Hello World!”. The results are always previewed on the right panel of the editor. Similar actions could be performed creating modules using the Process Designer tool or others.
The build of a vApp application and local testing is available on the vf-Studio by clicking the “Play” button on the IDE, upon which the developed assets will be accessible through a browser using the uniform resource locator (URL) <endpoint>/<vapp project name>.
Once tested successfully, the final action is pushing the developed assets to the vf-Store, our marketplace. In order to do that, the developer needs to click with the right button over the project name and then click “Publish Asset on vf-Store” and fill the asset information for publishing. This concludes the basic actions and flow needed to develop a simple vApp using the vf-Studio.