Home Portfolio Event-Scanner-App: Ticketkontrolle leicht gemacht

Event-Scanner-App: Ticketkontrolle leicht gemacht

In einer zunehmend digitalisierten Welt suchen Veranstalter:innen ständig nach Wegen, um die Effizienz bei der Abwicklung von Events zu steigern. Unsere Aufgabe bestand darin, eine Erweiterung für die bereits integrierte Payment-Lösung des Kaufleutens zu entwickeln. Das Resultat? Eine innovative Web-App, die das Scannen von Tickets direkt an der Abendkasse ermöglicht und nahtlos mit dem hauseigenen Event-Management-Tool des Kunden verbunden ist.

Ausgangslage

Covid und die Anforderungen an Veranstalter:innen in der Schweiz

Nachdem wir erfolgreich die Payment-Integration für die Website des Kunden entwickelt hatten, bot sich uns die Möglichkeit, diese Lösung weiter auszubauen. Unser Ziel war es, das Einlass-Management zu optimieren und den Ticketing-Prozess so reibungslos wie möglich zu gestalten.

In Zeiten von Covid-19 stiegen in der Schweiz die Anforderungen an Veranstalter:innen enorm. Es war nicht nur wichtig, den Gästen eine sichere Umgebung zu bieten, sondern auch den ständig wechselnden Vorschriften und Anforderungen der Behörden gerecht zu werden. Ein zentraler Aspekt dabei war die genaue Kontrolle der Besucherzahlen. Veranstalter:innen mussten zu jedem Zeitpunkt exakt wissen, wie viele Gäste sich im Klubsaal aufhielten, um bei eventuellen polizeilichen Untersuchungen umgehend Auskunft geben zu können.

Diesen Bedarf haben wir in unserer Scanner-App direkt adressiert. Bei jedem Scan eines Tickets aktualisiert die App automatisch die Anzahl der anwesenden Gäste. Dies bietet dem Kaufleuten nicht nur die Sicherheit, den behördlichen Anforderungen zu entsprechen, sondern auch das Vertrauen, in Echtzeit die Übersicht über die Gästeanzahl zu haben und so im Bedarfsfall sofort reagieren zu können. Dies war ein entscheidendes Feature, das die Bedeutung unserer massgeschneiderten Lösung in diesen herausfordernden Zeiten unterstrich.

Das Kaufleuten Zürich

Zeichnung, wie das Kaufleuten digital strukturiert ist

Seit über 100 Jahren bereichert das vielseitige Kaufleuten im Herzen der Zürcher Innenstadt das Nacht- und Kulturleben. Als renommierter Club ist es bekannt für sein abwechslungsreiches Programm mit nationalen und internationalen DJs sowie als Veranstaltungsort für Konzerte, Lesungen und kulturelle Events.

Das stilvolle Restaurant des Kaufleuten bietet europäische Gerichte aus Biozutaten und schafft eine gemütliche Atmosphäre – perfekt für romantische Abende oder Geschäftsessen.

Als beliebte Location für Veranstaltungen und Bankette bietet das Kaufleuten verschiedene Räumlichkeiten für unterschiedliche Anlässe. Es fungiert als Treffpunkt für Menschen aus allen Lebensbereichen, wo Entspannung, Unterhaltung und Inspiration aufeinandertreffen.

Die Scanner-Web-App

Durch die Kombination verschiedener Frontend-Bibliotheken entwickelten wir eine Web-App, die in der Lage ist, Tickets in Echtzeit zu scannen und die Daten unmittelbar mit dem Event-Management-Tool des Veranstalters abzugleichen. Dies ermöglicht einen zügigen und reibungslosen Einlass für die Gäste und reduziert die Wartezeiten an der Abendkasse erheblich.

Praxis-Test im Klub

Die Bedeutung von Observation

Um die Effektivität und Praxistauglichkeit unserer Web-App sicherzustellen, führten wir einen Vor-Ort-Test im Kaufleuten durch. Dabei beobachteten wir, unter welchen Umständen, sei es die Lichtverhältnisse oder die Geschwindigkeit des Personals an der Kasse, der Scanner möglicherweise Probleme aufweisen könnte. Diese direkte Beobachtung ermöglichte es uns, Nutzerfeedback in Echtzeit zu erhalten und Schwachstellen unverzüglich zu identifizieren.

Technische Optimierung mit Sentry

Während die praktische Beobachtung wertvolle Einblicke in den Benutzerkontext lieferte, nutzten wir Sentry für technische Tests. Dieses Tool half uns dabei, mögliche Fehler beim Scannen zu erkennen. Dank dieser Fehlerprotokollierung konnten wir technische Probleme schnell identifizieren und beheben, was zu einer höheren Zuverlässigkeit unserer Anwendung führte.

Effizientes Event-Management

Unsere entwickelte Scanner-App ermöglicht ein reibungsloses Scannen auf mobilen Geräten und Tablets. Nach jedem Scan werden sofort relevante Informationen angezeigt, darunter Name, Vorname und Adresse der Ticket-Käufer:innen. Die App behält stets den Überblick über Anwesende und zeigt die Raumkapazität in Echtzeit an.

Universelle Zugänglichkeit

Unsere Web-App bietet jedem mit modernem Gerät oder Browser eine unkomplizierte Nutzung, was Flexibilität bei Personalwechseln ermöglicht, ohne Schulungen für spezielle Hardware.

Schnelle Updates

Dank der Web-App-Struktur können wir rasch Aktualisierungen durchführen, ohne auf App Store-Restriktionen angewiesen zu sein. Dies erlaubt uns, flexibel auf neue Anforderungen zu reagieren und unseren Service ständig zu verbessern.

Statistiken

Die umfassende Statistik-Funktion unserer Scanner-App bietet die Möglichkeit, zu jedem Zeitpunkt auf die erfassten Daten zuzugreifen. Diese Statistik kann einfach exportiert werden, um sie für spätere Verwendungszwecke zu sichern oder weiterführende Analysen durchzuführen. Mit unserer App wird Contact Tracing so effizient und benutzerfreundlich wie nie zuvor.

Herausforderungen und Lösungen

Wir haben uns den technischen Herausforderungen gestellt. Auf iOS-Geräten war es technisch nicht möglich, gleichzeitig das Gerätelicht und die Kamera zu nutzen. Durch die Installation zusätzlicher Beleuchtung an der Abendkasse konnten wir diese Hürde jedoch erfolgreich überwinden.

Barcodes gelten als fehleranfälliger im Vergleich zu QR-Codes, aber mit unserer implementierten STRICH Bibliothek haben wir erhebliche Fortschritte erzielt. Unsere Web-App erkennt Barcodes schnell und zuverlässig, selbst aus der Ferne.

Die kontinuierliche Nutzung der Kamera kann den Akku belasten, daher empfehlen wir stets ein bereitgestelltes Ladekabel an der Abendkasse, um einen reibungslosen Betrieb zu gewährleisten.

Mit diesen technischen Lösungen bieten wir dem Event-Management eine zuverlässige und flexible Lösung. Unsere Scanner-App ermöglicht nicht nur effizientes Ticket-Scanning, sondern auch eine effektive Durchführung von Contact Tracing, und das auf eine benutzerfreundliche Art und Weise.

Web-App Entwicklung

Unsere Umsetzung des Scanner-Systems basiert auf einer Web-App, die das React Framework NextJS verwendet. Das Styling und die Komponenten werden durch Chakra UI bereitgestellt, und für die Authentifizierung nutzen wir das Login-Template von NextAuth.

Für das Scannen der Barcodes setzen wir zunächst auf die ZXing und QuaggaJS-Bibliothek. Mit STRICH haben wir allerdings einen Partner gefunden, der im Vergleich zu den OSS-Lösungen (Englisch) deutlich zuverlässige Scan-Ergebnisse liefert. Ausserdem sorgt Sentry für die Überwachung und Fehlerberichterstattung.

Mehr zu unseren Web-App Dienstleistungen

Projekt-Team

Projekte sind immer Teamarbeit und oftmals arbeiten alle von uns in irgendeiner Form mit. Hier waren vor allem folgende Menschen im Einsatz.

Karin
Christen

Projektleitung

Dominik
Schilling

Entwicklung

Simon
Halimonov

Entwicklung

React.js Development

React.js bietet schnelle Darstellung, modularen Code, Wiederverwendbarkeit von Komponenten, effiziente Leistung, einfache Skalierbarkeit und grosse Community-Unterstützung.

Single-Page-Applications

Single Page Applications sind schnell, nutzerfreundlich und interaktiv. Sie ermöglichen eine nahtlose Benutzererfahrung bei optimierten Ladezeiten und ansprechendem Design.

Progressive-Web-Apps

Progressive Web Apps bieten plattformübergreifende Kompatibilität, schnelle Ladezeiten, Offline-Funktionalität, geringen Speicherbedarf, automatische Updates und bequeme Installation.

Next.js

Next.js ermöglicht die Erstellung von Full-Stack-Webanwendungen durch Erweiterung der neuesten React-Funktionen und Integration leistungsstarker JavaScript-Tools auf Basis von Rust für die schnellsten Builds.

Chakra UI

Chakra UI ist eine React-Bibliothek für die schnelle Gestaltung von Benutzeroberflächen. Mit vorgefertigten UI-Komponenten ermöglicht sie eine effiziente Entwicklung ästhetischer und reaktionsfähiger Webanwendungen.

NextAuth

NextAuth ist ein Authentifizierungs-Framework für Next.js-Anwendungen. Es vereinfacht OAuth, JWT und andere Authentifizierungsmethoden, bietet benutzerfreundliche APIs und erleichtert die Implementierung sicherer Authentifizierung.

ZXing

ZXing ist eine Open-Source-Bibliothek für das Lesen von Barcodes in Java, C++, Python und anderen Sprachen. Sie bietet Funktionen für die Barcode-Erkennung in verschiedenen Formaten.

STRICH

STRICH ist eine intuitive Barcode-Scanner-Bibliothek für das Web, entwickelt für präzises und schnelles Scannen. Perfekt für Einzelhandels-anwendungen, bietet sie Effizienz und Genauigkeit.

Sentry

Sentry ist eine Plattform für das Überwachen und Beheben von Softwarefehlern in Echtzeit. Mit detaillierten Fehlerberichten ermöglicht es Entwickler:innen, Probleme schnell zu identifizieren und die Codequalität zu verbessern.

Fazit

Die Entwicklung der Scanner Web-App war ein herausforderndes, aber lohnendes Projekt. Durch enge Zusammenarbeit mit dem Kunden und die Kombination von praktischer Vor-Ort-Beobachtung mit technischen Überwachungstools konnten wir eine massgeschneiderte Lösung schaffen, die den Anforderungen des Veranstalters gerecht wurde und gleichzeitig das Kundenerlebnis verbesserte.

Weitere Projekte, die wir für Kaufleuten umgesetzt haben

Verkauf von Event-Tickets direkt über die Website

Das Kaufleuten hat uns beauftragt, im Rahmen des „Mobile-First“-Ansatzes ihre Website neu zu gestalten und ein Online-Payment zu integrieren. Damit ermöglichen sie ihren Kunden, von überall aus und jederzeit Tickets für Klub-, Konzert- und Kulturveranstaltungen zu erwerben.

Zur Case-Study

Mehrere Screenshots der Kaufleuten Website auf Smartphones

Nächste Case Study

Zürich Mobil

Jedes Jahr ziehen zahlreiche Menschen in die Stadt Zürich oder innerhalb der Stadt um. Aus diesem Grund haben wir in Zusammenarbeit mit VBZ die Willkommens-Website zhmobil.ch erstellt, die allen Neuankömmlingen dabei hilft, sich schnell und unkompliziert mit ihrem neuen Wohngebiet vertraut zu machen.

Case Study lesen

Weitere Projekte

Hier noch ein paar weitere Kundenprojekte.

NZZ: Neues Startseiten – Konzept

Beauftragt von der Neuen Zürcher Zeitung, haben wir die Startseite nzz.ch neu konzipiert. Gemeinsam mit der NZZ-Redaktion haben wir Bedürfnisse erfasst, Ideen geschmiedet und einen…
Weiterlesen: NZZ: Neues Startseiten – Konzept