phonegap talk @ sencha con 2010

PhoneGapBuilding Native Mobile Apps

using Web Technologies

Andrew Lunny, Nitobi Software

Wednesday, November 17, 2010

What is PhoneGap?


How To Build A Mobile Appvar idea = "An app to list your todos";

[ios, android, blackberry].forEach(function (platform) { createMobileApp(idea, platform);})

// using native APIs and toolsfunction createMobileApp (idea, platform) { var app, profit;

platform.registerForDeveloperProgram(); platform.downloadAndInstallSDK(); platform.learnNativeAPIs();

app = platform.writeNativeApp(idea);

app.buildForPlatform(); profit = app.submitToAppStore(); return profit;}


with PhoneGapvar idea = "An app to list your todos";var HTML5app = writeAppWithHTML5(idea);

createMobileApp(HTML5app, [ios, android, blackberry]);

// using PhoneGapfunction createMobileApp (HTML5app, platforms) { var app, profit = 0;

platforms.forEach(function (platform) { platform.registerForDeveloperProgram(); platform.downloadAndInstallSDK();

app = platform.buildNativeAppWithPhoneGap(HTML5app); app.buildForPlatform();

profit += app.submitToAppStore(); });

return profit;}


Di!

-‐ [ios, android, blackberry].forEach(function (platform) {-‐ createMobileApp(idea, platform);-‐ })+ var HTML5app = writeAppWithHTML5(idea);+ createMobileApp(HTML5app, [ios, android, blackberry]);

-‐ platform.learnNativeAPIs();-‐ app = platform.writeNativeApp(idea);+ app = platform.buildNativeAppWithPhoneGap(HTML5app);


PhoneGap

Web App

HTML5JavaScript

CSS

NativeAPIs

iOS

Android

BlackBerry

webOS

etc...


isCross-Platform

iOS, Android, BlackBerry 4.6+, webOS, Symbian...

Open SourceMIT outbound, MIT + Apache inbound

Web Technologiesdefer to native support

Spec-compliantwhere applicable, tracking DAP working group

Extensibleany native code available through plug-insany JS libraries available through <script>


Strictly Speaking

PhoneGap: the native library

• phonegap.jar, phonegaplib.a, etc

• instantiates chromeless web view, loads www/index.html

• adds JavaScript access to native APIs

There are two parts to PhoneGap

PhoneGap: the JavaScript files

• phonegap.js

• JavaScript wrappers for native API calls

• is not required - your app can run natively as is


For Designers• A PhoneGap app is bigger than a native app on a lot of platforms:

• no location bar

• no browser menu

• There’s no browser chrome!

• interactions should be explicit

• It should have a launch screen

• It should have some icons

• Mobile app expectations != mobile web expectations


For Developers• Write and test your JavaScript as normal

• If you choose to use phonegap.js

• listen for the deviceready event on the document object

• then perform all PhoneGap-specific functionality

• You should be able to avoid native code entirely

• assuming nothing breaks

• if you need extra plug-in functionality, bug us on the mailing list


Native APIs• Device identification

• Network access

• Sensors

• Geo, Accelerometer, Orientation, Magnetometer

• Camera/image sources

• Contacts

• File access


Generally Speaking• PhoneGap is

• agnostic

• permissive

• relaxed

• You don’t have to change the way you write apps


Demo Time• A mobile web app, from Safari to native

apps on

• iPhone

• Android

• webOS


Thick Clientsremote APIs

o!ine storageview templates


Ifyou put your web app in PhoneGap

Thenyou won’t be able to rely on a web server

Soyou will have do more on the client


Remote APIs• Usually accessed on a server

• due to the same-origin policy -- best you can do is JSONP

• PhoneGap apps run on the file:// protocol

• the file:// protocol is exempt from the same-origin policy*

• XHRs can point anywhere

• Simple as you like

• $.get()... for example

*well, unless it gets changed. But we’ll patch that if it happens


O"ine Storage• HTML5!

• localStorage, sessionStorage, Webkit SQL, Google Gears, Indexed DB

• Or native storage/external services

• CouchDB!

• Lots of libraries/wrappers

• Ext.data.Store is the Sencha Touch class

• we at Nitobi like Lawnchair


View Templating• If your data’s local, then you’ll render your views locally

• duh

• Sencha does it!

• Or use an opensource one; or roll your own; or whichever

• My favorite is Mustache

• Generally speaking, try to spend time working with Strings, as opposed to DOM elements

• DOM manipulation is expensive


Use Sencha Touch!You should’ve been at James’s talkMost of this stu" is taken care of:

make sure you use it!


Your server is there tostore data persistentlysync with new devices

let you use the word “cloud” in your marketing


ToolingPhoneGap Build

PhoneGap Dev BrowserSleight


PhoneGap BuildProblem:Multiple SDKs to install, multiple operating systems to run them

The crux of cross-platform pain.

Solution:The cloud!

Ahem.

Online service for building and distributing PhoneGap apps


PhoneGap Build Workflow• Develop HTML5 app locally:

• index.html

• icon.png

• config.xml

• Submit to PhoneGap Build

• Upload

• Hook into VCS (git, svn)

• Download and Test App Binaries

• Submit programmatically to App Stores


with PhoneGap Buildvar idea = "An app to list your todos";var HTML5app = writeAppWithHTML5(idea);var phoneGapBuild = registerAtBuildPhoneGapCom();

createMobileApp(HTML5app, [ios, android, blackberry, symbian, webos, winPhone7, bada], phoneGapBuild);

// using PhoneGap Buildfunction createMobileApp (HTML5app, platforms, phoneGapBuild) { var app, profit;

platforms.forEach(function (platform) { platform.registerForDeveloperProgram(); });

// now! phoneGapBuild.buildNativeAppsInTheCloud(HTML5app); // soon! profit = phoneGapBuild.submitToAppStores();

return profit;}


Di!+ var phoneGapBuild = registerAtBuildPhoneGapCom;

-‐ createMobileApp(HTML5app, [ios, android, blackberry]);+ createMobileApp(HTML5app, [ios, android, blackberry, symbian, webos, winPhone7, bada], phoneGapBuild);

-‐ platform.downloadAndInstallSDK();-‐ app = platform.buildNativeAppWithPhoneGap(HTML5app);-‐ app.buildForPlatform();+ phoneGapBuild.buildNativeAppsInTheCloud(HTML5app);

-‐ profit += app.submitToAppStore();+ profit = phoneGapBuild.submitToAllAppStores();


DemoFrom GitHub to device


PhoneGap BuildClosed beta right now, supporting:

Android, webOS, Symbian, BlackBerry

Next couple of months

• API access to allow IDE integration (Eclipse, Dreamweaver)

• Support for iOS, WinPhone 7, Bada

Further out

• Plugin integration: build with arbitrary native code

• testing/continuous integration

Interested? Sign up for the beta (or harangue me)


PhoneGap Dev BrowserProblem:It takes too long to build apps, especially compared to web development.

Who wants to wait for a compiler? Who wants to reset their device every time an app is updated?*

Solution:A browser-style app that includes PhoneGap APIs.

Put your PhoneGap app on a remote server, point the browser to it, test away.

*BlackBerry owners


PhoneGap Dev BrowserAvailable on the Android Market now (free, naturally)

Available on GitHub, more or less, for iOS

who knows, it might get approved

BlackBerry port in progress


SleightProblem:We can develop apps with the dev browsers, but none of our remote API calls work - because of the same origin policy.

Solution:A node-js based web server.

Serve static files from your disk, proxy remote resources from a target server.


SleightSetup:

$ npm install sleightUsage:

$ cd www

$ sleight port=4000 target=api.twitter.com

More details: https://github.com/alunny/sleight


Addendareleasesroadmapresources


Releasesare not our core competency


Currently @ 0.9.3For most fun, live on edge

Planned for 0.9.4Unified Contacts APIUnified File/IO API

end of November, tentatively


RoadmapInternationalization

Menu API (once we figure out what this will look like)Full Windows Phone 7 SupportPlugin packaging/distribution

Beer drinking


New ToolingStopGap

mocking PhoneGap calls in desktop browserfake touch events, deviceready event

PhoneGap.rb / CLIbuild/generate/launch PG apps programmatically

a single unified interface to building appsRistretto

build tool for JavaScript target devices/environments in a framework-agnostic way


Resourceshttp://docs.phonegap.comhttp://wiki.phonegap.com

#phonegap on irc.freenode.netPhoneGap Google Grouptwitter.com/phonegap


http://docs.phonegap.com

http://docs.phonegap.com

http://wiki.phonegap.com

http://wiki.phonegap.com

[email protected]

twitter.com/alunny


mailto:[email protected]

mailto:[email protected]

phonegap talk @ sencha con 2010

Technology

profit platform

downloadandinstallsdk

learnnativeapis app

learnnativeapis app

downloadandinstallsdk

writenativeappidea app

buildforplatform profit

buildforplatf profit