PhoneGap
Building Native Mobile Apps
using Web Technologies
Andrew Lunny, Nitobi Software
Wednesday, November 17, 2010
What is PhoneGap?
Wednesday, November 17, 2010
How To Build A Mobile App
var	
  idea	
  =	
  "An	
  app	
  to	
  list	
  your	
  todos";
[ios,	
  android,	
  blackberry]...
with PhoneGap
var	
  idea	
  =	
  "An	
  app	
  to	
  list	
  your	
  todos";
var	
  HTML5app	
  =	
  writeAppWithHTML5(id...
Diff
-­‐	
  	
  [ios,	
  android,	
  blackberry].forEach(function	
  (platform)	
  {
-­‐	
   	
  	
  createMobileApp(idea,...
PhoneGap
Web App
HTML5
JavaScript
CSS
Native
APIs
iOS
Android
Black
Berry
webOS
etc...
Wednesday, November 17, 2010
is
Cross-Platform
iOS, Android, BlackBerry 4.6+, webOS, Symbian...
Open Source
MIT outbound, MIT + Apache inbound
Web Tech...
Strictly Speaking
PhoneGap: the native library
• phonegap.jar, phonegaplib.a, etc
• instantiates chromeless web view, load...
For Designers
• A PhoneGap app is bigger than a native app on a lot of platforms:
• no location bar
• no browser menu
• Th...
For Developers
• Write and test your JavaScript as normal
• If you choose to use phonegap.js
• listen for the deviceready ...
Native APIs
• Device identification
• Network access
• Sensors
• Geo, Accelerometer, Orientation, Magnetometer
• Camera/ima...
Generally Speaking
• PhoneGap is
• agnostic
• permissive
• relaxed
• You don’t have to change the way you write apps
Wedne...
Demo Time
• A mobile web app, from Safari to native
apps on
• iPhone
• Android
• webOS
Wednesday, November 17, 2010
Thick Clients
remote APIs
offline storage
view templates
Wednesday, November 17, 2010
If
you put your web app in PhoneGap
Then
you won’t be able to rely on a web server
So
you 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...
Offline Storage
• HTML5!
• localStorage, sessionStorage, Webkit SQL, Google Gears,
Indexed DB
• Or native storage/external...
View Templating
• If your data’s local, then you’ll render your views locally
• duh
• Sencha does it!
• Or use an opensour...
Use Sencha Touch!
You should’ve been at James’s talk
Most of this stuff is taken care of:
make sure you use it!
Wednesday,...
Your server is there to
store data persistently
sync with new devices
let you use the word “cloud” in your marketing
Wedne...
Tooling
PhoneGap Build
PhoneGap Dev Browser
Sleight
Wednesday, November 17, 2010
PhoneGap Build
Problem:
Multiple SDKs to install, multiple
operating systems to run them
The crux of cross-platform pain.
...
PhoneGap Build Workflow
• Develop HTML5 app locally:
• index.html
• icon.png
• config.xml
• Submit to PhoneGap Build
• Uploa...
Wednesday, November 17, 2010
with PhoneGap Build
var	
  idea	
  =	
  "An	
  app	
  to	
  list	
  your	
  todos";
var	
  HTML5app	
  =	
  writeAppWithHT...
Diff
+	
  	
  var	
  phoneGapBuild	
  =	
  registerAtBuildPhoneGapCom;
-­‐	
  	
  createMobileApp(HTML5app,	
  [ios,	
  an...
Demo
From GitHub to device
Wednesday, November 17, 2010
PhoneGap Build
Closed beta right now, supporting:
Android, webOS, Symbian, BlackBerry
Next couple of months
• API access t...
PhoneGap Dev Browser
Problem:
It takes too long to build apps,
especially compared to web
development.
Who wants to wait f...
PhoneGap Dev Browser
Available on the Android Market now (free, naturally)
Available on GitHub, more or less, for iOS
who ...
Sleight
Problem:
We can develop apps with the dev
browsers, but none of our remote
API calls work - because of the
same or...
Sleight
Setup:
$ npm install sleight
Usage:
$ cd www
$ sleight port=4000 target=api.twitter.com
More details: https://gith...
Addenda
releases
roadmap
resources
Wednesday, November 17, 2010
Releases
are not our core competency
Wednesday, November 17, 2010
Currently @ 0.9.3
For most fun, live on edge
Planned for 0.9.4
Unified Contacts API
Unified File/IO API
end of November, ten...
Roadmap
Internationalization
Menu API (once we figure out what this will look like)
Full Windows Phone 7 Support
Plugin pac...
New Tooling
StopGap
mocking PhoneGap calls in desktop browser
fake touch events, deviceready event
PhoneGap.rb / CLI
build...
Resources
http://docs.phonegap.com
http://wiki.phonegap.com
#phonegap on irc.freenode.net
PhoneGap Google Group
twitter.co...
Thanks!
andrew.lunny@nitobi.com
twitter.com/alunny
Wednesday, November 17, 2010
Upcoming SlideShare
Loading in...5
×

PhoneGap Talk @ Sencha Con 2010

13,880

Published on

Talk from November 2010 on PhoneGap, PhoneGap Build, and associated tooling

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,880
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
349
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

PhoneGap Talk @ Sencha Con 2010

  1. 1. PhoneGap Building Native Mobile Apps using Web Technologies Andrew Lunny, Nitobi Software Wednesday, November 17, 2010
  2. 2. What is PhoneGap? Wednesday, November 17, 2010
  3. 3. How To Build A Mobile App var  idea  =  "An  app  to  list  your  todos"; [ios,  android,  blackberry].forEach(function  (platform)  {   createMobileApp(idea,  platform); }) //  using  native  APIs  and  tools function  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
  4. 4. with PhoneGap var  idea  =  "An  app  to  list  your  todos"; var  HTML5app  =  writeAppWithHTML5(idea); createMobileApp(HTML5app,  [ios,  android,  blackberry]); //  using  PhoneGap function  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
  5. 5. Diff -­‐    [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
  6. 6. PhoneGap Web App HTML5 JavaScript CSS Native APIs iOS Android Black Berry webOS etc... Wednesday, November 17, 2010
  7. 7. is Cross-Platform iOS, Android, BlackBerry 4.6+, webOS, Symbian... Open Source MIT outbound, MIT + Apache inbound Web Technologies defer to native support Spec-compliant where applicable, tracking DAP working group Extensible any native code available through plug-ins any JS libraries available through <script> Wednesday, November 17, 2010
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. Native APIs • Device identification • Network access • Sensors • Geo, Accelerometer, Orientation, Magnetometer • Camera/image sources • Contacts • File access Wednesday, November 17, 2010
  12. 12. Generally Speaking • PhoneGap is • agnostic • permissive • relaxed • You don’t have to change the way you write apps Wednesday, November 17, 2010
  13. 13. Demo Time • A mobile web app, from Safari to native apps on • iPhone • Android • webOS Wednesday, November 17, 2010
  14. 14. Thick Clients remote APIs offline storage view templates Wednesday, November 17, 2010
  15. 15. If you put your web app in PhoneGap Then you won’t be able to rely on a web server So you will have do more on the client Wednesday, November 17, 2010
  16. 16. 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
  17. 17. Offline 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
  18. 18. 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
  19. 19. Use Sencha Touch! You should’ve been at James’s talk Most of this stuff is taken care of: make sure you use it! Wednesday, November 17, 2010
  20. 20. Your server is there to store data persistently sync with new devices let you use the word “cloud” in your marketing Wednesday, November 17, 2010
  21. 21. Tooling PhoneGap Build PhoneGap Dev Browser Sleight Wednesday, November 17, 2010
  22. 22. PhoneGap Build Problem: 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
  23. 23. 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
  24. 24. Wednesday, November 17, 2010
  25. 25. with PhoneGap Build var  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  Build function  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
  26. 26. Diff +    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
  27. 27. Demo From GitHub to device Wednesday, November 17, 2010
  28. 28. PhoneGap Build Closed 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
  29. 29. PhoneGap Dev Browser Problem: 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
  30. 30. PhoneGap Dev Browser Available 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
  31. 31. Sleight Problem: 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
  32. 32. Sleight Setup: $ npm install sleight Usage: $ cd www $ sleight port=4000 target=api.twitter.com More details: https://github.com/alunny/sleight Wednesday, November 17, 2010
  33. 33. Addenda releases roadmap resources Wednesday, November 17, 2010
  34. 34. Releases are not our core competency Wednesday, November 17, 2010
  35. 35. Currently @ 0.9.3 For most fun, live on edge Planned for 0.9.4 Unified Contacts API Unified File/IO API end of November, tentatively Wednesday, November 17, 2010
  36. 36. Roadmap Internationalization Menu API (once we figure out what this will look like) Full Windows Phone 7 Support Plugin packaging/distribution Beer drinking Wednesday, November 17, 2010
  37. 37. New Tooling StopGap mocking PhoneGap calls in desktop browser fake touch events, deviceready event PhoneGap.rb / CLI build/generate/launch PG apps programmatically a single unified interface to building apps Ristretto build tool for JavaScript target devices/environments in a framework-agnostic way Wednesday, November 17, 2010
  38. 38. Resources http://docs.phonegap.com http://wiki.phonegap.com #phonegap on irc.freenode.net PhoneGap Google Group twitter.com/phonegap Wednesday, November 17, 2010
  39. 39. Thanks! andrew.lunny@nitobi.com twitter.com/alunny Wednesday, November 17, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×