phonegap framework for smartphone app developement
DESCRIPTION
PhoneGap Framework for smartphone app developementTRANSCRIPT
![Page 1: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/1.jpg)
Introducing PhoneGap
The hybrid framework for building smartphone application
Compiled by Trieu Nguyen @ [email protected]
![Page 2: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/2.jpg)
Problem
![Page 3: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/3.jpg)
Solution
![Page 4: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/4.jpg)
A Set of templates for building native iOS, Android, Blackberry, Symbian, and WebOS using HTML, CSS, and JavaScript.
![Page 5: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/5.jpg)
Pros & ConsHere 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.
![Page 6: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/6.jpg)
Native vs Hybrid
This diagram depicts the major differences between mulitple native and hybrid application development
![Page 7: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/7.jpg)
phonegap License
![Page 8: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/8.jpg)
How PhoneGap Works
![Page 9: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/9.jpg)
Cross-Platform Stack
Phonegap Core APIs Plugin APIs
The project implementationWe will implement this
![Page 10: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/10.jpg)
Core APIs - What we can reuse from Phonegap framework
![Page 11: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/11.jpg)
The general architecture
View: is the common for both platform iOS + Android.This solution is recommended for Multi-Platform Smartphone App Development
![Page 12: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/12.jpg)
How Phonegap use MVC pattern
![Page 13: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/13.jpg)
Introducing jQtouch http://www.jqtouch.com/
![Page 14: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/14.jpg)
Case study
![Page 15: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/15.jpg)
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 Images4) Themes for App: http://code.google.com/p/jqtouch/w/list5) The AppManager group: the logical folder for all sources that manage the data between local App and Web Services.
![Page 16: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/16.jpg)
More resourcesGet started: http://www.phonegap.com/start
My noteshttps://docs.google.com/document/pub?id=1pn6gd7k77pzM0AgJLLJYrgxVPRBfvYAKKvkNXU1nchc
From slidesharehttp://www.slideshare.net/search/slideshow?searchfrom=header&q=phonegap
Official Document:http://wiki.phonegap.comhttp://www.phonegap.com/docs
Phonegap source code:https://github.com/phonegap
![Page 17: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/17.jpg)
About the project "Tele-radiology"Step 1: http://www.phonegap.com/startStep 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_8Step 5: http://www.clearcanvas.ca/dnn/Portals/0/ClearCanvasFiles/Documentation/DevelopersGuide/2_0_SP1/
![Page 19: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/19.jpg)
![Page 20: PhoneGap Framework for smartphone app developement](https://reader034.vdocuments.net/reader034/viewer/2022051515/54c6723f4a79594a538b46c7/html5/thumbnails/20.jpg)
The anatomy of UI screen (using jQueryMobile)