Some people consistently run the same event/distance every year, so they have no problem remembering their PRs. I like to try out new events/courses, and occasionally mix in a familiar event from a previous year - which further complicates the mental organization of stats.
Fortunately, most of these events have the finishers' information available via their websites, so with a bit of searching, I can eventually recall my stats from the past.
But this brings up the question: Wouldn't it be great if there was a web interface to search all of those web interfaces simultaneously?
Swiss Army Node
If you haven't already noticed from my previous blog posts, I love Node.js (and/or io.js - hopefully they'll become the same thing again). Node.js is great at handling lots of input/output requests asynchronously, efficiently, without needing lots of code - especially if you use Promises to manage the application flow. Working from the back to the front
I prefer to start applications "from the back" - making sure that it's feasible to gather the necessary data, finding out what the limits are, and building an API that the front-end can use.I started with a list of popular running events in the area, and discovered that three of them used the mtec service to host the results for the past few years, which makes it super easy to get things started:
- Monster Dash Half Marathon and 10-Mile
- Twin Cities Marathon and 10-Mile
- Grandma's Marathon and Half Marathon
Using Chrome Dev tools, I looked at the request being sent via their search form, and the markup that's returned (yeah, markup) - which can be a bit dangerous if it's not escaped correctly. For example, if a person has an apostrophe in their last name, this returned from their server:
<tr ...> <td href="#">Firstname O'Lastname</td> ... </tr>
Ideally, the apostrophe would be ' (but not mandatory). But this makes me wonder what would happen if I signed up for a race and entered my name as <img src="..."/> (which reminds me of Bobby Tables).
Putting the pieces together
In the Node app, here's how I chose to implement the searching:- request and bluebird: From the back-end, I used the request package to create the HTTP/client connection to the race-results provider. Instead of using a callback function, I prefer to use Promises, so I wrapped the library using bluebird.promisify.
- cheerio: The race-results provider returns markup, but I'd prefer to use JSON for passing data. The cheerio package makes it super simple to use jQuery style selectors for parsing the text from the markup.
- bluebird again: In order to query lots of races simultaneously, I make a bunch of HTTP search/requests (which are now promises), and then use bluebird.all to wait until all of the searches have completed. Ideally, there should be a timeout promise in here so that if any of the individual search requests stalls, it won't delay the other searches.
Back to the Front
I've enjoyed using Angular UI Bootstrap on previous projects, so I wanted to branch out and try using Angular Material library. They share a lot of common concepts, such as the Bootstrap Grid versus the Material Design Layout Grid. It's nice to have resources that get a web interface up and working quickly and easily.The UI is extremely simple, consisting of a single view that contains a few input fields, which are forwarded onto the back-end race-results providers.
To the Cloud
Given the straightforward/simple implementation of this app, it was easy to deploy into a Heroku Dyno. The app spends most of its time sleeping, so the initial request is always very slow (takes about 5 seconds for the Dyno to awaken).Here's the deployed/running app: http://runcreeper.herokuapp.com
Show me the Code!
The code is available on GitHub at: https://github.com/panurgy/run-creeper
No comments:
Post a Comment