Progressive Web App auf Symfony und Angular

31.10.2018

Training Realm bietet einzigartige Fitness-Trainingsroutinen. Sie baten uns um eine Anwendung für ihre Benutzer. Bis jetzt wurden Trainingspläne als statische Seiten veröffentlicht und die Benutzer mussten die Trainingstage selbst berechnen und sich die Ergebnisse merken. Das Ziel der App war, es jedem leicht zu machen, Trainingstage und Fortschritte automatisch zu planen, ohne sich selbst an die Routinen erinnern zu müssen.

Anforderungserhebung

Wir starteten das Projekt mit der Anforderungserhebungsphase. Dies ist die Phase, in der wir die Pläne und Erwartungen der Kunden kennenlernen. Je besser wir die Bedürfnisse der Kunden kennen, desto besser können wir bei der Gestaltung und Implementierung der Lösungen helfen. Oft können wir auch Anforderungen identifizieren, die der Kunde nicht berücksichtigt hat, was spätere Überraschungen und unnötige Kosten verhindern kann.

Das Team von Training Realm kannte ihre Benutzer bereits sehr gut und hatte ein wirklich gutes Verständnis dafür, was sie aufbauen wollten. Dank dessen war die Anforderungserhebungsphase sehr schnell. Ein Punkt, der etwas mehr Zeit in Anspruch nahm, war die Untersuchung der Optionen zur Zahlungsabwicklung und der daraus resultierenden steuerlichen Auswirkungen. Wir halfen ihnen bei der Auswahl eines Zahlungsanbieters, der auch bei der Steuerabwicklung hilft, wenn Sie Zahlungen aus der ganzen Welt einziehen. Fastspring.com wurde aufgrund ihrer gut dokumentierten API und des schnellen Supports ausgewählt.

Training Realm-1

UX/Design

Nach der Anforderungserhebungsphase erstellte unser Designteam UX-Mockups, die alle verschiedenen Bildschirme und Interaktionen umreißen.

Typischerweise erstellen wir UX-Mockups aller wichtigen Bildschirme und besprechen diese mit dem Kunden. Der Schwerpunkt liegt immer auf der Perspektive des Endbenutzers. Abhängig von den Benutzertypen und ihren Zielen sowie den Zielen der Websites oder Apps kann dieser Prozess relativ einfach oder sehr komplex sein. Es kann zum Beispiel Testläufe mit einer Benutzergruppe beinhalten, um potenziell unintuitive Elemente oder Blockaden zu identifizieren. Für trainingrealm.com sind die Hauptbildschirme der Startbildschirm und der Trainingsbildschirm. Dort verbringen die Benutzer die meiste Zeit, daher haben wir hier den größten Aufwand betrieben.

Wenn die Wireframes fertig sind, ist es ein großartiges Erlebnis, sie in tatsächliche Designs umzuwandeln, sowohl für uns als auch für die Kunden. Trainingrealm.com betreibt bereits eine große Flotte von Websites. Wir mussten sicherstellen, dass wir innerhalb der Schemata und Farben der Marke bleiben, obwohl wir sie ein wenig modernisiert und erweitert haben.

Training Realm-01

Implementierung

Symfony & Angular

Nach der Designphase war es "die Bauzeit". Wir wählten Symfony für das Backend wegen seiner Geschwindigkeit und der einfachen Implementierung. Außerdem lieben wir PHP, daher war ein Framework basierend auf PHP eine natürliche Wahl.

Trainingrealm.com benötigt ein wirklich geschmeidiges Frontend-Erlebnis. Um dies zu erreichen und den Code verwaltbar zu halten, wählten wir Angular als Frontend-Framework.

Progressive Web Application

Da die Mehrheit der Benutzer die App auf mobilen Geräten besucht, war ein responsives Webdesign entscheidend, und wir haben die App sorgfältig auf verschiedenen Geräten und Bildschirmgrößen getestet.

Um das Erlebnis der regulären Benutzer zu verbessern, haben wir trainingrealm.com in eine Progressive Web App (PWA) verwandelt. Benutzer können deren Icon auf dem Startbildschirm ihrer Telefone und Tablets speichern und sie wie eine normale App verwenden. Zugriffe über Startbildschirm-Icons machen 30% aller Besuche aus.

Continuous Integration

Wie üblich, um den Build und die Tests zu erleichtern, nutzten wir Versionskontrolle und richteten Continuous Integration mit Hilfe von Jenkins und Docker ein. Wann immer ein Entwickler neuen Code committet, wird eine aktualisierte Version der Anwendung auf einem Testserver bereitgestellt und automatisierte Tests überprüfen, ob alles korrekt funktioniert. Dies ist auch großartig für Kunden, die den Fortschritt der Arbeit täglich sehen und uns leicht mit ihrem Beitrag zum Projekt unterstützen können.

Hosting

Die Anwendung wird auf Amazon Web Services gehostet. Sie kann je nach Anzahl der Benutzer, die sie verwenden, schnell skalieren. Dank unserer Continuous Integration-Einrichtung können neue Funktionen schnell und zuverlässig ohne Beeinträchtigung der Benutzer bereitgestellt werden.

Da Benutzer der App aus der ganzen Welt kommen, stellen unsere Überwachungsmechanismen sicher, dass der Dienst 24/7 reibungslos läuft.

Wie viele Web-Apps, um die Kernfunktionalität von den Marketing-Seiten zu trennen, wurde das Haupt-Trainingrealm.com separat gebaut zu app.trainingrealm.com, wo sich die Website befindet. Für den Landingpage-Builder verwendeten wir Droopler - eine Drupal-Distribution, die wir oft zum Bau von Firmenwebsites verwenden.

Ergebnisse

Die Anwendung war ein MVP und erwies sich als großer Erfolg. Tausende von Benutzern erstellen monatlich Konten bei dem Dienst. Neue Funktionen und Phasen für das Projekt sind bereits in Planung.

Der Kunde ist begeistert und wir sind stolz :)

Training Realm-02