Six Degrees of Marvel - Midterm Documentation

For the midterm I chose to continue the work I started on Six Degrees of Marvel, the wireframing assignment from Week 2. It's a visualization application that shows the user how the characters of the Marvel Comics Universe are connected using jQuery and the Marvel API. 

Based on the progress from the last assignment I was able to accomplish the following: 

  • Remove the junk code that was appearing (thanks Shawn!)
  • Create the viewchanger and have it successfully change the instructions text below it
  • Create two filterable select menus
  • Access the Marvel API to get the first ten characters and add them as options to the filterable menus (thanks to Diego who is my personal hero for helping me figure out just what was going on with the Marvel API)

I ran into all kinds of problems with creating these, especially the viewchanger and accessing the Marvel API. Marvel asks for all kinds of parameters when making a call to their API, including generating a hash from the API key and the timestamp, and requires their developers to register the domains that make calls to it. They have a list of all the possible error results you can have returned to you if your call fails. So I did a lot of research into the MD5 hash and tried multiple ways of creating it, from using the hash function in php.js to the CryptoJS library from Google. I also tried to test my code locally, but Marvel has a weird way of inputting domains for you to test on which took a long time.

It was an exercise in tug of war, but it was a lot of fun!

This really started as an excuse to use the Marvel API, but what I've learned in developing it is that 1 - there are definitely tradeoffs in choosing to do a PhoneGap application versus native or even a Node.js app and 2 - API documentation is horrible. I also found that I was thinking about the architecture of the application moving forward: for example, with my API calls to populate the character select menus, I can cache the list to save myself the call/time needed to populate the menus. This would be easier in native rather than jQuery (I would think). 

Next steps would be to: 

  • Add more than 10 characters to the menus so the user has access to all the characters (I've found a way to delay the loop from moving onto the next set of characters so that the menus can finish populating)
  • Build the results page for two characters selected 
    • Get the images from the characters
    • Animate the results being created
  • Build my algorithm <-- I'm really excited about this one!
  • Cache the list of characters 
  • Build the social graph centered on one character the user selects