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

In my first blog post, I introduced the concept for hmny. My main goal for the ChiPy mentorship program is to create a functioning prototype which will allow users to create playlists containing tracks from either Soundcloud, Spotify or Youtube and play them back on hmny’s own custom audio player.

Before starting my project, I had heard of Model-View-Controller “MVC” architectures for software/app development, but I had absolutely no idea what this actually meant. Django is my very first look into this technology, and slowly but surely, I’m learning the power and capabilities this development architecture has to offer.

After some initial setup, I began by running through the tutorials and documentation hosted on Django’s official website. I eventually got through their 7 part tutorial, but for me it was not an easy process, and wanted something that broke it down even further. I decided to dig around the web a bit and found Djangogirls.org, which has proven to be a wonderful learning resource so far. After getting an idea for how the models, views, url dispatcher and templates would work together in order to make a functioning web app, it was time to define hmny’s own custom models.

Models

Simplicity is key for now, so I decided on three classes to get started: HmnyUser, Playlist and Track.

The HmnyUser object, inherits from Django’s built in User class, imported from django.contrib.auth.models

I knew that each instance of a HmnyUser should be able to have any number of playlists, and that these playlists would contain tracks, but struggled to visualize the relationship between these models. My mentor led me to the magical discovery of entity relationship diagrams (ERD).

I learned that Cardinality and Ordinality are respectively, the maximum and minimum number of times an instance in one entity can relate to the instance on another. This was definitely my first “eureka!” moment, because it allowed me to visualize the model relationships and gain a better understanding of the main database structure for the hmny app.

A HmnyUser should have zero to many playlists, and each of these Playlist objects can have zero to many related Track objects.

Views

After defining the models, it was time to start working on the view functions. A view is a python function that takes in a web request, and returns a web response. At this point, I’ve made the most progress on the login view, and have successfully authenticated my test user “Wendall”. After Wendall (or any user) logs in, he is taken to the playlist view, which will ultimately be the main part of the Django site. So far, I have figured out how to use Django’s built in template language to display the user’s Playlist objects with the playlist Track objects nested inside. By the end of the mentorship, hmny should have the following views/pages:

Login view in action

• Welcome — provides a description for the main functionality of the app, and directs user to create an account or login to their existing account.
• Login — you most likely already know the purpose of this. Not to be confused with Kenny Loggins.
• Playlists/audio player— allows a user to listen to their tracks.
• Edit/create playlist — you guessed it. This allows a user to edit/add songs to their created playlists, or create a new playlist.
• Account/profile settings — allows the user to change their profile settings, and connect their profile to the Youtube and Spotify services.

Struggles/Obstacles

Currently, Soundcloud is no longer providing authentication keys to their API service, so I will need to pull the embed code for each track that a user adds to their playlists using a web-scraping library, which will most likely be Beautiful Soup. Web scraping is an entirely new concept to me, so this will add a lot of work outside of Django development.

What’s next?

• Continue to develop the playlist view which will show a user’s created playlists, and an embedded audio player containing the playlist’s associated tracks.
• Connect the Youtube and Spotify API’s to the hmny app.
• Use beautiful soup to find and pull the embedded link to a track’s Souncloud widget player. This is a substitute to using Soundcloud’s API. (No longer providing authentication keys to their API).
• Create the user account/settings view which will manage a user’s personal info and authorization to third party API’s
• Design hmny’s audio player. Like this one.
• Design the main layout/template that will be used on each view of the web page. For this, I’ll need to brush up on my HTML and CSS skills. I will likely need to turn to JavaScript for some UI design elements, but this may extended beyond the scope of the mentorship for now. My main goal is to have a working prototype, which doesn’t need to look pretty, so this will likely be a future endeavor.

Stay tuned

For my next and final blog post, I should have a working prototype for the hmny app. (fingers crossed) As this is my first web app I’ve ever created, I anticipate that functionality will be limited to begin with, but will discuss my thoughts on the project overall, and present future plans for improving the overall functionality and user interface.