Creating and Distributing Mobile Web Applications with PhoneGap

James Pearce Sr Director, Developer Relations @ jamespearce jamesp@sencha.com

Creating and distributingmobile web applications with PhoneGap

Web appsare the future

Native appsare the present

Native WebCross-platform ✘ ✔ Linkable ✘ ✔ Discoverable ✔ ✘ Device APIs ✔ ✘

Native Web HybridCross-platform ✘ ✔ ✔ Linkable ✘ ✔ ✔ Discoverable ✔ ✘ ✔ Device APIs ✔ ✘ ✔

What is a hybrid app?

A simple hybrid application UIWebView WebViewHTML CSS Stores JS

PhoneGaphttp://phonegap.com MIT

A PhoneGap application UIWebView WebViewHTML CSS Stores JS JS APIs

PhoneGap APIsAccelerometer FileTap into the device’s motion sensor. Hook into native file system through JavaScript.Camera GeolocationCapture a photo using the devices camera. Make your application location aware.Compass MediaObtain the direction that the device is pointing. Record and play back audio files.Contacts NetworkWork with the devices contact database. Quickly check the network state.Device NotificationGather device specific information. Visual, audible, and tactile device notifications.Events StorageHook into native events through JavaScript. Hook into the device’s native storage options.

Getting Started with iOS

http://phonegap.com

$> ./xcode4.sh seattlebars . http://sencha.com/x/b9

How it works@implementation PhoneGapDelegate...+ (NSString*) wwwFolderName {! return @"www";}+ (NSString*) startPage {! return @"index.html";}...NSString* startPage = [[self class] startPage];NSURL *appURL = [NSURL URLWithString:startPage];if(![appURL scheme]) { appURL = [NSURL fileURLWithPath:[[self class] pathForResource:startPage]];}...NSURLRequest *appReq = [NSURLRequest requestWithURL:appURL ...];[webView loadRequest:appReq];

Getting Started with Android

How it workspackage com.phonegap.exampleapp;import android.os.Bundle;import com.phonegap.*;public class exampleapp extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); }}

Using aSencha Touch Application

$> rm -r www$> ln -s myapp www

Don’t symlink yoursource controlDon’t symlink theentire SDK, thanks

NB these are nowin the symlink dir

Ext.setup({ tabletStartupScreen: tablet_startup.png, phoneStartupScreen: phone_startup.png, icon: icon.png, glossOnIcon: false, ...

<aside> + = Paciﬁst </aside>

$> rm -r assets/www$> ln -s myapp assets/www

So we’re done, right?

UsingDevice APIs

Accelerometer FileTap into the device’s motion sensor. Hook into native file system through JavaScript.Camera GeolocationCapture a photo using the devices camera. Make your application location aware.Compass MediaObtain the direction that the device is pointing. Record and play back audio files.Contacts NetworkWork with the devices contact database. Quickly check the network state.Device NotificationGather device specific information. Visual, audible, and tactile device notifications.Events StorageHook into native events through JavaScript. Hook into the device’s native storage options.

That’s what this was for

but...

Android iOSphonegap.js phonegap.js

Alter entry pointspackage com.phonegap.exampleapp;import android.os.Bundle;import com.phonegap.*;public class exampleapp extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index_a.html"); }}

index.html<!doctype html><html> <head> <script type="text/javascript" src="app/app.js"> </script> <script type="text/javascript" src="phonegap.0.9.5.js"> </script> ...

index_a.html<!doctype html><html> <head> <script type="text/javascript" src="app/app.js"> </script> <script type="text/javascript" src="phonegap_a.0.9.5.js"> </script> ...

deviceready eventdocument.addEventListener( "deviceready", onDeviceReady, false);function onDeviceReady() { // Now safe to use the PhoneGap API}

Avoiding race conditionsdocument.addEventListener( "deviceready", app.mainLaunch, false);Ext.regApplication({ name: "app", launch: function() { this.launched = true; this.mainLaunch(); }, mainLaunch: function() { if (!device || !this.launched) {return;} ... }});

http://docs.phonegap.com

Cameranavigator.camera.getPicture( function(imageData) { var img = document.getElementById(img); img.src = "data:image/jpeg;base64," + imageData; }, function (message) { alert(Failed because: + message); }, { quality: 50 });

File I/Ovar paths = navigator.fileMgr.getRootPaths();var file = paths[0] + "write.txt";var writer = new FileWriter(file);writer.onwrite = function () {};writer.write("Hello Croatia!");var reader = new FileReader();reader.onload = function (e) { alert(e.target.result);};reader.readAsText(file);

Contactsnavigator.service.contacts.create( { "displayName": "James Pearce", "organizations": ["Sencha"] }).save();

Contacts Demohttp://vimeo.com/23358554

Final thoughts

Plugins

http://pmuellr.github.com/weinre/

Hybrid appsXcode + EclipseNative wrapper Native APIs

James Pearce Sr Director, Developer Relations @ jamespearce jamesp@sencha.com

http://lanyrd.com	85
http://192.168.1.113	7
http://www.techgig.com	1

Creating and Distributing Mobile Web Applications with PhoneGap

by James Pearce

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 93

Statistics

Creating and Distributing Mobile Web Applications with PhoneGap Presentation Transcript