Advice & inspiration

How to get started building an iPhone Web app

I was fortunate enough to attend an Apple seminar on UNC’s campus today for iPhone and iPod Touch application developers. Mobility consulting engineer Steve Hayman discussed the use of Dashcode for Web apps, as well as Xcode for native apps. Hayman showed us some innovative examples of current apps, tutorials with basic templates, and tips to getting started as a developer. Since this is a completely new topic for me (I’m still stuck with a crummy Verizon phone) let’s learn together!

Apparently Stanford began offering an iPhone Application Programming class in the fall of 2008, and you can check out the students’ completed apps to get some inspiration. Now I’m just waiting for this class to come to Carolina …

Dashcode appears to be the more friendly coding environment, which is harmonious with the programming languages that we see across the Web. While Dashcode uses HTML, CSS, Java, and other similar coding structures, Xcode only uses Objective-C, C++ and C. If you want to build a Web version of your site for the iPhone, you would use Dashcode. If you are interested in building an app for the app store for users to download, you need to use Xcode.

My interests center around building Web apps, and frankly Objective-C sounds way above my knowledge interests, so I’ll stick with Dashcode in this post.

Most important to note is that Dashcode only works with Leopard (OS X 10.5). Sadly, both of my Macs were bought during the Tiger era, so I am out of luck unless I am willing to upgrade for $129 a computer (which I am not). Alas, all you other programming whizzes can take these notes and test them out for me!

You have to register to download the necessary programs, but it is free and painless so go ahead and get that out of the way.

If you like to read before you code, check out this intro user guide that walks you through downloading Dashcode, working with the templates and deploying your web application.

If you are like me and prefer to jump right in, start with the browser templates that have the “list and detail” format pre-built for you to easily customize. Similar to Dreamweaver, the interface is a split view displaying both the code and design mode. Look through the library for drag-and-drop widgets for buttons, text boxes and other components. The library also contains common code fragments which can be extremely helpful.

A simulator comes with your download for personal testing, but if you want to check out how other sites look you can test them at TestiPhone.com.

Jakob Nielsen wrote a great article last month detailing the difference between the mobile web of 2009 and the desktop web of 1998. “Mobile phone users struggle mightily to use websites, even on high-end devices. To solve the problems, websites should provide special mobile versions.”

Some newspapers have already jumped on board with making compatible versions for the iPhone, like New York Times, USA Today, AP, and others. I encourage everyone to start thinking about creating mobile sites and begin practicing with some dummy sites.

If you have had experience with iPhone development, please fill in my gaps of knowledge because I am still on day one!

Other posts that might interest you:

• TCoder iPhone app simplifies note taking for the multi-tasking journalist
• Apple’s product design process: “Innovation” defined
• Facebook product manager Bubba Murarka on designing for the social Web

© 2012 Innovative Interactivity (II).
Download II's Security Policy (PDF)