Dominiek.com

So here is my situation: I’ve been doing solely web development over the past two years and am still very busy working for a startup in Tokyo. The iPhone 3g just went out and I want to build a cool prototype that utilizes GPS. Over the past week I’ve spent a couple of hours here and there to make a little proof-of-concept application. I wasted some time running around in panic so hopefully this article will help to get you focussed.

• Being able to access location information.
• Show a map with a marker for the current location.
• Get relevant information about that current location and show that in an ‘info’ tab.
  
  

Safari is so Amazing

It seems that Safari on the iPhone can accommodate all user interface needs for a non-gaming application. Also, if you really want to do graphics stuff, there is some cool vector rendering CSS you can do.

Joe Hewitt wrote a little CSS/JavaScript pack called IUI. It makes your web applications in Safari look like native iPhone apps. Awesome!

If it was up to me, I would be coding everything in Safari. Server-side Rails, Ajax and accessing iPhone Hardware through Javascript – the wet dream of any Web Hacker. Unfortunately the latter is not (yet) possible, so we will have to build a hybrid web application.

• Storing data locally through SQL
• Get the physical orientation of the device. More in this video (Click on “iPhone SDK for Web Developers”)
  
  

The Magic

Bottom line is that we don’t want to waste time and keep on programming web. Since we want to access hardware information, we will have to get down and dirty with the iPhone SDK. Our goal: Render a Safari Component and push GPS information through JavaScript and AJAX to the web application.

Programming Cocoa

Note: I am very convinced that in order to learn any language, you should just jump in right away – don’t build useless example projects.

The Cocoa set of tools is called Cocoa Touch and provides all the UI and Data Access things you need. On the iPhone you program in Objective-C 2.0 whatever the fuck that might be :] Aahrgh, so I have been doing Ruby for the past two years and I have a vague memory of C++. Ah well, Objective-C is just another OO programming language, so it shouldn’t be that big a deal.

This video explains basic Objective-C syntax (forward to 3:00): http://developer.apple.com/iphone/index.action (Click on “iPhone Application Development – Getting Started”). It will explain a bit about Cocoa’s Model View Controller which might be useful.

Don’t waste your time on Hello World

When downloading HelloWorld and opening that in XCode (apple’s IDE) I got freaked out by the amount of code and files. Normally, when learning a new technology, I take examples and re-purpose them for my project. This will not work right away for Cocoa Touch.

Note: many coding screencasts use old versions of XCode or Interface Builder. Make sure your SDK is up to date and that the screencast you’re watching isn’t using older versions.

The catch is that you need to use a thing called Interface Builder to stitch together your Objective-C code with UI Components. So it’s better to watch a little screencast. This Screencast will show you how to add a couple of buttons and hook them up to a specific callback. The dude talks very slow so you can fast-forward every now and then.

After that this screencast will show you how to jack in the Magic UIWebView – our precious Safari. In this screencast they hook up two buttons (back and forward) to the UIWebView.

Our first Application

Assuming you have downloaded the iPhone SDK. Mac programming is mostly done using an IDE called ‘XCode’. It can be found in the /Developer directory of your Mac.

Let’s create a new Project in XCode, I am using the name ‘Reccoon’, but I will refer to it as ‘MyProject’:

Next, double-click on the Resources/MyProjectViewController.xib. This will open up the Interface Builder. Thereafter, cover the whole window with a safari UIWebView:

To access that ‘web view’ in the controller, we need to add a class attribute to the MyProjectViewController. This is called an ‘external outlet’:

Also, you need to add some code in your MyProjectViewController.h to utilize it as you can see in the next piece of code.

Hooking up CoreLocation

Now let’s get some code from the LocateMe example that can be found in the iPhone Dev center and add MyCLController.* and the CoreLocation Framework:

Set this code to your MyProjectViewController.h

1
2
3

@interface ReccoonViewController : UIViewController <MyCLControllerDelegate> {
    IBOutlet UIWebView *webView;
}

The LocateMe example’s MyCLController has all kinds of funky debug output. We only want the Latitude and Longitude, so let’s modify a bit.

1
2
3
4
5
6
7

// This protocol is used to send the text for location 
// updates back to another view controller
@protocol MyCLControllerDelegate <NSObject>
@required
-(void)updateLatitude: (NSString *)latitude andLongitude: (NSString *)longitude;
-(void)newError:(NSString *)text;
@end

In MyCLController.m, replace the method: locationManager didUpdateToLocation fromLocation, with:

1
2
3
4
5
6
7
8
9
10
11
12

// Called when the location is updated
- (void)locationManager:(CLLocationManager *)manager
  didUpdateToLocation:(CLLocation *)newLocation
       fromLocation:(CLLocation *)oldLocation
{
  [self.delegate updateLatitude: 
    [NSString stringWithFormat:@"%lf", 
                   fabs(newLocation.coordinate.latitude)] 
                        andLongitude: 
    [NSString stringWithFormat:@"%lf", 
                   fabs(newLocation.coordinate.longitude)]];
}

Now implement the necessary callbacks. (this code belongs before the @end in the ReccoonViewController.m)

1
2
3
4
5
6
7
8
9
10
11

#pragma mark ---- delegate methods for the MyCLController class ----

-(void)updateLatitude:(NSString *)latitude andLongitude:(NSString *) longitude {
  [webView stringByEvaluatingJavaScriptFromString:
    [NSString stringWithFormat:@"update_position(%@, %@);", latitude, longitude]];
}

-(void)newError:(NSString *)text {
  [self debug:
    [NSString stringWithFormat:@"error: %@", text]];
}

As you might see in the updateLatitude function, a Javascript call is executed on the webView Safari browser. This means that you can do all your positioning and maps mashupping in Javascript:

1
2
3

function update_position(lat, lng) {
  /* We have escaped from Alcatraz! Now it's time for AJAX and JSON goodness :] */
}

My Reccoon Prototype

For my own purposes, I’ve made a little RubyOnRails project (pretty much all HTML) that uses the Google Maps API and the Geonames Wikipedia Reverse-Geocoding Service. This utilizes the IUI toolkit:

Note: in these screenshots I am simulating the location to be in Amsterdam (while I am still in Tokyo). The iPhone Simulator’s default GPS coordinates are somewhere in the western Chinese badlands.

Conclusion

Perhaps Cocoa development isn’t as scary as it seems, after the useful-results feedback loop started (getting into the flow) I was really enjoying it. This little prototype is just an example on how to quickly get some results for a demonstration application. I can imagine that more and more Cocoa programming is necessary when the product/service starts to evolve.

I know this article is a sloppy quick write-up, but if you find it useful please leave a digg :] Also, please place a comment below if you have any problems or questions – I will address them by updating this entry.