Entwicklung einer Progressive Web-App für die Erstellung von Remote-Bestellungen in Restaurants

Entwicklung einer Progressive Web-App für die Erstellung von Remote-Bestellungen in Restaurants

Information
Standort:
Bern, Schweiz
Branche:
Tourismus
Plattform:
Web Anwendung
Arbeitsmodell:
Zeit und Materialien
Projektdauer:
Mehrere Monate
Team-Mitglieder:
ein leitender Entwickler, ein QA-Spezialist und ein Designer
ID:
532
Verwendete Technologien
SCSS
StencilJS
Ionic
PWA
Firebase
.Net

Kunde

Ein Schweizer Unternehmen war daran interessiert, eine Web-App für Restaurants zu entwickeln. Sie dachten, dass sie einen wertvollen Service schaffen könnten, der das Esserlebnis sowohl für Kunden als auch für Restaurantbesitzer verbessert.

Projektbeschreibung

Das Schweizer Unternehmen wollte sich in der Restaurantbranche einen Namen machen, indem es eine umfassende Web-App einführte. Erkannt wurde das Potenzial, das Esserlebnis zu verbessern, wobei das Hauptziel des Projekts darin bestand, eine benutzerfreundliche App zu erstellen, die sowohl Kunden als auch Restaurantbesitzern zugutekommt.

Die Webanwendung nutzt die Backend-Dienste der Selbstbestellplattform TouchWaiter. Wie für eine Webanwendung typisch, muss für die Nutzung eine Internetverbindung bestehen. Die Navigation durch Kategorien und Produkte sowie das Hinzufügen von Produkten zum Warenkorb sollen jedoch auch ohne Internetverbindung möglich sein.

Die geplante App würde Prozesse wie Bestellungen, Zahlungen und Benachrichtigungssysteme optimieren und letztendlich ein effizienteres und angenehmeres Esserlebnis bieten.

Herausforderungen

Elinext wurde mit folgenden Aufgaben konfrontiert:

  • Entwicklung einer App für ein E-Commerce-Unternehmen, das keine Erfahrung mit PWAs hat.
  • Implementierung eines robusten Zwei-Faktor-Authentifizierungssystems für Benutzerkonten.
  • Integration sicherer und effizienter Zahlungssysteme, die den Vorlieben des Schweizer Marktes entsprechen.
  • Entwicklung eines zuverlässigen QR-Code-Scanning-Moduls für den Zugang zu spezifischen Angeboten und für einen reibungslosen Checkout-Prozess im Restaurant.
  • Schaffung eines Systems, mit dem Benutzer ihre Bestellhistorie effizient verwalten und abrufen können.

Vorgehensweise

Nach Durchsicht des Designs vom Kunden stellten wir fest, dass das Ionic-Framework gut für die UI-Komponenten geeignet wäre. In Kombination mit StencilJS ergibt sich ein perfektes Set an Werkzeugen für diese Aufgabe.

Da wir StencilJS zum ersten Mal einsetzten, erwarteten wir einige Schwierigkeiten, aber unsere Sorgen waren unbegründet, da wir das Framework effektiv nutzen konnten.

Im Laufe der Entwicklung wechselten wir von Mantis zu GitLab, was uns half, die Aufgaben effizienter zu verwalten.

Wöchentliche Meetings halfen dem Elinext-Entwicklerteam, ein tieferes Verständnis der Anforderungen zu erlangen und Probleme schneller zu lösen, falls sie auftraten. Wir nutzten GitLab CI/CD zur Optimierung der Abläufe.

Lösung

Es wurden sechs Module für die App entwickelt:

  • Modul 1: Login/Registrierung Dieses Modul ermöglicht das Anmelden am Server und den Zugang zum System. Eine Zwei-Faktor-Authentifizierung wurde implementiert.

  • Modul 2: Menü Das Restaurantmenü mit detaillierten Beschreibungen und Bildern für jedes Gericht wird in diesem Modul angezeigt, was den Kunden hilft, fundierte Entscheidungen zu treffen.

  • Modul 3: Bestellung und Zahlung Ermöglicht den Kunden, Bestellungen direkt über die App aufzugeben, wodurch Wartezeiten minimiert werden. Die Integration sicherer und effizienter Zahlungssysteme (am beliebtesten in der Schweiz) wurde durchgeführt, was das Esserlebnis insgesamt verbessert. Auch die Bestellhistorie ist verfügbar.
  • Modul 4: QR-Code scannen Mit diesem Modul kann man QR-Codes im Restaurant scannen, z.B. für spezielle Angebote oder als Checkout-Option.
  • Modul 5: Benachrichtigungen Dieses Modul wurde entwickelt, damit Endbenutzer Benachrichtigungen über die Abholbereitschaft ihrer Mahlzeiten (bei Bestellungen zum Mitnehmen) erhalten können. Es gibt auch Optionen für Benachrichtigungen über aktualisierte Angebotsdaten und den Status bestellter Produkte.
  • Modul 6: Aufladen Dieses Modul ermöglicht es den Benutzern, Geld auf ihre virtuellen Konten aufzuladen. Es unterstützt zwei Modi: einen privaten Modus und einen öffentlichen/Gastmodus für die bestellten Produkte. Dank dieses Moduls kann man auch die Transaktionshistorie verfolgen.

Ergebnisse

Der Kunde war sehr zufrieden mit der von uns gelieferten Anwendung und brachte sie direkt auf den Markt. Soweit wir wissen, ist sie in zahlreichen Restaurants in Westeuropa im Einsatz.

Nichts spricht mehr für positives Feedback als die Bereitschaft, neue Projekte gemeinsam durchzuführen. Wir haben bereits drei neue Projekte mit diesem Kunden!

Eines davon ist eine E-Commerce-Website, die nächstes Jahr veröffentlicht werden soll. Sie befindet sich bereits in der Designphase.

Was die App selbst betrifft, so entspricht sie allen anfänglichen Anforderungen, die uns der Kunde gestellt hat, und jede Phase der Entwicklung wurde fristgerecht und im Rahmen des Budgets abgeschlossen.

Haben Sie vor, ein gleiches Projekt zu schaffen?
Haben Sie eine Projektidee? Lassen Sie uns darüber diskutieren
Kontakt


    Insert math as
    Block
    Inline
    Additional settings
    Formula color
    Text color
    #333333
    Type math using LaTeX
    Preview
    \({}\)
    Nothing to preview
    Insert