Pek Pongpaet

This is the story of how two people who’ve never created a mobile application developed an iPhone app at the Day of Mobile Hackathon on March 6, 2010 in less than 12 hours and went on to win the Best iPhone App prize of $250 cash.

First off, what this blog post isn’t:

• It’s not a get rich quick scheme. (Well, maybe it is, if it motivates you to crank out some apps with some new gained knowledge).
• I’m also no trying to sell you anything. There’s not going to be some affiliate link or buy this e-book crap.
• This is not a turnkey solution for a non-techie. If you can’t code, other than it being a good read, this article is not helpful to you. These aren’t the droids you’re looking for, move along.

If you are still reading this, awesome!

Day of Mobile is a one day developer conference focused on the mobile phone industry. Speakers range successful iPhone app developers who made gobs of money to a lawyer who talked about the legal issues that come up when creating these apps. At these types of conferences, it is not unusual to have a hackathon.

My friend Chad Paulson and I decided to partner up and compete in this hackathon. I’ve served as a judge at 2 hackathons including SocialDevCamp 2009 Chicago and Google Android Eco Challenge Hackathon in Chicago. Both hackathons turned out really well in terms of number of teams competing and apps that came out of it. Chad’s app actually won Best Overall at SocialDevCamp. He made out like a bandit. I was really pumped and inspired.

However neither of us had ever made a mobile app. I made a hello world iphone app that had a label that said hello world over a year ago. That’s about my level of experience with Objective-C. Since it was a one day hackathon, we really didn’t have much time. The conference started at 9AM on Saturday and code freeze was 2:30PM.

With that in mind we had to find a solution that would work for us. I had already done a tech evaluation of several mobile development platforms including Appcelerator Titanium, PhoneGap, Flash CS5, Mono, Rhodes and others for a client who was looking into mobile apps. These are development platforms that provide a layer of abstraction that allows one to develop a mobile app that would publish to one or more platform without having to learn said platform. In that research, I had concluded that the solution that would work for me and my team was Appcelerator Titanium because we were web developers who were comfortable with javascript and html. That’s what I ended up going with when we did this hackathon.

The mobile app that Chad and I decided to develop for the hackathon was a mobile version of my webapp, a social media monitoring tool. In keeping with the spirit of the hackathon, we decided not to start coding till Thursday (keeping development time under 24 hours). We realized later on that some of the other teams had been working on some of these apps for a week and had more people on it even. However, what we did do is install the necessary software before hand and started to figure out HOW to do the things we needed for our app. I also started designing the screens before hand so that we would hit the ground running the second we started coding.

If you think of it as an Iron Chef episode, we essentially figured out what we were going to make and had done all the prep work like chopping vegetables so that once the competition started, everybody just started doing stuff.

Friday March 5th, 10:00PM. Chad gets home from dinner with his girlfriend. We already had a skeleton project that was created when you create a new blank project in Titanium. We also already had Kitchen Sink installed. It’s a sample project provided by the Appcelerator guys that has all the sample code you would need to get started on anything except the most esoteric of projects – hence the name Kitchen Sink.

Since my web app already had a REST API that we could access, we just had to figure out how to make those calls and display them in the conventional mobile way, usually in a list. By 3:00AM, we had many of the screens showing dynamic data. By that time, I started to keep dozing off on my computer. I tried to push through but ended up going to bed around 3:30AM. Chad wanted to make more progress so he cranked at it till around 7:30AM. That was around the time I got up and I dragged my groggy self to the conference and started coding again.
When Chad got up at 10:30AM I had the final screen working.

At this point the app was basically working but it didn’t have all the bells and whistles of a usable mobile app (like back buttons between views, title bars, etc). Overall, at that point, I had put in say 7 hours of work and Chad about 9 hours. It’s a testament to the ease of use and power of Appcelerator Titanium.

We spent the remaining time till 2:30 tweaking and cleaning up the code and making sure it was a polished app that would demo really well. I also used some of that time to work on my slides for the demo presentation.

To be honest, I didn’t think we were going to win anything. After seeing all the demos from the various hackathon teams, we were very impressed. Each app was cool and compelling in its own right. I was very surprised when we ended up winning the Best iPhone App category. There were 11 teams with about 4 or more iPhone apps if I remember correctly. That was the end of the journey. By that, we were so tired that we just wanted to go home and pass out.

Popularity: 41% [?]

As web designers we must resist the urge to keep adding. Clients often want more features and we struggle with how to do that tastefully, and in a user friendly manner. We also want to make our designs “prettier” by adding more “stuff” to it. This tidbit of advice from Coco Chanel for women resonates with me as a designer.

Do the hair. Do the makeup. Get yourself fully dressed and then, before walking out the front door, pause by the mirror and remove one item. Maybe it’s the hat. Maybe it’s the piece of jewelry you really don’t need. But the line, according to Ms. Chanel, between knockout and near miss could be found in a single overdone object.

link here

With that in mind, I’ve started to really think about the current project I am working on and what I can remove.

Popularity: 18% [?]

With all the buzz going on with the release of Apple’s new iPad – a multitouch tablet computer, my friend Scott Robbin came up with a keyboard concept that he believes is an improvement from what Apple is offering. I thought it was a great idea because made the tablet work like a blackberry almost. You used your thumbs to enter the key strokes as opposed to hunting and pecking with one hand while holding the iPad with the other. It also had the advantage of not obstructing the center with your hands or the keyboard.

However I thought that Scott’s concept, as well as the original iPad soft keyboard have limitations of their own, namely that both require you to use both hands. Scott’s post sparked my own idea of a soft keyboard that would require only one hand to operate.

You’ll have to forgive the actual design, but I whipped it together in a few minutes using the Shear filter in Photoshop. The point is that the curved keypad allows you to use your thumb to type while holding the iPad with the same hand. This way, you use the iPad on the train or bus if you had to hold onto the railing. Naturally if you were left handed, you could flip the keyboard to the other side.

Popularity: 34% [?]

I spent this afternoon putting together a quick demo for my Rich Internet Interfaces Beyond Mice and Keyboards talk I’m giving at the DePaul University iTea Seminar tomorrow. The example is a simple one that illustrates using a WiiMote as an interface to controlling a 3D model. This can be easily used as a game control and or more general UI control. I believe it is a more natural way to interface with 3D elements navigating in 3D space and can be generalized to let people more intuitively navigate through and interface with software such as the operating system. After a few hours of looking for the WiiMote, charging it and some coding, I’ve put together this simple demo:

I can’t claim credit for putting together code to display a 3D X-Wing. I’m not interested in that. I quickly found what I was looking for here: http://code.google.com/p/papervision3d/downloads/list – the source code repository for PaperVision – the open source 3D engine for Flash. At the very bottom there’s sample code for displaying a 3D X-Wing.

First things first, you will need the WiiFlashServer that interfaces the WiiMote with your Mac. That code and supporting documentation can be found here: http://wiiflash.bytearray.org/. There are 2 pieces to the puzzle here. The WiiFlashServer which listens to the WiiMote and sends messages to your app and the WiiFlash Actionscript API which can receive those messages.

Once you download the Actionscript API and put that in your project directory, include it in your application:

import org.wiiflash.Wiimote;
import org.wiiflash.events.*;

var wiimote:Wiimote;


Initialize the Wiimote like so:

wiimote = new Wiimote();
wiimote.addEventListener( Event.CONNECT, onWiimoteConnect );

wiimote.connect();


The only thing we really have to do now is to use the pitch, yaw and roll values of the WiiMote and use them to control the X-Wing, like so:

function handleFrames(e:Event):void
{
var rotX = 0;
var rotY = 0;
var rotZ = 0;

// added easing to smoothen motion
group.rotationX += ( -rotY - group.rotationX) / EASING;
group.rotationZ += ( -rotX - group.rotationZ) / EASING;
}

You can see from the code there’s a section I commented out. You can use the raw WiiMote values to feed to the X-Wing directly but I found that the values can be jumpy and discreet causing the X-Wing to turn and move with a lot of jitter. I added a simple easing function to make the movements smoother.

As you can see, it’s not rocket science. With a little bit more work, we can easily add other controls like button presses to control the firing of the X-Wing.

Here’s the link to the source if you’re interested. Thanks for watching.

Popularity: 10% [?]

This evening I gave a talk for the Chicago Interactive Designers and Developers Meetup. I’ve been so busy lately that I did not think to promote it well in advance. As a result I didn’t get the word out about it until late in the afternoon today.

With tools like Twitter search and bit.ly, I was able to track all the chatter leading up to it and as well as during the talk. I was so excited to see all this data that I felt like I had to share this experience for people who doubt the utility of Twitter.

3:00PM – I send out my first Tweet about my talk. Mind you my talk is at 6PM. A few moments later I send out another Tweet about it.

In about 2 hours, I count 10 tweets regarding the event, using a quick search for my name or the talk. I also track the amount of times that people click on the link to the talk page. By 5PM there are over 50 clicks to the page. At this point I’m pretty giddy. I’m no David Armano or Frank Ze so 10 tweets and 50 click-throughs is huge.

I wanted to see if people would tweet about the talk during the talk or afterwards. This was what I did to foster that. Once the talk begins I start off by telling people to use the hash tag #chiixdd (for Chicago Interactive Designers & Developers). Judi the organizer also tells people to use #cidd. On the front page of my presentation I also give my Twitter username.

A quick search on my name right after the talk yielded this – around 13 tweets.

Digging a little deeper I found other mentions:

What’s cool is Roundarch (the company that puts food on the table for me) got mentioned and so did Merapi, the Flash Java Bridge created by by Adam Flater, another Roundarcher.

Another interesting measure is to look at the number of followers that each person who tweeted your message has. Essentially that is the number of people who heard your message. I counted up all followers and it came to 4314. So the key in Twitter’s utility is other people spreading your message. If it was just up to me, only 629 people would hear my message but because other people have passed my message along, my reach has increased 4 fold in this instance. And I’m some super no name guy. Imagine if you had 20,000 followers and thousands of people who retweeted your message.

Did I also tell you bit.ly is the bomb? Before if you pasted a link on Twitter, you’d have no way of knowing how many people clicked on that link if it wasn’t your own site. A quick look at the bitly page for the meetup page that I tweeted tells me over 100 people have clicked on the page at the time of this writing.

So for all you Twitter haters or people who think that there is no use to Twitter, think again. In a very short amount of time (3 hrs), a no name speaker such as myself is able to broaden his reach in getting people to know about his talk. About 70 people RSVPed and about 40 people showed up. I’m told that it’s a pretty decent turnout and that the ratio is usually about 50%.

If anyone has great Twitter stories, I’d love to hear them as well.

Popularity: unranked [?]