Einleitung/Überblick

Als Gruppenprojekt für das dritte Semester der Masterklasse haben wir uns zu dritt entschieden, eine App speziell für Freund:innen zu entwickeln, um das Planen und Organisieren von gemeinsamen Aktivitäten zu erleichtern. Die Idee hinter Amity ist es, Freund:innen näher zusammenzubringen, indem sie auf einfache Weise miteinander in Kontakt bleiben und ihre Zeit besser koordinieren können.

Rollenverteilung

• Sara: Design, Frontend, Backend
• Laura: Design, Frontend, Backend
• Vanessa: Design, Frontend, Backend, Organisation

Umgesetzte Funktionalitäten

Die App Amity bietet eine Vielzahl an Funktionen, die speziell darauf ausgelegt sind, das Planen und Organisieren von Aktivitäten unter Freund:innen so einfach wie möglich zu gestalten.

Im Zentrum steht der gemeinsame Kalender, der auf einen Blick alle geplanten Events sichtbar macht und die Planung gemeinsamer Treffen erheblich vereinfacht. Zusätzlich können Events erstellt und direkt mit ausgewählten Freund:innen geteilt werden, wodurch die Organisation noch effizienter wird. Diese Funktionen stellen sicher, dass selbst im hektischen Alltag keine Verabredung in Vergessenheit gerät.

Eine weitere Kernfunktion ist die Geburtstagsübersicht, die automatisch alle bevorstehenden Geburtstage anzeigt und so sicherstellt, dass kein wichtiger Anlass übersehen wird.

Ergänzt wird dies durch die Möglichkeit regelmäßiger Check-Ins, bei denen Nutzer:innen Push-Benachrichtigungen an Freund:innen verschicken können, um sich schnell und unkompliziert bei ihnen zu melden.

Amity fördert außerdem die Verbindung zwischen Freund:innen durch das Erstellen von geteilten Vorhersage-Listen. Damit können Nutzer:innen gemeinsam Prognosen über z. B. das kommende Jahr oder die Winterzeit erstellen und nach Ablauf markieren, ob sie „zutreffend“ oder „nicht zutreffend“ waren.

Durch diese durchdachten Features bietet Amity eine moderne und benutzerfreundliche Lösung, um die Koordination und den Austausch im Freundeskreis zu verbessern und Freundschaften aktiv zu pflegen.

Technologien

Frontend

Für Amity wurde Angular als Frontend-Framework gewählt. Angular bietet eine stabile Struktur, viele nützliche Tools und eine große Community. Diese Eigenschaften machten es zu einer guten Wahl für die Entwicklung einer dynamischen und skalierbaren Webanwendung. Die Arbeit mit TypeScript, das von Angular direkt unterstützt wird, half dabei, den Code übersichtlich und gut wartbar zu halten.

Für die Gestaltung der Benutzeroberfläche wurde Angular Material und Bootstrap genutzt. Angular Material stellt eine große Auswahl an Komponenten bereit, die die Entwicklung erleichterten und ein einheitliches Design ermöglichten. Bootstrap wurde genutzt, um das Layout weiter anzupassen und spezifische Designanforderungen flexibel umzusetzen.

Zusätzlich wurde die Anwendung als Progressive Web App (PWA) umgesetzt. Dadurch kann die App auf Mobilgeräten installiert werden.

Backend

Im Backend kam Node.js zum Einsatz, und als Framework wurde NestJS genutzt. Diese Technologien wurden von uns bereits in dem Projekt “Bevry” im WS23 und SS24 verwendet, die Vorerfahrungen erleichterten die Umsetzung im Backend bei Amity deutlich.

Zusätzlich wurden folgende Packages verwendet:

• TypeORM: Für die Verwaltung der Datenbank-Entities und die Kommunikation mit der Datenbank.
• JWT: Für die Authentifizierung der Nutzer.
• bcrypt: Für die sichere Verschlüsselung von Passwörtern.

Hürden und Schwierigkeiten

Frontend

Die größte Herausforderung, die sich beim Frontend Development ergab, war das Planen der verschiedenen Komponenten. Dadurch, dass wir mit Angular arbeiteten, war der Code sehr modular aufgebaut, was wir bspw. von Vue nicht in diesem Ausmaß gewohnt waren. Es war wichtig zu überlegen welche Seiten wie unterteilt werden konnten und vor allem welche Komponenten global verfügbar sein mussten (z.B. die Snackbar und Dialoge).

Eine weitere Hürde, war der richtige Umgang mit Datentypen. Da wir sowohl im Backend, als auch im Frontend, mit TypeScript arbeiteten, mussten wir darauf achten, dass die verwendeten Klassen in beiden Teilen vorhanden waren und angepasst wurden. Besonders bei den Datumsformaten mussten wir diesbezüglich aufpassen, damit keine Information bei der Übertragung ins Backend verloren ging. Außerdem ermöglichen wir das Uploaden von Bildern, was wiederum das richtige Umwandeln der Formate mit sich brachte.

Zu guter Letzt war eine Schwierigkeit das Umwandeln unserer Web App zu einer Progressive Web App (PWA). Glücklicherweise hatte unser Teammitglied Vanessa bereits Vorerfahrung zu diesem Thema und konnte den Großteil dieser Aufgabe übernehmen. Allerdings brachte das Einrichten und Testen der dafür benötigten Funktionalitäten großen Zeitaufwand mit sich.

Backend

Im Backend war das größte Problem die vielen Abhängigkeiten zwischen Klassen und Entitäten. Das Planen der Struktur war hierbei das wichtigste und anspruchsvollste. Da wir jedoch alles vorab genau geplant und beschrieben hatten, konnte die Implementierung recht schnell durchgeführt werden. Durch verschiedene Cascade und Loading Einstellungen, kam es jedoch trotzdem zu Recursive Errors und anderen Fehlern, die wir bewältigen mussten.

Besonders zu kämpfen hatten wir auch mit dem Versenden und Anzeigen von Push-Benachrichtigungen. Da die User:innen benachrichtigt werden sollten, sobald andere User:innen ein Check-In sendeten, musste der Befehl zuerst von einem Gerät abgesendet und dann von einem anderen empfangen werden. Da die Funktionen hinter diesem Problem recht komplex und verschachtelt sind benötigten wir ein paar Anläufe damit alles funktionierte.

Eine weitere Herausforderung war, dass das Backend dem Frontend immer einen Schritt voraus sein musste. Wie bereits erwähnt brachte das Backend einiges an Planungsaufwand mit sich, weshalb wir im Frontend darauf achten mussten zuerst die Dinge umzusetzen, die für sich alleine funktionieren konnten. Im Weiteren Verlauf der Umsetzung legten wir den Fokus darauf zumindest einen Sprint im Vorhinein das Backend für eine Komponente vorzubereiten.

Personal Learnings

Vanessa Hofer

Im Rahmen der Entwicklung von Amity habe ich erstmals mit NestJS gearbeitet und konnte dabei ein grundlegendes Verständnis für das Framework und seine modularen Konzepte gewinnen. Besonders das Erstellen von Push-Benachrichtigungen war eine wertvolle Lernerfahrung, da ich dabei sowohl die serverseitige Logik als auch die Integration ins Frontend umsetzen musste.

Auch in Angular konnte ich mein Wissen erweitern, da ich zuvor nur geringe Vorkenntnisse hatte. Durch das Arbeiten mit Komponenten, Datenbindung und Routing habe ich ein besseres Verständnis für die Entwicklung von Single-Page-Applications bekommen.

Die Arbeit an Amity hat mir gezeigt, wie wichtig es ist, sich schnell in neue Technologien einzuarbeiten und diese gezielt in einem Projekt einzusetzen.

Sara Ladner

In diesem Projekt habe ich viel dazugelernt, weil wir alle sowohl am Frontend als auch am Backend gearbeitet haben. Für mich war es das erste Mal, dass ich aktiv im Backend mitgearbeitet habe. Dabei konnte ich ein besseres Verständnis dafür entwickeln, wie die Kommunikation zwischen Frontend und Backend funktioniert und welche Prozesse im Hintergrund ablaufen. Besonders spannend war es, zu sehen, wie die einzelnen Teile des Projekts zusammengefügt werden, um eine funktionierende Anwendung zu erstellen.

Weiters habe ich zum ersten Mal mit Angular gearbeitet. Anfangs war das eine Herausforderung, da ich mich erst an die Struktur und Arbeitsweise des Frameworks gewöhnen musste. Mit der Zeit habe ich mich aber gut eingearbeitet und konnte sogar selbstständig neue Funktionen umsetzen. Durch diese praktischen Erfahrungen habe ich viel über die Entwicklung moderner Webanwendungen gelernt, und ich fühle mich jetzt sicherer im Umgang mit neuen Technologien.

Laura Kainzbauer

Für mich war dieses Projekt vor allem dadurch lehrreich, dass wir alle am Front- und Backend beteiligt waren und uns gegenseitig etwas beibringen konnten. Einerseits konnte ich meinen Kolleginnen beim ersten Arbeiten mit NestJS helfen, andererseits halfen sie mir mit Schwierigkeiten im Frontend. Ich finde diese Aufteilung hat es uns ermöglicht verschiedene Funktionalitäten vom Buttonklick bis zum Abrufen aus der Datenbank komplett durchzudenken und den gesamten Prozess noch besser zu verstehen.

Besonders das Arbeiten mit Angular war für mich spannend, da ich seit dem Bachelor nicht mehr damit gearbeitet hatte und mit Amity zum ersten Mal richtig damit umgehen konnte. Am meisten konnte ich dazulernen in der Arbeit mit den verschiedenen Komponenten und Services und dem Zusammenhang zwischen ihnen. Der Kalender war meine größte persönliche Errungenschaft, da ich in meinem ersten Angular Projekt bereits an ein einem Kalender arbeitete und seitdem nie wieder etwas damit zu tun haben wollte. In diesem Projekt konnte ich mein “Trauma” jedoch gut überwinden und bin sehr froh mit dem fertigen Ergebnis.

The post Amity | Semesterprojekt WS24 appeared first on Mobile USTP MKL.

Das Hauptziel des Forschungsprojekts “Smart Communities – IoT4LAC” besteht darin, den Datenaustausch zwischen verschiedenen regionalen LPWAN-Serviceanbietern zu ermöglichen und den Nutzer*innen durch aussagekräftige visuelle Darstellungs- und Interaktionsmethoden einen tieferen Einblick in die komplexen Daten von Sensornetzwerken zu bieten. Es wird ein System-of-Systems-Konzept entwickelt, das verschiedene Anbieter und Anwendungsfälle integriert und als Grundlage für die Realisierung von Smart Services für Gemeinden, Verbände und das Land dient.

Zielsetzung

Im Rahmen meiner Mitarbeit im Projekt bestand die Aufgabe darin, eine Visualisierung als Grafana-Plugin zu entwickeln. Dieses Plugin sollte es ermöglichen, zwei Attribute in Kombination miteinander über einen definierten Zeitraum darzustellen, sodass die Nutzer*innen einen Überblick über historische Daten erhalten. Darüber hinaus sollten Usability-Tests durchgeführt und umfassend evaluiert werden, um die Benutzerfreundlichkeit des gesamten Dashboards, das im Forschungsprojekt erstelltet wurde, zu bewerten.

Vorgehensweise

Zunächst wurde das Plugin unter Verwendung von Javascript und D3.js umgesetzt und in das Dashboard integriert. D3.js wurde dabei genutzt, um interaktive und dynamische Visualisierungen zu erstellen. Anschließend mussten verschiedene Interaktionsmöglichkeiten implementiert und mit den bestehenden Plugins verknüpft werden. Nach der technischen Umsetzung wurde ein Testdesign entwickelt und potenzielle Testpersonen kontaktiert. Für die Usability-Tests wurde ein Fragebogen mit sechs spezifischen Aufgaben sowie einem Visualisierungs-Literacy-Test erstellt. Die Testpersonen haben diesen im Rahmen der Evaluierung ausgefüllt. Schließlich wurden die Ergebnisse der Tests analysiert und ausgewertet.

Ergebnisse

Im Rahmen meiner Mitarbeit lieferte ich eine detaillierte Beschreibung des entwickelten Plugins und seiner Interaktionen sowie eine umfassende Auswertung der Usability-Tests. Diese beinhaltete eine Beschreibung der Methodik, die Durchführung der Tests sowie die wichtigsten Erkenntnisse aus panel-spezifischem und panel-übergreifendem Feedback. Der berechnete SUS-Score von 60,625 liegt dabei unter dem Durchschnitt, was auf Verbesserungspotenzial hinsichtlich der Usability hinweist.

Retrospektive

Durch meine Mitarbeit im Forschungsprojekt “Smart Communities” konnte ich meine Fähigkeiten in den Bereichen Programmierung und Evaluierung weiterentwickeln. Besonders wertvoll war die Möglichkeit, eine Kombination aus technischen und benutzerzentrierten Aufgaben zu bearbeiten. Die Umsetzung des Plugins sowie meine Beteiligung an der Entwicklung anderer Plugins ermöglichten mir, umfassende Usability-Tests durchzuführen und die Ergebnisse mit meiner vorherigen Arbeit zu verknüpfen. Dies gab mir wichtige Einblicke in die Benutzerfreundlichkeit und die Verbesserungspotenziale von interaktiven Visualisierungen in Dashboards.

The post TFG | Smart Communities – IoT4LAC appeared first on Mobile USTP MKL.

Projektbeschreibung, Funktionalitäten

Konzept

Als Gruppenprojekt für das zweite Semester der Masterklasse haben wir uns zu fünft entschieden, unsere Web-App, die den Namen „Bevry“ trägt, aus dem ersten Semester weiterzuentwickeln. Bevry richtet sich an alle Cocktail-Liebhaber, die gerne mit neuen Getränkekreationen experimentieren und ihre Rezepte teilen wollen.

Bestehende Funktionalitäten

Die bereits im letzten Semester umgesetzten technischen Funktionen der App bestanden primär auch dem Erstellen, Teilen, und Entdecken von Cocktail-Rezepten aller Art. Es können nur registrierte und angemeldete Nutzer:innen die Rezeptsammlung sehen. Rezepte sind in Kategorien unterteilt, die ein zielgerichtetes Filtern ermöglichen. Mithilfe einer Suchleiste können Nutzer:innen ihre Suche zusätzlich verfeinern.
Rezepte können von den Nutzer:innen, die sie erstellt haben, bearbeitet oder auch gelöscht werden. Ebenfalls können Nutzer:innen Rezepte liken und so alle Lieblingsrezepte – ob es die eigenen sind oder von anderen Nutzer:innen erstellt – in einer Favoritenliste sammeln. Eine Bewertungsfunktion erlaubt es, Rezepten sowohl eine Sternebewertung zu verleihen als auch ein öffentliches Kommentar zu posten. Alle dieser bestehenden Ansichten erhielten dieses Semester ein ansprechenderes Design.

Neu umgesetzte Funktionalitäten

Im Rahmen des 2. Semesters haben wir unsere Web-App um zahlreiche neue Funktionalitäten erweitert, um das Nutzererlebnis noch besser zu gestalten. Mit der neuen Bar Inventory Funktion behalten die Nutzer:innen stets den Überblick über ihre vorhandenen Zutaten. Die Shopping List erleichtert das Einkaufen, indem fehlende Zutaten bereits vom Rezept aus hinzugefügt werden können. Für den Unterhaltungsfaktor bei Party sorgen unsere beiden neu integrierten Minigames. Einerseits gibt es das Turn-Based Multiplayer Minigame “Spin the Wheel” und andererseits noch das Singleplayer Minigame “Mix it Up”.

Zudem können Nutzer:innen nun eigene Zutaten anlegen und Substitutes hinzufügen, um Rezepte noch individueller anzupassen als je zuvor. Die neue Save Draft Funktion ermöglicht es, während des Erstellens eines Rezeptes die View zu verlassen und später an dem Rezept weiterzuarbeiten. Das Design der App hat ebenfalls ein frisches und benutzerfreundliches Designupdate erhalten.

Zusätzlich wird nun die E-Mail-Adresse verifiziert, die Einstellungen wurden erweitert, eine Ladeanimation wurde ergänzt, und Empfehlungen basierend auf den aktuell im Barbestand vorhandenen Zutaten wurden hinzugefügt. Die Empfehlungen werden gemäß der übereinstimmenden Barbestand-Zutaten mit den für das Rezept benötigten Zutaten absteigend angeordnet (siehe Chip-Komponente links neben dem Like-Button).

Diese Erweiterungen machen unsere Web-App zu einem unverzichtbaren Tool für alle Cocktail-Liebhaber und Hobby-Barkeeper.

Technologien

Bestehende Technologien

Alle Technologien aus dem letzten Semester haben wir beibehalten. Hier nochmal zur Erinnerung:

• Vue.js: Unser Frontend-Framework
• Vuetify: Unser UI-Framework
• Pinia: Unsere State Management Library
• NestJS: Unser Backend-Framework

Zusätzlich verwenden wir im Backend:

• TypeORM: Für die Datenbankverwaltung
• JWT: Für die Authentifizierung
• bcrypt: Für die Passwortverschlüsselung
• OpenAPI: Für die API-Dokumentation mit Swagger

Erweiterungen

Außerdem haben wir als neues Paket lottie-web installiert, um die Ladeanimation und die “Spin the Wheel”-Animation anzeigen zu können. Diese wurden von Elisa, unserer Animationsdesignerin, im Lottie-Format angefertigt. Mit Lottie-web können wir Adobe After Effects-Animationen, die als JSON exportiert wurden, problemlos anzeigen. Nachdem es mit den Paketen vue-lottie und vue3-lottie nicht geklappt hat, sind wir bei lottie-web geblieben. Nach anfänglichen Schwierigkeiten mit der korrekten Anzeige der Animationen ging es dennoch recht gut. Es war cool zu sehen, dass es dann doch relativ einfach ist, Animationen anzuzeigen, nachdem uns das Lottie-Format vorher nicht geläufig war.

Für die E-Mail-Verifizierung haben wir die Pakete nodemailer und maildev benutzt. Maildev war super, um das Senden der E-Mails lokal testen zu können, da es als SMTP-Server fungiert. Es bietet eine webbasierte Benutzeroberfläche, über die Entwickler die gesendeten E-Mails einsehen und testen können, ohne dass diese tatsächlich über das Internet versendet werden müssen.

Während Maildev als lokaler SMTP-Server dient, um E-Mails zu empfangen und zu testen, wird Nodemailer verwendet, um E-Mails zu generieren und an einen SMTP-Server (wie Maildev oder einen echten E-Mail-Server) zu senden. Es ist ein Node.js-Modul, das es ermöglicht, E-Mails einfach aus Node.js-Anwendungen heraus zu versenden. Somit konnten wir das E-Mail-Versenden dann schließlich über den echten E-Mail-Server bei world4you laufen lassen.

Minigames

Grundlegendes

Um das Mischen von Cocktails noch spaßiger zu machen, haben wir Bevry um den Games Hub erweitert. Dieser Bereich der App ist den Minigames gewidmet. Wir haben uns dazu entschieden, zwei Spiele zu entwickeln, die in unterschiedlichen Kontexten zur Geltung kommen können. Da Bevry den gemeinsamen Spaß an Cocktails hervorheben soll, musste eines der Spiele ein Party-Game sein, das mit mehreren Spieler:innen gespielt werden sollte. Dieses Minigame verwendet das neue Bar Inventory und damit Zutaten, die die Spieler bereits bei der Hand haben. Auf technischer Seite basiert es auf auf Timeouts und Zufallswerten.

Andererseits soll der Cocktail-Spaß auch abseits der Cocktail-Party nicht aufhören müssen – daher entschieden wir uns dazu, aus dem zweiten Minigame zu ein Singleplayer-Game zu machen, mit dem Spieler:innen jederzeit den Spaß am Cocktails mischen genießen können, ohne tatsächlich Zutaten zu benötigen. Gleichzeitig bedient sich dieses Minigame an echten Rezepten aus Bevrys Rezeptesammlung. Damit können Spieler:innen neue Rezepte spielerisch entdecken und die Cocktails bei Interesse auch selbst machen. Für die Umsetzung dieses Spiels wurde die HTML Canvas API verwendet.

Spin The Wheel

Im Minigame Spin The Wheel geht es vor allem um Schnelligkeit und Spaß in der Gruppe. Zu Beginn werden zufällige Zutaten zusammengesucht und bereit gestellt, die dann im Spiel zu einer wilden Mischung werden. Der Reihe nach müssen die Spieler:innen ein “Rad drehen”, um eine Zutat zu wählen, die in ein Glas in der Mitte gefüllt werden muss. Sobald das erledigt ist, wird das Handy an die nächste Person weitergegeben. So geht es weiter, bis der versteckte Timer abläuft und die letzte Person, die das Rad dreht, das Gemisch trinken muss. Je nach Zutaten kann diese Spieler:ien also Gewinner:in oder Verlierer:in des Spiels sein.

Das Spiel besteht aus einem Setup, in dem die zufälligen Zutaten aus dem Barbestand (mit oder ohne alkoholische Zutaten) ausgewählt und angepasst werden können. Dann müssen alle Zutaten und ein Glas in der Mitte platziert werden, bevor das Spiel gestartet werden kann. Zusätzlich ist es möglich eine Anleitung zu lesen, die den Spielablauf erklärt.

Bei Spielstart wird ein zufälliger Timer in einem vorgegebenen Zeitraum gestartet, der das Spielende vorgibt. Nach Ablauf des Timers kommt man zum Endscreen, der die letzte Spieler:in dazu auffordert, das Gemisch zu trinken. Es ist möglich ein Spiel mit denselben Einstellungen nochmals zu starten oder zurück zum Setup zu navigieren, um eine neue Runde mit anderen Zutaten zu beginnen.

Mix It Up

Das Minigame Mix It Up ist ein Singleplayer Spiel, in dem die Spieler:innen Rezepte der App besser kennenlernen sollen. Das Ziel ist es alle richtigen Zutaten eines Rezeptes mit einem Glas einzusammeln. Dabei sollen falsche Zutaten vermieden werden, um möglichst keine Leben zu verlieren. Sobald ein Rezept fertig ist, kommt man zum nächsten Level mit dem nächsten Rezept. Das passiert so lange, bis man keine Leben mehr hat und der erreichte Punktestand in einem Highscore Board gespeichert wird.

In diesem Fall wird im Setup nur ein zufällig vorausgewähltes Rezept angezeigt. Bei Bedarf können die zugehörigen Zutaten nachgelesen werden, ansonsten kann man sich das Spiel etwas schwieriger machen und es ohne diese probieren. Bei Bedarf kann eine Anleitung durchgelesen werden, bevor das Spiel gestartet wird. Im Spiel fallen zufällige Zutaten herunter, die eingesammelt oder vermieden werden sollen. Jede Zutat, die für das Rezept benötigt ist, muss von dem:der Spieler:in zumindest ein Mal eingesammelt werden, um den Level abzuschließen. Falls es nochmal eingesammelt wird, werden Bonuspunkten gesammelt, die für den Highscore am Ende herangezogen werden. Falsche Zutaten führen dazu, dass eines von insgesamt 5 Leben abgezogen wird. Bis der:die Spieler:in alle Leben verliert sollen so viele Punkte gesammelt und Level abgeschlossen werden, wie möglich. Am Endscreen wird der erreichte Rang und Punktestand angezeigt, gemeinsam mit dem Highscore Board, dass die besten Punktestände aller Spieler:innen inkludiert.

Zusammenarbeit

Scrum

Von der Zusammenarbeit im letzten Semester nahmen wir einige Learnings im Bezug auf Zeit- und Projektmanagement in dieses Semester mit. Wir nahmen uns von Anfang an vor, Scrum für unseren Arbeitsprozess in diesem Semester zu verwenden, um eine bessere Kontrolle über Deadlines, Arbeitsteilung, und To-Dos zu haben.

Wir starteten am Donnerstag, dem 7. März, mit unserem ersten zweiwöchigen Sprint. Das Sprint Planning und Sprint Review passierte demnach immer alle zwei Wochen während unserem wöchentlichen Meeting am Donnerstag.

Wir nutzten Jira, um Tickets zu erstellen und deren Status auf dem Kanban-Board zu verfolgen. Dieser Prozess erwies sich als äußerst hilfreich, nicht nur um unsere anfangs gesetzten Deadlines für individuelle Features einzuhalten, sondern auch in Bezug auf Kommunikation. Da nun auf einen Blick klar war, wer gerade woran arbeitete, konnten wir untereinander abhängige To-Dos besser abstimmen und Blockaden schnell an die richtige Person kommunizieren.

Außerdem erstellten wir Akzeptanzkriterien für die individuellen Tickets, um Missverständnisse dahingehend zu vermeiden, wann ein To-Do als abgeschlossen gelten konnte. Dieses Verfahren erwies sich als äußerst nützlich, auch um Details zu einzelnen Requirements festzuhalten (z.B. wie mit der Groß- und Kleinschreibung von Benutzernamen umgegangen werden sollte), sodass wir nicht versehentlich aneinander vorbeiarbeiteten. Auch die Organisation der Tickets in einzelne Epics war hilfreich, um schnell einen Überblick zu bekommen und zu behalten.

Die wöchentlichen Meetings nutzten wir, um einander zu unserem jeweiligen Stand zu informieren und um aktuelle Probleme und nächste Schritte zu besprechen. Außerdem nutzten wir die Meetings, um aktuelle Aufgaben zu besprechen, welche die Ausschreibungen betrafen, und trafen gemeinsame Entscheidungen zu gelieferten Designvorschlägen, Entwürfen, und mehr.

Ausschreibungen

Im Rahmen der Lehrveranstaltung Tun/Forschen/Gründen erstellten wir Ausschreibungen zu verschiedenen Aufgabenbereichen für Bevry. Diese umfassten Fotografie für Cocktail-, Marketing- und Portfoliofotos; Design zur Überarbeitung aller Screens für ein einheitliches visuelles Erscheinungsbild und Interaktionskonzept sowie für den Entwurf von Custom Icons; Sound Design für die Erstellung von Soundtracks und Sound Effects, vor allem für die Minigames; und Animation für eine Ladeanimation sowie für Animationen innerhalb der Minigames.

Um die Kommunikation für die Auftragnehmenden einfach zu gestalten, definierten wir die jeweiligen Auftraggeberinnen der Ausschreibung als primäre Kontaktperson für die Auftragnehmenden. Zusätzlich wurden alle Auftragnehmenden zum Jira-Projekt hinzugefügt und Tickets für ihre einzelnen Aufgaben erstellt, sodass alle einen Überblick über den aktuellen Stand des Projekts behalten konnten.

Anna: Fotografie

Die Zusammenarbeit mit Anna, unserer Fotografin, war insgesamt positiv. Mit ihr wurden Fotos von Cocktails für die App und Portfoliofotos der Gruppe erstellt.

Wir arbeiteten nur bei den Fotoshootings mit Anna in Person gemeinsam, während die Besprechung restlicher Anforderungen größtenteils online verlief. Dies führte manchmal zu Kommunikationsschwierigkeiten.

Ein großes Hindernis waren die Deadlines. Ursprünglich geplante Termine mussten verschoben werden und die Fotos wurden teilweise sehr verspätet zur Auswahl bereitgestellt, was wiederum zu spätem Erhalt der bearbeiteten Bilder führte. Trotz Schwierigkeiten gelang es uns, die notwendigsten Fotos bis zur Abgabe einzubinden.

Paul: Audio

Auch die Zusammenarbeit mit Paul für die Soundeffekte, verlief erfreulich. Paul hielt uns regelmäßig auf dem Laufenden, informierte über neue Entwicklungen und bat um Feedback, was den Prozess sehr transparent gestaltete.

Es gab jedoch einige chaotische Momente, besonders hinsichtlich der Deadlines und des Endprodukts. Diese waren größtenteils auf Verzögerungen bei den Minigames und anfängliche Unklarheiten in unserer Gruppe zurückzuführen. Wir waren uns zu Beginn nicht sicher, ob wir auch Sounds außerhalb der Games benötigen und welche das sein sollten.

Die Kommunikation erfolgte teilweise auch mit Elisa, die für die Animationen zuständig war. Besonders bei der Abstimmung zur “Spin the Wheel”-Animation und dem dazugehörigen Sound mussten wir eng zusammenarbeiten. Trotz der anfänglichen Herausforderungen haben die Soundeffekte und die Musik gut zu unseren Vorstellungen sowie den Animationen gepasst, und sie tragen erheblich zum gewünschten Spielgefühl bei.

Julia: Design

Die Zusammenarbeit mit Julia, unserer Grafikdesignerin, war sehr erfreulich. Sie hielt alle Deadlines ein und zeigte sich äußerst flexibel, um unseren Anforderungen gerecht zu werden.

Julia gestaltete sowohl die Screendesigns als auch die Icons für die App. Sie lieferte uns drei Entwürfe für die Screendesigns, aus denen wir einen Vorschlag auswählten. Anschließend designte sie alle Screens basierend auf unserem Feedback. Auch bei den Icons für die Gläser gab es Besprechungen und Änderungen, die schnell und zuverlässig eingearbeitet wurde.

Dank ihrer Pünktlichkeit und Anpassungsfähigkeit konnten wir die Grafiken rechtzeitig in die App integrieren.

Elisa: Animation

Dank Elisas Mitwirkung konnten wir die App mit einer Ladeanimation sowie mit Animationen für die Minigames aufwerten. Elisa lieferte für jede dieser Animationen mehrere Entwürfe und Designvorschläge, die zur Markenidentität von Bevry und zum bestehenden Erscheinungsbild passten.

Bezüglich grafischer Assets (vor allem für die neuen Gläser-Icons) und Abstimmung mit dem Sound Design für diese Animationen arbeitete sie auch mit Julia und Paul zusammen, was ohne Probleme funktionierte.

Elisa war über die gesamte Zusammenarbeit hinweg verlässlich, pünklich, und lieferte qualitativ hochwertige Arbeit. Auch als die Zeit vor der Projektevernissage knapp wurde und bei den Dateiexporten einige händische Korrekturen notwendig waren, konnten die fertigen Animationen dank der Flexibilität seitens Elisa noch rechtzeitig eingebunden werden.

Hürden und Schwierigkeiten

Organisation

Die Organisation gestaltete sich manchmal knifflig, vor allem wenn es darum ging, mit den Tun/Forschen/Gründen-Mitgliedern zusammenzuarbeiten. Wir mussten geeignete Deadlines finden, die sowohl mit ihren Ergebnissen als auch mit unseren eigenen Projekten harmonierten. Außerdem war es wichtig, klar abzustimmen, welche Aufgaben priorisiert werden sollten, bevor wir neue beginnen konnten. Die Kommunikation zwischen Backend und Frontend war ebenfalls entscheidend und erforderte eine genaue Koordination.

Umsetzung

Bei der Umsetzung stießen wir auf verschiedene Herausforderungen. Zum Beispiel machten uns die Minigames im Canvas einige Kopfschmerzen, insbesondere das Stoppen der GameLoop beim Verlassen der Seite und die richtige Anzeige von Animationen und Bildern. Auch das Timing und der Einbau von Animationen und Sound waren nicht immer einfach. Die Einrichtung des Mail-Servers für die E-Mail-Verifizierung erwies sich ebenfalls als komplex. Die Verwendung von Vuelidate zur Formularverifizierung erforderte genaue Aufmerksamkeit, ebenso wie das korrekte Positionieren von Stylingelementen aus den Screendesigns.

Teamwork

Im Teamwork gab es auch einige Herausforderungen zu bewältigen. Die Zusammenarbeit mit den Mitgliedern von Tun/Forschen/Gründen erforderte eine klare Kommunikation und eine klare Ansprechperson. Das regelmäßige Aktualisieren, wenn Aufgaben abgeschlossen waren, erwies sich als nützliche Praxis. Es war wichtig, die Aufgaben fair aufzuteilen und sicherzustellen, dass jedes Teammitglied die Möglichkeit hatte, an Aufgaben zu arbeiten, die sie interessierten. Wir mussten auch darauf achten, dass es keine Überschneidungen im Code gab, was eine kontinuierliche Kommunikation und die Nutzung von Branches im Versionskontrollsystem erforderte.

Personal Learnings

Sara

Ich arbeitete an verschiedenen Aufgaben im Frontend wie der Entwicklung von Filtern, der Implementierung des Barbestands und anderen Funktionen. Auch bei der Gestaltung der Minigames konnte ich ein wenig mitwirken.

Dieses Semester verwendeten wir Jira und Confluence, was das Projektmanagement erheblich erleichterte. Diese Tools halfen uns, Aufgaben effizient zu verteilen und den Überblick zu behalten. Obwohl es gegen Ende des Projekts etwas stressig wurde, konnten wir dank der guten Organisation die Arbeitsprozesse gut koordinieren.

Laura

Ähnlich wie im letzten Semester habe ich wieder am Backend mitgearbeitet und mein Wissen in diesem Bereich ausweiten können. Zusätzlich habe ich sehr viel an den Minigames mitgearbeitet, diese konzipiert, Spielregeln überlegt und schließlich umgesetzt. Bei der Umsetzung war ich besonders an der Game Logik und dem Setup beteiligt. Außerdem habe ich die Musik und Soundeffekte in der App eingebaut und mich darum gekümmert, dass diese an den richtigen Stellen abgespielt und pausiert werden. Durch das Benutzen von Jira und Confluence habe ich auch noch mehr im Punkt Organisation mitnehmen können. Unser Workflow war auch durch zusätzliche wöchentliche Meetings (Bevry Weekly) um einiges strukturierter und hat mir das Entwickeln neuer Skills im Bereich des Teamworks ermöglicht.

Sophia

Ich konnte in diesem Semester meine Programmierkenntnisse weiter vertiefen. Abgesehen von Frontend-Entwicklung war ich vor allem im Game Design und -Development involviert. Hier konnte ich auf meinen Game-Design-Kenntnissen aus dem Bachelorstudium aufbauen. Laura und ich nutzten häufig Pair Programming bei der Entwicklung der Minigames, wodurch ich ebenfalls meine Programmierkenntnisse verbessern und von ihr lernen konnte. Die Verwendung von Scrum war für mich zwar nicht komplett neu und war mir ein großes Anliegen für dieses Semester, aber erforderte eine gewisse Disziplin und Kommunikationsfähigkeiten, die mir für zukünftige Projekte von Nutzen sein werden. Die Tatsache, dass wir durch die Verwendung von Scrum so effizient waren und so viel umsetzen konnten, hat für mich bestätigt, wie wertvoll die Zeit ist, die in Projektmanagement investiert wird. Auch die Organisation und Koordination mit Elisa für die Animationen stellten sich als äußerst lehrreich heraus, und ich konnte viel über die Implementierung von Animationen im Webbereich dazulernen.

Vanessa

Durch meine Rolle im Projekt habe ich wertvolle persönliche Lernerfahrungen gesammelt, insbesondere im Bereich Frontend-Entwicklung und Designimplementation. Ich habe meine Fähigkeiten in Javascript und der Kommunikation mit dem Backend deutlich erweitert und gelernt, wie wichtig ein benutzerfreundliches und ansprechendes Design für den Erfolg einer Web-App ist. Die Umsetzung der neuen Features hat mir gezeigt, wie man komplexe Anforderungen in eine intuitive Benutzeroberfläche integriert. Darüber hinaus habe ich erneut auch gute Einblicke in die Sprint Planung gewonnen, was uns als Team dieses Semester sehr geholfen hat, die Arbeitsprozesse effizienter zu gestalten und die Teamarbeit zu koordinieren. Diese Erfahrungen haben nicht nur meine technischen Fähigkeiten gestärkt, sondern auch meine organisatorischen und kommunikativen Kompetenzen verbessert.

Katharina

Dieses Semester haben wir deutlich strukturierter gearbeitet, indem wir alle zwei Wochen Aufgaben zugewiesen haben. Das hat die Arbeit erleichtert und dafür gesorgt, dass kontinuierlich am Projekt gearbeitet wurde. Auch die wöchentlichen Treffen haben geholfen, den Fortschritt zu verfolgen und Probleme frühzeitig zu erkennen. Mit dem Deployment gab es gegen Ende einige Probleme, das hätten wir deutlich früher angehen sollen, um den Stress am Ende zu vermeiden. Dabei stellten wir fest, dass es Unterschiede zwischen der lokalen Entwicklung und der Live-Version auf unserer Domain bevry.app gab. Zum Beispiel funktionierten manche Backend-Calls plötzlich nicht mehr, Bilder wurden nicht angezeigt, und die Ladeanimation auf dem iPhone funktionierte nicht richtig. Auch für das Testing hätten wir mehr Zeit einplanen müssen, da dabei einige unerwartete Probleme auftraten.

Dennoch konnte ich in diesem Semester mehr Erfahrung in der Backend-Entwicklung sammeln und war auch in die Frontend-Entwicklung involviert. Ich half beispielsweise dabei, Julias Designs umzusetzen, die Glasicons einzubinden und kümmerte mich um die Ladeanimation. Backendseitig habe ich mich um die Shoppinglist, Substitutes und Ingredients gekümmert. Auch das Usermanagement habe ich ausgebaut und die E-Mail-Verifizierung ergänzt.

Alles in allem bin ich zufrieden mit dem, was wir erreicht haben, besonders da wir uns sehr viel vorgenommen hatten. Das haben wir vor allem der guten Kommunikation und Organisation während des Semesters zu verdanken. Jeder war motiviert und gab sich Mühe, seine persönlichen Sprintziele zu erreichen.

The post Bevry | Semesterprojekt SoSe24 appeared first on Mobile USTP MKL.

The Rise of Dark Mode

Dark mode’s rise in popularity can be attributed to its aesthetic appeal and functional benefits. It provides a visually striking alternative to traditional light modes, often perceived as more elegant and modern. Users increasingly seek customizable experiences, and dark mode offers a personalized touch, allowing for a more tailored user experience. This customization aligns with broader trends in user interface design, where personalization is key to enhancing user engagement and satisfaction. The ability to switch between light and dark themes allows users to adapt the interface to their preferences and environmental lighting conditions, further enhancing the user experience.

Benefits for Usability

Reduced Eye Strain

One of the most significant advantages of dark mode is its potential to reduce eye strain, especially in low-light conditions. According to research from the Nielsen Norman Group (NNG), darker interfaces can decrease the overall brightness and glare from screens, making it easier on the eyes during prolonged use. This is particularly beneficial for users who spend long hours on their devices, as it can reduce discomfort and eye fatigue. By reducing the amount of blue light emitted from screens, dark mode can help mitigate some of the adverse effects associated with longer screen time, such as digital eye strain and disrupted sleep patterns. This makes dark mode an attractive feature for users seeking a more comfortable and health-conscious digital experience.

Battery Efficiency

Another key benefit is improved battery life for devices with OLED or AMOLED screens. These screens can turn off individual pixels to display black, thereby consuming less power compared to light pixels. This results in significant energy savings when using dark mode, which is a considerable advantage for mobile users looking to extend their device’s battery life. By conserving battery life, dark mode not only enhances the user experience by reducing the frequency of charging but also supports the growing emphasis on energy efficiency and sustainability in technology design. This aspect of dark mode appeals to environmentally conscious users and those who prioritize long-lasting device performance.

Design Considerations

Contrast and Readability

Implementing dark mode effectively requires careful attention to contrast and readability. Poorly executed dark mode designs can lead to insufficient contrast between text and background, making it difficult for users to read content comfortably. The Nielsen Norman Group points out that suitable contrast ratios are crucial for readability and accessibility. Ensuring that text remains legible in dark mode involves selecting appropriate colors that provide enough contrast without causing eye strain. This often means using off-white or light grey text instead of pure white to reduce glare. Properly addressing these contrast issues is vital to maintain accessibility standards and ensure that all users, including those with visual impairments, can comfortably use the application.

Visual Hierarchy

Maintaining a clear visual hierarchy is essential in dark mode design. Designers must select color palettes that not only provide adequate contrast but also enhance the overall user interface. This involves careful use of color to differentiate between various UI elements and ensure that important information stands out. For example, lighter shades can be used for primary actions and highlights, while darker tones can serve as backgrounds to support visual separation. This thoughtful use of color can help guide the user’s attention to critical elements and actions, improving overall usability. A well-defined visual hierarchy also aids in creating an intuitive and efficient user experience, which is particularly important in complex applications where users need to navigate through multiple layers of information.

Implementation Challenges

Implementing dark mode is not without its challenges. Designers must ensure that all elements of the user interface, including icons, images, and interactive components, are optimized for dark backgrounds. This often involves creating alternative assets and conducting thorough testing across different devices and lighting conditions to ensure consistency. For instance, images with transparent backgrounds or drop shadows may need adjustments to look right in dark mode. Additionally, developers must address potential issues with text readability and contrast, ensuring that interactive elements remain visually distinct and accessible. Overcoming these challenges requires a comprehensive approach to design and development, incorporating feedback from user testing to refine the dark mode experience continually.

User Preferences and Adaptation

Despite its benefits, dark mode is not universally preferred. Some users find dark backgrounds less readable, particularly for text-heavy tasks. Therefore, it’s essential to provide options for users to switch between dark and light modes. Persistence of user preferences is also crucial; settings should be saved across sessions to ensure a seamless experience. Providing users with control over their visual environment is key to accommodating different needs and preferences. For instance, offering a scheduled dark mode that automatically activates based on the time of day can enhance usability and satisfaction. By allowing users to tailor their experience, applications can better meet individual preferences and situational requirements.

Context-Specific Usage

Dark mode may be particularly beneficial in specific contexts, such as during nighttime use or in dark environments where a bright screen can be disruptive. Users can appreciate the flexibility to adapt the interface to their current context, which can enhance their overall experience. For instance, using dark mode in a low-light environment can reduce screen glare and prevent eye strain, making it easier to focus on content. Additionally, dark mode can be advantageous for users who are sensitive to light or suffer from migraines, as it provides a more comfortable viewing experience. By understanding the various contexts in which dark mode can be beneficial, designers can create more user-centric and adaptable interfaces.

Conclusion

Dark mode offers numerous benefits, including reduced eye strain and improved battery efficiency, making it a valuable feature for enhancing mobile app usability and user experience. However, its successful implementation requires careful consideration of contrast, readability, and visual hierarchy to avoid potential errors. By addressing these challenges and incorporating user-centric design principles, designers can create inclusive and effective dark mode experiences that cater to a diverse range of user preferences.

Ultimately, the success of dark mode in enhancing usability and user experience relies on thoughtful design and a deep understanding of user needs. As mobile applications continue to evolve, dark mode stands out as a feature that, when implemented correctly, can significantly enhance the user experience in various contexts. By prioritizing user comfort, readability, and energy efficiency, designers can ensure that dark mode remains a valuable and well-loved feature in the ever-changing landscape of mobile app design.

References

Budiu, R. (2020, February 2). Dark Mode vs. Light Mode: Which Is Better? Nielsen Norman Group. https://www.nngroup.com/articles/dark-mode/

Kohler, T., & Zhang, A. (2023, August 27). Dark Mode: How Users Think about It and Issues to Avoid. Nielsen Norman Group. https://www.nngroup.com/articles/dark-mode-users-issues/

Dark Mode. (n.d.). Apple Developer Documentation. https://developer.apple.com/design/human-interface-guidelines/dark-mode

Material Design. (n.d.). Material Design. https://m2.material.io/design/color/dark-theme.html

Dark Mode: All the Pros and Cons to Consider. (2021, August 3). Linearity Blog. https://www.linearity.io/blog/dark-mode/

Trawiński, W. (2024, May 24). Dark mode — beyond basics. JavaScript Everyday. https://medium.com/javascript-everyday/dark-mode-beyond-basics-2651bfc6c1a7

Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript. (2024, March 25). Smashing Magazine. https://www.smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript/

Implementing Dark Mode in Web Applications. (2024, January 28). DEV Community. https://dev.to/bartzalewski/implementing-dark-mode-in-web-applications-4h31

‌

The post The Impact of Dark Mode on Mobile Usability and User Experience appeared first on Mobile USTP MKL.

Rollenverteilung

• Sara: Design, Frontend, Usertests
• Laura: Backend
• Sophia: Design, Frontend, Dokumentation, Usertests
• Vanessa: Design, Frontend, Organisation
• Katharina: Backend

Umgesetzte Funktionalitäten

Die technischen Funktionen der App drehen sich primär um das Erstellen, Teilen, und Entdecken von Cocktail-Rezepten aller Art. Grundsätzlich können nur registrierte und angemeldete Nutzer:innen die Rezeptsammlung sehen. Rezepte sind in Kategorien unterteilt, die ein zielgerichtetes Filtern ermöglichen. Mithilfe einer Suchleiste können Nutzer:innen ihre Suche zusätzlich verfeinern, indem sie nicht nur nach Kategorie, sondern auch nach Rezeptnamen oder Zutaten suchen können. Rezepte können von den Nutzer:innen, die sie erstellt haben, bearbeitet oder auch gelöscht werden.

Ebenfalls können Nutzer:innen Rezepte liken und so alle Lieblingsrezepte – ob es die eigenen sind oder von anderen Nutzer:innen erstellt – in einer Favoritenliste sammeln. Eine Bewertungsfunktion erlaubt es, Rezepten sowohl eine Sternebewertung zu verleihen als auch ein öffentliches Kommentar zu posten.

Sollte das Mischen eines Getränks mehrere Schritte umfassen, können diese einzeln gespeichert und in einer Step-by-Step Anleitung durchgeklickt werden. So können Nutzer:innen einem Rezept leicht folgen, ohne zwischendurch den Faden in seitenlangem Anleitungstext zu verlieren. Falls ein Rezept nur für die eigenen Augen bestimmt sein soll, kann es auch privat geschaltet werden.

Abgesehen von ihren geposteten Rezepten können Nutzer:innen auch ihr Profil anpassen und so ihre Individualität zum Ausdruck bringen. Dies beinhaltet das Hochladen und Ändern des Profilbilds sowie die Aktualisierung des Benutzernamens. Falls Nutzer:innen sich dafür entscheiden, Bevry nicht mehr zu nutzen, haben sie auch die Option, ihren Account zu löschen.

Geplante Funktionalitäten

Alle genannten Funktionen wurden für das Wintersemester geplant und auch umgesetzt. Als Ergänzung im nächsten Semester steht die Ausweitung von sozialen Features im Raum — von Umfragen und Multiplayer-Minispielen bis hin zu geteilten Einkaufslisten und Event-Planung (vgl. Wireframes). Auch der eigene Barbestand soll künftig festgehalten werden können. Darauf basierend sollen Nutzer:innen passende Rezeptvorschläge bekommen, deren Zutaten bereits vorhanden sind. Um die Benutzeroberfläche zusätzlich zu beleben, sind auch Animationen geplant, die beispielsweise beim Laden der Anwendung gezeigt werden sollen.

Technologien

Frontend

Zu Beginn unseres Projektes entschieden wir uns für die Nutzung von Vue.js als Frontend-Framework. Diese Entscheidung basiert auf der Flexibilität, Leistung und Einfachheit von Vue.js, was eine effiziente Entwicklung ermöglicht. Des Weiteren konnten wir in der LV “Advanced Web Programming” erste Einblicke in die Arbeit mit dem Framework gewinnen, was unsere Entscheidung unterstützte, Vue.js zu erlernen.

Die Integration von Vuetify als UI-Framework wurde aufgrund seiner ansprechenden und responsiven Komponenten getroffen. Durch die vorgegebenen Komponenten erleichterte uns Vuetify die Entwicklung einer konsistenten Benutzeroberfläche, wodurch wir insgesamt Zeit einsparen konnten.

Für das Zustandsmanagement wählten wir Pinia, eine State Management Library speziell für Vue.js. Pinia verwenden wir für unser gesamtes User Management (Login, Registrieren, Logout), um den Status des Nutzers abzuspeichern. Vue.js, Vuetify und Pinia bildeten insgesamt für uns eine leistungsstarke Kombination, die uns zu einem bislang erfolgreichen Projekt geführt hat.

Backend

Im Backend haben wir mit NestJS gearbeitet. Nachdem wir von Armin bereits eine Einführung bekommen haben, wollten wir uns mehr im Detail mit den Möglichkeiten von Nest auseinandersetzen und ein umfangreicheres Backend damit umsetzen.

Zusätzliche Packages, die wir benutzt haben, inkludieren TypeORM, um mit den Datenbank-Entities umzugehen, JWT und bcrypt für die Sicherheit bei Login und Registrierung und Swagger um OpenAPI zu nutzen. Mit OpenAPI konnten wir unsere Endpoints automatisch in Swagger anzeigen und die Zusammenarbeit zwischen Back- und Frontend Entwicklung up to date halten.

Hürden und Schwierigkeiten Frontend/Backend

Frontend

Im Frontend konnten wir zu Beginn unser bestehendes Projekt aus der LV “Advanced Web Programming” zur Hilfe nehmen, was das Aufsetzen erleichterte. Zuerst haben wir das Frontend ohne die Einbindung von Vuetify und Pinia aufgesetzt, in der Annahme, dass dies auch im Nachhinein noch funktionieren würde, diese hinzuzufügen. Leider hat das nicht ganz geklappt, und daher mussten wir das Frontend noch einmal neu aufsetzen. Dabei haben wir direkt ausgewählt, dass wir das Advanced Paket mit Vuetify, Routing und Pinia inkludiert haben möchten.

Die größte Herausforderung bestand im stetigen Herumprobieren und Durchtasten der Funktionalitäten und der Logik von Vue. Da das gesamte System für uns noch unbekannt war, war es notwendig, durch Probieren zum Ziel zu kommen. Wir haben die Views im Frontend-Team aufgeteilt und konnten daher alle separat arbeiten. Das war einerseits positiv, da man selbst für etwas verantwortlich war und selbst zum Ziel finden musste. Andererseits war es etwas schwierig, da dadurch nicht immer ein konsistentes und zusammenpassendes User Interface vorhanden war. Hinzu kam, dass uns lange nicht bewusst war, dass das Styling der einzelnen Views standardmäßig übergreifend auf alle Views Auswirkungen hat, wodurch wir uns manchmal in die Quere kamen.

Eine weitere Herausforderung bestand im Arbeiten mit den REST-Endpoints. Leider schafften wir es aus Zeitgründen nicht immer, dass das Backend-Team weit genug voraus war. Daher mussten wir des Öfteren die Anbindung und Verwendung der Endpoints überarbeiten, da es im Backend Änderungen gab, die nicht mehr zu unserem Stand im Frontend passten. In Zukunft werden wir definitiv darauf achten, dass Frontend und Backend nicht genau zeitgleich erstellt werden.

Backend

Bezogen auf das Backend, gab es im Laufe des Projekts einige Hindernisse. Beim Aufsetzen hatten wir ein paar Probleme die Verbindung mit der Datenbank herzustellen, was sich nach einer Umstellung auf einen anderen Server lösen ließ. Außerdem funktionierte die Verbindung mit dem Frontend nicht, bis wir ein Proxy einstellten, beziehungsweise beim späteren Deployment CORS aktiviert haben.

Um bereits am Anfang Rezepte, Kategorien, Zutaten und Glastypen zur Verfügung zu haben, wollten wir Daten aus einer API beziehen, was wir für die Zutaten umsetzen konnten. Da uns die Kategorien und Glastypen der API nicht gefallen haben und der Aufbau der Rezepte jedoch zu unterschiedlich zu unserem war (vorallem bezogen auf die Maßangaben), haben wir uns entschlossen diese nicht zu inkludieren, da sie mit unseren implementierten Features nicht wie gewollt funktioniert hätten.

Ansonsten mussten wir einiges in Bezug auf authorization, error handling und http codes lernen, was wir unserer Meinung nach schlussendlich gut bewältigen konnten. Abgesehen davon, gab es ein paar Bugs, die im lokalen Development nicht aufgefallen sind, jedoch im build vorkamen und noch bearbeitet werden mussten.

Usability Test Ergebnisse & Nächste Schritte

Ergebnisse der User Tests

Die Ergebnisse der Umfrage zeigen, dass die Mehrheit der Befragten eine positive Erfahrung beim Suchen und Posten von Cocktailrezepten in der App hatte.

• Beim Suchen gaben 3 Personen an, dass es “gut” war, während 7 Personen es als “sehr gut” bewerteten.
• Beim Posten eines Rezepts empfanden 6 Personen die Erfahrung als “gut“, während 4 Personen sie als “sehr gut” bezeichneten.

Die positiven Aspekte der App, die besonders gut ankamen, waren die Drink-Kategorien und das Design. Fünf Personen lobten die strukturierte Organisation mit Kategorien, die große Auswahl und die saisonalen Kategorien hervor. Andererseits betonten fünf Personen das Design, das als simpel, modern und mit ansprechenden Bildern beschrieben wurde.

Die Überraschungsfaktoren, die von den Befragten genannt wurden, umfassten eine positive Benutzererfahrung, die übersichtliche Gestaltung sowie das Lob für ein wunderschönes und “cooles” Logo.

Während der Tests wurden jedoch auch einige Bereiche identifiziert, die möglicherweise verbessert werden könnten:

Leere Input-Felder im Create Drink View sind leicht zu übersehen, und es gibt kein sichtbares User Feedback, wenn ein Formularfeld nicht ausgefüllt ist. Ein Verbesserungsvorschlag besteht darin, automatisch nach oben zu den leeren Feldern zu scrollen, damit Nutzer:innen den dort angezeigten Hilfstext sehen können. Zudem könnte die Markierung aller Pflichtfelder mit Asterisken eine klarere Orientierung bieten.

Der Like-Button in der Rezeptansicht ist schwer aufzufinden. Eine mögliche Verbesserung wäre, den Like-Button zu vergrößern oder prominenter zu platzieren, um die Nutzung zu erleichtern.

Es wurde beobachtet, dass Nutzer:innen zuerst versuchen, den Nutzernamen im Profile View durch Tippen zu bearbeiten. Um diese Handlung intuitiver zu gestalten, könnte das Edit-Icon direkt bei den Nutzernamen angezeigt werden, sodass Nutzer:innen nicht zuerst in den Settings-View wechseln müssen.

Einige Nutzer:innen meldeten, dass die Step-Anzahl ab dem ersten Step im Create Drink View vereinzelt nicht korrekt ist. Als mögliche Verbesserung könnte die Step-Anzahl beim Posten immer automatisch zurückgesetzt werden.

Ein weiterer identifizierter Punkt ist ein Serverfehler, der auftritt, wenn Nutzer:innen versuchen, einen Feedback-Kommentar mit Emojis zu posten. Als Lösung könnte eine Anpassung erfolgen, um die korrekte Codierung von Emojis zu ermöglichen.

Net Promoter Score (NPS)

Im Laufe der User Tests fragten wir außerdem den Net Promoter Score (NPS) ab. Das ist die Kennzahl, die die Kundenloyalität gegenüber einem Produkt, einer Dienstleistung oder einer Marke misst. Er wird durch eine einfache Umfrage ermittelt, bei der die Teilnehmer gebeten werden, auf einer Skala von 0 bis 10 anzugeben, wie wahrscheinlich es ist, dass sie das Produkt, die Dienstleistung oder die Marke an Freunde oder Kollegen weiterempfehlen würden.

Die Berechnung des NPS erfolgt durch die Klassifizierung der Teilnehmer in drei Gruppen:

1. Promotoren (Bewertung 9-10): Personen, die das Produkt oder die Dienstleistung sehr positiv bewerten und wahrscheinlich weiterempfehlen würden.
2. Indifferent (Bewertung 7-8): Personen, die neutral sind und nicht besonders begeistert oder enttäuscht von dem Produkt oder der Dienstleistung.
3. Detraktoren (Bewertung 0-6): Personen, die das Produkt oder die Dienstleistung negativ bewerten und es wahrscheinlich nicht weiterempfehlen würden.

Der NPS wird dann berechnet, indem der Prozentsatz der Detraktoren von dem Prozentsatz der Promotoren subtrahiert wird. Im Falle unserer User Tests:
NPS = (Prozentsatz der Promotoren) – (Prozentsatz der Detraktoren) = 70% – 10% = 60%

Ein NPS von 60 wird als “gut” bewertet und deutet darauf hin, dass die Mehrheit der Teilnehmer das Produkt oder die Dienstleistung positiv wahrnimmt und wahrscheinlich bereit ist, es weiterzuempfehlen. Ein höherer NPS deutet in der Regel auf eine stärkere Kundenloyalität und Zufriedenheit hin.

Nächste Schritte

Auf dem Weg zur Weiterentwicklung unserer App stehen einige praktische Schritte an. Basierend auf den User Tests liegt die höchste Priorität bei den nächsten Schritten zur Verbesserung unserer App in zwei zentralen Bereichen:

Rezepte Posten

• Implementierung eines verbesserten Bild Upload Feedbacks, um die Benutzererfahrung beim Hochladen von Rezeptbildern zu optimieren.
• Entwicklung einer effizienteren Suchfunktion für Zutaten, um das Anlegen von Rezepten zu erleichtern.
• Klare Anpassung der Bezeichnung von “Servings” zu “Number of Servings” für transparentere Rezeptangaben.
• Vergrößerung der Abstände oben und unten im Rezept-Posting-Bereich, um die Sichtbarkeit der Buttons am Rand des Bildschirms zu verbessern.
• Besseres und leichter Sichtbares Feedback, beim Ausfüllen und Fehlender Eingabe der Input Felder.
• Anpassung um die korrekte Codierung von Emojis.

User Management

• Deutliche Verbesserung der Sichtbarkeit und Unterscheidung zwischen dem Delete Account- und dem Logout-Button durch erhöhten Abstand.
• Integration von zusätzlichem Feedback während des Registrierungsvorgangs, um einen transparenten und unterstützenden Prozess für neue Benutzer:innen zu gewährleisten.
• Benutzernamen ändern intuitiver machen, indem User den Namen direkt im Profil ändern können.

Abgesehen von den Ergebnissen der User Tests nehmen wir uns vor, das Styling zu vereinheitlichen, Filter-Funktion zu integrieren, eine Umrechnungsmöglichkeit für die Einheiten zu implementieren und den Code aufzuräumen. In der Hektik der Abgabe haben wir einige Dinge vielleicht etwas eilig erledigt, und es gibt Raum für Verbesserungen.

Weitere Funktionen für die Zukunft

Wir haben bereits einige weitere Ideen für zukünftige Funktionen skizziert. Wir wollen vor allem den sozialen Aspekt der App durch verschiedenste Gruppenfeatures ausbauen. Darunter Multiplayer-Minispiele, einen Eventplaner, Abstimmungsmöglichkeiten für Rezepte und Sammlungen.

Weitere Ideen im Design Bereich wäre die Einbindung von Animationen und Custom Icons, um der App mehr Dynamik zu verleihen – wie zum Beispiel bei einem Ladebildschirm.

Außerdem beabsichtigen wir fest, eine Reporting-Funktion zu implementieren, die es den Nutzern ermöglicht, bestimmte Inhalte zu melden.

Personal Learnings

Sara

Ich konnte jede Menge Erfahrungen im Bereich Frontend mit Vue und Vuetify sammeln. Mein Fokus lag dabei vor allem auf den Seiten für Login, Registrierung, Dashboard und den Kategorien sowie der Suchleiste. Die Herausforderungen während der Entwicklungsphase waren nicht zu unterschätzen. Frontend-Umsetzung verlangte nicht nur Verständnis für Design, sondern auch technisches Know-how.

Die Projektvernissage war ein Highlight für mich. Direktes Feedback von externen Personen zu bekommen gab wertvolle Einblicke für mögliche Verbesserungen. Sophia und ich führten außerdem Nutzertests mit vereinzelten Personen am Stand durch und konnten somit die Verbesserungen noch genauer definieren. Die App durch die Augen potenzieller Nutzer:innen zu sehen, half uns, sowohl Stärken als auch Schwächen zu erkennen und zukünftige Entwicklungen zu optimieren.

Die Erfahrung mit Bevry hat definitiv meine Programmier-Fähigkeiten verbessert und auch wenn es teilweise stressig war am Projekt zu arbeiten, freue ich mich die App in den nächsten Semestern weiter auszubauen.

Laura

Da meine Aufgabe im Backend Development war, habe ich mich besonders viel mit NestJS auseinandergesetzt. Hierbei habe ich nicht nur den Umgang mit Decorators vertieft, sondern auch besonders viel Zeit in das richtige Error Handling gesteckt. Zum Anfang des Projektes hatte ich keine Ahnung von http Codes und in welchen Fällen, man welche einsetzt, was sich im Laufe des Projektes stark geändert hat. Auch wenn ich sicher noch kein Experte bin, kann ich behaupten Fehlercodes jetzt viel besser zu verstehen und für mich persönlich einen logischen Aufbau gefunden zu haben.

Außerdem habe ich mich tiefer mit der API beschäftigt. Nach anfangs händisch geschriebenen Endpoints, die ich auch mehrmals überarbeitet habe, habe ich mich außerdem mit OpenAPI beschäftigt und dem automatischen Generieren von Swagger, was im Laufe der Entwicklung sehr nützlich war, um Echtzeit-Änderungen im Code auch so fürs Frontend darzustellen.

Obwohl das Projekt damit angefangen hat, dass ich vor allem nur Teil des Backend-Developments geworden bin, da ich es mir von unseren Mitgliedern noch am ehesten vorstellen konnte, bin ich nun sehr froh die Verantwortung dafür übernommen zu haben. Ich habe mich technisch sehr weiterbilden können und auch einiges im Bereich des User Managements und der Authentifizierung lernen können.

Auch wenn der Start, nicht nur für mich, sondern ich denke für die ganze Gruppe, nicht der leichteste war, freue ich mich, dass wir so eine gute Grundbasis bilden konnten, an der wir im nächsten Semester gut aufbauen können.

Sophia

Im Rahmen dieses Projekts war ich hauptsächlich für das Frontend der Rezeptdetailansicht, der Rezeptanleitung, der Einstellungen-Übersicht und der Seite zum Bearbeiten des Profilbilds und Benutzernamens zuständig. Ich hatte zuvor nur oberflächliche Erfahrung mit Vue und konnte dahingehend meine Kenntnisse deutlich vertiefen. Mit Vuetify hatte ich zuvor noch nie gearbeitet, aber ich konnte mich schnell damit anfreunden. Da ich meinen persönlichen Fokus im Laufe des Bachelorstudiums vorrangig auf UX/UI-Design gesetzt hatte, fühlte ich mich in Sachen Programmierung etwas „aus der Übung“, konnte aber nun wieder in Schwung kommen. Ich konnte sowohl meine Programmierkenntnisse verbessern als auch tiefergehende Erfahrungen im Umgang mit Gitlab und Git sammeln, da ich zuvor nie mit so vielen Gruppenmitgliedern an einem Repository gearbeitet hatte.

Ich kümmerte mich außerdem darum, ein Ticketsystem und einen zentralen Ort zur Dokumentation aufzusetzen. Wir nutzten Jira, um unsere Aufgaben aufzuteilen und den Fortschritt zu verfolgen. In Confluence dokumentierten wir unter anderem Aufgabenaufteilungen und Testdesign und -auswertung für eine erste Runde von Usability-Tests.

Sara und ich führten während der Projektevernissage Usability-Tests durch, wodurch wir wertvolles Feedback und frische Perspektiven zu unserem Projekt sammeln konnten. Während sich einige unserer Hypothesen und bekannten Probleme bestätigten, war es zudem spannend, auch neue Themen aufzudecken, an die wir noch gar nicht gedacht hatten. Die Auswertung zeigte aber im Großen und Ganzen ein sehr positives Bild von den gesammelten Eindrücken.

Im Großen und Ganzen bin ich zufrieden mit dem, was wir in der Zeit, die wir hatten, erreicht haben. Der Projektstart war mit Beginn des Masterstudiums etwas verzögert, aber wir konnten dennoch in kurzer Zeit ein umfangreiches Projekt auf die Beine stellen, und ich bin schon gespannt darauf, wie wir im nächsten Semester darauf aufbauen können.

Vanessa

Ich habe mich bislang nur einmal intensiv mit einem Framework auseinandergesetzt, und das war im Projektsemester des Bachelors mit Angular. Damals beschränkten sich meine Hauptaufgaben auf HTML und CSS. In diesem Projekt war ich Teil des Frontend-Teams, und mein Fokus lag vor allem auf den Seiten für das Anzeigen aller Rezepte, das Anzeigen der favorisierten Rezepte, das Anlegen und Bearbeiten von Rezepten sowie dem Benutzerprofil. Nebenbei kümmerte ich mich auch um organisatorische Aufgaben wie das Vereinbaren von Sync-Meetings und das Setzen von Meilensteinen.

In Bezug auf das Programmieren war vor allem das Anlegen und Bearbeiten von Rezepten für mich eine riesige Herausforderung. Ich hatte noch keine Erfahrung mit der Verwendung von Vue oder REST-Endpunkten, und meine JavaScript-Kenntnisse beschränkten sich auf das Notwendigste. Am Ende dieses Semesters kann ich jedoch stolz sagen, dass ich sehr viel Neues dazulernen konnte und mittlerweile ein viel größeres Verständnis in der Frontend-Entwicklung habe.

Mein Highlight stellte die Projektvernissage dar, die am Ende viel schneller kam, als wir anfangs dachten. Zwischenzeitlich bangten wir alle, ob wir es schaffen würden, alle geplanten Funktionalitäten umzusetzen. Am Ende schafften wir es jedoch, unser Ziel am Tag der Vernissage zu erreichen, und das Feedback von den Besuchern unseres Projektstandes hat uns definitiv gezeigt, dass der Aufwand es wert war. Ich freue mich, dass ich durch dieses Projekt so viel Neues dazulernen konnte und bin schon gespannt, wie wir dieses Projekt im kommenden Semester weiter ausbauen werden.

Katharina

Ich war mit Laura für die Backend-Programmierung zuständig und habe mich um die Umsetzung der Rezepte gekümmert. Da ich vorher noch keine Erfahrung mit NestJS hatte und meine Backend-Kenntnisse überschaubar waren, wollte ich mich der Herausforderung stellen, meine Komfortzone im Frontend zu verlassen und mich mit der Backendentwicklung auseinander zu setzen.

Meine bisherigen Erfahrungen beschränkten sich auf PHP und das manuelle Verfassen von SQL-Anfragen. Es war interessant zu sehen, wie unterschiedlich NestJS im Vergleich zu PHP ist. So konnte ich mittels TypeORM viel komfortabler und weniger Fehleranfällig Datenbankoperationen erstellen. Bei künftigen Backend-Projekten würde ich definitiv wieder NestJS in Betracht ziehen.

Vor dem eigentlichen Programmierbeginn erstellten wir ein Entity-Relationship-Diagramm und dokumentierten die Endpunkte in Swagger. Diese Erfahrung war neu für mich, da ich zuvor noch nie eine Datenbankstruktur geplant oder mit Swagger gearbeitet hatte. Armin wies uns darauf hin, dass wir mithilfe von OpenAPI die Swagger-Dokumentation automatisch generieren können, was sich als äußerst hilfreich erwies, um einen klaren Überblick über alle Endpunkte zu behalten. Insbesondere für die Frontend-Entwickler, um stets auf dem neuesten Stand zu sein. In diesem Semester war es leider nicht immer möglich, den Frontendentwicklern vorauszusein. Teilweise mussten sie mit Beispieldaten arbeiten oder Änderungen aufgrund sich ändernder Endpoints vornehmen. Wir streben an, dieses Problem in Zukunft zu verbessern, insbesondere da das Grundgerüst nun endlich steht.

Das Projekt war meine erste Gelegenheit, mich intensiver mit Backend-Entwicklung auseinanderzusetzen und eine Anwendung von Grund auf mit sowohl Frontend als auch Backend zu entwickeln. Das Projekt hat mir neues Selbstvertrauen gegeben, indem es mir gezeigt hat, dass man mit dem richtigen Team innerhalb kurzer Zeit schon einiges schaffen kann.

Abschließende Gruppenreflexion

Jedes Mitglied unseres Teams konnte individuelle Lernerfahrungen sammeln – sei es durch die Vertiefung von Frontend-Kenntnissen oder die erfolgreiche Bewältigung von Backend-Herausforderungen. Diese Vielfalt an Erfahrungen hat nicht nur unsere technischen Fähigkeiten verbessert, sondern auch die Stärkung der Teamarbeit. Neben der Entwicklung einer funktionsfähigen Webanwendung haben wir gelernt, wie entscheidend klare Kommunikation und effektive Teamkoordination sind. Die enge Zusammenarbeit ermöglichte es uns, Schwierigkeiten zu überwinden und auf das Erreichte stolz zurückzublicken. Die positiven Rückmeldungen aus den User-Tests, wie auch der gute Net Promoter Score stärken unsere Motivation für künftige Entwicklungen. Wir freuen uns darauf, Bevry im nächsten Semester weiter zu verbessern, zusätzliche Funktionen zu integrieren und hoffen, viele unserer Ideen, insbesondere im Bereich der sozialen Features, erfolgreich umzusetzen.

The post Bevry | Semesterprojekt WS23 appeared first on Mobile USTP MKL.

What are design patterns?

Design patterns are standardized, reusable solutions to common software design challenges that developers encounter during the application development process. These patterns utilize best practices, providing an effective way to address recurring problems in a structured manner. Acting as templates for solving specific design issues, design patterns contribute to the creation of maintainable, scalable, and efficient software. They offer a shared vocabulary and a set of well-established solutions that developers can use to enhance the architecture and organization of their code.

Singleton Pattern

The Singleton pattern is a fundamental design strategy frequently employed in scenarios where a single instance of a class needs to be shared across various modules or components. By restricting instantiation to a sole object, this pattern ensures global access and promotes consistency in state management throughout the application. The example showcases a database connection class, highlighting how to implement this pattern and create a single instance shared across the application.

const databaseSingleton = (() => {
  let instance;

  const createInstance = () => {
    const database = new Database();
    return database;
  };

  return {
    getInstance: () => {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();

class Database {
  constructor() {
    console.log("Creating a new database connection");
  }
}

const db1 = databaseSingleton.getInstance();
const db2 = databaseSingleton.getInstance();

console.log(db1 === db2); // Output: true

Observer Pattern

The Observer pattern supports one-to-many relationships between objects, commonly used in event-driven architectures. In Node.js, the built-in EventEmitter module seamlessly implements this pattern. It allows subjects to notify their dependents (observers) of any state changes, so they can react dynamically to changes in the subject, enabling a scalable architecture. The example demonstrates an EventObserver Class, acting as a subject, and the observerA and observerB functions, which are the observers. The subject keeps track of all its subscribers and when the broadcast method gets called, it sends data to each subscriber/observer.

class EventObserver {
  constructor() {
    this.observers = [];
  }

  subscribe(fn) {
    this.observers.push(fn);
  }

  unsubscribe(fn) {
    this.observers = this.observers.filter((subscriber) => subscriber !== fn);
  }

  broadcast(data) {
    this.observers.forEach((subscriber) => subscriber(data));
  }
}

const observer = new EventObserver();

const observerA = (data) => console.log(`Observer A: ${data}`);
const observerB = (data) => console.log(`Observer B: ${data}`);

observer.subscribe(observerA);
observer.subscribe(observerB);

observer.broadcast("Hello, Observers!");

Factory Pattern

The Factory pattern provides a flexible mechanism for creating objects without specifying their exact classes. It allows subclasses to determine the instantiated classes, enabling dynamic object creation at runtime. This proves valuable in scenarios where multiple implementations of an interface exist or when objects need to be created based on specific conditions or configurations. The example provides a vehicleFactory class, which uses a parameter called “type” to either return a new object of the Car or Truck class. Because the vehicleFactory is a central point of controlling the creation of objects, it simplifies adding or removing vehicles.

function vehicleFactory(type) {
  if (type === "car") {
    return new Car();
  } else if (type === "truck") {
    return new Truck();
  } else {
    throw new Error(`Unsupported vehicle type: ${type}`);
  }
}

class Car {
  drive() {
    console.log("Driving a car");
  }
}

class Truck {
  drive() {
    console.log("Driving a truck");
  }
}

const car = vehicleFactory("car");
car.drive(); // Output: Driving a car

const truck = vehicleFactory("truck");
truck.drive(); // Output: Driving a truck

Middleware Pattern

Prominently used in web frameworks like Express, the Middleware pattern orchestrates a chain of functions to handle incoming requests. This modular approach enhances the extensibility and maintainability of code, allowing developers to organize code efficiently and to process requests sequentially. The example demonstrates what a basic Middleware pattern can look like and when the according methods are called.

const express = require('express');
const app = express();

app.use((req, res, next) => {
  console.log('Middleware 1');
  next();
});

app.use((req, res, next) => {
  console.log('Middleware 2');
  next();
});

app.get('/', (req, res) => {
  res.send('Hello, world!');
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

/*
When the / route is accessed, the output will be:

Middleware 1
Middleware 2

*/

Conclusion

In summary, design patterns serve as a set of best practices and solutions for recurring problems in software development. By understanding and implementing these patterns, developers can create well-organized, efficient, and maintainable code. These patterns act as reliable guides, streamlining the development process and contributing to the creation of robust and scalable Node.js applications. They offer valuable strategies for improving code structure, scalability, and maintainability. Whether you’re building a simple web server or a complex application, using these patterns will contribute to more organized and efficient code.

References

Kumar, S. (2023, August 15). Design patterns in Node.js. Medium. https://medium.com/@techsuneel99/design-patterns-in-node-js-31211904903e

Sharma, M. (2023, June 29). Design patterns in Node.js. Medium. https://medium.com/@manish90/design-patterns-in-node-js-9b0daab4fa5c

Doglio, F. (2023, July 24). A guide to node.js design patterns. LogRocket Blog. https://blog.logrocket.com/guide-node-js-design-patterns/

Rajchevski, K. (2023, October 5). A guide to node.js design patterns. Bugpilot Technical Guides. https://www.bugpilot.io/guides/en/a-guide-to-nodejs-design-patterns-6f1e

4 design patterns in node.js you should know. JavaScript Today Blog. (2023, February 12). https://blog.javascripttoday.com/blog/4-design-patterns-in-node/

Fundamental node.js design patterns. RisingStack Engineering. (2023, May 10). https://blog.risingstack.com/fundamental-node-js-design-patterns/

The 4 creational design patterns in node.js you should know. RSS. (n.d.). https://daily.dev/blog/the-4-creational-design-patterns-in-node-js-you-should-know

The post Design Patterns in Node.js appeared first on Mobile USTP MKL.

1 Introduction

Since mobile devices are commonly used in everyday life, there is a need for adapting data visualizations for smaller devices to make the communication and exploration of data possible, not only on desktops and laptops, but also on the go [1]. The global development of accessing the web more via mobile devices than via desktops supports the importance of prioritizing mobile development in all areas, including data visualization [2]. There are many use cases which exclusively call for visualization on smartphones, tablets, and other mobile devices, like tracking one’s health [3], second screen applications [4], electric vehicle maintenance [5] or ca­sual information visualization [6]. Even though there has been the need and opportunity for providing visualization content specifically on mobile devices, there still is a lack of proper research regarding problems when it comes to mobile visualization. Efforts have been made to enhance usable, mobile-friendly websites and content, e.g. the trend towards mobile-first design, but all these solutions focus on layout and design, while visualization in particular is left unaddressed [2].

2 Significance of Data Visualization

Data is becoming more and more valuable, even though it’s becoming easier and more affordable to col­lect large amounts of it rapidly. However, a large number of raw data only result in an overload of information, which is overwhelming rather than useful. Thus, it is vital to use collected data in a way to gain insights that, in consequence, can be used further to develop and advance all kinds of processes or investigations [7].

To achieve the goal of gaining insights, visual channels can be used to facilitate better and faster understanding. It’s extremely difficult for humans to detect patterns in tables full of numbers and words, but visual representa­tions, like bar charts or other visualizations, can be easily interpreted [7], [8]. Thereby, the goal of information vi­sualization is not replacing people in the process of data analyzing and interpreting, but rather supporting them in fulfilling their tasks. Visualizations should enhance the ability of understanding information and foster methods of exploring and investigating [9].

3 Why Visualize Data on Mobile Devices?

Even though data visualization started out as a way of understanding data mostly targeted towards researchers and experts, the usage of visualization technology is becoming more and more integrated into everyday life. It can be used in fields of communication, entertain­ment and productivity [10], health [3], or for mundane things such as emails, music and photo collections [6]. Along with this development, mobile devices and their functionalities are advancing even more rapidly. This has caused mobile devices to become more affordable, which in turn means they are a medium that can be used to reach large amounts of people [1], [3], [4], [11]. Moreover, using mobile devices offers the opportunity of accessing information visualization anywhere and at any time, therefore making it more accessible and flexible than using desktops [10], [12], [13].

With increasingly better hardware and performance in smartphones, it is possible to fulfill more complex tasks, enabling more effective visualizations [12], [14]. This also includes the possibility of using them for a wide variety of applications, e.g. all kinds of use cases where the current location of the user is crucial [15]. Another added value of visualizing data on mobile devices is the option of using integrated features like sound, touch interaction and feedback via vibrations [10].

4 Challenges in Mobile Visualization

Even though visualizing data on mobile devices is becoming more and more significant, there are still unsolved problems when it comes to displaying visu­alizations on them. There are several conflicts with the hardware of mobile devices, in comparison to desktops or laptops, as well as a lack of standardized and tested methods directed towards mobile visualization specifi­cally.

4.1 Limited Displays

The biggest problem when it comes to displaying data visualizations on mobile devices, is the screen size. Mobile devices, especially smartphones, have signifi­cantly smaller screens and lower resolutions compared to desktops [4], [10], [13]–[19]. Not only are the screens smaller, but they additionally have a different height to width ratio, making the layout completely different to that of desktop screens [13].

4.2 Hardware Restrictions

Although mobile devices are developing at a high speed and their hardware is improving steadily, they still cannot be compared to the performance of a desktop. Processing, battery power, graphic hardware, bandwidth, memory and storage are some of the components that get in the way of implementing as powerful visualizations as for desktops [13]–[15], [18].

4.4 Difficulty of Transfer from Desktop

There are many problems concerning the layout that especially arise when visualizations are simply trans­ferred from desktop applications to mobile ones. Visual encodings are broken, elements are out of the viewport and therefore not visible. Other elements can be overlap­ping and cluttered or texts too small to read. Oftentimes the layout gets completely distorted or unwanted white space can appear. Especially when SVGs are used, which are mostly present in web applications, scaling items down is not as easy as it is when working with HTML alone [2].

4.5 Variety of Devices

A similar problem persists for desktop applications, but the difference in devices is even larger when it comes to mobile devices. Not only is there a bigger variety of screen sizes, there are many different operating systems as well. Each device has different levels of performance and computational capability as well, which are hard to factor into development. But the biggest problem is the different forms of input often specific to each device [13], [15], [20].

4.6 Different Types of Input

While desktops usually have mouses and keyboards as fixed input devices, mobile devices do not have those and therefore make it more difficult to properly include in­teraction in visualizations, especially on smaller screens [13], [15], [17]. Virtual keyboards or hand-writing mech­anisms usually do not include the full range of inputs and the lack of mouses, track pads or similar components makes it difficult to clearly point or click on a data point. Usually users only interact with their mobile devices by using one hand’s thumb and apart from clicking and dragging, there are only some rather unfamiliar options for input like cameras or microjoysticks [13], [15].

4.7 Unpredictable Environment

Even though the mobility and flexibility of mobile devices is an advantage, it also has some downsides. Because mobile devices can be taken and used anywhere, it can not be foreseen in which environments data visu­alizations will be displayed. That includes the auditory environment, which can limit the use of audio in appli­cations, as well as the lighting conditions, which need to be taken into consideration when checking a graph’s visibility. But most of all, because mobile devices can be taken anywhere, they can also be used while doing something else, as a form of multi-tasking. So there are not only physical distractions but also distractions in the user’s thoughts when switching between tasks. Thus, their attention span is influenced and limited, resulting in a need for more guidance and support [13]–[15].

4.8 Lack of Visualization Resources

Since data visualization has mostly been focused on desktop applications, it is difficult to find suitable tools and resources for mobile device development. Available tools and libraries oftentimes are not free and/or acces­sible to other developers and are very limited in their functionalities. Although there are some techniques that are provided, they usually do not cover all eventualities and due to that are oftentimes not a viable option for a full-fledged mobile visualization [13], [15].

5 Approaches to Solving the Problems

To solve the stated challenges when it comes to visu­alizing on mobile devices, several different approaches in existing research can be found. They range from trial and error to completely automated mechanisms and try to tackle the problems from different perspectives.

5.1 Manually Trying to Adapt

Many techniques proposed in research deal with man­ually adapting visualizations for mobile devices. How­ever, there are different methods within this approach.

1) Cross-Platform Solutions: Some of the solutions deal with making visualizations that should work cross­platform, for example by using D3.js to dynamically adapt displayed content. Using Responsive Web Design with media queries, flexbox or Adaptive Web Design with multiple curated alternatives for different screens are also options [2], [11].

2) Mobile-Specific Solutions: Other methods focus solely on mobile visualization and the already mentioned challenges specifically concerning mobile devices. Some typical solutions used on desktop, like overview and de­tail or focus and context, may not perform as effectively on mobile devices. Thus, there need to be other solutions for mobile devices. One problem with smaller screens is the limitations of the viewport which leads to loss of context. To preserve the context, relevant information can be indicated in other ways, like indicating some hidden points on a map at the edge or having a miniature version of the map to navigate through the zoomed in version [13].

Another essential point is putting more focus on interactions. Since the screen space is limited, interaction can be used to balance this problem out. Further, one­handed interactions are quite intuitive for users who are used to smartphones [4], [13]. Some interactions include scrolling, panning or zooming by touching, tapping, dragging or pinching, but need to be handled carefully to avoid losing the overview [12], [14], [16].

Lastly, it is difficult to foresee the environment in which mobile devices will be used, but some effort can be made to adapt for different circumstances. Analyzing different contexts and thinking about the user during the design process, can assure the avoidance of errors [14].

5.2 Making a Prototype and Evaluating It

Another approach that seems to be used oftentimes when the focus isn’t necessarily on good mobile adap­tation, but rather on a specific use case, a prototype is implemented and simply evaluated with users. This method usually includes much trial and error [2]. Some examples can be found in [3], [5] and [19].

5.3 Automated Adaptation

To properly transfer visualizations from desktops to mobile devices or to avoid overcluttering, there are different tools that were developed to tackle these is­sues. While some techniques can use machine learning [2], other methods are more rule-based and try to use generalized rules to adapt visualizations [18], [20].

Tools that focus on adjusting from desktops should help avoiding the time-consuming process of manually tailoring the visualizations for mobile devices. However, since there are several problems that need to be solved in the process, some may be left not optimally solved. These methods appear to be a promising option but require further development to be seamlessly integrated into normal workflows [2].

5.4 Other Approaches

Apart from these more frequently seen solutions, there are some other more rare approaches that can be found.

1) Evaluating Existing Methods: One method focuses on evaluating existing research and products. For ex­ample Blumenstein et al. [1] deal with finding suit­able evaluation methods for mobile visualization and comparing them to find existing, tested methods that could be used. Paelke et al. [15] focus on creating a repository for different visualization techniques suitable for use in mobile devices. Although they started by focusing on static visualizations, the plan would be to expand the repository to include interaction techniques as well. To achieve that goal, they collected, analyzed and categorized different visualization methods and evaluated them based on functional capabilities as well as usability.

2) Remote Rendering: Another solution by Krone et al. [12] explores the possibilities of rendering visual­izations remotely on a desktop before transferring the finished render to the mobile devices. This approach solves the problem of worse graphic hardware, but has the disadvantage of needing large amounts of data transfer.

3) Workshops: Brainstorming with a group of domain experts and trying to work on new solutions is another method, explored by Lee et al. [17]. The goal here would be to tackle specific challenges in a group of capable people.

6. Conclusion

Based on the presented existing research and ap­proaches concerning mobile devices, it can be said that there is a definite need for data visualization on mobile devices. Solely due to the widespread availability of mo­bile devices and their significant advantage of enabling use anywhere at any time, there needs to be a focus on developing solutions for mobile devices. Apart from that, visualization is moving into the direction of being used in all forms of contexts and is beginning to be broadly used by laypeople and larger audiences.

However, there are many challenges that come with developing visualizations for mobile devices. The small screens, as well as other hardware and software limi­tations prevent the use of proven approaches used in desktop visualizations. The addition of unpredictable environments of use and lack of user attention bring even more problems.

To solve these challenges, there are some existing approaches to try and find suitable solutions for easier and more appropriate design options. Although there are many different perspectives involved, no definite universal solution can be found yet. There is a lack of widely tested solutions and a need for more research in the field of mobile visualization to encourage more wide-spread access to visualizations.

References

[1] K. Blumenstein, C. Niederer, M. Wagner, G. Schmiedl, A. Rind, and W. Aigner, “Evaluating Information Visualization on Mo­bile Devices: Gaps and Challenges in the Empirical Evaluation Design Space,” in Proceedings of the Sixth Workshop on Beyond Time and Errors on Novel Evaluation Methods for Visualization, (Baltimore MD USA), pp. 125–132, ACM, Oct. 2016.

[2] A. Wu, W. Tong, T. Dwyer, B. Lee, P. Isenberg, and H. Qu, “MobileVisFixer: Tailoring Web Visualizations for Mobile Phones Leveraging an Explainable Reinforcement Learning Framework,” IEEE Transactions on Visualization and Computer Graphics, vol. 27, pp. 464–474, Feb. 2021.

[3] J. Meyer, A. Kazakova, M. B¨using, and S. Boll, “Visualization of Complex Health Data on Mobile Devices,” in Proceedings of the 2016 ACM Workshop on Multimedia for Personal Health and Health Care, (Amsterdam The Netherlands), pp. 31–34, ACM, Oct. 2016.

[4] K. Blumenstein, M. Wagner, and W. Aigner, “Interactive Data Visualization for Second Screen Applications: State of the Art and Technical Challenges,” Aug. 2015.

[5] N. I. L. Ibrahim, M. M. Ariffin, and A. Zakariya, “Mobile Application of Data Visualization for Electric Vehicle,” in 2022 6th International Conference On Computing, Communication, Control And Automation (ICCUBEA, (Pune, India), pp. 1–5, IEEE, Aug. 2022.

[6] Z. Pousman, J. Stasko, and M. Mateas, “Casual Information Visualization: Depictions of Data in Everyday Life,” IEEE Transactions on Visualization and Computer Graphics, vol. 13, pp. 1145–1152, Nov. 2007.

[7] S. Murray, Interactive data visualization for the web: an in­troduction to designing with D3. Beijing Boston Farnham Sebastopol Tokyo: O’Reilly, second edition ed., 2017.

[8] A. Cairo, The functional art: an introduction to information graphics and visualization. Berkeley, Calif.: New Riders, 2013.

[9] T. Munzner, Visualization analysis & design. Boca Raton, FL: CRC Press/Taylor & Francis Group, 2015.

[10] J. C. Roberts, P. D. Ritsos, S. K. Badam, D. Brodbeck,
J. Kennedy, and N. Elmqvist, “Visualization beyond the Desktop–the Next Big Thing,” IEEE Computer Graphics and Applications, vol. 34, pp. 26–34, Nov. 2014.

[11] J. Gu, S. Mackin, and Y. Zheng, “Making Sense: An Innovative Data Visualization Application Utilized Via Mobile Platform,” in 2018 IEEE 20th International Conference on High Perfor­mance Computing and Communications; IEEE 16th Interna­tional Conference on Smart City; IEEE 4th International Con­ference on Data Science and Systems (HPCC/SmartCity/DSS), (Exeter, United Kingdom), pp. 1105–1109, IEEE, June 2018.

[12] M. Krone, C. M¨uller, and T. Ertl, “Remote Rendering and User Interaction on Mobile Devices for Scientific Visualization,” in Proceedings of the 8th International Symposium on Visual In­formation Communication and Interaction, (Tokyo AA Japan), pp. 21–26, ACM, Aug. 2015.

[13] L. Chittaro, “Visualizing Information on Mobile Devices,” Com­puter, vol. 39, pp. 40–45, Mar. 2006.

[14] M. Lebusa, H. Thinyane, and I. Sieborger, “Mobile visualisation techniques for large datasets,” in 2015 IST-Africa Conference, (Lilongwe, Malawi), pp. 1–9, IEEE, May 2015.

[15] V. Paelke, C. Reimann, and W. Rosenbach, “A Visualization Design Repository for Mobile Devices,” Feb. 2003.

[16] S. Burigat, L. Chittaro, and E. Parlato, “Map, Diagram, and Web Page Navigation on Mobile Devices: the Effectiveness of Zoomable User Interfaces with Overviews,” Sept. 2008.

[17] B. Lee, M. Brehmer, P. Isenberg, E. K. Choe, R. Langner, and R. Dachselt, “Data Visualization on Mobile Devices,” in Extended Abstracts of the 2018 CHI Conference on Human Factors in Computing Systems, (Montreal QC Canada), pp. 1–8, ACM, Apr. 2018.

[18] P. M. Pombinho, M. B. Carmo, and A. P. Afonso, “Evaluation of Overcluttering Prevention Techniques for Mobile Devices,” in 2009 13th International Conference Information Visualisation, (Barcelona, Spain), pp. 127–134, IEEE, July 2009.

[19] T. Buering, J. Gerken, and H. Reiterer, “User Interaction with Scatterplots on Small Screens -A Comparative Evaluation of Geometric-Semantic Zoom and Fisheye Distortion,” IEEE Transactions on Visualization and Computer Graphics, vol. 12, pp. 829–836, Sept. 2006.

[20] B. Gillick, H. AlTaiar, S. Krishnaswamy, J. Liono, N. Ni­coloudis, A. Sinha, A. Zaslavsky, and M. M. Gaber, “Clutter-Adaptive Visualization for Mobile Data Mining,” in 2010 IEEE International Conference on Data Mining Workshops, (Sydney, TBD, Australia), pp. 1381–1384, IEEE, Dec. 2010.

The post SOTA – Data Visualization on Mobile Devices appeared first on Mobile USTP MKL.