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 tohome.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 theerror.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 theplaylist.html
file. In case of an unsuccessful request, just like in thehome(request)
function, the error message is rendered using theerror.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 thealbum.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 onsartist.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 theartist.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 theaudio.html
file in lines 88–89.