Problem:I teach a hands-on multimedia class of 25-30 students. During lab times, the students often need help. I was finding that as I was helping one student, their neighbor would grab me as soon as I was done, and I could never get to the other side of the room.
I wanted a way to create a queue that made it fair to all students.
- Students didn't need an account or access for it
- Would always be available, so that if they were having a problem before class, they could be first in line
- There was a mobile option, so I could check the queue while walking around the room. I didn't want to have to go back to the computer to determine who was next
- I could get a notification if I didn't have the queue running on my machine
- Students saw their location in the queue.
- It was easy, without many moving parts. This was something that I needed to stand up in a couple of hours and work reasonably well.
Solution: Twitter as the backend
Twitter offered everything that I needed.
- Already managed and ordered timestamps
- Already had access and notifications on my phone
- Some students already had accounts, but a dev twitter account and simple custom interface would allow for anybody to access it
- Search for the special hashtag, and the queue comes up.
And as an added bonus, I got a chance to play with Node.js, socket.io, JQuery, jade templating, Heroku hosting and a bunch of other technologies which were new to me.
The end result is that the students LOVE it. They recognize that it is fair, and that it is really easy for them to use at any time.
Inspired by Google, my UI was super simple :
The tweet looks like "Drew Shefman needs help #uhmultimediaHelp @UHMultimedia 1390595370659"
- Drew Shefman is obviously the first and last name.
- #uhmultimediaHelp is the hashtag that I've choosen. (University of Houston multimedia). This is ultimately my search term.
- @UHMultimedia is a DIFFERENT twitter account than the dev account. It is the twitter account I use for my class for announcements. I include this in the message, so that I will receive email notifications.
- The number at the end is the timestamp in milliseconds. I found that if a student asked for help twice, that it was not showing up a 2nd time, because twitter prevents a duplicate tweet in a short time period.
So here is the flow:
- On page load and before page display, twitter.search() for #uhmultimediaHelp
- Filter out any tweets older than 5 hours (my class is only 3 hours long)
- Display results on page, showing name and formatted time (HH:MM)
- Student enters name and hits "I need help"
- Socket broadcasts new entry and it gets prepended to the list element
(this is primarily so that there is immediate feedback, and the impatient students know not to submit multiple times)
- On twitter submit success, repeat twitter.search()
- On search success, socket broadcasts a refresh with the resultant search list.
(I perform this seemingly duplicate step of refresh so that if any students are using their personal twitter account, with the hashtag, they will get pulled into the queue. I decided to not use twitter.stream() api as it added a significant layer of complexity. The majority of my students opt for my interface versus using their accounts, so this is a reasonable solution for now. This decision will fail if the number of personal accounts outweighs this queue, as there is only a twitter refresh when a student submits through the queue.
- Then, starting from the bottom of the list, I can help the students in order. Woot!
This was my first foray into a decently complex HTML5 / Node app. So starting out *everything* seemed to be a technical challenge. So outside of googling nearly every single line of code I was typing, here are the specific things that I ran into.
- I choose ntwitter as the node package to leverage for the twitter api. Unfortunately it had not been updated to Twitter's new 1.1 API. So I had to fork it, and modify it for that. You can get that version on https://github.com/dshefman/ntwitter. The change to the 1.1 was simple and you can see it at this commit.
- I tried using the twitter.stream API, but it requires a single instance. But each connection (webpage) was trying to create a new stream. After much researching, there was an idea to create two Heroku instances, one for the stream and one for the app. This was going to be too much work, so I took a different path.
- On Heroku, I pushed up my repository without following the instructions, basically leaving out the init(). Boy it didn't like that. Basically had to delete my whole Heroku account and start over.
- My timezone is -5 from GMT, which is what twitter uses. Not a problem, until 7pm (my class is from 5:30 - 8:30pm). At 7pm CDT, that is 12am GMT (00:00:00), in which all of my displayed times switched to -5. It was a simple solution, but something I didn't account for when I was testing it during the day.
- Initially I didn't provide fast enough feedback, and the students would submit a half a dozen times before it would show up on their screen. Then they were embarrassed for submitting so much.
Technologies Leveraged (Each was decently new to me):
- Jade templating
- Jasmine BDD
- Karma test runner (continuous mode is SUPER cool)
- Node.js / Express
- Twitter API via ntwitter
- Heroku node hosting
Code:You can find the project at:
There is one file missing: twitterAPICredentials.js
You will need to add your own API keys if you want to use the code.
Since I'm fairly new to all of these technologies, I gladly welcome feedback / best practices for improvement. Thanks!