Dynamic Web Dev Final: Karaoke Flow

My NYU-ITP Dynamic Web Dev class ended up being fantastic.  We moved to Node.js Express, incorporated AJAX, MongoDB, Heroku, and Amazon S3, built a JSONic API, and toyed with socket.io and even some Processing + HTTP POST.  You can read the class notes and fork/view the github class code from Professor John Schimmel’s repositories online.

Karaoke Flow

My final project ended up being a party game.  People hit the site, probably best with a keyboard, and start creating “rhymes” based on a prompt of two topics, such as “yo momma” and “swag”, or “basketball” and “Maybach music”.

You start off with three choices: 1) start a new “flow” (an individual song) which 2) you can join into with the second choice (using autocomplete JavaScript to parse a list of open flows from the database), and 3) skip all the rhyme creation part and go right to performing a randomized flow.

If you work on an open flow, all the participants have five minutes (using a JavaScript countdown script) to come up with as many rhymes as you can.  When five minutes is up, everyone can submit one more rhyme before they’re sent to the performance page.

On the performance page, the next person up will (eventually) be able to grab a mic, start the random beat (so far I have random beats from Wiz Khalifa’s “Star of the Show”, Three Six Mafia’s “Hard Out Here for a Pimp”, and Drake’s “I’m on One”), and move up and down through the lyrics using the ‘j’ and ‘k’ keys.

 

 

 

I’m hoping eventually it can be recorded and people can vote on the best rendition of the performance.  People are judged (though this isn’t captured through the site yet) on how well they deliver their spontaneous flow.

I wanted to do a project related to music and parties, hence the project; hopefully at some point in my life, I’ll get to work on projects that make parties more kickass through technological integration with human party impulses.

Karaoke Flow was also my entrée into Node.js and Express, which I now love and will rewrite Galapag.us into it over the summer in preparation for my thesis next spring.

Online Presence

A demo of the site is up at Heroku: http://karaokeflow.herokuapp.com/

I have instructions on how to clone the code and install it so you can run a node.js instance at github: https://github.com/Xeus/Karaoke-Flow

Previous documentation from my blog: post #1, post #2.

Things Learned for the Future

I think what I got most out of this was an appreciation for JavaScript objects.  To be able to package up variables and containers and clone objects or pass them along into JSON, it was like what I was missing in web sites.  I’m still on the road down to something more like Backbone.js, which will allow for even more use of objects and static templating filled in with data.  Definitely enjoying being able to JSONify data into something that I can use throughout the site or offer to others.  I’m sold.

Our professor showed us passport, which is a brilliant module for handling users and security.  I was missing something similar when I was using Ruby + Sinatra.

Conclusion

If anyone’s interested in taking this further with me, let me know.  I definitely think some combination of karaoke, rhyme-writing, parties, and randomness would be a huge hit.

Dynamic Web Dev Week #4 Homework: Karaoke Flow

My Karaoke Flow project has now been moved over to Node.js Express.  What a joy!  Express is like a beautiful JavaScripty version of Sinatra for Ruby.  And then installing the node module nodemon is a perfect substitute for shotgun on Sinatra.  This stuff makes webdev exciting again!

I upped the new code to github, which is using a few views to display the (so far minimal) code and templated structure.  I’ve also deployed the app to heroku; you can see it at http://karaokeflow.herokuapp.com/ but nothing’s really working there yet since we haven’t learned how to hook into MongoDB yet.

Here’s some screens of the app now:

Next steps: set up the MongoDB structure, hook into it, and figure out a way to implement a timer that starts once someone creates a flow.  Then people need to be able to join that flow and everyone needs to be on the same timer.  I’m not sure how this will work — maybe I’ll just scale it back for now.  I’d also like to have random hiphop beats playing while people come up with their flows.  The production side, once someone starts performing — this will have to come at the late stages, if it’s possible.

DWD: Karaoke Flow

For my week #2 homework in Dynamic Web Dev, my assignment was to play a bit with JavaScript and CSS in forms, to basically build a front-end prototype for a project for class.

I decided to use this as an opportunity to do a simpler project (at least initially), called Karaoke Flow.  It could also be called Rap Libs (like Mad Libs, RIP the creator of Mad Libs :( ), as suggested by one of my classmates.

Basically what Karaoke Flow is is a chance for me to use puns and wordplay (in the tradition of my Turner family and my dad’s poetry expertise) to create dope rhymes.  I also wanted to create a cool music project and learn how to DJ and make digital music possibly while at ITP.

Karaoke Flow is a party game.  Everyone gets a certain amount of time to create 2-4 lines of rap lyrics based on randomized prompts for two topics.  So each person will write some lyrics on something like “basketball” and “women”.  After, say, 5 minutes, the rhyme creation is over.  Then whoever’s got the mic next will get up and perform the randomly selected lyrics.

The emcee gets a mic, a random beat, and the random lyrics.  That’s it.  It’s his or her job to create the flow, matching lyrics to the beat, and possibly freestyling if confident enough.  It can be recorded, it can be based on just one set of two topics, or it could just be all sorts of randoms.

I was inspired by this on my long runs where I’d listen to Drake, Lil’ Wayne, and Kanye.  Check out some of their winners:

Drake, “Fancy”:

Jason had this girl Tammy with a purple Bentley
How she got it I ain’t never get to ask
I just knew that she was fine like a ticket on the dash

Kanye West, “Hell of a Life”:

One day I’m gon’ marry a porn star
We’ll have a big ass crib and a long yard
We’ll have a mansion and some fly maids
Nothin’ to hide, we both screwed the bridesmaid
She wanna role play, ‘til I roll over
I’mma need a whole day, at least rolled doja
What party is we goin’ to on Oscar day
‘Specially if she can’t get that dress from Oscar de
La Renta, they wouldn’t rent her, they couldn’t take the shame
Snatched the dress off her back and told her, “Get away.”
How could you say they live they life wrong?
When you never fuck with the lights on

Kelly Rowland, Lil’ Wayne, “Motivation”:

Uh, girl I turn that thing into a rainforest
Rain on my head, call that brainstorming

By the way, rapgenius is a great site.  It has highlighted lyrics with popups that explain all the references within each line of the song.  Helps you appreciate just how much cleverness goes into rap lyrics.

Right now the JS functionality is basically limited to a click() event for submitting, and a click() event for a popup for instructions and one for adding new text input boxes for more rap lyrics.

I’m assuming I can use this front-end to interact with node.js, which will sync clients with the server and end a timer clock at a sync’d time.  I’m also hoping to use MongoDB to save the lyrics and to add more lyrics from current rap songs.

Other features I’d like to have: ability to record and playback peoples’ performances, remixing like Reggie Watts does on the fly.

http://www.youtube.com/watch?v=es3H0_IMLvo

There’s not much at Karaoke Flow yet, but you can already go visit the site to see the interface.

I am maintaining the code publicly on github. And here’s the JSFiddle:

Dynamic Web Dev & Mobile Web: Final Project Proposals?

For my Dynamic Web Development class (DWD) (syllabus), my first homework assignment was to lay out a proposal for a final project.  Here is the class description:

“The class will cover server-side and client-side web development topics using JavaScript. On the client-side, we will cover traditional JavaScript and the jQuery library to manipulate browser content, create and trigger page events and make AJAX data requests. Developing with NodeJS on the server-side, we will explore receiving input from a user then querying and saving that data to a database, and finally, returning the appropriate content to the client, i.e. HTML or JSON. The websites we use today are rarely on a single database, we will focus on consuming data APIs from websites like Foursquare (for location information), Facebook (for social graph) and Twilio (for SMS and telephony). Going further, we will create custom data APIs for use at ITP and open to the public.”

I’m looking forward to using node and also Twilio (I’ve dabbled a bit in both).  I think Twilio interaction may overlap a bit with my Redial class, which uses the open-source phone comms software Asterisk.

I’ve been working through some codecademy exercises, as instructed on the homework assignment.

I think this class will also dovetail nicely with the mobile web class I’m taking.

For these reasons, I wasn’t entirely sure which idea I wanted to do for my final project just yet.  It could be that I build the back-end for an app for my DWD class but then do a front-end for an Android phone in mobile web class.

Final Project Ideas

Moment Quests:

Part scavenger hunt, part walking tour, part questing/geocaching.  Say you send your girlfriend on a moment quest by sending an invite to her on her mobile phone or browser.  She can accept the quest or delay it or do another quest instead.  Rewards are important — you might not want to do a quest if the payoff is too low!  An instruction will tell her what to do next, where to go, etc.  Once she’s there, she has to offer proof that she’s completed the step: a photo of a receipt, a photo of a landmark, a description of a sign at the exact point, etc.  Then the next stage is unlocked, either automatically or manually by you upon verification.Once she completes all the necessary steps in the quest, a reward is unlocked, or the final step in the quest takes her to her award (e.g. you’re waiting there for her, a gift is given by someone at the location, a secret GPS coordinate is unlocked, etc.).

What’s great is that the infrastructure is flexible — it would just require some GPS checks or a way to approve submitted proof of completing tasks.  You could also make public moment quests.  Companies or promotional events could do one-day quests which pit people against each other to be the first ones to finish, or to find something.Part of what inspired me to do this was Daniel Suarez’s book Daemon, in which the AI software chooses its chief real-world henchman, Loki, after he completes its quest: he’s an avid Wolfenstein gamer who comes across a unique server with an original map which is nearly impossible to beat.  Loki figures out how to beat it though, and then he is initiated into the AI’s recruiting process, where he has to drive out into the middle of nowhere and find his way into an unmarked building.  Once he passes these stages, he’s given a meshnet of killer motorbike drones and other special equipment.  Pretty wicked.

The app will probably require a mobile component, which might use the internal GPS as well as the camera for verification.  A backend will have to be built to store details about the moment quests and what stage of completion a person is through them.  Personal details will need to be saved as well to save info on awards, unlocks, communications between the quester and the dungeonmaster, etc.

ProbablyGonna:

I worked on probablyGonna last semester for my comm lab web class, writing it in Ruby/Sinatra. I still need to make it more robust and useful, so it could be a good project for DWD.  It involves the idea that you may know you want to go out dancing Saturday night, but you don’t know who else wants to go or who else is already going.  So you put out an general invite and see if anyone else wants to go.  Or say you’re at school and you’re heading out for lunch; you put out an immediate alert for anyone who’s hungry to come join you at this or that place, and so it facilitates future event planning on the fly, unlike Google Calendar which is fairly regimented, or FourSquare, which only seems to capture peoples’ presences at locations after they’re about ready to leave that place.

LiveBeam:

Another classmate of mine, Phil, had the idea to create an app that lets an online social media curator tap into a network of available cell phone reporters.  So say there’s a breaking news event occurring at Zuccotti Park, and a web journalist looks at a location map of nearby reporters who could go to the site and film it or record it.  LiveBeam would allow the curator to ping a reporter and see if he could head over and cover the event.

What follows is my interpretation of his idea — he may have something different in mind!

The reporter would be selected based on proximity to the event, the reporter’s reputation for producing a certain type of content (liberal, conservative, streaming video, professional photos, etc.), and availability.  I found that, in my previous job doing social media emergency management, sometimes reporters didn’t know where the action was, or maybe the reporters were screaming at their editors or bosses that the action would be here instead of over there.  Sometimes the best information on something like a remote-area wildfire in New Mexico or a passport fraud bust in Anchorage would never make it to the mainstream news, or maybe one or two regular joes or local reporters would cover the news.  You can’t always rely on the “best” news sources to deliver all the news and information promptly, particularly if a client is looking for more specific, targeted news that the broader outlets ignore.

There is often information asymmetry in emerging crises, and sometimes the best journalist will not be at the proper location, so there needs to be a way to reallocate reporters to proper sites, or signal the best reporter for a given scenario as the one to follow.  You see this on Twitter during a crisis when the top journos tell everyone to Twitter-follow certain people who seem to be producing the best content possible.

People who continuously deliver the best content after being pinged on LiveBeam could have a higher reputation on a site and would become the people who’d be pushed to head on-site.  But there’d still be other options for redirecting traffic towards the best-positioned journo/reporter in any given crisis.  The other part of this is that there is not really enough recognition online for the role of the curator, whose job it is to filter through all of the noise generated on the internet every day and pick only the most important or under-covered stories, adding his or her own editorial take on why the issue is important relative to others.

LiveBeam is likely to need, at the least, backend storage of how to link the curator to the reporter, and GPS capability to place the reporter on a map so s/he can be notified of directions by the curator.  S/he will also probably want the ability to request a curator turn his eye of Mordor onto another event if that event is deemed more important by a reporter.  Or perhaps votes can be tallied by the top emergency management people to raise awareness of an issue.

Mobile Web Homework

Finally, for mobile web we had to create a quick initial app using some buttons, images, and text.  Below’s a screenshot from the Android emulator (running 2.2):

We’re going to be using some PhoneGap for this class, and I added in some jQuery Mobile to play with what they have to offer.  Download the .zip source. Source of assets/www/index.html below: