Your SlideShare is downloading. ×
PhoneGap Framework for smartphone app developement
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

PhoneGap Framework for smartphone app developement

788
views

Published on

PhoneGap Framework for smartphone app developement

PhoneGap Framework for smartphone app developement

Published in: Technology, Education

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
788
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
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. Introducing PhoneGap The hybrid framework for building smartphone application Compiled by Trieu Nguyen @ tantrieuf31@gmail.com
  • 2. Problem
  • 3. Solution
  • 4. A Set of templates for building native iOS, Android, Blackberry, Symbian, and WebOS using HTML, CSS, and JavaScript.
  • 5. Pros & Cons Here are the pros of PhoneGap framework: ● Can use our current authoring tools (E.g: Photoshop for doing mockup) ● Can use our current web design and development skills. ● The development cycle is fast. ● Can access the all cool hardware features of phone. (Using JavaScript ObjectiveC Bridge) ● Good performance for model iPhone 3G, 3GS, 4, and iPad. ● Mixing both native iOS view and webview. ● Clean code, usability, flexible and maintainable. Some cons: ● It can be difficult to achieve sophisticated UI effects. ● Must learning HTML5 and design for smartphone. ● Complex games, intensive graphics. Use OpenGL for that, not PhoneGap. ● For slower phones (not iPhone, not Nexus One, Droid, not Xperia X10), PhoneGap apps using the latest interactive Google Maps APIs tend to be slow. Static maps OK, though.
  • 6. Native vs Hybrid This diagram depicts the major differences between mulitple native and hybrid application development
  • 7. phonegap License
  • 8. How PhoneGap Works
  • 9. Cross-Platform Stack The project implementation We will implement this Phonegap Core APIs Plugin APIs
  • 10. Core APIs - What we can reuse from Phonegap framework
  • 11. The general architecture View: is the common for both platform iOS + Android. This solution is recommended f Multi-Platform Smartphone App Development
  • 12. How Phonegap use MVC pattern
  • 13. Introducing jQtouch http://www.jqtouch.com/
  • 14. Case study
  • 15. The anatomy of project in XCode IDE 1) Interface JavaScript: the hub for messaging from WebView to Obj-C Services. Every DOM node which is got the event from user, and transfer the message to local services. 2) The standard icons for Tab Bar and 3) Images for App, see more details here: Creating Custom Icons and Images 4) Themes for App: http://code.google. com/p/jqtouch/w/list 5) The AppManager group: the logical folder for all sources that manage the data between local App and Web Services.
  • 16. More resources Get started: http://www.phonegap.com/start My notes https://docs.google.com/document/pub? id=1pn6gd7k77pzM0AgJLLJYrgxVPRBfvYAKKvkNXU1nchc From slideshare http://www.slideshare.net/search/slideshow?searchfrom=header&q=phonegap Official Document: http://wiki.phonegap.com http://www.phonegap.com/docs Phonegap source code: https://github.com/phonegap
  • 17. About the project "Tele-radiology" Step 1: http://www.phonegap.com/start Step 2: http://jquerymobile.com/ or http://www.jqtouch.com/ Step 3: A simple project http://dl.dropbox.com/u/4074962/TeleRadiologyiPad.zip Step 4: Check it out https://docs.google.com/document/pub? id=14P1H1pDbOBIhynUgGt5jQLkByRVveuxf6dmXTXIED_8 Step 5: http://www.clearcanvas. ca/dnn/Portals/0/ClearCanvasFiles/Documentation/DevelopersGuide/2_0_SP1/
  • 18. The concept from Infomedica Loading a big resources (images)
  • 19. The anatomy of UI screen (using jQueryMobile)