Flask Web Application – Eliyas Sala

Link to app : https://spotifywebapplication.herokuapp.com/

I utilized Spotify API and Genius API to create a Flask Web App and used Heroku to deploy my web app.

Tool Stacks and their Applications in the Project:

  • Website design:
    • html page for the structure
    • CSS for styling tags, classes, and IDs specified in the html page
    • Bootstrap framework – used built-in containers to align div elements.
      For example, I embedded a Youtube video and bootstrap’s div class “col-sm” was useful in aligning it to prefered position without writing much CSS code.

* Note: all environmental variables are setup in .env file. keys.py file accesses those variables and serves as an interface. I used both dotenv and decouple packages, which have the same functionality, to make my application unique.

  • APIs Data

    • Spotify Rest API – I used a spotipy library to have an easy interface in fetching the data. So this library basically made authentication with Spotify’s Top Tracks api easy.
      • logic Implementation:
        • I created a python file named SpotifyAPI, containing more than 100 lines of code with concise code and naming convention, to store all information related to spotify and export global variables to be exported to my other classes.
        • Created authentication method, named authentication_usingSpotipy, that uses client_id and client_secret, which are environmental variables(sensitive data) stored in .env file. The method returns a token.
        • Created 3 different methods for each respective artists to process raw JSON data. The following are the methods: Response_forColdplay, Response_forJasonChen, and Response_forJacobLee. I also implemented try and catch blocks in case the data for each call couldn’t be fetched. Using the token generated from authentication method as a parameter, we get the whole data as dictionaries.
        • Now we parse the data obtained from previous methods for each artist. So I created 3 get methods for each artist that use the response data we generated from previous methods as parameters. The following are the methods: getColdplay_parsedData, getJasonChen_parsedData,getJacobLee_parsedData. Within each of these methods, I accessed the different layers of nested data. Although the data might seem complicated, ultimately it is lists and dictionaries. So I created instance variables to bo accessed later on in other classes. For each method, I stored song name, album name, preview url artist name, and artist-related image into those variables.
    • Genius API:
      • I used genius api to get lyrics information for each artist and their songs. All information related to this api is stored in GeniusLyrics.py file.
        • First I installed a library called lyricsgenius to easily pass through the authentication system and generate data.
        • I used 3 methods for each top track to authenticate, parse the lyrics url, and save it as strings into global variables. The following are the methods: request_song1_lyrics, request_song2_lyrics, request_song3_lyrics.

  • Flask app:

    • I imported GeniusLyrics.py and spotifyAPI.py files to export the variables. Then created lists to store song names, album names, artist names, preview urls, and artist images using those variables. Then saved urls as strings.
    • To randomly generate a new artist-related info across each page loads, I used the following logic. Defined under my index function, it randomly choices artist names and assigns it to a variable named: randomly_Generated. I render my index.html page and export my lists and variables. So in my html page if the randomly artist name for each reload is (artist_name), then only display content about that artist. I used jinja template for my conditional statements.

Cloning my repository:

Clone the repo:
git clone https://github.com/esala1/SpotifyWebApp1.git

Install The Following Packages (if you don’t already have them)

  • pip install python-dotenv
  • pip install python-decouple (an alternative to dotenv)
  • pip install geniuslyrics
  • pip install spotipy

Setup

Create .env file in your project directory in order to create your environmental variables and hide sensitive information.
In the .env file do the following:

  • client_id = “<insert-client_id>”
  • client_secret = “<insert-client_secret>”
  • {insert-artist}_id = “<insert-artist_id>”
  • {insert-artist}_id = “<insert-artist_id>”
  • {insert-artist}_id = “<insert-artist_id>”

Deploy to Heroku

  • Install Heroku CLI: https://cli-assets.heroku.com/heroku-win32-x64.tar.gz. This could take a few minutes. In the meantime…
  • Create a free account on Heroku https://signup.heroku.com/login
  • Create a requirements.txt file with all your libraries used for heroku to create dependencies, separated by a newline. In our case, they are Flask w/ a capital F, requests, and python-dotenv. Note that libraries like os are standard imports, so they don’t need to be included.
  • Create a Procfile, which has the command that Heroku will use to run your app: web: python app.py (see documentation https://devcenter.heroku.com/articles/getting-started-with-python)
  • Add + commit all changed files with git
  • Log in to Heroku: heroku login -i
  • Create a Heroku app: heroku create. This will create a new URL and associated host for you.
  • Push your code to Heroku: git push heroku.
  • Go to https://dashboard.heroku.com/apps and click your App, then go to Settings, and click “Reveal Config Vars”
  • Add your secret keys and associated values from .env
  • done!

GitHub

https://github.com/esala1/SpotifyWebApp1