This repository consists of python, html and css files which will allow users to dynamically retrieve and display 3 songs from a variety of artists of their choosing!
In this project, I used the Flask Framework, Spotify Web API, and Spotipy library. Additiionally, I used the python-dotnev and requests packages.
Flask is a lightweight web framework which will help us connect our Python code to our frontend. It does this using the templating language called Jinja2 which is used to create HTML or other markup formats.
sudo pip install flaskorpip install flask
-
In my case, since I was using the Cloud9 IDE, I setup the Flask framework boiler plate code with the endpoint "/" and
'IP'and'PORT'values set to'0.0.0.0'and8080respectively. Please refer to Flask on Cloud9! -
If you are not using the Cloud9 IDE or you are just stuck, you can still use refer to the Official Documentation at any point in time. Please refer to the Official Flask Documentation!
The Spotify Web API essentially allows us to use its endpoints to retreive JSON metadata about music artists, albums, and tracks, directly from the Spotify Data Catalogue. The API is based on the REST Principles!
pip install requestsorsudo pip install requests
- Head over to www.spotify.com to create a free user account! Then follow these instructions for registering your application.
- Once you have followed the steps above you will access to the spotify
Client IDandSecret Key. These will be available in your spotify dev account dashboard! - Once you have those credentials you can follow the Client Crenditals Flow for authorization purposes.
- Next, use the Artists API to get the JSON format for the top ten tracks for an artist. Top Tracks Documentation Here!
- Additionally, from the Artists API we can retrieve info like the artist name, song name, preview url and song image.
Spotipy is a lightweight Python library which will help us retrieve the JSON metadata from the Spotify Web API. Instead of manually setting up the POST and Get methods in Python we can use the this library to simply retrieve the JSON data as an alternative to the previous setup mentioned in Spotify Web API section.
pip install spotipy --upgrade
- Follow the steps in the Docs to setup the Client Credentials Flow.
- Refer to API reference on how to retrieve the JSON format as neeed
sudo pip install -U python-dotenv
- Create a
.envfile in you project folder which is in the same directory as yourcred.pyfile - In the file
.envwrite the following:export client_id='your client id'export client_secret='your client secret'
- In
cred.pyimport and include the following:from dotenv import load_dotenv, find_dotenvimport osload_dotenv(find_dotenv())os.getenv('cliend_id')os.getenv('client_secret')
- Don't forget to add your
.envfile to the.gitignorefile
Genius API will allow us to use its endpoints to retrieve JSON metadata related to an song, artists or albums. This will be useful for our project so that we can retrieve lyrics page url.
- Create an free developer account from Genius
- Once done creating an account, create the authentication flow following a similar process we did with Spotify. We will use the "Access for Apps Without Users" portion of the page for authentication.
- Use the Search end point to retrieve JSON metadata with the urllink to the lyrics simply by search the song.
Heroku is a cloud platform company which will allow us to host our spotify app on their servers for free! Please note that there are also premium services within Heroku but we will not be using those tiers.
npm install -g heroku
- First we will need to create a free account on Heroku.
- Next, we will create a
requirements.txtfile which will list all the libraries and packages our app uses. This information is needed because Heroku's servers will download said packages and libraries so it can run the app on their servers. In your terminal, type the following:touch requirements.txtpip freeze > requirements.txt
- Once that is done, we will need a
Procfile, which is a file that will tell Heroku what command to use to run our app.- In your terminal, type:
touch Procfile - Next, open up the
Procfileand type your commands needed to run your app. In my case I would write:web: python main.py.
- In your terminal, type:
- Now for the actual deploying part, open your terminal and follow along:
- Login to Heroku via terminal:
heroku login -i - Next go to your project folder and create the heroku app:
heroku create - Now we will push our code to heroku:
git push heroku mainorgit push heroku master
- Login to Heroku via terminal:
- Although we have pushed our code, we still need to setup our API token Key!
- Head over to the Heroku website dashboard then find
settings. - Once in settings, look for
Config Varsand click onReveal Config Vars. - Then set your Spotify and Genius keys accordingly. Once added, the app should be ready to go!
- Head over to the Heroku website dashboard then find
-
One simple mistake but was quite time consuming mistake I faced was forgetting to add the line
load_dotenv(find_dotenv())in mycred.pyfile. This caused much frustration because I was getting invalid credential errors and was therefore not able to access the Web API. To resolve this issue, I first hardcoded my client_secret and client_id to see if they would work and fortunately they worked. So I quickly realized that something was wrong in my .env file and maybe I spelt the variables wrong. But that wasn't the case. I then rewatched the Demo on 'Hiding our API Keys' and soon realized that I was missing theload_dotenv(find_dotenv())in mycred.py. -
On Cloud9, whenever I updated my CSS file, the Html never updated. So the first step I took was to check if the CSS syntax was all good. And upon reviewing, the syntax was all good. Then I went over to Slack to see if anyone else was facing similar issues. And several students were having similar issues and in a pinned post it said that we had to hard refresh our browser page to ensure the CSS got updated. So all we had to do was
CTRL F5on windows to update the CSS! -
I had a hard time extracting song information from the the JSON metadata. For example, If I thought I was targeting the song image, I kept on getting key errors or index errors in my Python code. One step I took was to use a JSON formatter from online so I could get a better understanding of how the JSON data looked like and how I would need to target the data that I needed.
- One slight issue with my project but one that won't impact the functionality is when a song name is too long. The song name would push down the artist name in the HTML file and this would create an overlap between the card and background (essentially placing it out of its correct place in the HTML). One approach I could take to fix this issue is use the Bootstrap framework and use their card template. The card template would prove to be useful because it dynamically resizes given the text length.
- To enhance the project in the future, I would like to add related artists in relation to the selected one and recommend their top tracks at the bottom of the page. I could implement these features by using the Spotify Web API as they have a related artists endpoint.
- I would like to add additional information about the artist. Information like where they are born, how old they are and their overall background. One way I could implement this is by using the Wikepedia API. Using this I would be able to retrieve general information needed and which Wikepedia generally has for well known artists. Additionally, I found this stackoverflow page talking about the different ways to extract information about certain topics in general.