Guido Schmechel
PHP / TYPO3 Developer
Hitster - Mit Hilfe von KI schnell zu einem Spotify Prototypen
Die letzten Wochen wurde ich nochmal vermehrt mit neuen Themen konfrontiert wie ein Deep Dive in Redis oder ein Start mit Varnish und ddev. Doch was hat mich noch mehr von Ausprobieren überzeugt? Ein Gesellschaftsspiel.
Bei einem Team Abend in der brandung haben wir Hitster gespielt. Was ist Hitster? Hitster ist ein musikalisches Partyspiel, bei dem die Spieler Songs in die korrekte chronologische Reihenfolge bringen müssen. Über eine App werden zufällig Musiktitel abgespielt, und anhand von Melodie und Erinnerung muss der passende Platz auf einer persönlichen Zeitachse gefunden werden. Ein cleverer Mix aus Musikstreaming, Bilderkennung und Gamification. Um die Musik abspielen zu können wird auf der Karte ein QR Code gescannt, der eine Webapp öffnet, die mit Spotify verbunden ist.
Wie schwer ist es wohl das nachzubauen?
Wir bauen uns einen Prototypen mit v0
Frontend Prototyp
Zuerst hatte ich mich für eine YouTube Anbindung entschieden. Da kann man sich erstmal die Authentifizierung sparen. Die Webapp hat ja nur einen Play/Pause Button. Doch bevor ich nun selbst etwas baue, habe ich für v0 entschieden. Aus der FAQ:
What is v0?v0 is your always-on pair-programmer. A generative chat interface with in-depth knowledge on modern web technologies. It can provide technical guidance while building on the web, generate UI with client-side functionality, write and execute code in JavaScript and Python, build diagrams explaining complex programming topics, and more.
Erstes Prompting bei v0
Mit den ersten Prompts hatte ich mir einen Player bauen lassen, der ein mir fixes Video abspielt. Das hat mir nicht gepasst und so habe ich die dynamische Steuerung per URL Parameter definiert und schon konnte ich jeden YouTube Song über meinen Player abspielen. 5 Minuten bis zum ersten vernünftigen Prototypen, der direkt mächtig ist.
Projekt mit Docker bauen
Wie bekomme ich das next.js Projekt auf meinen Server?
Mir ist bewusst, dass es hier elegantere Wege gibt, aber ich wollte den Code unbedingt auf meinem Server laufen lassen. Daher erstmal die Version von v0 als Zip Datei heruntergeladen. Dank ChatGPT hatte ich auch schnell die Befehle, wie ich ein Docker Image mit diesem Code ans Laufen bekommen konnte.
Dockerfile# 1. Node.js als Base Image
FROM node:20-alpine
# 2. Arbeitsverzeichnis setzen
WORKDIR /app
# 3. package.json und package-lock.json kopieren
COPY package*.json ./
# 4. Abhängigkeiten installieren
RUN npm install --legacy-peer-deps
# 5. Restlichen Quellcode kopieren
COPY . .
# 6. Next.js-Projekt bauen
RUN npm run build
Beim Bauen des Containers kam es zu 2-3 npm Fehlern. Mit ein wenig Nachfrage bei ChatGPT konnte das gelöst werden. Das Image wurde korrigiert und der install Befehl erweitert.
# Container bauen
docker build -t hitster .
# Container lokal laufen lassen
docker run -p 3000:3000 hitster
Das Projekt musste aber für meinen Server exportiert werden. Dazu musste ich die next.js Config etwas anpassen, siehe Dokumentation. Mit Docker wurde ein weiterer temporärer Container gestartet, der sich um die Ausgabe gekümmert hat. Die erzeugten Dateien wurden dann letztlich auf meinen Server hochgeladen und es lief der Prototyp mit YouTube.
# Container temporär starten
docker create --name temp-export hitster
# Exportiertes HTML + Assets lokal kopieren
docker cp temp-export:/app/out ./out
# Container wieder wegwerfen
docker rm temp-export
QR Codes
Hier gibt es diverse Dienste, aber ich hab mir bequem per ChatGPT den QR Code zu meiner URL generieren lassen.
Spotify Anbindung
In der ersten Version hatte ich auch mitgegeben schon einmal die Spotify Anbindung vorzubauen. Letztlich benötigt man hier nur einen Token. Da ich mit Spotify bereits minimal Erfahrung habe, lag schon eine App vor und ich kannte die Einstellungen der API. Lediglich die OAuth Anbindung habe ich mir via ChatGPT bauen lassen. Was auch direkt funktioniert hat.
Interessant: Den Token kann man in v0 nicht direkt speichern lassen, sondern es wurde ein Prompt beim Aufruf der WebApp angeboten. Das ist jetzt nicht der eleganteste Workflow aber für ein PoC reicht das alle mal aus.
Spotify Player - mit Providerswitch oben rechts
Spotify Steuerung über eigene API
Fazit
Von der Schnapsidee hin zum für mich passenden Prototypen wurden 60 Minuten investiert. Den gebauten FE Code kann ich nicht beurteilen, aber zumindest macht es das was es soll und das ist für mich beeindruckend. Fairerweise muss man zu Gute halten, dass ich bei 2-3 Stellen Hintergrundwissen hatte und die KI somit weniger extra Schleifen drehen musste.
Für kommende Projekte werde ich das KI Gebilde aber mal im Hinterkopf behalten.
Header Foto von Pixabay von Pexels: https://www.pexels.com/photo/low-angle-view-of-lighting-equipment-on-shelf-257904/