LockTec has been offering a locker configurator on their website for many years. People who want to purchase a locker system can use it to select the desired locker type, as well as the number and sizes of compartments, via drag and drop.
Around 2017, I was already involved in developing the second version of the locker configurator. By early 2024, however, it was clear that we needed to redesign the locker configurator once again, because a lot has changed in the locker market since version 2.
Since 2017, four more locker types have been added. For example, the so-called SmartTerminals. These are especially suitable for handing over documents in public authorities such as vehicle registration offices. Other new locker types include bicycle boxes (also known as Velosafes), which allow for weather- and theft-protected storage of bicycles. Optionally, these Velosafes can also provide charging options for e-bikes. Another exciting locker concept is the pallet box. In these pallet boxes, palletized goods (e.g., building materials) can be made available for pickup outside business hours.
Short Facts
Some quick facts about the new locker configurator:
7
Locker types
55
Compartment types
13
Equipment options
The Concept
When it became clear in spring 2024 that a new locker configurator was needed, we— as always— quickly came to a consensus in a brief meeting. “We” in this case refers to Mr. Johannes Clausen (Managing Director, LockTec GmbH), Lukas Clausen (Managing Director, Sitec GmbH and overall IT manager) and myself.
The framework conditions were clear:
- easy integration into various web frontends (thus no fixed dependency on CMS systems like WordPress)
- at least 5 languages (German, English, Italian, French, Spanish)
- modern design, partially responsive
The design should adapt to different screen sizes, but the display on mobile phones is not relevant since most customers will use the configurator from their workplace PC. - partially configurable
Adding new locker types and compartment sizes should be very simple for a developer. - no web backend / configurations should be sent to the sales department via email
With these requirements, it was immediately clear to me that I would use Angular. The TypeScript syntax used in Angular has many similarities with PHP, Java, and of course JavaScript. Since these languages are widely used at LockTec, another in-house developer could easily get involved in this project.
My Part
In this project, I was the sole developer actively working on the program code. On the business/locker technology side, as well as regarding graphics, collaboration with various departments and individuals was both sensible and necessary. Naturally, it was important to adhere to CI/CD guidelines, obtain and incorporate the current locker sizes, graphics, and other technical data.
First, we defined the configuration process. Since there are so many options and equipment variants, we no longer considered a single-step configurator to be practicable. We decided on a configuration assistant, a 7-step wizard that guides customers through the configuration process step by step.
Next, I needed a concept for how the configuration options, the content of each step, locker sizes, etc., should be stored. This required intensive thought, sketching, and testing, as there are different conditions regarding locker sizes and options. For example, not every payment method is available for every locker type.
Finally, the user interaction concept and UI had to be defined. For most locker types, I implemented configuration using drag & drop. For the Velosafe bicycle garages, however, this approach did not seem practical. Therefore, I opted for a form-based configurator in this case.
Simplify Your Automatic Translations
As mentioned earlier, the configurator should be available in multiple languages. This is no problem in itself. Angular has an internationalization module (keyword: i18n). You simply need to mark the texts you want to translate in the source code with the “i18n” or “$localize” attribute, and Angular will know that these texts need to be translated. Then, you type the command “ng extract-i18n” in the terminal, and Angular extracts the texts to be translated into a so-called Xliff file named messages.xlf. You then copy this file and rename it for each target language, writing the translations into the corresponding file. So far, so good.
But what if, after some time—maybe shortly before rollout—changes to the text come up? As Bodo Bach might say, “I’d like a problem, please.” If you enter the “ng extract-i18n” command again after the text changes in the source code, the messages.xlf file gets flattened and overwritten. Changes are lost for the time being. Usually, this file is in version control (e.g., git), so you can keep track of which lines have changed, but Angular often changes the order within the file. Nice weather today, right? 😒
So how do you get the new texts into the already created target language files? Copying the German file again would overwrite all the translations. The order is different as well … Wonderful. That means a lot of manual work. Grumble …
When I thought this process through, it became clear that you need decent software for this. The translations should be at least semi-automated with DeepL, so I first took a look at DeepL. Yay! DeepL can process Xliff files, but here comes my favorite word: “But.” DeepL always translates Xliff files completely and therefore needs a lot of tokens. That can get expensive. In addition, Angular can only export Xliff formats 1.2 and 2.0. DeepL only processes version 2.1! POEditor or something similar can supposedly do Xliff 2.0, but I don’t like it.
Long story short: Before I spend hours searching for suitable software, I’d rather develop it myself.
DOTT (the Online Translation Tool—I haven’t thought of a better name yet…) is a web-based software that can process Xliff files. Versions 1.2, 2.0, and 2.1. It also offers automated AI-based translation with DeepL and ChatGPT, project management, a total of over 30 languages for automatic translation, or any number of languages for manual translation. It includes a document upload feature for additional information for translators, various finely grained approval options for projects or individual project languages, and more.
Currently, DOTT (or whatever it will be called) is still in closed alpha testing. But not for much longer 😉 If you want to stay up to date, just follow my account on Facebook at Pöpperl – Code & Content. If you’d like to become a beta tester, feel free to send me an email. There’s still room in my inbox 😉
Paradigm Shift
In the past – about 10 years ago – I often developed from a programmer’s perspective. My first focus was on data structures. Which database tables are needed? What data needs to be stored? Oh yes, and then there’s a very simple way to create the user interface: CRUD controllers. The result was usually confusing tables and forms where you could enter all the required data, but working with them was often complicated and cumbersome for the end user.
It’s much better to take the user’s perspective. What does the user want to do at this moment? What do they want to achieve? That’s exactly what should be possible with as few clicks and as little input as possible. That’s the goal. The keyword here is task-based UI. Users should enjoy working with the software, quickly and easily. I hope that with the new locker configurator, we will achieve exactly this goal!
