Dieser Artikel stellt den Entwicklungsprozess der Applikation Face it dar, die für die Testungen im Rahmen meiner Masterarbeit erstellt wurde. Die Applikation soll dazu dienen, die Nutzer*innen dazu zu motivieren, umweltfreundlicher Verkehrsmittel zu nutzen und sich nachhaltiger fortzubewegen.

Verwendete Technologien

Das Design wurde zunächst in Figma für die benötigten Screens erstellt und mit einigen Kollegen reviewt. Dabei wurden einige Anpassungen vorgenommen. Darauffolgend wurde anhand der Design-Vorlage mit der Erstellung der Applikation begonnen.

Die App basiert auf einem Backend, welches mit Strapi, einem Headless Content Management System, erstellt wurde. Darin können, wie von einem CMS bekannt, in einem designtem UI beispielsweise Texte und Bilder hochgeladen und bearbeitet werden, die dann auf der Webseite angezeigt werden sollen. Anders als bei normalen CM-Systemen, werden die Seiten aber nicht direkt im CMS gebaut, sondern können per API von einem selbst-gebauten Frontend aufgerufen werden. Das Content-Management-System liefert bei Aufruf der richtigen URL wie eine API die Daten im JSON-Format. Das Frontend, die Annahme und Verarbeitung der JSON-Daten und das Design, müssen selbst in die Hand genommen werden. Dies verlangt wesentlich größere Erfahrung im Umgang mit Webentwicklung, bietet allerdings auch wesentlich mehr Freiheit im Design. Außerdem macht es unabhängig von diversen Bezahlmodellen.

Um die Datenverarbeitung im Frontend gering zu halten, wurde ein DataProvider-Service, welches mit einer .NET 5 API in C# umgesetzt wurde, zwischengeschaltet. Dieses übernimmt die Daten von Strapi, verarbeitet sie für das Frontend und bietet diese über eine weitere API an. Durch die Effizienz der Applikation geht somit nicht viel Zeit verloren, es konnte jedoch einiges an Flexibilität und Wartbarkeit gewonnen werden.

Das Frontend in VueJS der Version 3 enthält somit nicht viel Logik, sondern beschränkt sich hauptsächlich auf die Darstellung der Daten und die Weitergabe der Nutzer-Eingaben ans Backend, die in der ersten Version noch nicht besonders groß ausfallen. Das Styling wurde großteils mithilfe des Styling-Frameworks Tailwind CSS durchgeführt, wodurch nahezu gar keine Zeile CSS notwendig war. Außerdem wurde sich für die Umsetzung mit der Vue 3 Composition API, im Gegensatz zur bisher gebräuchlichen Options API entschieden.

Aufbau

Der Startscreen zeigt das Logo mit dem Titel und Untertitel der App, sowie alle Navigationsmöglichkeiten der App. Man kann sich die Liste an verfügbaren Quizzes anzeigen lassen, sowie seine Challenges zu einer nachhaltigeren Mobilität ansehen. Außerdem befindet sich in der linken oberen Ecke ein Hamburger-Menü, worüber man von jeder Seite aus auf die drei Hauptseiten Home, Quizzes und Challenges wechseln kann.

Auf der Quizzes-Seite sieht man alle verfügbaren Quizzes und kann sie starten, indem man den Namen des jeweiligen Quizzes anklickt. Daraufhin öffnet sich das Quiz und die erste Frage wird gestellt. Es besteht in der ersten Version kein Zeitlimit. Nach Anklicken einer Antwortmöglichkeit wird aufgelöst, ob die Antwort korrekt ist und wenn nicht, welche die korrekte Antwortmöglichkeit ist. Außerdem wird eine nähere Erläuterung zum Thema angeboten. Nach Ablauf von 5 Sekunden wird die nächste Frage angezeigt. Wenn alle Fragen beantwortet wurden, kann über einen Button zur Liste der Quizzes zurückgekehrt werden.

Auf der Challenges-Seite sind alle für den jeweiligen Nutzer / die jeweilige Nutzerin verfügbaren Challenges und deren Status zu sehen. Per Klick auf eine Challenge kann diese abgeschlossen bzw. wieder geöffnet werden.

Learnings

Den größten Lerneffekt hatte wohl die Nutzung von Azure App Services als Veröffentlichungsplattform für das Data-Provider-Service basierend auf .NET. Da ich vor diesem Projekt noch nie eine Applikation persönlich auf Azure gehostet habe, konnte ich durch dieses Projekt nun sehr viel dazulernen. Auch einige Herausforderungen mit CORS und der Middleware haben mich Azure und die Möglichkeiten von .NET näher erkunden lassen.

Ein weiteres selbst gestecktes Ziel war die Verringerung der Komplexität des Frontends. Mit einem headless CMS im Backend müssen oft viele Datenanpassungen im Frontend vorgenommen werden. Diese konnten durch das .NET Service als Businesslayer verringert werden. Mithilfe der erstmaligen Nutzung von Tailwind CSS war außerdem nahezu kein selbstgeschriebenes CSS notwendig. Lediglich die Animationen wurden selbst geschrieben. Durch die sprechenden Klassennamen, die Tailwind in HTML verwendet, bleibt der Code weiterhin gut lesbar. Insgesamt wurden ca. 240 Zeilen Javascript-Code und ohne Animation (denn die hätte man auch in Tailwind bauen können) 19 Zeilen CSS benötigt.

Außerdem habe ich mich bei der Implementierung des Frontends mit Vue 3 Großteils auf die Nutzung der neuen Composition API beschränkt, einer neuen Art, Vue zu implementieren. Diese weist große Unterschiede zur bisherigen Options API auf und hat vor diesem Projekt einige Unsicherheiten mit neuem Vue-Code in mir ausgelöst. Diese konnte ich mit diesem Projekt beseitigen.