creating and distributing mobile web applications with phonegap
DESCRIPTION
An introduction to using PhoneGap to creative native applications using Sencha TouchTRANSCRIPT
![Page 1: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/1.jpg)
![Page 2: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/2.jpg)
James Pearce Sr Director, Developer Relations @ jamespearce [email protected]
![Page 3: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/3.jpg)
Creating and distributing mobile web applications
with PhoneGap
![Page 4: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/4.jpg)
Web appsare the future
![Page 5: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/5.jpg)
Native appsare the present
![Page 6: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/6.jpg)
Native Web
Cross-platform ✘ ✔
Linkable ✘ ✔
Discoverable ✔ ✘
Device APIs ✔ ✘
![Page 7: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/7.jpg)
Native Web Hybrid
Cross-platform ✘ ✔ ✔
Linkable ✘ ✔ ✔
Discoverable ✔ ✘ ✔
Device APIs ✔ ✘ ✔
![Page 8: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/8.jpg)
What is a hybrid app?
![Page 9: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/9.jpg)
UIWebViewWebView
A simple hybrid application
HTMLCSS
JSStores
![Page 10: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/10.jpg)
PhoneGaphttp://phonegap.com
MIT
![Page 11: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/11.jpg)
+
![Page 12: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/12.jpg)
UIWebViewWebView
A PhoneGap application
HTMLCSS
JSStores
JS APIs
![Page 13: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/13.jpg)
PhoneGap APIsAccelerometerTap into the device’s motion sensor.
CameraCapture a photo using the device's camera.
CompassObtain the direction that the device is pointing.
ContactsWork with the devices contact database.
DeviceGather device specific information.
EventsHook into native events through JavaScript.
FileHook into native file system through JavaScript.
GeolocationMake your application location aware.
MediaRecord and play back audio files.
NetworkQuickly check the network state.
NotificationVisual, audible, and tactile device notifications.
StorageHook into the device’s native storage options.
![Page 14: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/14.jpg)
Getting Startedwith iOS
![Page 15: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/15.jpg)
![Page 16: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/16.jpg)
http://phonegap.com
![Page 17: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/17.jpg)
![Page 18: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/18.jpg)
$> ./xcode4.sh seattlebars .
http://sencha.com/x/b9
![Page 19: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/19.jpg)
![Page 20: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/20.jpg)
![Page 21: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/21.jpg)
![Page 22: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/22.jpg)
![Page 23: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/23.jpg)
@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];
How it works
![Page 24: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/24.jpg)
Getting Startedwith Android
![Page 25: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/25.jpg)
![Page 26: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/26.jpg)
![Page 27: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/27.jpg)
![Page 28: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/28.jpg)
![Page 29: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/29.jpg)
package 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"); }}
How it works
![Page 30: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/30.jpg)
Using aSencha Touch
Application
![Page 31: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/31.jpg)
$> rm -r www $> ln -s myapp www
![Page 32: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/32.jpg)
Don’t symlink theentire SDK, thanks
Don’t symlink yoursource control
![Page 33: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/33.jpg)
![Page 34: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/34.jpg)
![Page 35: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/35.jpg)
NB these are now in the symlink dir
![Page 36: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/36.jpg)
![Page 37: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/37.jpg)
Ext.setup({ tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', icon: 'icon.png', glossOnIcon: false, ...
![Page 38: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/38.jpg)
![Page 39: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/39.jpg)
<aside>
</aside>Pacifist
+ =
![Page 40: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/40.jpg)
$> rm -r assets/www $> ln -s myapp assets/www
![Page 41: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/41.jpg)
![Page 42: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/42.jpg)
![Page 43: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/43.jpg)
![Page 44: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/44.jpg)
So we’re done, right?
![Page 45: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/45.jpg)
No.
![Page 46: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/46.jpg)
UsingDevice APIs
![Page 47: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/47.jpg)
AccelerometerTap into the device’s motion sensor.
CameraCapture a photo using the device's camera.
CompassObtain the direction that the device is pointing.
ContactsWork with the devices contact database.
DeviceGather device specific information.
EventsHook into native events through JavaScript.
FileHook into native file system through JavaScript.
GeolocationMake your application location aware.
MediaRecord and play back audio files.
NetworkQuickly check the network state.
NotificationVisual, audible, and tactile device notifications.
StorageHook into the device’s native storage options.
![Page 48: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/48.jpg)
That’s what this was for
![Page 49: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/49.jpg)
but...
![Page 50: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/50.jpg)
Androidphonegap.js
iOSphonegap.js
![Page 51: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/51.jpg)
package 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"); }}
Alter entry points
![Page 52: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/52.jpg)
<!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.html
![Page 53: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/53.jpg)
<!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> ...
index_a.html
![Page 54: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/54.jpg)
deviceready event
document.addEventListener( "deviceready", onDeviceReady, false);
function onDeviceReady() { // Now safe to use the PhoneGap API}
![Page 55: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/55.jpg)
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;} ... }});
![Page 56: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/56.jpg)
http://docs.phonegap.com
![Page 57: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/57.jpg)
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 }
);
![Page 58: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/58.jpg)
File I/O
var 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);
![Page 59: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/59.jpg)
Contacts
navigator.service.contacts.create( { "displayName": "James Pearce", "organizations": ["Sencha"] }).save();
![Page 60: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/60.jpg)
Contacts Demo
http://vimeo.com/23358554
![Page 61: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/61.jpg)
Final thoughts
![Page 62: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/62.jpg)
Plugins
![Page 63: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/63.jpg)
http://pmuellr.github.com/weinre/
![Page 64: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/64.jpg)
Hybrid appsXcode + EclipseNative wrapper
Native APIs
![Page 65: Creating and Distributing Mobile Web Applications with PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022042814/554d1801b4c905805d8b54b7/html5/thumbnails/65.jpg)
James Pearce Sr Director, Developer Relations @ jamespearce [email protected]