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.

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.

1. Ensure Ease of Use

Make usability a priority by simplifying navigation and maintaining consistency across all pages. Strive for clarity in layout and design elements to ensure seamless interaction for visitors. Incorporate intuitive user interface elements such as clickable buttons and clear menu structures to guide users effortlessly through the website.

2. Optimize for Mobile Devices

Given the prevalence of mobile browsing, prioritize responsive design to ensure optimal performance across various screen sizes and devices. This enhances accessibility and accommodates the preferences of mobile users. Implement touch-friendly navigation and ensure that content scales appropriately to provide a consistent and enjoyable experience on smartphones and tablets.

3. Tailor Content to Audience Needs

Focus on delivering relevant and valuable content tailored to the interests and preferences of your target audience. Conduct research to identify audience needs and create content that resonates with their interests. Utilize data analytics to gain insights into user behavior and preferences, allowing you to refine your content strategy and deliver a more personalized experience.

4. Check For Broken Links

Regularly audit your website for broken links and ensure timely resolution to prevent user frustration. Implement automatic redirects to functional pages to maintain a seamless browsing experience. Utilize webmaster tools and link checking software to identify and rectify broken links promptly, preserving the integrity of your website’s navigation and user experience.

5. Enhance Loading Speed

Optimize website performance by minimizing loading times through code optimization, image compression, and efficient caching strategies. A fast-loading website enhances user satisfaction and encourages prolonged engagement. Utilize tools such as Google PageSpeed Insights to identify performance bottlenecks and implement optimizations to improve loading speed across all devices.

6. Employ Clear Calls-to-Action (CTAs)

Guide user behavior with strategically placed CTAs that prompt desired actions. Utilize contrasting colors and prominent placement to ensure CTAs stand out and attract user attention effectively. Craft compelling and action-oriented copy for CTAs to encourage user engagement and drive conversions. Monitor CTA performance and iterate on design and messaging to optimize conversion rates over time.

7. Follow Design Principles

Follow established design principles such as alignment, contrast, and whitespace to create visually appealing layouts. Maintain consistency in color schemes and typography to establish a cohesive visual identity. Pay attention to details such as font size, spacing, and hierarchy to ensure readability and enhance overall aesthetics. Conduct usability testing to evaluate design effectiveness and gather feedback for iterative improvements.

8. Stay Current with Design Trends

Keep your website design fresh and engaging by incorporating current design trends and innovations. Experiment with new techniques to maintain user interest and relevance in the evolving digital landscape. Stay informed about emerging design trends through industry publications, conferences, and online communities. Balance trendiness with timeless design principles to create a website that feels contemporary yet enduring.

9. Conduct Cross-Device Testing

Verify website functionality and appearance across various devices and browsers to ensure a consistent user experience. Address any discrepancies or compatibility issues promptly to optimize accessibility. Utilize responsive design frameworks and testing tools to simulate user interactions across different devices and screen sizes. Test navigation, forms, and interactive elements to ensure compatibility and usability across all platforms.

10. Implement Visual Hierarchy

Guide user attention and streamline content consumption through effective use of visual hierarchy. Emphasize key elements and information to enhance readability and facilitate intuitive navigation. Utilize techniques such as typography, color, and contrast to establish a clear hierarchy of importance. Group related content and visually differentiate between primary, secondary, and tertiary elements to guide users through the website’s information architecture.

11. Simplify Navigation Structure

Facilitate ease of exploration by organizing website navigation in a clear and intuitive manner. Limit menu complexity and employ logical categorization to streamline user access to desired content. Utilize dropdown menus, breadcrumbs, and site maps to provide additional navigation aids and help users navigate complex website structures. Implement user testing to evaluate navigation usability and identify areas for improvement.

12. Ensure Accessibility Compliance

Design your website with inclusivity in mind to accommodate users with disabilities or limitations. Adhere to accessibility standards and guidelines to ensure equal access and usability for all visitors. Provide alternative text for images, utilize semantic HTML markup, and implement keyboard navigation support to enhance accessibility. Conduct accessibility audits and usability testing to identify and address potential barriers to accessibility.

By integrating these strategies into your web design approach, you can create a compelling digital experience that resonates with audiences and drives meaningful engagement.

Literature

 [1] How to Improve Your Website Design in 2024 | 8 Proven Tips, https://dorik.com/blog/how-to-improve-website-design

[2] Website Design Checklist: 15 Ways to Improve Your Website in 2024 and Beyond, https://coalitiontechnologies.com/blog/website-design-checklist-15-ways-to-improve-your-website-in-2024-and-beyond

[3] Top 8 Strikingly Web Design Best Practices for 2024, https://www.strikingly.com/blog/posts/top-8-strikingly-web-design-best-practices-2024

[4] 27 Effective Web Design Tips for Improving Your Website, https://www.indeed.com/career-advice/career-development/website-layout-tips

[5] The importance of optimizing website speed, https://www.createit.com/blog/the-importance-of-optimizing-website-speed/

[6] 15 Website Design Trends You Don’t Want to Miss in 2024, https://looka.com/blog/website-design-trends/

[7] Website-Navigation, https://www.seobility.net/de/wiki/Website-Navigation

Image Sources

Figure 1: Optimize for Mobile Devices, https://www.pexels.com/de-de/foto/person-kaffee-tasse-hand-6912819/

Figure 2: Website Speed Optimization, https://www.createit.com/blog/the-importance-of-optimizing-website-speed/

Figure 3: Design Trend Examples, https://looka.com/blog/website-design-trends/

Figure 4: Navigation Structure, https://www.seobility.net/de/wiki/Website-Navigation

The post Web Design Checklist for 2024: A Comprehensive Guide 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.

1 Introduction

In an era dominated by mobile technology, the seamless integration of design and development processes is crucial for creating innovative and user-friendly mobile applications. This research investigates how ChatGPT can help in this. It carefully examines the details of both designing and developing mobile apps, giving a clear picture of the challenges in each step.

Following a detailed description of the mobile design and development landscapes, the paper focuses on ChatGPT, an advanced language model. It undertakes a comprehensive exploration into what ChatGPT can do, showing how the tool can generate different types of content, such as personas, code snippets, and setup descriptions. The research asks specific questions to see how well ChatGPT can give detailed and relevant support throughout the mobile design and development process. The goal of this investigation is to figure out if ChatGPT can be a useful partner in creating mobile apps, providing useful help to both designers and developers. This fits into the ongoing connection between artificial intelligence and mobile technology, imagining a future where ChatGPT plays a key role in making mobile design and development more efficient and creative by giving useful support in each phase of the processes.

2 Mobile Design Process

The first step of a design process for mobile devices is defining the structure of the solution and aligning it with the product. This process is called define phase [8]. It is crucial to do this before the actual design part can be started. During this phase the basis for the product is laid and the concept is getting created through high level brainstorming [1].

Once the concept is outlined, the research phase is kicked off. This happens through user research as well as market research. Doing research early in the process and changing design concepts according to the research results is important since it can help save a lot of time in the long run [2].

Next up is the analysis phase which uses the results from the previous phase and analyses why these results have emerged [1]. Specific details of the product are being analyzed, starting from terminology to visual differences and the navigation process [9]. The outcome of the analysis phase and certain previous assumptions will then be assessed and verified to ensure they are still valid [1].

After the concept phase, the research phase and the analysis phase are finished, the design phase is starting. The tasks in this stage range from information architecture to UI design [2]. As for the information architecture sitemaps and for the UI design wireframes are being created [8]. In order to have a successful design process it must fulfill two factors. Being highly collaborative as well as being iterative. Meaning that every team member must actively participate in the process and ensuring that the process cycles back upon itself to validate ideas [2].

The last part of a good design process is the validation phase. Usually, it is completed after the high-fidelity prototype of the product is finished and done with real end-users. During this process a series of user testing sessions is completed to validate the quality and user friendliness of the product [7].

3 Mobile Development Process

The development process of a mobile application can differ according to each paradigm. For mobile applications there is a good amount of different ones. Fundamentally it is differentiated between native apps, web apps and hybrid apps [3]. The focus of this chapter will be directed to web apps.

The mobile development process of a web app starts with the requirement analysis phase. The phase of requirement analysis involves understanding and specifying the anticipated resources from the system, along with establishing limitations on the implementation and expansion [4]. In addition, this stage seeks to identify the requirements and anticipations of pertinent stakeholders. This stage is crucial in the development process, as any errors during this phase can inevitably result in later issues in the application’s design and implementation [10]. In the course of the requirement analysis, ignoring web requirements and not addressing security concerns could lead to vulnerabilities in the app [4].

Next comes the implementation phase. During this phase the implementation of the web app takes place. During the implementation the goal is to create a web product fitting to the previous created design [10].

The last phase of this process is the deployment phase. During this phase the application usually gets deployed to a previously determined server and accounted to a fitting domain [4].

4 ChatGPT Functionalities

ChatGPT, as an intelligent conversational computer program, possesses the capability to offer detailed responses based on instructions provided in a prompt. As a part of AIGC (Artificial Intelligence Generated Content), ChatGPT has demonstrated impressive capabilities in diverse language understanding and generation tasks, including multilingual machine translation, code debugging, story creation, admitting mistakes, and even refusing inappropriate requests in alignment with the official statement. A distinctive feature of ChatGPT, setting it apart from earlier conversational programmes, is its ability to retain information from earlier parts of the conversation, facilitating seamless and continuous dialogues [5, 11].

The Language Model has successfully navigated professional examinations in law, business, and medical licensing, stirring the imagination of many. On one side of the spectrum, optimists anticipate that the tool will amplify human creativity and productivity. Conversely, skeptics voice concerns regarding the potential influence of ChatGPT on the job market. This debate highlights the need to rethink the dynamics of collaboration between humans and artificial intelligence in our rapidly evolving society [6].

Artificial intelligence-generated content, which is at the forefront of technology, allows users to use AI to automatically create different types of content, including images, text and videos, tailored to their individual preferences. The continuous advancement of AI algorithms and network structures has led to considerable progress in the field of AIGC. Core technologies such as Generative Adversarial Network (GAN), Contrastive Language-Image Pre-training (CLIP), Diffusion Model and Multimodal Generation play central roles across various areas of AIGC, ensuring the automated generation of high-quality content [5].

ChatGPT is a combination of different technologies and has a variety of features, including deep learning, unsupervised learning, instruction fine-tuning, multi-task learning, context learning and reinforcement learning [5]. The tool has a variety of features which can be applied ranging from software development to daily life. As of now, ChatGPT has fundamentally shifted perceptions regarding the existing possibilities and potentials of AI tools in numerous communities [11].

The system is constructed upon the foundational GPT (Generative Pre-trained Transformer) model, which has undergone iterative enhancements from GPT-1 to GPT-4. Initially developed in 2018, GPT-1 focused on training a generative language model based on the Transformer framework through unsupervised learning. The pretrained model was then fine-tuned for specific downstream tasks. In 2019, GPT-2 expanded on this approach by introducing the concept of multi-task learning. This expansion aimed to enable the pretrained generative language model to generalize to a wide range of supervised subtasks without the need for additional fine-tuning [5].

In the near future, individuals deciding to use generative AI tools will likely experience significantly enhanced efficiency compared to those who do not use such tools, given their potential as effective assistive technology. However, it is crucial to comprehensively explore the functionalities of ChatGPT to leverage them for advanced applications. Disregarding AI tools and their progress could impede a deeper understanding and hinder enhancements in work processes [11].

5 Case Usages of Generative AI

ChatGPT has been tested according to the mobile design and development processes presented in chapters two and three. For both processes, questions and demands were formulated that the tool should answer successfully. A question is considered to have been answered successfully if the answers, provided by ChatGPT, can be classified as helpful for the respective process.

5.1 ChatGPT for Mobile Design

The following four questions or requests were created to support designers during a mobile design process for a recipe web app.

1. I want to create a web app regarding recipes. Can you help me expand the idea?

2. Create a design concept for a recipe app.

3. Describe five personas that would be part of the target group for a recipe app.

4. Create a wireflow for a recipe app.

Regarding the request for expanding ideas for a recipe app, the tool proposed 16 diverse suggestions, incorporating concepts such as “Social Integration” and “Shopping List Generator.” Each idea was elaborated with one to two detailed bullet points, enhancing clarity. When prompted to “create a design concept for a recipe app,” ChatGPT once again provided 16 distinct ideas, including elements such as “Visual Hierarchy” and “Color Coding.” To ensure a thorough understanding, the tool accompanied each idea with additional bullet points.

Upon the inquiry to describe five personas suitable for the target audience of a recipe app, ChatGPT introduced five personas with connections to cooking. These personas, such as a professional cook, a family cook, or an individual who finds cooking challenging and seeks easy recipes, were accompanied by detailed descriptions. Furthermore, each persona was presented with a set of needs and goals that could be addressed by utilizing an appropriate recipe app. ChatGPT was able to answer all four requests in a helpful matter to the mobile design process. Although some of the requests were made very openly and without much information, the tool was able to provide good support for all of them with very detailed answers.

5.2 ChatGPT for Mobile Development

Another four questions or requests with focus on supporting the mobile development process were created.

1. Which frameworks, front- and backend, would be useful to create a recipe web app?

2. How should the frontend framework be set up, assuming Angular is being used?

3. Provide Typescript code that helps with saving new recipes in a MySQL database.

4. How can a recipe web app be deployed successfully?

ChatGPT adeptly addressed the inquiry about the usage of frameworks by proposing various frontend and backend frameworks for a recipe web app. The tool went on to explain the suitability of each framework, even extending its response to include recommendations for databases and additional tools, despite no specific request for such information. Subsequently, when prompted to explain the setup of Angular, ChatGPT provided an extensive response. It outlined prerequisites, such as required npm-packages such as the Angular CLI, followed by a step-by-step guide on project setup and a detailed description of the Angular development workflow, all without a specific request for this level of detail.

In response to a rather broad request for Typescript code aiding in saving new recipes to a MySQL database, ChatGPT handled the question very well. It contained references to the backend framework and MySQL database to be used and then provided the required code in a complete Typescript file. The file was accompanied by a descriptive explanation of its content.

When asked about the successful deployment of the recipe web application, ChatGPT drew on information from a previous question about the use of Angular. It first outlined the process of building the Angular frontend for production. Following this, the tool suggested various deployment considerations, including “Secure Sensitive Information,” “Choose a Hosting Provider,” and “Testing.” Each suggestion was then thoroughly described with two to three bullet points, enhancing the overall clarity of the response.

Overall, ChatGPT was also able to answer the requests regarding a successful mobile development process in a helpful matter. During this round of questions, it was especially noticeable that the tool provided helpful additional information, though there was no specific request to do so. Furthermore, the tool utilized previously asked questions from the same chat to get further needed information, which makes the answers very detailed and fitting.

6 Conclusion

In summary, the assessment of ChatGPT in the context of mobile design and development has shown positive outcomes. When applied to the design of a recipe web app, ChatGPT proved to be remarkably versatile. It not only expanded on initial app ideas but also generated detailed design concepts, personas, and wireflows, demonstrating its ability to enhance the brainstorming and planning stages.

Moving on to development-related queries, ChatGPT continued to perform well. It provided suggestions for suitable frameworks and offered detailed insights into setting up Angular, showcasing its proficiency in giving thorough guidance. Additionally, its effective handling of a comprehensive code request for Typescript, along with explanations of backend and database choices, highlighted its capability to assist developers in tackling complex coding challenges.

An important observation was ChatGPT’s inclination to provide additional relevant information, showing a keen understanding of contextual dependencies. By using previous responses to improve subsequent answers, the tool demonstrated an ability to offer consistent and detailed support throughout both the design and development processes. This assessment positions ChatGPT as a valuable asset in the landscape of mobile application creation, capable of making meaningful contributions to various aspects of a design and development journey.

For additional research, it is recommended to create more intricate demands for the tool for each stage of a design or development process. Moreover, specific criteria can be established to assess the tool’s performance in handling questions, particularly beneficial for more complex inquiries.

References

[1] Jantan, A., Norowi, N., Yazid, M. “UI/UX Fundamental Design for Mobile Application Prototype to Support Web Accessibility and Usability Acceptance”, p. 106-109, 2023, Retrieved from ACM Digital Library: https://dl-acm-org.ezproxy.fhstp.ac.at:2443/doi/10.1145/3587828.3587845

[2]  Goel, G., Tanwar, P., Sharma, S. “UI-UX Design Using User Centred Design (UCD) Method”, p. 1-2, 2022, Retrieved from IEEE Xplore: https://ieeexplore-ieeeorg.ezproxy.fhstp.ac.at:2443/document/9740997

[3] Patidar, A., Suman, U. “Towards Analyzing Mobile App Characteristics for Mobile Software Development”, p. 787, 2021, Retrieved from IEEE Xplore: https://ieeexplore-ieeeorg.ezproxy.fhstp.ac.at:2443/document/9441097

[4] Disawal, S., Suman, U. “An Analysis and Classification of Vulnerabilities in Web-Based Application Development”, p. 783-784, 2021, Retrieved from IEEE Xplore: https://ieeexplore-ieee-org.ezproxy.fhstp.ac.at:2443/document/9441467

[5] Wu, T., He, S., Liu, J. et al. “A Brief Overview of ChatGPT: The History, Status Quo and Potential Future Development”, p. 1122-1124, 2023, Retrieved from IEEE Xplore: https://ieeexplore-ieee-org.ezproxy.fhstp.ac.at:2443/document/10113601

[6] Wang, X., Anwer, N., Dai, Y. et al. “ChatGPT for design, manufacturing, and education”, p. 7-9, 2023, Retrieved from ScienceDirect: https://www.sciencedirect.com/science/article/pii/S2212827123004262

[7] Fogg, B. “Creating Persuasive Technologies:  An Eight-Step Design Process”, p. 5, 2009, Retrieved from ACM Digital Library: https://dl-acm-org.ezproxy.fhstp.ac.at:2443/doi/10.1145/1541948.1542005

[8] Anwar, N., Rizal, M., Mustamum, H. et al. “GetIT for Students: A Mobile Application and The UX Design Process in Practice”, p. 18-19, 2021, Retrieved from ACM Digital Library: https://dl-acm-org.ezproxy.fhstp.ac.at:2443/doi/10.1145/3431656.3432050

[9] Ede, M., Dworman, G. “Why Designers Might Want to Redesign Company Processes to Get to Better UX Design – A Case Study”, p. 842, 2016, Retrieved from ACM Digital Library: https://dl-acm-org.ezproxy.fhstp.ac.at:2443/doi/10.1145/2851581.2851609

[10] Ge, X., Paige, R., Polack, F. et al. ” Agile Development of Secure Web Applications”, p. 307-308, 2006, Retrieved from ACM Digital Library: https://dl-acm-org.ezproxy.fhstp.ac.at:2443/doi/10.1145/1145581.1145641

[11] Neumann, M., Rauschenberger, M., Schön, E. ” “We Need To Talk About ChatGPT”: The Future of AI and Higher Education”, p. 30-31, 2023, Retrieved from IEEE Xlpore: https://ieeexplore-ieee-org.ezproxy.fhstp.ac.at:2443/document/10190438

The post SOTA – Evaluating Generative AI: Using ChatGPT to Support Mobile Design and Development Processes (+ Individual Research) appeared first on Mobile USTP MKL.

Last year, Apple introduced the latest notch design on the iPhone 14 and continued it with the iPhone 15 series, featuring the innovative “Dynamic Island.” This pill-shaped cutout, situated at the top of the iPhone screen, addresses the challenges posed by the traditional notch. This blog entry explores the notch’s origins and its issues raised for designers, and the solution and new challenges brought by Dynamic Island.

The Evolution of the Notch

Image from charlesdeluvio on Unsplash

The notch concept gained popularity with the iPhone X in 2017, influencing other manufacturers to adopt similar designs. While serving vital hardware functions, it presented design challenges due to unconventional screen specifications [1].

Dynamic Island on iPhone 14 Series

Introduced with the iPhone 14 series, Dynamic Island is a pill-shaped cutout housing the FaceID sensor and front camera. It can display notifications and background activities, providing a new way for users to interact with ongoing tasks .

Touch Gestures with Dynamic Island

• Swipe Up: Puts the current open mobile app into Dynamic Island.
• Swipe Left/Right: Allows users to see more apps running if multiple are available.
• Simple Tap: Accesses controls inside Dynamic Island.
• Long Press: Expands the island for more details or controls [2].

Presentation Types of Dynamic Island

There is three types of presentations of the Dynamic Island that are available.

Compact

Image from Apple

The system utilizes the Complact mode when only one Live Activity is currently active. It combines two components: one positioned on the left side of the TrueDepth camera and another on the right side [3].

Minimal

Image from Apple

When multiple Live Activities are active, the system will showcase two at the same time.One will be linked to the Dynamic Island, while the other will be separate from it [3].

Extended

Image from Apple

The extended version of Dynamic Island appears when the user taps and holds a Live Activity that is in Compact or Minimal mode [3].

UX Opportunities and Obstacles of Dynamic Island

Image from SCREEN POST on Unsplash

Opportunities

• Less Intrusive Messages: Notifies users without interrupting the screen.
• Better Visibility: Positioned for improved visibility of ongoing activities.
• Hierarchy: Maintains app hierarchy and user focus.
• Problem-Solving: Aids users in quickly accessing controls at the right time.
• User Control: Allows users to control ongoing tasks efficiently.

Obstacles

• Hard to Reach: Top placement may hinder usability.
• Readability: Collapsed form may make information unreadable for some users.
• Touch Size: Relatively small touch area in collapsed form.
• Interaction Challenges: Potential interference with top navigation bars of mobile apps.
• Tapping by Mistake: Users might mistakenly tap on notifications instead of the island.
• Multi-tasking Concerns: Raises questions about user attention and multitasking.
• No Disable Option: Dynamic Island cannot be fully disabled due to its hardware integration [2].

Design Considerations

Before implementing Dynamic Island, designers must consider key factors:

1. Device Compatibility: Supported on iPhone 14 Pro, 14 Pro Max, 15, 15 Plus, 15 Pro, and 15 Pro Max.
2. User Interaction: Clearly communicate live activities and provide options to end them.
3. User Preferences: Account for users who may disable live activity in iPhone settings [4].

In conclusion, Dynamic Island represents a leap forward in design and user interaction. However, designers and users should carefully consider its pros and cons to ensure a positive impact on the overall user experience.

References

[1] Lawrence, N. (2022, September 8). UI/UX Design: The Dynamic Island. UX-Planet.
https://uxplanet.org/ui-ux-design-the-dynamic-island-ce6e3da925c9

[2] Cordova, M. (2023, June 16). Get to know Apple’s new Dynamic Island: What is it? How can it be used? Is it truly helpful? krasamo. https://www.krasamo.com/apple-dynamic-island/

[3] Lorenzo, B. (2023, September 5). How to use Dynamic Island in SwiftUI. Medium.
https://blorenzop.medium.com/how-to-use-dynamic-island-in-swiftui-4eaa66c7c301

[4] Will, T. (2023). How to design for Apple iOS Dynamic Island. UIUX Trend.
https://uiuxtrend.com/how-to-design-for-apple-ios-dynamic-island/

The post Unveiling Apple’s Dynamic Island: iPhone 14 and 15 Series appeared first on Mobile USTP MKL.

Umsetzung

Als Printprodukt habe ich Visitenkarten umgesetzt, die meine Kontaktdaten und den QR Code, der zu meinem Produkt führt, beinhalten. Mein Ziel war es die Website in Beige und Grautönen zu gestalten, daher wurde dies auch in der Visitenkarte widergespiegelt.

Hauptfokus lag auf der Schriftart, die für die Abbildung meines Namens gewählt wurde. Diese Schriftart sollte später auch auf der Website aufgegriffen werden.

Die Umsetzung meiner Website erfolgte mithilfe des Frontend-Frameworks Angular, wobei das hauptsächlich dem einfachen Anlegen der einzelnen Komponenten und der übergreifenden Menü- und Footerstruktur zuzurechnen war. Die Website wurde mithilfe von HTML, teils Vanilla CSS, teils Bootstrap und Typescript erstellt.

Fazit und mögliche Erweiterungen

Die Umsetzung des Projektes hat mir großen Spaß gemacht, war aber durch den zeitlichen Druck auch etwas stressig und schaffte einige Herausforderungen. Meine größten Probleme hatte ich mit der richtigen Einstellung des Routings, sodass mein Home Component als erstes erscheint, wenn die Website geöffnet wird und nicht der App Component. Nach einiger Zeit und Recherche konnte ich das Problem jedoch beheben und der Rest des Projektes verlief relativ problemfrei.

Das Portfolio kann beziehungsweise wird während des Studiums laufend erweitert um Projekte, die ich umsetzen werde. Als Feedback wurde mir außerdem mitgeteilt, dass die Website sich gut dafür eignet, sie am Ende des Masters für meine Portfoliopräsentation zu verwenden. Das werde ich definitiv in Erwägung ziehen.

The post Print to Mobile appeared first on Mobile USTP MKL.