Construction Site App

The overarching goal of the project was to develop an application that meets all necessary requirements, can be easily adapted in the future, and functions reliably under heavy load. The agreed-upon features included an integrated Excel-like spreadsheet management system, a photo documentation solution with location tracking, a PDF editor capable of editing PDFs in real time, provides access for all relevant project managers, does not include monthly license fees like other standard solutions, and, above all, performs well on both the web and mobile platforms.

Additional features—such as dynamically manageable union groups, staff assignments, standard PDF templates, administrative rights, and a group chat that, despite being a web app, can still send messages—were implemented using an Agile "Prototype First" approach during the project and refined through ongoing dialogue with the client, Hegau Energie.

Precisely because the initial focus was not on technical implementation but rather on creating an application that would be tailored down to the finest detail to Hegau Energie’s requirements, the primary emphasis was on developing a prototype that would directly validate Hegau Energie’s ideas and thereby kickstart further implementation.

Frank und Freunde was able to deliver the first functional prototype within two weeks of finalizing all requirements, and Hegau Energie was so impressed—not only by the speed of implementation but also by the capabilities demonstrated—that we began finalizing the project immediately.

The most crucial part of the implementation was the technical realization of the many criteria. After all, how do you implement all these requirements without incurring monthly costs in the three-digit range by using off-the-shelf libraries? By developing all core features in-house and tailored to our specific needs.

Two free open-source components were used for viewing and editing PDF documents. Everything else was custom-developed: the annotation model, the tools, tile-based rendering for sharp zoom up to 1200 percent, the constraints for iPhone displays, the filling out of existing form fields, the merging into the final file, online caching, reopening, and bulk download. Annotations are not pixels drawn onto the screen for each device, but dynamic objects: they can be selected, moved, edited, copied, and deleted individually by anyone who has access to the file.

On construction sites, field technicians previously had to document their work progress themselves, including timestamps and locations. The app’s photo feature automatically captures the location and time of the shot directly from the camera. Before uploading, each image is resized, with a fallback option for devices that cannot process it. At the same time, multiple photos—each with its own location—can be uploaded in bulk. This allows for uninterrupted documentation of many areas of the construction site, with each photo’s location accurate to the meter.

Implementing a team chat with notifications proved to be more challenging due to our decision to use a web app. Nevertheless, we integrated push notifications using our own keys, which reach users even without a prior download from the App Store. This is a feature you’d normally expect only from a native app, with the added benefit that it works on the desktop as well without much extra effort.

By the way, notifications aren’t just sent for new messages, but also for new task assignments or status changes. However, every user can configure these settings themselves as needed.

On construction sites or at off-site locations, it’s common for cell service to be either very poor or nonexistent. We took this particular challenge into account when developing the app for Hegau Energie. For example, preview images are resized on the server side, and uploads are placed directly in queues, while technicians can continue using the app in the meantime. Failed loading processes are indicated with a notification instead of displaying an empty list. Read operations are automatically retried, and lazy loading is enabled by default for all app operations.

A calendar and planning tool also provides a quick overview of the current order status by trade. Deadlines can be moved using drag-and-drop and extended or shortened at the edges. Orders that haven’t been scheduled yet are listed below the calendar and can also be dragged from the bar to the desired day using drag-and-drop. Any selection can be easily undone using an “Undo” button, so that even unintended entries can be reversed with a single click, whether using the web or app version. On mobile devices, the view isn’t simply scaled down but rotated to landscape orientation to maximize space for the calendar even on small screens.

At the same time, intelligent features—which learn over the course of weeks which technicians are most frequently assigned to which types of jobs, have the shortest travel distances, and are available on short notice—provide exactly the advantage that Hegau Energie was counting on.

A technician can only see the jobs and trades to which he has been assigned. All other 104 of, say, 106 jobs do not exist for him at the database level or in the dashboard view. Administrative functions are also blocked on the server side if the necessary permissions are missing and result in a 403 error. This means that permissions are not only hidden on the user interface but are enforced directly at the database and server levels.

In addition, field technicians always see the job they are currently assigned to on the home screen, including Google Maps links, so they can be directed to the correct job site with just one click at the start of the day.