Your SlideShare is downloading. ×
Phonegap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Phonegap

1,072
views

Published on

Published in: Technology, Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,072
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
48
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)