hmny — Building My First Music App with Django (Part 3)

Picking up from where I left off in my last post, I’ll be looking back at my journey to build my very first Django application, a music streaming site called hmny.

It’s safe to say that I would not be where I am at right now if it weren’t for my mentor Connar. After every small victory, a new and even bigger problem arose, and he’s always been able to lead me towards a solution.

Since my last post, my main accomplishments have been:

1. Properly rendered a youtube widget from the stream_source field (from the Track model) as an <iframe> element in the template view. (say that three times fast)

2. Pushed main project directory to a remote repository on Git Hub (my first real repo)

3. Created “add playlist” and “edit playlist” views. (next step will be making these into forms)

Last time around, I was building hmny’s main views and general structure for the site, although I hadn’t really implemented any real functionality yet. What do I mean by functionality? Well, this is supposed to be a music app after all, so it’s time for the site to start actually playing music. Piece of cake right?

I’ll be going over the process I took to render a youtube widget to the playlist page.

The first step was to allow a user to copy and paste a song url from youtube, and have it show up on their playlist. This song url should be stored to the Track object’s field: stream_source (see models from last post). Ideally, the user would copy and paste the url into a form on the “edit playlist” page, and a youtube widget would appear. Little did I know, this would take me much longer than I expected. As I’m completely new to web development, I first needed to figure out how to display the youtube player, since just pasting the url in the html wasn’t going to cut it. This led me to the discovery of iframes, which are inline frames used to embed another document within the current html document.

<iframe width=”560" height=”315" src=”https://www.youtube.com/embed/{{t.video_id}}" frameborder=”0" allowfullscreen></iframe>

To properly display the youtube widget for every track in a user’s playlist, I needed to write some code that would parse the URL the user supplied (stored in the stream_source variable in the Track model), pull the video id and insert this video id into youtube’s embed url shown above. This video id is an 11 character unique id given to all youtube videos which follows the characters “v” and “=”.

This code lives in views.py (shown below). This algorithm is able to parse a few different styles of a youtube urls and pull the necessary video id. The video id’s are shown in bold below.

1. The standard url (https://www.youtube.com/watch?v=wvpLjcXU3hY)

2. The shortened url (https://youtu.be/wvpLjcXU3hY)

3. The embed url (https://www.youtube.com/embed/wvpLjcXU3hY)

Below, you’ll see the playlist_detail_page function. For each track in a playlist, this will look at the track’s url (stream_source), and will find the video_id . I used a few if statements to determine what type of youtube url was given by the user, and find the video_id accordingly.

Struggles

My mentor and I originally thought it would make most sense to write the above code in Javascript, but after I spent a week learning the language and feeling I was drifting way outside the scope of this project, we decided it was best to stick with python for now. Much of the cosmetic touches will be applied in javascript/css but for now, I realize I still have so much to learn about Django.

Moving Forward

Slowly but surely, hmny is starting to get closer to where I originally wanted it to be. However, it still needs quite a bit of work . My goal at the beginning of the mentorship was to learn as much as possible about Django, and lay the groundwork for the hmny app. I expect to have a working prototype done by the end of the mentorship, but do not expect it to look pretty. I am excited about the immense amount of knowledge I’ve gained throughout the ChiPy mentorship program and am incredibly thankful for having a great mentor lead me in the right direction. If you’d like to check some of the code, check out the repository here. See you next time!