Apparatenportaal met QR-codes en labelprinting
Een mobile-first portaal voor een internationale verf- en coatingsproducent. Elk apparaat krijgt een eigen QR-code; wie hem scant, ziet direct de handleidingen, video's en documenten van dat apparaat, in de eigen taal.
Van label tot handleiding
- 01BeherenApparaten en content per categorie en taal vastleggen.
- 02PrintenQR-labels als printklare PDF op Avery-vellen.
- 03ScannenDe gebruiker scant het label op het apparaat.
- 04BekijkenHandleidingen, video's en documenten op de telefoon.
Wat doet het apparatenportaal?
De producent plaatst apparatuur zoals mengmachines en etiketteermachines bij afnemers. Op elk apparaat komt een label met een QR-code. Een scan met de telefoon opent een landingspagina voor precies dat apparaat, met knoppen per soort content: handleidingen als PDF, afbeeldingen, video's en externe links. De gebruiker kiest zelf de taal.
Hoe beheert de opdrachtgever de inhoud?
Achter het publieke deel zit een beheeromgeving. Daar worden apparaten aangemaakt, wordt per apparaat, categorie en taal content geüpload en wordt de QR-code gedownload. Categorieën hebben per taal een enkelvoud en meervoud, zodat een knop automatisch "Handleiding" of "Handleidingen" toont. De data staat in Directus op PostgreSQL.
Hoe komen de labels op de apparaten?
Vanuit het portaal selecteer je één of meer apparaten, kies je een van vijf Avery-labelformaten en de startpositie op het vel, en download je direct een printklare PDF. Zo kan een half gebruikt vel labels gewoon opnieuw de printer in.
De uitdaging
Productinformatie over apparatuur moet daar beschikbaar zijn waar het apparaat staat: op de werkvloer, op een telefoon, in de taal van de gebruiker, en altijd de actuele versie.
Op de werkvloer
Gebruikers staan bij het apparaat en hebben alleen hun telefoon. Zoeken in mappen of op een website werkt daar niet.
Meerdere talen
Apparaten staan in meerdere landen. Content en interface moeten per taal beschikbaar zijn, met ruimte voor extra talen later.
Actuele informatie
Een geprinte handleiding veroudert. De QR-code moet blijven werken terwijl de inhoud erachter wordt bijgewerkt.
Labels zonder gedoe
QR-labels voor veel apparaten tegelijk printen op standaard labelvellen, zonder handwerk in een tekstverwerker.
De oplossing
Een Nuxt-applicatie met een publieke, mobile-first landingspagina per apparaat en een beheeromgeving op Directus.
Landingspagina per apparaat
Elk apparaat heeft een unieke, niet te raden URL achter de QR-code. De pagina toont content-knoppen per categorie en opent PDF's, afbeeldingen, video's en externe links direct op de telefoon.
Meertalig
Een taalwissel op de landingspagina, met Nederlands en Frans actief. Engels en Duits zijn voorbereid en met één instelling aan te zetten.
Beheeromgeving
Dashboard, apparatenbeheer, content uploaden per categorie en taal, categoriebeheer en QR-codes downloaden. Inloggen gaat via een JWT in een httpOnly-cookie, met de opzet klaar voor single sign-on via Azure AD.
Labelprinting
QR-labels voor meerdere apparaten tegelijk als printklare PDF op vijf Avery-formaten, met een instelbare startpositie op het vel om verspilling te voorkomen.
Techniek
- Frontend en API: Nuxt met Vue 3 Composition API, Tailwind CSS en Pinia
- Backend: Directus op PostgreSQL, met aparte vertalingstabellen per taal
- Meertaligheid: Nuxt i18n voor de interface, vertaalde content per taal
- PDF en QR: QR-codes en Avery-labelvellen server-side gegenereerd als PDF (qrcode en pdf-lib)
- Hosting: Docker en docker-compose
Resultaat
- Eén scan van apparaat naar de juiste documentatie, in de taal van de gebruiker
- Inhoud bijwerken zonder nieuwe labels te printen
- Labels voor een hele reeks apparaten in één printklare PDF
- Klaar voor extra talen en single sign-on zonder herbouw
Dit project heb ik als developer via een bureau gebouwd. Daarom blijft de opdrachtgever in deze case anoniem.
Gerelateerde projecten
Gerelateerde diensten
Interesse in een vergelijkbare oplossing?
Laten we sparren over jouw project. Ik help je graag van concept tot werkende oplossing.
Laten we praten