Completed Example

Example app

Here's a repl with mixtape.py completed, and the cards filled using data previously written to the replit database:

Code walkthrough

Most of the remaining code was added to the following files:

• mixtape.py: so that tracks_detail, imported into main.py, contains the necessary data for our template
• templates/track_section.html: so that the cards for each track are automatically populated using this data

Collection of the data from the API of course requires a valid access_token, which was updated in auth.py.

The reset_votes() statement in main.py has also been commented out after the first execution of main.py, so that the vote counts are retained even if the repl is re-started.

Data collection

Let's go through mixtape.py:

from auth import access_token
from tracks import get_track_data, track_summary
from replit import db

track_ids = [...]
tracks_detail = []

• we've imported the various components we require from several other .py files
• we've specified six track_ids that we want to collect data for
• we've created an empty list called tracks_detail

for track_id in track_ids:

    if track_id in db.keys():
        data = db[track_id]       
    else:
        data = get_track_data(access_token, track_id)

        if data:
            db[track_id] = data    
    ...

• we're going to iterate through each entry in track_ids using a for loop
• we check to see if track_id is a key in the db (meaning it has been stored previously)
• if it's in the db we collect the data from there
• if not, we use get_track_data() to request it from the Spotify API
• if our request is successful, we write the returned data to the db

    ...
    if not data:
        print(f'Something went wrong with track {track_id}')

    else:
        tracks_detail.append(track_summary(data))

• we check to see if data is not "truthy", i.e. it is not None, empty, zero, etc (if there has been an issue with collecting the data from the API, get_track_data() would have returned None)
• if data is truthy, we process it using tracks_detail() and .append() the result (which will be a dictionary) to our tracks_detail list, which is imported by main.py

Jinja template

Take a look at tracks_section.html in /templates.

{% for track in tracks_detail %}
...
<img class="card-img-top img-responsive full-width" src="{{ track['image_url'] }}">

The Jinja for statement was already in place, to create a card for each item in tracks_detail.

• in the original file, data-src was used with the holder.js image placeholder service
• here we use src, and the value is changed to use the image_url for the given track

<p class="card-text"> 
    <strong>{{ track['track_name'] }}</strong><br>
    {{ track['artist_name'] }}
</p>

• within the card-text paragraph, we've added the track_name and artist_name values from each track dictionary in track_details
• we've used a strong tag to make the text for artist_name more prominent