Leobit
Internal Inspection Tool
PWA development that helped a Swiss manufacturer optimize the machine inspection process
ABOUT
the project
Client:
Location:
Switzerland
|Lausanne
Company Size:
Industry:
Manufacturing
Solution:
Services:
The application assists inspectors in conducting machine inspections and generating detailed reports that streamline maintenance and repair operations.
Our team is happy to help our customer improve their inspection processes and significantly reduce the time spent on manual tasks.
Customer
The customer is a Swiss manufacturer specializing in conveyor and packaging machinery. These sophisticated machines often occupy extensive facilities and need regular servicing. The company also offers repair services to its clients, necessitating an efficient software inspection and reporting tool.
Business Challenge
The customer had an unstable software version developed internally but lacked the in-house expertise, particularly in Angular, to stabilize or expand the tool. They also required to develop new features to improve functionality, usability, and performance.
Why Leobit
Leobit’s extensive experience with Angular in building scalable software solutions made us the ideal partner for this project. The customer valued Leobit’s ability to offer suggestions and enhancements beyond the project scope.
Project
in detail
The application supports three distinct operation modes: maintenance, optimization, and installation. Each mode is tailored to address the specific workflows of machine inspections. We improved the maintenance and optimization modes and built the installation mode from the ground up.
Progressive Web Application (PWA) development
The customer required an application that could be easily accessed on Windows tablets and desktop devices. To achieve this, we turned the customer website into a Progressive Web Application (PWA).
Our development process involved several technical steps. First, we prepared a responsive UI using SASS (Syntactically Awesome Stylesheets). This allowed us to create a dynamic, modular, and maintainable styling system and ensure a consistent look and feel across devices of various screen sizes.
To enable PWA functionality, we integrated Service Workers, a core technology that handles background processes such as caching, offline access, and push notifications. Our full-stack developers extended the backend, originally developed using ASP.NET Core, to serve dynamic content to the PWA via RESTful APIs. This ensured that the application could securely fetch and sync data in real-time. Additionally, we optimized the API endpoints for performance using techniques like response compression and data pagination.
We used Webpack for module bundling and lazy loading, minimizing the app’s initial load time and reducing bandwidth usage for end users. The PWA also included a custom manifest.json file to specify metadata such as icons, theme colors, and display modes, allowing users to install the app on their devices for a native-like experience.
Inspection and reporting workflow development
We developed a comprehensive inspection workflow with various components (such as text fields, dropdown menus, and photo upload options). It allows inspectors to input critical observations about the machine, document faults, assess their severity, and attach relevant photos to provide a clear picture of the machine’s condition. The structure of these reports is driven by HTML templates, which we further transform into PDFs using the Evo.pdf library. The final report provides clients with an organized summary of the machine’s issues, the required spare parts, and estimated repair costs.
Offline mode
Since the inspection process can often occur in locations with limited or no internet connectivity (e.g., remote factories or warehouses), we suggested implementing an offline mode. The offline functionality is powered by IndexedDB, which stores inspection data locally in the browser. We employed Service Workers to cache the application’s resources and ensure they remain accessible offline. Once an internet connection is restored, the system automatically synchronizes the collected data with the server.
This innovation eliminated the need for double data entry and significantly reduced errors, particularly when handling photos or machine-specific details.
Background PDF generation
Generating PDF reports involved processing large volumes of complex data, which could take some time. Our development team implemented Hangfire, a .NET-based background job processing tool, to ensure inspectors could continue using the application without delays. This solution enabled reports to be generated asynchronously in the background, allowing inspectors to carry on with their tasks uninterrupted.
The application includes a progress tracker, giving users a real-time view of their reports’ status. Once a report is ready, the system automatically sends a notification to the user using the SendGrid email delivery service.
Technology Solutions
- PWA development to ensure the website runs well on mobile, tablet, and web.
- Implemented IndexedDB for local storage of inspection data and Service Workers for caching app resources, enabling smooth offline usage.
- Used Evo.pdf to convert HTML templates into structured and professional PDF reports.
- Integrated Hangfire for efficient background job processing, allowing asynchronous PDF report generation.
- Integrated a permission management system to restrict and customize access based on user roles.
Value Delivered
- Reduced the manual workload for inspectors, particularly in remote or low-connectivity areas.
- Minimized human errors with automated data synchronization, proprietary API integrations, and intuitive interfaces for data entry.
- Reduced inspection times and errors, which resulted in lower operational costs for the customer.