Im Rahmen des Semesterprojektes (WS22) der Masterklasse Mobile wurde von den Studierenden Eva Altenburger, Ramon Brullo, Lukas Ganster, Fabian Gaugusch, Michelle Markl, Lisa Polena und Alex Schuster die Idee einer App für kollektives Musikhören bei Partys konzipiert und implementiert. Dieser Artikel wurde gemeinsam verfasst und stellt kurz und bündig den Projektumfang sowie die wichtigsten Eckdaten dar.

Einleitung

Jeder und jede weiß, dass bei einer erfolgreichen Party die passende Musik nicht fehlen darf und ein populärer Weg, um für gute Laune zu sorgen, ist eine Spotify-Playlist laufen zu haben. Mit der Spotify App kann aber nur immer eine Person die Hände am Steuer haben und die anderen Gäste können bei der Musikwahl nicht mitmischen. Um dieses Problem zu lösen, haben wir dieses Semester jukebox.party entwickelt.jukebox.party ist eine Web-App, die auch, und sogar spezifisch, für mobile Geräte optimiert ist, mit der eine Spotify-Session interaktiv von den Gästen einer Party gemanagt werden kann. Dabei braucht nur eine Person einen Premium Spotify-Account und ein Gerät für die Wiedergabe, damit die Party starten kann. Zugänglich ist die Developer-Version der App auf https://jukebox.herokuapp.com.

Featureumfang

Der Ablauf einer Party mit jukebox.party beginnt mit einer Person, die einen Premium Spotify-Account hat und die Party erstellt. Es wird ähnlich wie bei Kahoot ein eindeutiger Code generiert, über den andere Nutzer der Party durch eintippen oder einen QR-Code beitreten können.

In der Party kann man sehen, was gerade gespielt wird und welche Lieder als nächstes kommen. Auch Lyrics zum aktuellen Track kann man sich ansehen, falls man mitsingen will. Auch kann man das aktuelle Lied bewerten und sehen, welche Stimmen andere Party-gäste abgegeben haben. Diese Bewertungen sind in der History sichtbar, in der die bereits gespielten Tracks und deren Beliebtheit aufgelistet sind.

Als Host der Party hat man auch die Möglichkeit, das aktuelle Lied zu überspringen oder zu einem vorherigen zurückzukehren. Außerdem hat man die Berechtigung, Gäste aus der Party zu entfernen.

Das wichtigste Feature von jukebox.party ist jedoch das Mitbestimmen bei der Wahl der nächsten Tracks. Mithilfe einer Suchfunktion kann man seine Lieblingslieder finden und der Playlist hinzufügen. Falls man sich nicht sicher ist, kann man sich auch mit Vorschlägen, basierend auf den zuletzt gespielten Tracks, inspirieren lassen.

Technische Umsetzung

Bei der Applikation jukebox.party handelt es sich um ein Next.js-Projekt. Next.js ist ein Javascript Framework, das es ermöglicht, auf React basierende serverseitig gerenderte Webapplikationen zu erstellen. Wir haben uns für das Framework entschieden, da es nahe unseren persönlichen Skills und Interessen liegt und in einem Paket sowohl die Front-End- als auch die Back-End-Entwicklung vereint. Praktisch bedeutet das, dass das Front-End mit dem Javascript-Framework React geschrieben wird und gleichzeitig die Möglichkeit besteht, Javascript für die Server-Logik zu verwenden.

Als Datenbank wurde das von Google entwickelte Tool Firebase verwendet, da es neben der dokumenten-basierten einfachen Struktur auch die Möglichkeit für Echtzeitupdates bietet. Das bedeutet, dass mehrere Clients auf einen Datensatz, in unserem Fall eine Party, zugreifen und jegliche Änderungen dieser Party sofort an alle Clients übertragen werden.

Abgesehen von den gewählten Technologien basiert der Großteil der Funktionalitäten auf der von Spotify angebotenen Web-API. Diese bietet Entwickler:innen ein Reihe an verschiedenen Schnittstellen, die meist auch so in der bekannten Spotify-App zu finden sind. Speziell haben wir uns auf die “Queue”-basierten Schnittstellen fokussiert, da sich hier der meiste Content der Applikation abspielt.

Weiters wurden die meisten Komponenten und Backend-Schnittstellen auch Unit-tested. Dafür wurde die populäre Javascript Testing Library “Jest” verwendet. Auch eine CI-CD-Pipeline zur Versicherung eines robusten Deployment-Flows wurde mithilfe von “CircleCi” umgesetzt.

Herausforderungen bei der Entwicklung

Im Großen und Ganzen haben wir als Team sehr gut kommuniziert und funktioniert, sodass die Schwierigkeiten und Herausforderungen bei der Entwicklung minimal geblieben sind. Die erste und vielleicht größte Herausforderung war, dass die Spotify API nicht alle Funktionen zur Verfügung stellt, die wir gebraucht hätten. Am Anfang des Projektes hatten wir die Version, dass der Host der Party die Reihenfolge der Queue ändern und Lieder aus dieser entfernen kann. Allerdings hat uns da die API einen Strich durch die Rechnung gemacht, da sie leider diese Endpoints nicht anbietet. Somit mussten wir unser MVP überdenken und diskutieren, wie wir weiter vorgehen. Wir haben uns entschieden, diese Funktionen bei der ersten Version wegzulassen und wenn noch Zeit bleibt bzw. im weiteren Schritt die Queue bei uns zu hosten, damit wir die Funktionen einbauen können und Spotify immer nur den nächsten Track der Queue bekommt. 

Eine weitere Herausforderung für uns alle waren die neuen Technologien, die wir eingesetzt haben. Das Team hatte mit den Technologien vor diesem Projekt wenig bis keine Vorerfahrung und musste so in kurzer Zeit diese lernen. Hierbei handelt es sich besonders um NextJS, Next-Auth und Firebase. Zusätzlich kam die Herausforderung dazu, dass die neue Version von NextJS wenige Tage vor dem Beginn des Projektes erschienen ist und wir uns dazu entschlossen haben, mit der neuesten Version zu arbeiten. Allerdings unterscheidet sich diese, in ein paar Aspekten, stark von der Vorherigen und die Dokumentation war noch nicht so gut, zumal Version 13 erst ein paar Tage alt war. 

Andere kleinere Herausforderungen waren zum Beispiel, dass die Projektstruktur sich am Anfang stark verändert hat und die Entwickler/Entwicklerinnen sich erst wieder zurechtfinden müssen, bevor mit dem Task weitergemacht werden konnte. Zusätzlich war es eine kleine Herausforderung, sich in den Code wieder einzulesen und die eigenen Funktionen wiederzufinden, nachdem der Code ein Refactoring bekommen hat. Allerdings sind wir für das Engagement unseres Teamkollegen sehr dankbar und haben dadurch auch einiges Neues gelernt.

Umsetzung mittels agilem Projektmanagement

Für die Umsetzung von Jukebox.party wurde ein agiler Ansatz ganz nach den Grundprinzipien des Scrum-Framework gewählt. Gearbeitet wurde mit dem Atlassian Tool Jira, welches sich im Bereich der Softwareentwicklung mittlerweile als Industriestandard durchgesetzt hat. Die verfügbare Arbeitszeit des Semesters wurde von Anfang November 2022 bis zur Projektevernissage im Jänner 2023 in insgesamt 6 Sprints aufgeteilt, wobei die jeweilige Sprintdauer variabel war.

Zum Ende eines Sprints gab es immer ein kurzes Sprint Review bzw. Sprint Planning für die nächsten Arbeitspakete in der jeweiligen Einheit der Masterklasse Mobile. Anfangs hatten wir uns auch um die Durchführung von Scrum spezifischen Techniken und Methoden wie Planning Poker oder dem exakten Definieren von User Stories bzw. Akzeptanzkriterien bemüht, merkten aber schnell, dass es für unser Teamaufstellung und unser Setting der geeignetere Modus Operandi wäre, die Arbeitspakete immer beim Planning vorab kurz zu definieren und dann auch frei aus dem Sprint-Backlog weg abzuarbeiten.

Präsentation bei der Projektevernissage

Bei unserem Stand für die Projektevernissage haben wir uns auf das Wesentliche konzentriert. Auf dem Haupttisch haben wir ein iPad ausgestellt, auf dem eine Party erstellt wurde. Abgespielt wurden die Songs über einen kleinen Lautsprecher. Daneben gab es auch ein iPhone, das als Gast bei der Party angemeldet war. So konnten wir den Besuchern beide Varianten zeigen. Natürlich konnten sie auch einfach selbst in die Party einsteigen und einen Song zur Warteschlange hinzufügen. 

Auf dem Poster konnte man neben Screendesigns auch einen QR-Code sehen. Dieser führte zu einem Linktree mit Verlinkungen zur Startseite von jukebox.party. Zusätzlich gab es auch einen Link zu einem Google Form, um sich für die Nutzung dieser Version anzumelden. 

Dadurch, dass bei unserem Stand Musik lief, interessierten sich einige Besucher für unseren Stand. Das Interesse war sehr groß und die Idee hat eigentlich jedem, der mit uns geredet hat, gefallen.

So geht es weiter

Mit der Projektevernissage haben wir unser erstes großes Ziel erreicht. Hier hat das Projekt bei den Standbesucher*innen großes Interesse geweckt und das Feedback war durchweg positiv. Einige der Besucher*innen wollten die Applikation direkt bei der nächsten eigenen Geburtstagsfeier, Familienfeier oder Ähnlichem nutzen. 

Zurzeit befindet sich das Projekt im Developer-Modus bzw. wird der Developer-Modus der Spotify API genutzt. Das bedeutet, dass Personen, welche jukebox.party nutzen möchten, im Developer Dashboard des Projekts eingetragen werden müssen. Hier können bis zu 25 Spotify Accounts, eingetragen durch die genutzte E-Mail Adresse bei Spotify, vermerkt werden. Ist der Spotify Account in dieser Liste hinterlegt kann unsere Applikation von bis zu 25 Nutzer*innen genutzt werden. Diese 25 hinterlegten Spotify Accounts beziehen sich bei unserer Projektidee nur auf die Hosts einer Party, da die Partygäste auf die Warteliste des Hosts zugreifen und nicht selbstständig über ihren eigenen Account Requests an Spotify senden.

Aufgrund des durchweg positiven Feedbacks bisher, überlegt die Projektgruppe, die Projektidee bei Spotify vorzustellen, um den ‘extended quota modus’ zu erhalten. Dieser Modus erlaubt eine höhere Serveranfrage-Rate und die Nutzung der Applikation durch unendlich viele Nutzer*innen (das Eintragen der Spotify-Accounts in die Liste entfällt). Jedoch muss hierfür ein Antrag mit einer Beschreibung des Projekts, mittels eines Formulars, bei Spotify eingereicht werden. Außerdem muss die Applikation einige Anforderungen erfüllen, welche in der Spotify Developer Policy festgelegt sind. Diese Regeln enthalten Kriterien zur Speicherung von (Nutzer*innen-)Daten, zum Branding, der Präsentation der Inhalte, etc. 

Das Projektteam plant als nächsten Schritt ein Code-Review, um die Wartbarkeit des Codes sicherzustellen. Außerdem sollen im Zuge dessen Bugs ermittelt und gelöst werden. Des Weiteren möchte die Projektgruppe die Spotify Developer Policy studieren, um feststellen zu können, welche Kriterien noch erfüllt werden müssen, um den ‘extended quota modus’ zu erhalten.Möglicherweise ist es bald soweit und jukebox.party bietet dir eine einfache Möglichkeit die Warteliste einer Party mit deinen Freund*innen zu gestalten – because music is always better with friends.