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      ✔      ✘    ...
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.                H...
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 {! re...
Getting Started with Android
How it workspackage com.phonegap.exampleapp;import android.os.Bundle;import com.phonegap.*;public class exampleapp extends...
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,  glossOnIco...
<aside>   +        =  Pacifist                </aside>
$> rm -r assets/www$> ln -s myapp assets/www
So we’re done, right?
No.
UsingDevice APIs
Accelerometer                                       FileTap into the device’s motion sensor.                Hook into nati...
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 e...
index.html<!doctype html><html>  <head>    <script type="text/javascript" src="app/app.js">    </script>    <script type="...
index_a.html<!doctype html><html>  <head>    <script type="text/javascript" src="app/app.js">    </script>    <script type...
deviceready eventdocument.addEventListener(   "deviceready", onDeviceReady, false);function onDeviceReady() {    // Now sa...
Avoiding race conditionsdocument.addEventListener(   "deviceready", app.mainLaunch, false);Ext.regApplication({  name: "ap...
http://docs.phonegap.com
Cameranavigator.camera.getPicture(  function(imageData) {    var img = document.getElementById(img);    img.src = "data:im...
File I/Ovar paths = navigator.fileMgr.getRootPaths();var file = paths[0] + "write.txt";var writer = new FileWriter(file);w...
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
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
Upcoming SlideShare
Loading in...5
×

Creating and Distributing Mobile Web Applications with PhoneGap

12,980

Published on

An introduction to using PhoneGap to creative native applications using Sencha Touch

Published in: Technology, Design
4 Comments
23 Likes
Statistics
Notes
  • Nice presentation ! But could you explain me what does 'linkable' and 'discoverable' means on slides 6 and 7 ?
    Thanks for your help
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I am currently developing the native application for the android using eclipse phonegap and jquerymobile. But dont know how to develop mobile web application which will run on the browser and i need the help regarding this. And i dont know about the support of the sqlite db in the browser of the mobile.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I am currently developing the native application for the android using eclipse phonegap and jquerymobile. But dont know how to develop mobile web application which will run on the browser and i need the help regarding this. And i dont know about the support of the sqlite db in the browser of the mobile.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • its mac machine you are using i need the windows tutorial for the phonegap web mobile application for the android in eclipse with jquerymobile. Is there any thing who can guide me for the eclipse+phonegap+webapplication for the android no matter which UI we use.??
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
12,980
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
555
Comments
4
Likes
23
Embeds 0
No embeds

No notes for slide

Transcript of "Creating and Distributing Mobile Web Applications with PhoneGap"

  1. 1. James Pearce Sr Director, Developer Relations @ jamespearce jamesp@sencha.com
  2. 2. Creating and distributingmobile web applications with PhoneGap
  3. 3. Web appsare the future
  4. 4. Native appsare the present
  5. 5. Native WebCross-platform ✘ ✔ Linkable ✘ ✔ Discoverable ✔ ✘ Device APIs ✔ ✘
  6. 6. Native Web HybridCross-platform ✘ ✔ ✔ Linkable ✘ ✔ ✔ Discoverable ✔ ✘ ✔ Device APIs ✔ ✘ ✔
  7. 7. What is a hybrid app?
  8. 8. A simple hybrid application UIWebView WebViewHTML CSS Stores JS
  9. 9. PhoneGaphttp://phonegap.com MIT
  10. 10. +
  11. 11. A PhoneGap application UIWebView WebViewHTML CSS Stores JS JS APIs
  12. 12. 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.
  13. 13. Getting Started with iOS
  14. 14. http://phonegap.com
  15. 15. $> ./xcode4.sh seattlebars . http://sencha.com/x/b9
  16. 16. 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];
  17. 17. Getting Started with Android
  18. 18. 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"); }}
  19. 19. Using aSencha Touch Application
  20. 20. $> rm -r www$> ln -s myapp www
  21. 21. Don’t symlink yoursource controlDon’t symlink theentire SDK, thanks
  22. 22. NB these are nowin the symlink dir
  23. 23. Ext.setup({ tabletStartupScreen: tablet_startup.png, phoneStartupScreen: phone_startup.png, icon: icon.png, glossOnIcon: false, ...
  24. 24. <aside> + = Pacifist </aside>
  25. 25. $> rm -r assets/www$> ln -s myapp assets/www
  26. 26. So we’re done, right?
  27. 27. No.
  28. 28. UsingDevice APIs
  29. 29. 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.
  30. 30. That’s what this was for
  31. 31. but...
  32. 32. Android iOSphonegap.js phonegap.js
  33. 33. 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"); }}
  34. 34. 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> ...
  35. 35. 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> ...
  36. 36. deviceready eventdocument.addEventListener( "deviceready", onDeviceReady, false);function onDeviceReady() {    // Now safe to use the PhoneGap API}
  37. 37. 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;} ... }});
  38. 38. http://docs.phonegap.com
  39. 39. 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 });
  40. 40. 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);
  41. 41. Contactsnavigator.service.contacts.create( { "displayName": "James Pearce", "organizations": ["Sencha"] }).save();
  42. 42. Contacts Demohttp://vimeo.com/23358554
  43. 43. Final thoughts
  44. 44. Plugins
  45. 45. http://pmuellr.github.com/weinre/
  46. 46. Hybrid appsXcode + EclipseNative wrapper Native APIs
  47. 47. James Pearce Sr Director, Developer Relations @ jamespearce jamesp@sencha.com
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×