PhoneGap Talk @ Sencha Con 2010
-
Upload
alunny -
Category
Technology
-
view
120 -
download
1
description
Transcript of PhoneGap Talk @ Sencha Con 2010
![Page 1: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/1.jpg)
PhoneGapBuilding Native Mobile Apps
using Web Technologies
Andrew Lunny, Nitobi Software
Wednesday, November 17, 2010
![Page 2: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/2.jpg)
What is PhoneGap?
Wednesday, November 17, 2010
![Page 3: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/3.jpg)
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;}
Wednesday, November 17, 2010
![Page 4: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/4.jpg)
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;}
Wednesday, November 17, 2010
![Page 5: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/5.jpg)
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);
Wednesday, November 17, 2010
![Page 6: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/6.jpg)
PhoneGap
Web App
HTML5JavaScript
CSS
NativeAPIs
iOS
Android
BlackBerry
webOS
etc...
Wednesday, November 17, 2010
![Page 7: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/7.jpg)
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>
Wednesday, November 17, 2010
![Page 8: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/8.jpg)
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
Wednesday, November 17, 2010
![Page 9: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/9.jpg)
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
Wednesday, November 17, 2010
![Page 10: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/10.jpg)
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
Wednesday, November 17, 2010
![Page 11: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/11.jpg)
Native APIs• Device identification
• Network access
• Sensors
• Geo, Accelerometer, Orientation, Magnetometer
• Camera/image sources
• Contacts
• File access
Wednesday, November 17, 2010
![Page 12: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/12.jpg)
Generally Speaking• PhoneGap is
• agnostic
• permissive
• relaxed
• You don’t have to change the way you write apps
Wednesday, November 17, 2010
![Page 13: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/13.jpg)
Demo Time• A mobile web app, from Safari to native
apps on
• iPhone
• Android
• webOS
Wednesday, November 17, 2010
![Page 14: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/14.jpg)
Thick Clientsremote APIs
o!ine storageview templates
Wednesday, November 17, 2010
![Page 15: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/15.jpg)
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
Wednesday, November 17, 2010
![Page 16: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/16.jpg)
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
Wednesday, November 17, 2010
![Page 17: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/17.jpg)
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
Wednesday, November 17, 2010
![Page 18: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/18.jpg)
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
Wednesday, November 17, 2010
![Page 19: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/19.jpg)
Use Sencha Touch!You should’ve been at James’s talkMost of this stu" is taken care of:
make sure you use it!
Wednesday, November 17, 2010
![Page 20: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/20.jpg)
Your server is there tostore data persistentlysync with new devices
let you use the word “cloud” in your marketing
Wednesday, November 17, 2010
![Page 21: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/21.jpg)
ToolingPhoneGap Build
PhoneGap Dev BrowserSleight
Wednesday, November 17, 2010
![Page 22: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/22.jpg)
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
Wednesday, November 17, 2010
![Page 23: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/23.jpg)
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
Wednesday, November 17, 2010
![Page 24: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/24.jpg)
Wednesday, November 17, 2010
![Page 25: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/25.jpg)
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;}
Wednesday, November 17, 2010
![Page 26: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/26.jpg)
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();
Wednesday, November 17, 2010
![Page 27: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/27.jpg)
DemoFrom GitHub to device
Wednesday, November 17, 2010
![Page 28: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/28.jpg)
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)
Wednesday, November 17, 2010
![Page 29: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/29.jpg)
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
Wednesday, November 17, 2010
![Page 30: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/30.jpg)
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
Wednesday, November 17, 2010
![Page 31: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/31.jpg)
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.
Wednesday, November 17, 2010
![Page 32: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/32.jpg)
SleightSetup:
$ npm install sleightUsage:
$ cd www
$ sleight port=4000 target=api.twitter.com
More details: https://github.com/alunny/sleight
Wednesday, November 17, 2010
![Page 33: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/33.jpg)
Addendareleasesroadmapresources
Wednesday, November 17, 2010
![Page 34: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/34.jpg)
Releasesare not our core competency
Wednesday, November 17, 2010
![Page 35: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/35.jpg)
Currently @ 0.9.3For most fun, live on edge
Planned for 0.9.4Unified Contacts APIUnified File/IO API
end of November, tentatively
Wednesday, November 17, 2010
![Page 36: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/36.jpg)
RoadmapInternationalization
Menu API (once we figure out what this will look like)Full Windows Phone 7 SupportPlugin packaging/distribution
Beer drinking
Wednesday, November 17, 2010
![Page 37: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/37.jpg)
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
Wednesday, November 17, 2010
![Page 38: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/38.jpg)
Resourceshttp://docs.phonegap.comhttp://wiki.phonegap.com
#phonegap on irc.freenode.netPhoneGap Google Grouptwitter.com/phonegap
Wednesday, November 17, 2010
![Page 39: PhoneGap Talk @ Sencha Con 2010](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6664a795973668b4609/html5/thumbnails/39.jpg)
twitter.com/alunny
Wednesday, November 17, 2010