Met Chartify kunnen gebruikers hun Spotify-statistieken kunnen bekijken over een bepaalde periode in een eigen gekozen visualisatie. De app maakt gebruik van de Spotify Web API.
Ik heb tot vandaag (donderdag 28 november) gezocht naar een antwoord op mijn vraag: waarom kan alleen ik inloggen en niemand anders? Het blijkt dat de app in ontwikkelmodus staat, waardoor deze standaard slechts door één persoon gebruikt kan worden. In deze modus is het mogelijk om maximaal 25 Spotify-accounts toe te voegen die mijn code kunnen testen. Als je mijn project willen testen, moet ik eerst jouw Spotify-e-mailadres toevoegen aan de app via mijn developer-account.
Gevonden in deze Spotify Developer Community:
"Apps in development mode are only accessible by the developer's account unless specific users are whitelisted."
Die mij verwees naar Spotify for Developers:
"Newly-created apps begin in development mode. They can acces a single Spotify account. Up to 25 authenticated Spotify users can use an app that is in development mode."
Volg deze stappen om het project lokaal te draaien:
-
Download de bestanden:
- Download de zip van dit project en pak het uit naar een map op je computer.
-
Spotify account toevoegen:
- Voordat je mijn app kunt gebruiken moet jouw emailadres bij mijn Spotify developer account bekend zijn.
-
Start de app:
npm run dev
Wanneer de app draait, kun je inloggen met je Spotify account. Na de autorisatie wordt je teruggestuurd naar de index-pagina. Hierop is vervolgens een Bubblechart (het Universum) te zien met jouw 20 toptracks van het afgelopen jaar (default). Vervolgens kun je via de dropdown de visualisatie aanpassen en filteren. Je visualisatie wordt hierop aangepast.
Let op: Zoals aan het begin genoemd moet je Spotify-e-mailadres worden toegevoegd aan de lijst van testgebruikers om deze app te kunnen gebruiken.
Bekijk mijn project online op Github of open de live versie via vercel.
Open mijn Github Repository of ga naar mijn Vercel-site:
Dit project is gemaakt door Binc van Buren als opdracht van de opleiding CMD aan de Hogeschool van Amsterdam. Open mijn Wiki bestand voor meer informatie over dit project.