Demo App

Look at how the Spotify API can be integrated in a real-world application.

We'll cover the following

Let's look at a Django app that uses some of the previously discussed Spotify API endpoints to retrieve the requested data.

Resources used

We'll call the following Spotify endpoints in this application:

  • Featured Playlists
  • Playlist’s Information
  • Search
  • Audio Features
  • New Releases
  • Album’s Information
  • Artist’s Top Tracks

Django app

The widget below contains the code for our application. Click the "Run" button to see the app in action.

from django.db import models

# Create your models here.
Run the demo application

Let's look at the code in views.py where the API is being called:

  • Lines 1–7: We import the required packages.
  • Lines 9–12: We define the header used for authorization. We use the client credentials access token because all the endpoints being called in the app are public endpoints and do not require user permission.
  • Lines 13–26: We populate the front page of the app using the home(request) function. The function calls the Featured Playlists endpoint in line 14, and the New Releases endpoint in line 15. Line 19 checks if the API call was successful or not. In case of a successful call, the retrieved data is returned to home.html to be rendered on the app's front page. In case of an unsuccessful call, the returned error message is rendered on the screen using the error.html file.
  • Lines 28–36: When a user selects a playlist from the front page, the playlist(request,id) function defined here is called. This function calls the Playlist Information endpoint in line 29. In case of a successful request, the retrieved data is rendered using the playlist.html file. In case of an unsuccessful request, just like in the home(request) function, the error message is rendered using the error.html file.
  • Lines 38–46: In case a user selects an album from the front page, the function album(request,id) defined here is called. This function calls the Album's Information endpoint in line 39 to get information about the selected album. Just like for other endpoints, there is a check in line 42 to see if the request made is successful or not. In case of a successful request, the retrieved data is rendered using the album.html file.
  • Lines 48–57: Our app lets the user search for the top tracks of an artist. When the user does so, the sartist(request) defined here is called. When the user submits the artist's name, an API call is made in line 50 to get the list of artists whose names match the one submitted by the user. This list is rendered on sartist.html.
  • Lines 59–68: When the user sees the artist whose tracks are required on the list and clicks to get the tracks, the artist(request,id) function defined here is called. This function calls the Artist's Top Tracks endpoint in line 60. The retrieved tracks are sent to the artist.html to be shown to the user.
  • Line 70–89: The user can get audio features of a track in graphical form using our app. We get and render that data using the audio(request,id) function. This function executes when the user clicks on the equalizer icon next to any track. We call the Audio Features endpoint in line 71. The retrieved data is then rendered using the audio.html file in lines 88–89.