Monday, September 22nd, 2008

PhoneGap: “AIR for the iPhone”

Category: iPhone

Dave Johnson calls PhoneGap “AIR for the iPhone” because this nice little hack, first created at an iPhone BarCamp, wraps the Web view with a container. This container gives the view access to APIs available on the device, that may not be available yet via WebKit alone. AIR provides a similar container for Flash and Ajax content on the desktop.

PhoneGap is a free open source development tool and framework that allows web developers to take advantage of the powerful features in the iPhone SDK from HTML and JavaScript. We’re trying to make iPhone app development easy and open. For many applications a web application is the way to but in Safari you don’t get access to the native iPhone APIs, and the that’s the problem we’re trying to solve.

It is written in Objective-C and allows developers to embed their web app (HTML, JavaScript, CSS) in Webkit within a native iPhone app. We’re big advocates of the Open Web and want JavaScript developers to be able to get access iPhone features such as a spring board icon, background processing, push, geo location, camera, local sqlLite and accelerometers without the burden of learning Objective-C and Cocoa.

PhoneGap also has a web app that allows web developers to quickly package their web app into a native iPhone app by providing a URL, a name and icon graphic the web service with automagically create a native iPhone application. We haven’t open sourced that code but we’re going to soon.

PhoneGap was conceived at iPhoneDevCamp II by Nitobi developer Brock Whitten, Rob Ellis, freelance designer Colin Toomey and Eric Oesterle.

There are a few APIs available now, and others pending:

javascript

  1. // Location API
  2. // Feels a little ugly compared to passing in a closure. Using a hard coded name? :)
  3.   getLocation();
  4.  
  5.   //GAP will invoke this function once it has the location
  6.   function gotLocation(lat,lon){
  7.     $('lat').innerHTML = "latitude: " + lat;
  8.     $('lon').innerHTML = "longitude: " + lon;
  9.   }
  10.  
  11. // Accelerometer API
  12.  
  13.   function updateAccel(){
  14.     $('accel').innerHTML = "accel: " + accelX + " " + accelY + " " + accelZ;    
  15.     setTimeout(updateAccel,100);
  16.   }
  17.  
  18. // Camera (pending)
  19.   function takePhoto(){
  20.     var photo = gap:takePhoto();
  21.     return photo;
  22.   }
  23.  
  24. // Vibration (pending)
  25.  
  26.   function vibrate(){
  27.     gap:vibrate();
  28.     return false;
  29.   }

You can take a peak at the open source code on github. For example, here is the code that wraps the iPhone location service:

  1. @implementation Location
  2.  
  3. - (id)init{
  4.   NSLog(@"Gap::Location");
  5.   locationManager = [[CLLocationManager alloc] init];
  6.   [locationManager setDelegate:self];
  7.   return self;
  8. }
  9.  
  10. + (void)startTracking{
  11.   NSLog(@"starting location tracker");
  12.   [locationManager startUpdatingLocation];
  13. }
  14.  
  15. + (void)stopTracking{
  16.   NSLog(@"stopping location tracker");
  17.   [locationManager stopUpdatingLocation];
  18. }
  19.  
  20. - (void)location{
  21.   NSLog(@"location is");
  22. }
  23.  
  24. - (void)log{
  25.   NSLog(@"the location is...");
  26. }
  27.  
  28. - (void)dealloc {
  29.     [locationManager release];
  30.   [super dealloc];
  31. }
  32.  
  33. @end

Posted by Dion Almaer at 7:33 am
5 Comments

+++--
3.6 rating from 24 votes

5 Comments »

Comments feed TrackBack URI

Look also here http://www.big5apps.com for another implementation based on the PhoneGap idea. This is also an example of Apples AppStore strategy of refusing Apps that do not fit into their pattern.

Comment by perenzo — September 22, 2008

Looks quite impressive, and I can see this as a way for web developers to actually monetize their iPhone Web Apps by packaging them up and selling them in the App Store.

What remains to be seen is whether there will be any problems submitting such and application (I’d hope not, since there are many apps out there which simply wrap the webkit ui component).

The other thing that comes to mind is that I’m sure API access from webapps is something on Apple’s own roadmap.

Comment by ckorhonen — September 22, 2008

I demoed something similar in June at Google Dev Day on Android, see my GWT Extreme presentation (http://www.youtube.com/watch?v=2ScPbu8ga1Q) and later talked about doing the same thing for iPhone using the WebScripting API. It’s easier to do in Android because you don’t have to mess around with Objective-C. I’m looking at providing a common API under my Syndroid project ala Gears that lets you write Javascript that accesses native services on both Android and iPhone.

Comment by cromwellian — September 22, 2008

You should really check out QuickConnectiPhone. It does everything that PhoneGap does and more. It is much more truely ‘Air for the iPhone’ than PhoneGap is.
Not only does it allow you to do the three things you can do in PhoneGap, GPS locations, vibration, and acceleration, but also includes:
1 – JavaScript access to SQLite databases both within webkit and those shipped with the application
2 – Recording and playing audio files from within JavaScript
3 – Playing system alert sounds from with JavaScript
4 – Displaying and getting selections from the native Date/Date Time pickers rather than the fairly useless standard pickers supplied by HTML pulldowns.
5 – A very easy to use drag-and-drop/scale/rotate module that lets you move, resize, and rotate HTML elements without you writing any code.
6 – The ability to write JavaScript debug messages to Xcode’s console.

Additionally, QCiPhone is in release mode for version 1.0.1 and a beta of 1.1 will soon be out that includes Bonjour service detection and networking all from within JavaScript. Imagine being able to discover and interact with any Bonjour service from within JavaScript. Other pieces of functionality will also be included in this upcoming beta.

Another feature available to you using QCiPhone is that it comes with an installer that installs QCiphone Application templates for iPhone applications in both Xcode and Dashcode. These templates include all of the files you need to quickly get you application up and running.

The installer also installs a QuickConnectMac template that allows you to use the same JavaScript framework to write Macintosh applications. QuickConnectLinux (desktop) and QuickConnectAndriod (phone) and QuickConnectNokia (phone) are in alpha right now and beta releases are coming soon.

QCiPhone and its’ ports to other devices truly make QuickConnect an ‘Air for the iPhone’

Comment by yenrab — December 18, 2008

Oops. I left out the AJAX wrapper supplied with QCiPhone, QCMac,QCLinux and all of the other ports. Hit databases or servers with one API.

That makes 7 things that QCiPhone does that PhoneGap does not.

Comment by yenrab — December 18, 2008

Leave a comment

You must be logged in to post a comment.