Creating and Distributing Mobile Web Applications with PhoneGap

13,232
-1

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
13,232
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
563
Comments
4
Likes
23
Embeds 0
No embeds

No notes for slide

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. A particular slide catching your eye?

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

×