Aug 052011
 
Source: http://smartincomeblog.com/what-i-learned-from-creating-an-iphone-app

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.

Simplest: BuzzTouch

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:

IMG_0106

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.

Web View

A webview is an HTML renderer in iOS which can be pointed to any HTML file (local or remote). You can create a native app which just contains a WebView widget (nothing else) and point the WebView to your website. The website can be an iPhone optimized website, developed in plain HTML, JavaScript (JS), or DreamWeaver. Thus, WebView allows you to create an iPhone App using common tools and without having to learn the iPhone tools.  It also allows you to use many existing themes that exist for iPhone web apps. The downside of this approach is that your app runs slow (since application is in JS) and you can only access the same features of the phone as a webpage, e.g., GPS. However, it does not allow you to get access to device information which is why I had to look further.

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

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 …

Once I had made some design decisions, I started writing code for the application. Very soon I had DeviceInfo back on its feet in PhoneGap but I was hating the debug loop. Every time I made a change, I had to deploy the app and see if the DeviceInfo made sense (the simulator was returning bogus information). This is where I stopped working on the App once again and started looking into optimization. I first learned that I could scp the PhoneGap html files into my jailbroken iPhone 3GS which (a) eliminates the time wasted in deploying via Xcode, and (b) allows me to develop on my Windows computer. This still required internet access and the debug loop was multi-step. Thus, I started looking into solution where the iPhone App itself can download the updated HTML files from my home server. Google search revealed a complicated answer: I write my app in a way that the entire page is rendered (DOM is created) in JS. The proposed solution was to use Mustasche.js for rendering and writing my app such that it could be downloaded via Ajax. I was about to work on this solution when a thought crossed my mind … what if I make the Objective-C code download my HTML files. So I came up with a ridiculously simpler solution (which I am a little proud of). I made the index.html file in my PhoneGap App forward the native app to my server. (Update: 1/1/2012: This is just the regular Javascript forward using location.href = “http://your-external-site.com” . Thanks to Adrian3 for this suggestion). It worked extremely quickly and now I had what I needed. To tighten the debug loop even further, I added a refresh button to my website which simply called a window.location in JS to refresh the website. Now the website works brilliantly and I could make/test changes in real-time. Some screenshots:

IMG_0107IMG_0108

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.

 

AppMobi

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.

References Consulted

jQuery+Ajax+phoneGap: http://samcroft.co.uk/2010/loading-data-into-a-phonegap-app/

PhoneGap samples: https://github.com/phonegap/phonegap-samples

jQuery Mobile+PhoneGap: http://www.jefflinwood.com/2011/07/building-a-jquery-mobile-html5-app-with-phonegap-for-drupal-7/

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

  14 Responses to “iPhone App Development (for Old School Coders)”

  1. thanks for the article) it’s really useful and positive. I have built some apps on http://www.snappii.com and it wasn’t indeed difficult and besides I managed to create my own design of the app due to the features Snappii offers.So nowadays creating apps is not as tough as it sounds.

  2. nice sharing for your experience with iphone app development.. i did not know it would be $99 to get the account, .. i will use this knowledge here when times come for me to take a look on iphone app development.

  3. Excellent write up, thanks for sharing your experience.

  4. Hi, Aater. Interesting approach. Can you explain what you mean by “I made the index.html file in my PhoneGap App forward the native app to my server.” Did you just use javascript to change window.location or is it something more complex? I would love to see some sample code if you did something else. Thanks for posting!

    • Hi Adrian,

      Thanks for reading.

      “Did you just use javascript to change window.location or is it something more complex?”

      This was just JS redirect using location.href = “http://external-ip”. I have clarified this in the blog itself with due credit.

      Thanks.

  5. NOTE: The affluent attribute being honest with all people as the most important characteristic in their businesses,
    tied with being well disciplined. If you have
    a great training session a healthy protein drink or a steak and salad is what you feel like because that is what is going to support
    the desired outcomes of your exercise routine.
    Uh oh Floe, hang on there — the chunk of ice shrinks.

    My homepage; big fish for android

  6. The availability of these tools is greatly
    simplified by Apple by providing an on-line App Store viz.
    Topple: It involves stacking pieces as high as possible.
    MobileRSS- Subscribe to websites or blogs to
    view them online.

    Check out my webpage design iphone app (Brigitte)

  7. Thanks in support of sharing such a pleasant opinion, article is nice, thats why i have read it fully

  8. After reading this article, if you are still unwilling
    to register your kid in a martial art school, you might possibly want
    to give consideration to taking a class with your kid to soothe any
    fears you might have. Sundays should be gleefully occupied with an all-day bacchanalia of football consumption.

    A wide receiver that played his college ball at USC, and was drafted by the Dallas
    Cowboys in the fifth round of the 1995 NFL draft Hervey came to the Eskimos
    in 1999.

    Here is my web site … top eleven be football

  9. The i – Phone isn’t perfect and at times the touch screen can have its issues.
    Contract deals are available in terms of short and long periods.
    Therefore, one can imagine that the new i – Phone
    5 will be more powerful and rich application that the previous
    i – Phone 4.

    Check out my web page: hay day Telecharger

  10. Available Back Cover Cases are made with different type of material like TPU Gloss Cases,
    Soft Silicon Case, Hard Case, Wooden Case etc.

    Automobile chargers don’t seem to be extremely new. Pay as you go deal is meant
    for all those customers who have limited calling needs.

    Also visit my page; hay Day pc Gratuit

  11. Hi there, everything is going perfectly here and ofcourse every one is sharing information, that’s really good, keep up writing.

  12. Appreciate the recommendation. Lett me try it out.

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>