Phonegap
-
Upload
essam-el-zinaty -
Category
Technology
-
view
1.018 -
download
0
description
Transcript of Phonegap
![Page 1: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/1.jpg)
Speaker: Essam A. El-Zinaty
Building Native Mobile Applications using PhoneGap
![Page 2: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/2.jpg)
Google Technology User Group (GTUG)
Agenda
• Mobile Application Overview• PhoneGap Overview• PhoneGap Architecture• PhoneGap Using
![Page 3: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/3.jpg)
Google Technology User Group (GTUG)
$ Mobile Applications $
http://www.abmuku.com/2011/02/24/technology/american-cell-phone-usage-infographic/
![Page 4: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/4.jpg)
Google Technology User Group (GTUG)
But
![Page 5: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/5.jpg)
Google Technology User Group (GTUG)
Lets try web app !
![Page 6: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/6.jpg)
Google Technology User Group (GTUG)
Ok
![Page 7: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/7.jpg)
Google Technology User Group (GTUG)
But we are still No native support NO MONY
![Page 8: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/8.jpg)
Google Technology User Group (GTUG)
PhoneGap
![Page 9: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/9.jpg)
Google Technology User Group (GTUG)
So what is PhoneGapIt's a tool for building mobile apps using web-tech.
![Page 10: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/10.jpg)
Google Technology User Group (GTUG)
How???
![Page 11: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/11.jpg)
Google Technology User Group (GTUG)
Native Support
![Page 12: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/12.jpg)
Google Technology User Group (GTUG)
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.
![Page 13: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/13.jpg)
Google Technology User Group (GTUG)
PhoneGap Architecture Diagram
PhoneGap Plug-insWeb App
PhoneGap Application
HTML
CSS
JavaScript
Resources
Accelerometer
Camera
Compass
Contacts
File
Geolocation
Media
Network
Notification
Storage
Custom Plug-insHTML Rendering Engine (WebView)
PhoneGap Native APIs
HTM
LAP
Is
Phon
eGap
JS A
PIs
Mobile OS OS
APIs
OS
APIs
Input
Services Sensors
Graphics
![Page 14: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/14.jpg)
Google Technology User Group (GTUG)
Best Practices
• Where possible use single HTML pageUse 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 usagenavigator.network.connection.typeonline /offline eventsNote: Apple checks for offline support
![Page 15: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/15.jpg)
Google Technology User Group (GTUG)
Best Practices
• Utilize persistent storageFile APIsStorage APIs
• SQL Lite / LawnchairWhere possible use single HTML pageUse 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 release
![Page 16: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/16.jpg)
Google Technology User Group (GTUG)
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 debuging
![Page 17: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/17.jpg)
Google Technology User Group (GTUG)
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/
![Page 18: Phonegap](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c850484a7959f4758b4580/html5/thumbnails/18.jpg)
The EndThanks
Google Technology User Group (GTUG)