In a weak moment last July, I paid $99 for an Apple Developer Account with the intent to learn iPhone app development. However, I didn’t use it for 11.5 months. When I learned two weeks ago that I was about to lose my investment, I decided to salvage it. It has actually been a great experience and I don’t regret spending the week playing with iPhone apps. I have not become an expert by any means but I think I have learned enough to have some opinions. I am writing this article to share what I learned as it may interest some other “traditional” computer scientists to explore iOS.
Why did I do this?
I want to learn Objective-C and iOS because it is an emerging platform and learning it may help me in my job, i.e., designing the next generation microprocessors and knowing software gives me an edge in my work. To motivate myself, I set a low goal: to develop an App which can collect some information about the host device, e.g., what type of iPhone, how many gigabytes is that disk, etc. The idea comes from an app I recently downloaded on my iPhone called DeviceInfo.
Days 1 and 2
I already had a Mac with X-code installed so I downloaded a sample application from Apple and started reading the code. While I was able to read Objective-C without much difficulty, I felt that I needed to get a deeper understanding. Thus, I ended up buying an O’Rielly book titled “Cocoa and Object-C: Up and Running” by Brian Jepson. I learned the basics of Objective-C concepts like categories, protocols, etc very quickly. As impatient as I am, I only read till Chapter 6 (of 11) and decided to jump into the code again. It did feel a lot better this time since I was able to write a simple application which showed Device Type, Disk storage, Network Connection Status by the end of the night. While I was making good progress on the back-end, my GUI looked crappy. I am bad at aesthetics (in case you haven’t noticed this already) so I wanted to use an existing theme but I couldn’t find pre-built UI themes for iPhone applications. While struggling with Xcode’s Interface Builder, I started feeling that there should be easier ways to develop this simple application. I started looking for these ways and found plenty, which I describe below.
There are some simple, free, websites which let me create a simple iPhone application without having to write code. As you would expect, their features were very limited, certainly not enough to implement DeviceInfo. However, I did manage to create an App for FutureChips blog within a few minutes using a simple web form. I just entered my RSS feed address and bingo… I was able to download a folder with all Objective-C files. I opened and compiled the project and deployed it on my iPhone (thanks to my $99). Screenshot below for your reference:
This is a great option if your need fits in their constraints. I needed more functionality so I continued to explore options where I could write code.
A two-minute break: WebView with Arguments
After thinking about my problem, I figured that I can write the code to collect the DeviceInfo in Objective-C and pass the device information as GET/POST arguments to my website via a WebView. Finding the idea clever, I did a google search and ran into PhoneGap.
PhoneGap is an open-source project which builds on WebView as well but they have figured out a way to expose native API calls to JS. It works as follows: you write your application in HTML/JS and copy those files in a www folder in your iPhone Application Bundle. These HTML files are copied to your device when you deploy the app and read by the PhoneGap system when you open your application. In your HTML/JS, you include the PhoneGap JS library which has functions that correspond to the native API functions, e.g., calling navigator.,notification.vibrate() in your JS makes the phone vibrate. The PhoneGap JS library makes calls which are interpreted and executed by PhoneGap framework written in Objective-C.
By default, PhoneGap exposes many native features like the ability to make the phone vibrate or get a device’s OS version. However, the standard API is still limited. Fortunately, PhoneGap is open-source and allows users to write plugins to expose more native functions. Since I needed to get device information such as the total disk space (which isn’t supported by PhoneGap), I had to write a PhoneGap plugin (in Objective-C) which provided me this information. It worked beautifully within two hours. Now I had an HTML/JS framework that I could use to write DeviceInfo.
To implement my GUI, I looked into jQuery Touch (a JS library), Mobl (a new language for mobile GUI design), jQuery Mobile (JS library), and SVG-based GUIs. I went with jQuery Mobile as Mobl seemed a bit restrictive (and required me to learn a new language), jQuery Touch seemed less popular, and SVG seemed like an overkill for my simplistic task. jQuery Mobile gave me a respectable GUI within minutes. It has some pre-built themes and I found the jQuery Mobile Theme Explorer and jQuery Mobile examples very helpful in choosing the right theme.
Being impatient sometimes leads to innovation …
Note: While I can leave my HTML/JS files on my server, I will copy the files from my server to the iPhone before I package the app for the App Store to reduce the app’s load time. Needless to say, I will also remove the Refresh button.
I must mention another tool which I seriously considered while I was looking for ways to improve PhoneGap. AppMobi is a framework built on PhoneGap which provides a very nice environment. Their web-based iPhone simulator beats Apple’s simulator IMHO because they can emulate Vibrate, Accelerometer, GPS, etc. They also have a function to deploy the app from their server which is great and Push Notifications work effortlessly. Two reasons I did not go with AppMobi was: (1) I can’t breath unless I can see all the code and AppMobi did not show me the code, (2) their services would have costed me money (eventually) which I wasn’t willing to pay since this is just a toy. If I were doing a for-profit app, I think I would still consider them seriously.
I must also mention two more HTML-based iOS development platforms that are similar: NimbleKit and Appcelerator. NibmleKit is just like PhoneGap while Appcelerator has some additional features. They are both great in their own ways but I went with PhoneGap because it seemed most accessible and widely used.
Things I haven’t told you …
In the interest of making this article under 1500 words, I am skipping the geek fun I had with using Scalable Vector Graphics (SVG) as my GUI. I am also skipping the actual differences I found between Objective-C and C and what I learned as an architect from Objective-C. I will write about these topics in near future.
Thanks for reading.
PhoneGap samples: https://github.com/phonegap/phonegap-samples
jQuery Mobile+PhoneGap: http://www.subelsky.com/2011/01/building-native-iphone-app-with.html
How to write PhoneGap plugins: http://wiki.phonegap.com/w/page/36753496/How%20to%20Create%20a%20PhoneGap%20Plugin%20for%20iOS
Pros and Cons of PhoneGap: http://www.quora.com/What-are-the-pros-and-cons-of-using-PhoneGap-to-build-native-apps
A deeper look at Appcelerator and PhoneGap: http://savagelook.com/blog/portfolio/a-deeper-look-at-appcelerator-and-phonegap