Building Native MobileApplications using PhoneGap  Speaker: Essam A. El-Zinaty
Agenda•   Mobile Application Overview•   PhoneGap Overview•   PhoneGap Architecture•   PhoneGap UsingGoogle Technology Use...
$ Mobile Applications $http://www.abmuku.com/2011/02/24/technology/american-cell-phone-usage-infographic/ Google Technolog...
But Google Technology User Group (GTUG)
Lets try web app !Google Technology User Group (GTUG)
OkGoogle Technology User Group (GTUG)
But we are still   No native support                   NO MONYGoogle Technology User Group (GTUG)
PhoneGapGoogle Technology User Group (GTUG)
So what is PhoneGap      Its a tool for building mobile apps using web-tech.Google Technology User Group (GTUG)
How???Google Technology User Group (GTUG)
Native SupportGoogle Technology User Group (GTUG)
Application Structure     HTML/JS/CSS + graphic assets are on the device, packaged as part     of the build process.     ...
PhoneGap Architecture Diagram                                                              PhoneGap                       ...
Best Practices     • Where possible use single HTML page        Use JavaScript to show/hide page elements based on user in...
Best Practices     • Utilize persistent storage        File APIs        Storage APIs     • SQL Lite / LawnchairWhere possi...
Using PhoneGap     • Create resources in www directory     • Include cordova.*.js in your start page (usually       index....
Links  • http://docs.phonegap.com/en/1.9.0/guide_getting-    started_android_index.md.html#Getting%20Started%20with    %20...
The End                               ThanksGoogle Technology User Group (GTUG)
Upcoming SlideShare
Loading in...5
×

Phonegap

1,357

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,357
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
57
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Phonegap"

  1. 1. Building Native MobileApplications using PhoneGap Speaker: Essam A. El-Zinaty
  2. 2. Agenda• Mobile Application Overview• PhoneGap Overview• PhoneGap Architecture• PhoneGap UsingGoogle Technology User Group (GTUG)
  3. 3. $ Mobile Applications $http://www.abmuku.com/2011/02/24/technology/american-cell-phone-usage-infographic/ Google Technology User Group (GTUG)
  4. 4. But Google Technology User Group (GTUG)
  5. 5. Lets try web app !Google Technology User Group (GTUG)
  6. 6. OkGoogle Technology User Group (GTUG)
  7. 7. But we are still  No native support NO MONYGoogle Technology User Group (GTUG)
  8. 8. PhoneGapGoogle Technology User Group (GTUG)
  9. 9. So what is PhoneGap Its a tool for building mobile apps using web-tech.Google Technology User Group (GTUG)
  10. 10. How???Google Technology User Group (GTUG)
  11. 11. Native SupportGoogle Technology User Group (GTUG)
  12. 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. 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. 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. 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. 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. 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. 18. The End ThanksGoogle Technology User Group (GTUG)
  1. A particular slide catching your eye?

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

×