Wir haben eine kundenorientierte Veranstaltung mit einem Thema basierend auf einem bestimmten großen College-Basketballturnier geplant, das jährlich im März stattfindet (Name aus Lizenzgründen zurückgehalten). Könnten wir eine überzeugende Benutzererfahrung in Mendix, in nur wenigen Tagen, nur mit den Daten dieser Sports Feed API??

Die Voraussetzung

Während der Veranstaltung finden vier Basketballspiele statt. Alle Teilnehmer können vorhersagen, wer das Spiel gewinnt und wie hoch der Vorsprung sein wird. Wenn Sie den Gewinner und den genauen Vorsprung für jedes Spiel tippen, erhalten Sie die volle Punktzahl von 100 Punkten. Wenn Sie den falschen Gewinner tippen, erhalten Sie keine Punkte. Wenn Sie den Gewinner, aber den falschen Vorsprung tippen, erhalten Sie 25 Prozentpunkte, je nachdem, wie nahe Sie dran waren.

Die App würde aus folgenden Funktionen bestehen:

1. Die Möglichkeit, sich mit einer E-Mail-Adresse zu registrieren und ein Selfie hochzuladen.
2. Eine Liste der Spiele und des aktuellen Spielstands.
3. Die Möglichkeit, für jedes Spiel eine Vorhersage zu treffen.
4. Eine Ansicht der Live-Bestenliste, die jedes Mal aktualisiert wird, wenn sich der Punktestand eines Spiels ändert.
5. Die Möglichkeit, die Aufschlüsselung der pro Spiel für jeden Teilnehmer erzielten Punkte anzuzeigen.

Die Veranstaltung fand in einem örtlichen Pub statt und niemand hatte einen Laptop zur Hand. Daher war eine mobile Erfahrung die beste Lösung. Wir wussten auch, dass die App nur sehr kurz genutzt werden würde. Niemand möchte eine App herunterladen, die er nur ein paar Stunden nutzt. Da wir außerdem nur wenige Tage Zeit hatten, um die App fertigzustellen, kam eine native App, die in einem App Store veröffentlicht werden müsste, nicht in Frage.

Dies führte uns zu einem Progressive Web App (PWA)-Ansatz. Sie können alles über wie Mendix ermöglicht Ihnen den Aufbau von PWAs hier.

…und voll PWA-Dokumentation hier.

Eine weitere interessante Wendung war der Vorschlag, eine animierte Bestenliste zu erstellen, die die Führenden in Echtzeit dynamisch an die Spitze bringt. Obwohl es hierfür kein vorgefertigtes Widget gibt, ist die Erweiterbarkeit von MendixDas auf React basierende Framework ermöglichte uns den Aufbau eines solchen.

Während ich an der Benutzeroberfläche der App arbeitete, stellte mein Kollege Tyler die Bestenliste zusammen.

Hier ist Tylers Beschreibung der Entwicklung der animierten Bestenliste:

Mit dem Pluggable Widget Generator war es kein Problem, das Leaderboard-Widget für dieses Projekt zusammenzustellen. Denn Mendix Widgets basieren auf dem React-Framework. Es ist möglich, jede der Tausenden und Abertausenden von React-Komponenten zu integrieren, die leicht verfügbar sind. In diesem Fall entschieden wir uns für das Reagieren Sie Flip-Toolkit um die schwere Arbeit für uns zu erledigen.

Um den gewünschten Effekt zu erzielen, mussten wir nur die Flipper- und Flipped-Komponenten aus dem Flip Toolkit in die Widget-Vorlage des Pluggable Widget Generators einfügen und schon konnten wir loslegen. Fügen Sie ein wenig XML hinzu, um die Eigenschaften anzugeben, die wir verfügbar machen wollten Mendix Studio Pro, und das war es – ein benutzerdefiniertes animiertes Leaderboard-Widget war mit minimalem Aufwand einsatzbereit.

Alle Einzelheiten dazu lesen Sie auf Erstellen von steckbaren Widgets hier.

Die Verwendung von Mendix Team Server, Tyler und ich sollten bei der Entwicklung zusammenarbeiten, Feedback-Ideen einreichen und alle unsere Änderungen verfolgen, während wir sie nahtlos in unsere Akzeptanz- und Produktionsumgebungen einbinden. Sie können mehr über Team Server erfahren Sie hier.

der Build

Abgesehen vom Leaderboard-Widget wurde die gesamte App ohne Code erstellt. Alles begann mit der Sports Feed API. Wir brauchten eine Möglichkeit, sie in regelmäßigen Abständen aufzurufen. Zu diesem Zweck rief ein geplantes Ereignis (TriggerSport_REST) ​​einmal pro Minute einen Mikroflow EVT_Sport_REST auf (Abbildung 2).

Dieser Mikrofluss (Abbildung 2) bestimmt, ob sich die App im Simulationsmodus befindet (mehr dazu später), und wenn nicht, ist der Sport-Feed aktiv? Wenn ja, wurde ein anderer Mikrofluss (Abbildung 3) aufgerufen, der den REST-Aufruf des Sport-Feeds ausgeführt hat. Die Antwort wird auch verwendet, um die Spielergebnisse zu aktualisieren und die Ergebnisse der Teilnehmervorhersagen zu berechnen.

Der Spaß

Schon früh haben wir gelernt, dass wir eine Möglichkeit brauchen, die Spielaktivität zu simulieren, um die App richtig testen zu können. Wir haben einen schnellen Mikrofluss verwendet, um einige zufällige Spielergebnisse zu generieren. Wenn sich die App im Simulationsmodus befindet (eingestellt über einen Administratorbildschirm), wird dieser Mikrofluss anstelle der Sports Feed API aufgerufen.

Die App

Dies ist der Hauptbildschirm, auf dem sich ein Benutzer registrieren, Spielvorhersagen abgeben, den Spielstatus anzeigen sowie die Bestenliste der Teilnehmerergebnisse ansehen kann.

Hier ist die Ansicht der gespielten Spiele, der Spielstände und des Spielstatus:

Dies ist die Bestenliste der Teilnehmer und ihrer Gesamtpunktzahlen.

Wir können auch alle Spielvorhersagen anzeigen, die zur Punktzahl des Teilnehmers beigetragen haben.

Fazit

Dies war ein großartiges Projekt, das die Kundenveranstaltung durch Spaß und Beteiligung bereichert hat. Wenn Sie es selbst erkunden und lernen möchten, wie Sie eine aktionsfähige App auf eine vorhandene API setzen können, Laden Sie die Projektdatei hier herunter.