API

Als Topic heb ik gekozen om met API's aan de slag te gaan, voor het individuele gedeelte had ik al bedacht dat ik met de Spotify API wilde gaan werken, in de individuele feature zat er wel al een verbinding met Spotify maar deze had nog geen functie, ook werkte de verbinding nog niet met OAuth waardoor niet alle functionaliteiten van de API te benaderen waren.

Wat is een API

Een API is een afkorting voor Application Programming Interface en wordt gebruikt om verschillende stukken software met elkaar te laten communiceren en zo technisch slimme oplossingen te creëren. Zo hebben de meeste grote apps wel een API waar je requests naar kunt sturen, afhankelijk van wat er in de request staat kan er informatie van de Applicatie worden opgehaald. In mijn geval ga ik dus Data opvragen van Spotify.

Spotify API

My Music Match draait om het vinden van nieuwe muziek, het is mogelijk om hier een formulier voor te maken waarin de gebruiker zijn of haar favoriete nummers kan invullen. Met deze oplossing is niks mis en zou niet slecht zijn, maar om een makkelijkere oplossing te kunnen realiseren zouden we ook een API kunnen gebruiken. Door een request te doen naar de Spotify API kunnen we informatie over de benodigde nummers krijgen, dit kan een artiest, genre of albumhoes zijn. allemaal informatie die nodig is voor de applicatie, het gebruiken van de API is dus makkelijker dan alle gegevens zelf in te vullen, de data staat immers gewoon online.

Gebruik

(Let op ik leg alleen uit over de endpoints die ik heb gebruikt voor het ophalen van data, de inlog flow leg ik uit in de Oauth pagina)

Om de Spotify API te kunnen gebruiken moet je eerst toegang vragen aan de API voordat deze je toegang kan verlenen, meer hier over in oAuth pagina. Zodra je toegang hebt gekregen kan je verschillende end points benaderen. Zelf gebruik ik een NPM Package om op een makkelijkere manier Requests te kunnen versturen, deze library heet spotify-web-api. Allereerst gebruik ik de API om gegevens over de ingelogde gebruiker te verkrijgen. de endpoint die ik hiervoor gebruik is getMe()

const SpotifyWebApi = require('spotify-web-api-node')

// Spotify authorization
const spotifyApi = new SpotifyWebApi({
  clientId: process.env.CLIENT_ID,
  clientSecret: process.env.CLIENT_SECRET,
  redirectUri: process.env.CALLBACK_URL
})

spotifyApi.getMe()
.then((data) => {
  console.log(data.body)
})

de functie geeft een callback, die we oplossen met data de informatie die we willen staat in data.body een JSON object met die er als volgt uitziet:

{
  country: 'NL',
  display_name: 'Joeri Bouwman',
  email: '-email-',
  explicit_content: { filter_enabled: false, filter_locked: false },
  external_urls: { spotify: 'https://open.spotify.com/user/-id-' },
  followers: { href: null, total: 24 },
  href: 'https://api.spotify.com/v1/users/-id-',
  id: '-id-',
  images: [
    {
      height: null,
      url: 'https://scontent-frt3-1.xx.fbcdn.net/v/t1.6435-1/p320x320/104033460_1930186900445570_6701558616306589100_n.jpg?_nc_cat=102&ccb=1-3&_nc_sid=0c64ff&_nc_ohc=LNbmb63ApmAAX_9HpNF&_nc_ht=scontent-frt3-1.xx&tp=6&oh=8334d9bf893e1f0ca1fbb4553b6c151b&oe=60CEF764',
      width: null
    }
  ],
  product: 'premium',
  type: 'user',
  uri: 'spotify:user:-id-
}

vervolgens filter ik de benodigde data uit om daarmee mijn profiel te kunnen renderen, zo hoef ik dus geen gevens in te vullen omdat Spotify deze al heeft. My Music Match draait er om nieuwe muziek te kunnen ontdekken, daarom heb ik meer informatie nodig van de gebruiker dan alleen zijn persoonsgegevens. Met de Spotify API is het mogelijk om een gebruikers meest beluisterde nummers op te vragen met de volgende endpoint:

spotifyApi.getMyTopTracks({ limit: 3 })
    .then((data) => {
      console.log(data.body)
     })

Bij het aanroepen van deze functie maken we gebruik van de query limit: , deze query geeft aan hoeveel nummers er worden weergegeven, in het geval van deze app zijn het er drie omdat elke gebruiker drie favoriete nummers moet kiezen. Ook hier krijgen we een callback waarin we de informatie met data benaderen, in het JSON object dat we terug krijgen staat informatie over de drie meest beluisterde nummers, zoals titel, artiest, albumhoes image, een korte preview van het nummer en nog veel meer informatie met betrekking tot het nummer. Deze informatie gebruik ik om de favoriete nummers van de gebruiker direct in te kunnen laten vullen.

Helaas worden er bij het opvragen van nummers geen genres meegegeven in het JSON object dat je terug krijgt, om toch de genres te kunnen krijgen die passen bij jouw favoriete nummers kunnen we getArtists() gebruiken. In de functie moet je een argument meegeven waarmee de gewenste artiesten opgehaald kunnen worden. Omdat we eerder al onze drie favoriete nummers ophalen kunnen we uit dat Json object de unieke artist id's gebruiken om als argumenten mee te geven. We krijgen de volgende code:

spotifyApi.getArtists([data.body.items[0].artists[0].id, data.body.items[1].artists[0].id, data.body.items[2].artists[0].id])
          .then((data) => {
            const genres1 = data.body.artists[0].genres
            const genres2 = data.body.artists[1].genres
            const genres3 = data.body.artists[2].genres
           })

Tot slot gebruik ik nog een zoekfunctie van de API, deze wordt gebruikt om je drie favoriete nummers te kunnen wijzigen. De endpoint die ik hiervoor gebruik is searchTracks(). In deze functie geef je weer een argument mee, een String die je zoekterm bevat. Ook kan je een query toevoegen, zoals we dat ook bij de favoriete tracks deden, waarmee je aangeeft hoeveel resultaten worden weergegeven. De zoekfunctie wordt als volgt toegepast:

spotifyApi.searchTracks(req.body.input { limit: 5 })
    .then((data) => {
      console.log(data.body)
     })

De terug gegeven data bevat informatie over de gevonden nummers die dan weer gebruikt kunnen worden om je favoriete nummers op je profiel aan te passen.

Conclusie

Ik gebruik dus de Spotify API om op een gemakkelijkere manier data te kunnen verzamelen, voor de gebruiker is de gemakkelijker omdat deze zelf geen gegevens hoeft in te vullen maar alles automatisch voor degene opgehaald wordt. hierdoor wordt de app gebruiksvriendelijker. Ik heb nu inzicht gegeven in de endpoints die ik zelf gebruik, met de API is echter nog veel meer mogelijk. Voor meer informatie over de API kun je de volgende links bezoeken:

• https://developer.spotify.com/documentation/web-api/
• https://www.npmjs.com/package/spotify-web-api-node

Het nadeel is wel dat de app niet gebruikt kan worden zonder een Spotify account, toch heb gekozen voor het gebruik van Spotify omdat de doelgroep van de app muziekliefhebbers zijn, er van uitgaande dat muziekliefhebbers streamings diensten zoals Spotify gebruiken beperk ik de groep die ik buitensluit voor het gebruik van deze app.

Bronnen

Thelin, M., & Perez, J. M. (2021, 24 januari). npm: spotify-web-api-node. Npm. https://www.npmjs.com/package/spotify-web-api-node

Web API | Spotify for Developers. (z.d.). Spotify. Geraadpleegd op 16 juni 2021, van https://developer.spotify.com/documentation/web-api/