Creating and Distributing Mobile Web Applications with PhoneGap

  • 12,546 views
Uploaded on

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Nice presentation ! But could you explain me what does 'linkable' and 'discoverable' means on slides 6 and 7 ?
    Thanks for your help
    Are you sure you want to
    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.
    Are you sure you want to
    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.
    Are you sure you want to
    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.??
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
12,546
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
536
Comments
4
Likes
23

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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