A brief history of my iPhone app development

I’m the first to admit that I was very late to the iPhone dev party. I bought a book at least a year ago and cracked it open. Then I realized it wasn’t going to be as easy as playing Lego Indiana Jones, so I took a little break.

When I got back to development, I decided to try out a couple of frameworks that I had been reading about online. The first was PhoneGap. It’s a cool framework that lets you build iPhone applications using Javascript, HTML and CSS. My first app was just a test — a few buttons, some pages and some basic animations. I was able to put it together very quickly and the result looked good in the iPhone simulator, but it was much too slow on my actual phone. I don’t think that’s necessarily a failure of PhoneGap — it’s simply that anything that’s running in the browser is slower than native code. And that’s what PhoneGap does. It wraps up your Javascript, HTML and CSS into a basic shell of an app and essentially lets mobile Safari do most of the work. That’s cool, but it just didn’t have the right feel, so I moved on.

The second framework I tried was Titanium. Titanium is similar to PhoneGap in the sense that the code is written in Javascript, HTML and CSS. It differs in how that code is ultimately converted to an iPhone app. In Titanium, the programming model mirrors the native (Objective C) model. The code is written in Javascript, but much of it is converted to Objective C and then compiled by Xcode. Some of the code is still passed on to mobile Safari, depending on how you set up your project and what types of views you use, but with Titanium, it is possible to create an app that uses native UIKit (the native iPhone) controls. So I built the app I described in my previous post. The app worked and it was snappy. All the buttons and animations worked as expected. Everything went well until I upgraded my phone to iOS 4.0 and updated XCode and the iPhone SDK.

After my upgrades, things just stopped working. Weird things … like my Edit button just stopped appearing on screen, though it was still appearing in the simulator. I upgraded Titanium and tried again, but had no luck.

What I’ve learned

First off, let me say that I think both PhoneGap and Titanium are very cool and that I really think having some options for developing iPhone apps is a worthy goal. I’ve learned that PhoneGap provides some native control options now. That would take care of my speed issues. Titanium is working for many developers, so clearly the problem is either in my code or my configuration.

However, what I learned was that the biggest portion of the learning curve for me was not so much the syntax of Objective C, but other things such as the development environment (Xcode and IB), the view and controller model of iPhone apps, and the massive amount of stuff in the iPhone SDK. It’s all a little overwhelming at first. Ironically, by using PhoneGap or Titanium, I wasn’t able to get completely away from all of these things.

The development environments

Titanium provides its own IDE of sorts. It’s a very simple interface. It definitely wins the overwhelming UI battle. PhoneGap doesn’t have an IDE. You use Xcode. No gain there. There’s always a learning curve for new software. Xcode and Interface Builder are no exceptions. Just dig in.

Development concepts

In my first job, I built TCP/IP applications in C on Sun and Cray machines. The first time I had to grok the fork/exec model and use signals to handle sockets, I thought my brain was going to explode. After that I took a job building a Windows application using Delphi 1. Handling memory paging to deal with the fact that our data was larger than the 16-bit systems would allow was the bane of my existence for a week or two. Next I converted that app to a ASP and COM+ application. That whole project was a constant nightmare of IUnknown that I’d rather forget. And the list goes on and on. After a while, and with a little perseverance all of those new concepts became old concepts as I understood them.

It’s the same with developing iPhone apps. Understanding views, windows, table views, navigation controllers, etc. is just about taking the time to dig in and learn. Ironically, to take advantage of the native controls in Titanium (and probably also in PhoneGap), you’ll have to learn the same concepts — just in a different language. In fact, by the time I finished my Titanium-based app, I had enough general concepts in my tool box that switching to native was surprisingly obvious. I just had to learn some new syntax.

Massive iPhone SDK

When iPhone SDK 4 released, Apple included this gem in the overview page: “a rich set of over 1500 new APIs”. Fifteen. Hundred. NEW. APIs. Yep, that means that there are a lot more than 1500 APIs in the SDK in general. Cool? Yes. Overwhelming? Definitely.

Here’s the thing, though. Using a framework like PhoneGap or Titanium limits your exposure to all those APIs. Is that good or bad? It’s good if you only need the APIs that are exposed. It’s bad if you need even one that’s not. I didn’t do a thorough review of which elements of the SDK are available under each framework, but most of the standard stuff is available: camera, gps, vibrate, sound, contacts, etc.

So the answer on this one is that you don’t have to learn as much stuff in PhoneGap or Titanium, but if your app needs something that’s not supported by the framework, you’re either going to have to build it into the framework (Titanium provides some instructions for this — not sure if PhoneGap allows it) or you’re going to switch to native. Either way, you’re going to have to know the native SDK to get there.

Last thoughts

Learning Objective C (what of it I know) has been an interesting challenge. I hoped it would be like C or C++. It’s a little like C. Syntactically it’s not like C++, but having a handle on OO from C++ has helped. I bought a good Objective C book to go along with my iPhone book and I’ve been really happy with both. I’m reading the Objective C book cover to cover. I’m a little more than half-way through and really glad I chose to read it. I’ve read most of the iPhone book, but I use it more as a reference for specific tasks.

Getting up the learning curve with the native development tools for the iPhone has been extremely rewarding. The apps that generated are quick and small and just feel right. I’m definitely going to stick with the native development tools. I think the other tools have a place and I applaud those who are developing them for their efforts to simplify iPhone app development. For me, though, the key was simply allowing myself to take the time to really get up to speed rather than trying to shortcut the development process with a third-party tool. Your mileage may vary … and I’d love to hear your thoughts.

Please feel free to download the source code. For each file in the source archive, there is an initial file and a final file. The final version of each file is the more interesting one with the FB code integrated.

In the code you’ll find usage samples for the following:

• FB.ensureInit
• FB.Connect.requireSession
• FB.Connect.forceSessionRefresh
• FB.Connect.logout
• FB.init
• FB_RequireFeatures
• fb:profile-pic
• fb:name
• FB.Facebook.apiClient.friends_get
• FB.XFBML.Host.parseDomTree
• FB.Facebook.apiClient.users_getInfo
• fb:live-stream

The demo site is still live at http://xfcg.com/fbp. For example, the page in the source archive called event-final.html is at http://xfcg.com/fbp/event-final.html.

Here are the basic steps for setting up a new Facebook Connect application:

1. Install the Facebook Developer Application on your Facebook profile
2. Create a new application
3. Upload the xd_receiver file
4. Add the FB xmlns attribute to your html tag
5. Add the Facebook JS file
6. Call init in your page

More information about Facebook Connect Integration is available from these other posts:

• Integrating Facebook Connect
• Facebook Connect comments as WordPress Plugin
• Use Twitter, Facebook, OAuth or OpenID for login?

Again, please comment or message me if I’ve missed something important or if I didn’t answer your specific question. I’d love to be able to help.

function makeAWSUrl($parameters, $associate_tag, $access_key, $secret_key, $aws_version = '2009-06-01') {
  $host = 'ecs.amazonaws.com';
  $path = '/onca/xml';
 
  $query = array(        
    'Service' => 'AWSECommerceService',
    'AWSAccessKeyId' => $access_key,
    'AssociateTag' => $associate_tag,
    'Timestamp' => gmdate('Y-m-d\TH:i:s\Z'),
    'Version' => $aws_version,
  );
 
  // Merge in any options that were passed in
  if (is_array($parameters)) {
    $query = array_merge($query, $parameters);
   }
 
  // Do a case-insensitive, natural order sort on the array keys.
  ksort($query);
 
  // create the signable string
  $temp = array();
  foreach ($query as $k => $v) {
    $temp[] = str_replace('%7E', '~', rawurlencode($k)) . '=' . str_replace('%7E', '~', rawurlencode($v));
  }
  $signable = implode('&', $temp);
 
  $stringToSign = "GET\n$host\n$path\n$signable";
 
  // Hash the AWS secret key and generate a signature for the request.
  $hex_str = hash_hmac('sha256', $stringToSign, $secret_key);
  $raw = '';
  for ($i = 0; $i < strlen($hex_str); $i += 2) {
    $raw .= chr(hexdec(substr($hex_str, $i, 2)));
  }
 
  $query['Signature'] = base64_encode($raw);
  ksort($query);
 
  $temp = array();
  foreach ($query as $k => $v) {
    $temp[] = rawurlencode($k) . '=' . rawurlencode($v);
  }
  $final = implode('&', $temp);
 
  return 'http://' . $host . $path . '?' . $final;
}

Using the function is simple. The first parameter is a PHP array of AWS parameters, the others are standard associate tags and keys. Here’s an example:

$url = makeAWSUrl(array('Keywords' => 'Jaco Pastorius',                           
                      'Operation' => 'ItemSearch',                          
                      'ResponseGroup' => 'Medium',                           
                      'SearchIndex' => 'Music',                           
                      'salesrank' => 'Bestselling'),  
  'YOUR_ASSOC_TAG', 'YOUR_ACCESS_KEY', 'YOUR_SECRET_KEY');

The result of the above call (using my tags and keys) is:

http://ecs.amazonaws.com/onca/xml?AWSAccessKeyId=[MYKEY]&AssociateTag=blakesblogand-20&Keywords=Jaco%20Pastorius&Operation=ItemSearch&ResponseGroup=Medium&SearchIndex=Music&Service=AWSECommerceService&Signature=qZ%2BheDqfZi79b2Xg0JSP2kgG2FgQn823GLn0m1sVmnM%3D&Timestamp=2009-08-19T22%3A53%3A29Z&Version=2009-06-01&salesrank=Bestselling

As always, give me some feedback, take the code and make it better. Share it and include it in your libraries … have fun!

Fortunately Komodo also provides a simple method for creating extensions within the IDE itself, so I gave it a try. Within a few hours I was able to build an extension to do exactly what I needed and configure it on a per-project basis. I’ve made the extension available as an MIT-licensed, open-source project. As always, this project is included on the open source tools page.

Yesterday he released the plugin as an open source project. I haven’t had a chance to install the plugin, but having worked with Aaron in the past, I’m sure it’s top notch. I looked at the source code and really like the way he developed the integration with WordPress.

If you’re interested in adding Facebook comments to your WordPress blog, I suggest you give Aaron’s plugin a try. I’ve included this plugin on my open source tools page.

So, yesterday’s announcement by the Facebook development team about fql.multiquery couldn’t have come at a better time for me. Experienced web developers (and multi-tiered application developers in general) have all learned that performing work in the proper tier is always the most efficient way to work. Data should be managed in the database tier and as separately from the application tier as possible. This announcement from the Facebook development team is great news for Facebook application developers everywhere. Kudos to them!

My solution is not enterprise and it’s not real time, but it will let me know in a reasonable amount of time (Montastic says it checks every 10 minutes or so, based on load). For me, that’s good enough right now because I mostly want to avoid overnight and weekend-long outages that may occur when I’m not checking my computer regularly.

The first step is to sign up at Montastic and set up a monitor for your web site. There’s no learning curve there … just register, type in a URL and Montastic will start monitoring right away. There’s a video screen cast available showing how easy it is to use. After setting up the monitors, Montastic provides a basic RSS feed — that’s where Yahoo! Pipes comes in.

Yahoo! Pipes Configuration for Montastic

The final step I took was to simply run the pipe, then tell Yahoo! to send me the output of the pipe to my cell phone whenever it changes. Since the pipe updates when there is a new failure item, I won’t get an SMS message every time Montastic checks the servers, but only when there is a new failure item.

I haven’t been running this solution for very long, but so far it looks to be a promising concept for keeping an eye on my servers — particularly when I’m going to be away for a while. I’d love to hear ideas about other ways to use Montastic or suggestions for other free website monitoring tools. What do you use?

Because this will have a big impact on any developer, I wanted to share a couple of links I found today. First is the documentation page: Signing AWS Commerce API requests. The second is a recommendation from Gil (the genius that keeps Squidoo running): Tarzan: A fast, powerful PHP toolkit for building web applications with Amazon Web Services. This library looks like a great resource for developing against many of the AWS services. I’ll be doing some investigation and will follow up when I can talk more intelligently about it.

For now, good luck with your current AWS projects!

For security reasons, Ajax requests are only allowed to domains from which the code originates. For example, if your site is at example.com, and your Javascript is served from that domain, you may only use Ajax to make HTTP requests to the same domain, example.com. If you want to retrieve data from other web services such as financial information or weather from Yahoo!, you cannot make a direct Ajax request to yahoo.com, but you can make a request to a content proxy on example.com that gets the data from Yahoo! and returns it for you.

A very simple content proxy in PHP is implemented (using curl) like this:

/**
* perform a remote connection request and return the results
* 
* @param string uri of remote resource
* @param int timeout in seconds
* @param int connection timeout in seconds
* 
* @return string data returned from uri or null
*/
public function remote_load($uri, $timeout = 10, $connect_timeout = 3) {
  $curl_handle = curl_init();
  curl_setopt($curl_handle, CURLOPT_USERAGENT, 'example.com');
  curl_setopt($curl_handle, CURLOPT_URL, $uri);
  curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, $connect_timeout);
  curl_setopt($curl_handle, CURLOPT_TIMEOUT, $timeout);
  curl_setopt($curl_handle, CURLOPT_FOLLOWLOCATION, 1);
 
  $buffer   = curl_exec($curl_handle);
  $curlinfo = curl_getinfo($curl_handle);
 
  curl_close($curl_handle);
 
  if (($curlinfo['http_code'] < 400) && ($curlinfo['http_code'] != 0)) {
    return $buffer;
  }
 
  return null;
}

The above code would be included in a simple page such as:

<?php
  include_once('the_function_above');
 
  // you really should check for and handle errors
  print(remote_load($_GET['uri']));
?>

If the above page is called proxy.php on your site, then you can now make Ajax requests that look like:

jQuery.get('http://www.example.com/proxy.php?uri=http://www.google.com/',
  function(result) {
    do_something_with_result(result);
  });

There are several considerations to make when developing a content proxy that haven’t been shown here. The first two that come to mind are security and caching. Requests to third-party services should be cached locally on your server to ensure that your application doesn’t make too many requests and potentially become blacklisted by the third-party service. Additionally, if you build a content proxy, you should ensure that only requests from your approved callers are satisfied. You don’t want other sites making proxy requests through your servers for many reasons.

The proxy shown above may be used as a starting point for a more secure and robust content proxy, though, and will be the basis for some of my upcoming Ajax articles.

I didn’t write about the potential hassle that site owners will endure when third-party services become unavailable due to bugs or other problems, but it’s a huge consideration for web developers.

If your site is integrated with any other third-party site for any reason, the performance, stability and reliability of the third-party service is your problem to manage. Your site users will not care that your site is down because OAuth is broken or AWS has an outage or whatever the case may be. They will only know that your site is broken.

Mitigation

The problem is that you can’t build and maintain everything — and you really can’t jettison third-party integrations generally. You can, however, mitigate against failures by developing graceful failover options. Build failover solutions based on the importance of the third-party service. If your entire registration and login solution is dependent on OAuth, your best bet is to include some type of “We’re sorry, but registration and login are temporarily disabled” messaging. This isn’t a perfect solution, but it’s better than “Error 8000EAF0: Cannot connect garbage garbage garbage” or a blank screen.

In many cases, third-party integrations augment your site, but aren’t necessarily a requirement for using your site. Make sure in those cases (particularly for things such as widgets, ads, analytics, etc.) that if a component fails your site design and usability don’t collapse.

Remember that the web is still very young and that everyone — the big services included — are still learning how to make this all work together. The best bet for now is to build your system to be as flexible as possible because the frameworks are still shifting.

Update: I wrote this article last night (Wednesday), but I typically publish mid-morning. Since I wrote this article, tinyurl.com has experienced an outage.