Lenz
Der Entwurf der App-Architektur, der Navigation und des Designs waren hauptsächlich meine Aufgaben. Zuerst wurden verschiedene Entwürfe in Figma erstellt und dann im Team besprochen. Anschließend wurde dieses zu einem Prototyp in Figma zusammen gestellt. Dabei lag der Hauptfokus darauf, eine gute Bedienbarkeit und UX zu gewährleisten.
Zudem war es uns wichtig, einige Brandingfaktoren in das Design zu integrieren, die möglichst leicht angepasst werden können. Es sollte über eine Konfigurationsdatei möglich sein, Farben, Schriftarten, Schriftgrößen, Hintergrundfarben und mögliche Schatten einzustellen. Dies habe ich in der Frontend-Entwicklung umgesetzt.
Dafür wurden sämtliche anpassbaren Stile in der Styles-Config festgelegt und bei den jeweiligen Screens und Komponenten importiert. Uns war es außerdem wichtig, die Komponenten möglichst modular aufzubauen. Darum wurden die einzelnen Screens in Teilkomponenten untergliedert und diese wiederum in Teilkomponenten aufgeteilt.
Der letzte Teil meiner Arbeit war das Erstellen der Tests. Als Testing-Framework nutzen wir Jest und React-Test-Renderer. Somit können wir überprüfen, ob alle Inhalte richtig angezeigt werden und die jeweiligen Funktionen aufgerufen werden. Dank der erstellten Snapshot Tests werden ebenfalls ungewollte Layout- und inhaltliche Änderungen erkannt.
Philipp
Meine Hauptaufgabe bestand aus der Entwicklung des User-Interfaces des Video-Players, sowie des Audio-Players. Dafür wurden einzelne Screens erstellt, die über die Kursübersicht aufgerufen werden können. Die Daten werden hierbei über die Navigations-Props übergeben und aufgerufen. Für den Video- und Audio-Player habe ich das Expo-AV Framework genutzt.
Für den Video-Player wird beim Aufruf das Video geladen und kann über das Interface gestartet werden. Über die nativen Elemente kann das Video in Vollbild angeschaut werden. Beim Audio-Player mussten die Interface-Elemente erstellt und integriert werden. Dafür werden verschiedene Handler genutzt, um den Fortschritt anzuzeigen. Über den Play-Button kann der Audio-Player gestartet und pausiert werden. Der Slider ermöglicht es direkt zur gewünschten Stelle zu springen. Außerdem ist es wichtig, dass die Media-Player beim Verlassen des Screens gestoppt werden und nicht im Hintergrund weiterlaufen.
Ein spannendes Thema war zudem die Ladeanimation der jeweiligen Screens. In einem anderen Projekt hatte ich mit Lottiefiles gearbeitet, welches ermöglicht, einfache Animation in JSON-Format zu integrieren. Dies hätte auch problemlos funktioniert, doch ich wollte diesmal ausprobieren, ohne andere Frameworks eine Ladeanimation zu erstellen. Bei der Benutzung von der “Animated”-Funktionalität von React Native bin ich auf ein paar Probleme gestoßen, die ich jedoch relativ schnell lösen konnte. Probleme, dass die Animation im Hintergrund weiter gelaufen ist, hatte zu Performance-Problemen geführt. Die Lösung war jedoch relativ simpel und wird im nächsten Projekt von Beginn an berücksichtigt.
Zudem habe ich mich noch um kleinere Anpassungen im User Interface gekümmert und die anderen Teammitglieder bei der Entwicklung unterstützt.
