Development of a web application for Fripa with .NET / C# / Angular

Implementation of a device-independent web application for recording raw materials for production and planning

In mid-2020, eWorks was commissioned by Fripa Papierfabrik Albert Friedrich KG (Fripa) to implement a single-page web application based on Angular and Microsoft .NET Core. Fripa is a German manufacturer of high-quality hygiene paper based in Düren. Production and planning require the recording of raw materials and supplies, which was only partially digitized at the time of commissioning and was completely digitized as a web application through the implementation. The focus was also on device independence, so that the web application can be used both in the desktop area under Microsoft Windows 10 and on mobile devices with the Google Android operating system, which is used on the Zebra MDE devices in use at Fripa for barcode scanning. An interface to the ERP system proALPHA was implemented by the customer via the underlying Oracle database of the web application.

In the single-page web application, it is possible to define specifications for the worker, on which machine, at what time, which raw materials and/or auxiliary materials are to be used to manufacture a product. This is done in the version of the web application optimized for the desktop view. The RHB stock recording, which is the focus of the web application, takes place via handheld device scanners (MDE) in the variant optimized for the mobile view, based on the specifications for recording. The barcodes of the substances can be scanned automatically or entered manually using the keyboard. As the mobile devices are used outdoors at Fripa and network access coverage via WLAN cannot be sufficiently guaranteed in all areas, the web application supports operation in offline mode in order to intercept any disconnections from the network without interrupting the work process. When the connection is restored, an automated synchronization with the server-side WebAPI backend developed in Microsoft .NET Core takes place. Subsequent corrections to the substance records can be made in other areas of the web application. The web application is rounded off by an area for user administration and authorization assignment, which allows users to be added to and edited in the application.

The front end of the web application was implemented as a single-page application (SPA) based on JavaScript and developed with Angular 10, in HTML5, SCSS and TypeScript. All areas intended for the administration of the web application were optimized for a desktop view, while the application areas intended for material recording were optimized for a mobile view on the Fripa handheld scanner (MDE). The web application was implemented as a progressive web application (PWA) to enable offline capability and update capability, as well as a look and feel based on mobile apps. The backend is developed on the basis of Microsoft .NET Core and provides the WebAPI endpoints for the Angular 10 frontend. The connection to the data storage in the form of an Oracle database was realized with Entity Framework Core (EF Core).