Sunday, August 11, 2013

The Wire Watcher

You can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. - Steve Jobs
You know how Infomercials start out the same way? "Does this happen to you every time you want to make an omelet?" and then someone tries to flip an omelet and the egg explodes across the entire kitchen and catches on fire. I feel like app pitches start off by saying, "you know how you always have a problem?"  Generally you hear that and think, "I don't have that problem."  Then you tune out.
I built an app.  I built a "scratch your own itch" app.  I watch a bunch of different shows across various sources: Netflix, Hulu.com, NBC.com, ABC.com, etc.  What I needed was a way to keep track of all the shows I was watching, what was the next episode I wanted to watch, and let me know if that episode has aired yet.  Oh - and one more thing, when I mark it was watched I want to post that to Facebook--the same way GoodReads posts when I read a book.  I figured this would be a pretty easy app to build and I whipped together the first version in about two weeks (maybe 20-30 hours).
It's a webapp - but I'm working extremely hard to make it look and feel like a native iOS app.

HTML5 Boilerplate - I started with the HTML5 Boilerplate template which gives a basic HTML layout that is optimized for mobile websites.  It contains links for all the iOS startup screens, Windows Phone 7 Series, all that good stuff.  I've used it as my starting point for my web projects.
Dropbox Datastore JS - While I'm using HTML5 Local Storage for most of the local stuff, I wanted a place off of the device to dump the data and to be able to sync between devices.  I'm using Dropbox Datastore JS to do this and it's fantastic.  It syncs across devices, it's all JavaScript, and I don't have to write an authentication layer or host any server-side code for it to work.
The TVDB -  Love these guys.  This is a creative commons, open source, community managed television database.  It contains episodes, images, and a full API for access.  The challenge with it is that all the pages and the API don't have CORS headers, so I can't make direct calls to it from my webapp.  The pages don't have Facebook Open Graph tags, so I can't post Facebook "Watch" actions directly to it.
Google App Engine - To work around the two limitations of The TV DB I'm using Google App Engine.  I have a very bare minimum of code hosted there.  I proxy the calls to The TV DB from my web app and insert in my API key on the backend.  This is nice because it protects my API key.  I also proxy all the pages to the individual shows and episodes so that if they are requested by the Facebook OG crawler they return proper tags and if you click on them from any other browser they just take you to the TV DB.
For now everything is working properly.  I've submitted it to Facebook for them to approve the OG action.  My expectation is that FB will deny it, but we'll see how it goes.  For now I'm excited.  It's been a long time since I wrote an app that was more than a simple utility.