Phonegap

  • 986 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
986
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
45
Comments
0
Likes
0

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. Building Native MobileApplications using PhoneGap Speaker: Essam A. El-Zinaty
  • 2. Agenda• Mobile Application Overview• PhoneGap Overview• PhoneGap Architecture• PhoneGap UsingGoogle Technology User Group (GTUG)
  • 3. $ Mobile Applications $http://www.abmuku.com/2011/02/24/technology/american-cell-phone-usage-infographic/ Google Technology User Group (GTUG)
  • 4. But Google Technology User Group (GTUG)
  • 5. Lets try web app !Google Technology User Group (GTUG)
  • 6. OkGoogle Technology User Group (GTUG)
  • 7. But we are still  No native support NO MONYGoogle Technology User Group (GTUG)
  • 8. PhoneGapGoogle Technology User Group (GTUG)
  • 9. So what is PhoneGap Its a tool for building mobile apps using web-tech.Google Technology User Group (GTUG)
  • 10. How???Google Technology User Group (GTUG)
  • 11. Native SupportGoogle Technology User Group (GTUG)
  • 12. Application Structure HTML/JS/CSS + graphic assets are on the device, packaged as part of the build process. JavaScript can store retrieved data in a SQLite database or from localStorage (key/value pair) for offline access. Often a server component involved. JavaScript communicates with the server via XHR to get retrieve data.Google Technology User Group (GTUG)
  • 13. PhoneGap Architecture Diagram PhoneGap Application Web App PhoneGap Plug-ins HTML JavaScript Accelerometer Geolocation CSS Resources Camera Media Compass Network Contacts Notification PhoneGap JS APIs HTML APIs File Storage HTML Rendering Engine Custom Plug-ins PhoneGap Native (WebView) APIs OS APIs OS APIs Services Sensors Mobile OS Input GraphicsGoogle Technology User Group (GTUG)
  • 14. Best Practices • Where possible use single HTML page Use JavaScript to show/hide page elements based on user interaction instead of linking to a separate page. Those JavaScript toolkits come in handy here! • Consider offline usage navigator.network.connection.type online /offline events Note: Apple checks for offline supportGoogle Technology User Group (GTUG)
  • 15. Best Practices • Utilize persistent storage File APIs Storage APIs • SQL Lite / LawnchairWhere possible use single HTML page Use JavaScript to show/hide page elements based on user interaction instead of linking to a separate page. Those JavaScript toolkits come in handy here! • Obfuscate / crunch your JavaScript before releaseGoogle Technology User Group (GTUG)
  • 16. Using PhoneGap • Create resources in www directory • Include cordova.*.js in your start page (usually index.html) • Create onload handler • In onload handler register for deviceReady event from PhoneGap • When deviceready fires PhoneGap is ready. • Build, install and test for each platform • Use console.log for debugingGoogle Technology User Group (GTUG)
  • 17. Links • http://docs.phonegap.com/en/1.9.0/guide_getting- started_android_index.md.html#Getting%20Started%20with %20Android • http://docs.phonegap.com/en/1.9.0/index.html • http://brian.io/lawnchair/ • http://zeptojs.com/Google Technology User Group (GTUG)
  • 18. The End ThanksGoogle Technology User Group (GTUG)