In diesem Beitrag stellen wir ein Projekt vor, bei dem wir ein Produkt entwickeln, das einen Mehrwert im E-Learning und Coaching Bereich bietet. Im Internet und auf Social Media werden zahlreiche Online Kurse beworben, von Fitness-, über Ernährungs-, bis hin zu Meditation-Coachings. Oft werden diese über eine eigene Web-Plattform, oder über Anbieter, wie Udemy angeboten.
Ein Problem haben diese Web-Plattformen jedoch häufig: Sie sind meistens nicht für Mobilgeräte optimiert und das, obwohl das Lernen unterwegs oder draußen über ein Smartphone oder Tablett deutlich komfortabler ist, als mit einem Laptop.
Darum entwickeln wir eine Möglichkeit, Online-Kurse möglichst einfach in den App-Bereich zu bringen. Dafür sollte eine Mobile App entwickelt werden, die Kurs-Inhalte über eine Schnittstelle laden kann. Dabei soll es möglich sein, Video, Audio und Text basierte Kurse anzuzeigen. Zudem sollte das Branding der App, also Farben, Schriftarten und Bilder möglichst einfach konfigurierbar sein.
Herangehensweise
Bei diesem Projekt haben wir uns für einen agilen Projektplanungs- und Entwicklungsablauf entschieden. Unser Team hat sich alle zwei Wochen getroffen, um den Entwicklungsstand abzugleichen und das weitere Vorgehen zu besprechen, die offenen Aufgaben im Überblick zu behalten, Deadlines festzulegen und die Aufgaben dem jeweiligen Teammitglied zuzuordnen.
Die Versionierung wurde mit Git-Lab durchgeführt. Die Entwicklung der einzelnen Punkte wurde in Feature-Branches durchgeführt und bei Fertigstellung in den Main-Branch gemerged. Davor wurde der Merge-Request von den anderen Teammitgliedern überprüft, sowie überprüft, ob die Testing Pipeline erfolgreich ausgeführt wird.
Zunächst wurde das Layout und Design der App mit Figma entworfen und anschließend zu einem Prototyp erweitert. Die Entwicklung der App wurde mit dem React Native Framework durchgeführt, um eine hybride App zu entwickeln. Für eine gute Struktur und um die spätere Weiterentwicklung möglichst sicher zu gestalten, haben wir uns entschieden, die React Native App mit TypeScript zu entwickeln.
Da das Admin-Dashboard, mit dem die App-Inhalte festgelegt werden, bereits mit einer Firebase Datenbank kommuniziert, haben wir uns dafür entschieden, für die App ebenfalls eine Firebase-Anbindung zu entwickeln. Um Problemen durch Unterschiede des Entwicklungsfortschritts vorzubeugen, haben wir während der Entwicklung für die App eine separate Firebase Instanz genutzt und anschließend auf die gemeinsame Instanz umgestellt. So konnten wir sicherstellen, dass eine unterschiedliche Daten- und Objektstruktur während des Entwicklungsprozesses keine Fehler in der anderen Anwendung hervorruft.
Dieses Diagramm veranschaulicht die Kommunikation der beiden Programme. Über das Web-Dashboard meldet sich der Coach an und authentifiziert sich. Dafür wird der Firebase Authentication Service genutzt. Danach werden die Inhalte aus der Firebase Realtime Database ins Web-Dashboard geladen und angezeigt. Dort kann der Admin die App Inhalte einstellen und auf der Datenbank abspeichern. Die App für die Endnutzer erhält dank der Firebase Sicherheitsregeln nur einen Lesezugriff und die Inhalte werden von der Datenbank geladen und in der App angezeigt.
