Proposal via iPhone app

For those who know me quite well, they already know this, but for those who don’t, I’ll just come clean and say it.

I proposed to my (then) girlfriend in November 2009 via iPhone app. Yes, I’m a nerd. Here’s how it happened.

At Dogma, my current workplace, we would go out for Yum Cha every couple of months ago and just get drunk on Asahi and bloated from chocolate-filled sesame dumplings. During this state, we would have a good long chat with everyone else on the table and discuss what’s happening in everyone’s lives.

For some reason, my co-workers were always interested in when I’m going to propose to my girlfriend, usually I just buff the question off or try to divert conversation to someone / something else, but I was getting a bit tired of that and just blurted out that I had no idea how to. My girlfriend wasn’t like any one else I had gone out with (one of the reasons why I wanted to propose), and I felt that it would be good to propose to her in a unique and interesting way. I definitely didn’t want to hide a ring in a cake or drop it in a champagne glass (that’s so tacky).

Due to the level of drunkedness, the ideas that my coworkers were coming up with were absolute gold. The best one was to create an iPhone app, and I jumped onto that idea straight away as I felt it was really ‘me’. I can’t remember who of my co-workers thought of it first, but whoever you are, thanks!

I had gone out onto the intarwebs a few weeks before that and bought an iPhone programming book – iPhone in Action by Christopher Allen and Shannon Appelcline. The book’s split in two, one section focuses on web programming and optimising for iPhone use, and the other half focuses on the iPhone app with CocoaTouch side of things. I had a flick through it and was pretty daunted with the Objective C syntax — it didn’t seem very C-like to me, and I was very comfortable with PHP.

Time went on and being busy with other things, this project fell by the wayside a little. Lo and behold, the year’s end was nearing and without an iPhone app (at this stage I was completely sold on the idea) I wasn’t going to pop the question. So I made some time in my schedule to sit down and try and nut out this Objective C thing. One of the tutorials was how to load a website in an application, and then I had a lightbulb moment.

If only if I could write the whole application as a website, store it locally within the application, and then get the app to load it up, then I could make the app behave like a native iPhone app, and the turn around could be much, much quicker. Yes, it’s the lazy way of completing the project, but time was against me (I had a vacation to go to with my girlfriend to Sydney coming up, and I wanted to be engaged before then), so I read into it and figured it all out.

So without any further ado, here’s some screenshots that you’d probably be interested in. The application is called iDo. I am aware that another app on the iPhone App Store is called iDo, but since I am not looking at selling this app, this shouldn’t be a problem.

Just a run-down on what each screen does.

• The first screen shows off the icon that I edited for the application. I say edited, as it’s actually an image that I grabbed off the internet somewhere (it might be a free stock image, or it might not, I can’t remember). I’m guessing since I’m not using this application for any commercial gain what-so-ever, that I’m relatively safe using images such as this.
• The second screen shows what my girlfriend would be first greeted with when launching the app. I have blurred out the meaty part of the message, as I’m a private person, and don’t feel comfortable showing the world what I wrote there; they are for two sets of eyes only, mine and hers. Note that I made it so that the ‘No’ button cannot be selected — you have no option but to click on ‘Yes’ to proceed ;) Plus it’s really mushy.
• The third screen needs a bit of background story. Early on in our relationship, I wasn’t exactly made of money so as a joke I would always say that when I propose, it’ll be with a Burger Ring. Hence the Burger Ring in the top slot on this screen. My girlfriend some time ago had actually shown me what style of ring she wanted, when I was ready to propose, to make sure that I get her a ring that she likes (which I think is pretty important). The ring in the third slot is the example ring she showed me, I had to find it again to place it in this app. The ring in the middle is something that I came across when trying to find some gag ring I could put in there — it’s a Chupa-Chup ring.
• The fourth screen shows the highlighting that happens when you tap and drag a ring from the left side to the hand. It glows white.
• The fifth screen is a shot of the animated GIF that I found of fireworks after some rummaging through Google Images. It was luckily big enough to fill the iPhone screen.

The techincal details of the app is as follows:

• The only Objective-C / CocoaTouch part of the whole application is the iDo shell — in the view files, there is just a UIWebView that gets populated with a local file (index.html). It’s index.html (and subsequent pages like page2.html, etc) that contains the “controller” (if you were to think of it as MVC).
• There are other frivolous things in iDoAppDelegate.m that controls things like the colour of the status bar.
• The HTML files were interesting — I found out via trial and error that it’s hard, nay, impossible, to link CSS files and to get them to load properly when the app was running. So all the CSS is embedded in the HTML files. <img> links etc were fine though.
• I used iPhone-specific JavaScript to prevent moving the whole web view around when tapping and dragging (like what Safari does by default when loading a page) , and to handle the tap + drag of the rings from the left side to the right.
• The highlighting of the hand is actually executed by two images, hand.png and hand_w.png. They get swapped in via some JS, just your basic document.getElementById(‘hand’).src = ‘hand.png’ kind of thing. There is some x-y coordinate range detection in there (again, in JS) to make sure that when dragging the ring, it’s over the hand before it highlights. This means that if you get a ring, and drag it over the hand, it will highlight, and if you don’t let the ring “go” and drag it back to the left side, the highlight disappears as it should. If you drop the ring successfully on the hand, location.href is populated with ‘page3.html’ (ie. it loads up page3.html). This file just has an <img> tag that specifies the animated fireworks GIF.
• The background images of the hearts (again, found it somewhere on Google Images so who knows what the copyright is like for this) is just loaded up as a background-image attribute value to the body selector.
• The home page is actually just one big image not including the ‘Yes’ button, which is a separate image that’s linked to page2.html. This is how I got the ‘No’ button to not be selectable; it’s part of the background image.

So that’s about it. From start to finish, the whole project took me 4 nights to do, including testing on my iPhone and in Xcode’s simulator. I then bought an iPod Touch and installed it on there too (just the developer version, so it probably still has debug code in it too, making it run a little slower), wrapped it up as a gift and proposed to my girlfriend with it at a nice secluded spot on Port Melbourne beach.

By the way, she said yes :)