Adventures with Doodlebuzz

Thanks with some help from @gb_r with the angle rotation math, I now have a text at 90 degrees to the point on the line. 

Over the next few weeks I'm going to be attempting to recreate www.doodlebuzz.com in Openframeworks. I'm doing this, one as it's a bit of a personal challenge, and two because I'm creating a kiosk version for the Talk to Me show at MoMA which opens in July. At first I thought about simply making an AIR app version, as Doodlebuzz already exists in Flash, but I want to see what I can do in OF and see what new creative avenues it might take me down.

As I continue learning to develop iPhone and iPad apps I've been putting any handy bits of code, websites, articles and the like into a special iPhone notebook in Evernote. I've now made this notebook public in the hope that you find it a little bit useful.

http://www.evernote.com/pub/bjdawes/iPhonedev

So yesterday the app that was accidentally created along the way to developing Doodlebuzz for iPad got submitted to the app store. Whilst it's a fairly simple app that makes use of the UITableView for its interaction, I've added a few little tweaks to just play with the flow of the UI. For instance I didn't like how the list of articles "popped" onto the screen when the data was loaded, so I added a much nicer alpha fade. Now it's nowhere near as brutal. I also did the same with the display of topics and the article itself. The app now feels very gentle in its flow, which matches the muted colours of the graphic design. I've always felt that it's these little touches that make all the difference.

The other thing that I've found to be important is testing within the context of its use. As I've been developing the app I've been playing around with it here there and everywhere. On the train into work, what happens when there's no signal, or what happens when I'm going through a tunnel and I'm trying to load an article? How does it work on a really slow connection at a friends house? You get the idea. I found it best to actually forget that I had made it and tried to just use it as a user would. It definitely threw up some things I had to fix during this process. Not just technical connection type things but also UI issues. For example when you tapped in the search box there was actually no way to come out of it without initiating a search! What felt natural to me was to tap the background to remove the keyboard. The code to do this, on a touch gesture was simply:

A simple little line, but it makes all the difference.

This iteration adds a "new search" button, though it's not on every screen yet. I also created a plus icon to use as the new search button and for the first time created a button with a custom image. The plus button is added using this code I found here: 

I've also redone the look which I'm much more pleased with. Of course this is an app that is just being created before I take on the iPad Doodlebuzz app, but I'm thinking this is kind of useful and who knows I might actually release it along the way. 

I've been a long time fan of Instapaper so I thought it might be cool to add "Read Later" support in the app. The Instapaper API is really easy to use but I had to learn how to send a POST request. After looking at various options I found ASIHTTPRequest to be perfect for my needs. It was very easy to get this working - in fact it worked on the first try! On the way to doing this I also did my first action sheet which allows you to either view the article or read later, and I added a UIView that lets you know the article has been added to Instapaper. The credentials for Instapaper are currently hard coded, so I need to add the ability to set your username and password in the app. Oh, and I also changed the topic listing view slightly to differentiate between that and a list of articles.

This build has all the elements and functionality that I'll need for building Doodlebuzz on the iPad. You can now get related topics (I removed the flip view as it didn't seem to fit the UI flow), which then gets more articles based on that topic. You can go on forever exploring articles through related topics. I might also add in support for Instapaper as well as possibly bringing in images. It also needs a quick link back to the search screen. But anyway, so far so good; all the elements from a data point of view are in place. I've learned a lot of stuff so far and it's been fun. Next I need to start drawing some lines...

This iteration added a flip view that will eventually show related topics (though obviously Doodlebuzz won't use this view). I also found out how to extend the UINavigationBar class using a category so I could set the colour of the nav bar. Some URLs that came in handy were: http://howtomakeiphoneapps.com/2009/11/how-to-extend-objective-c-classes-with-categories/ and http://foobarpig.com/iphone/uinavigationbar-with-solid-color-or-image-background.html

Up until now the search was hard wired, so this iteration added a search input field. I also added the article date to an article item. I had to do some jiggery pokery to to create a friendly date from the timestamp_epoch attribute for each article: