PhoneGap is an open source framework that allows developers to build cross-platform mobile apps using HTML, CSS, and JavaScript instead of platform-specific languages. It works by wrapping the HTML and JavaScript code in a thin native container on each mobile platform so the code can access native device features like the camera via plugins. Hybrid apps built with PhoneGap have advantages like reduced development costs through code reuse across platforms but also have disadvantages like potential performance issues and an inability to access all native features. The PhoneGap command-line interface and PhoneGap Build service make it easy to set up, build, and deploy PhoneGap apps to various app stores.

1. PhoneGap 101

2. PhoneGap
PhoneGap is an open source framework to build cross-platform hybrid mobile apps using
HTML5, JavaScript and CSS, avoiding each mobile platforms' native development language.

3. Native Mobile App
 An application written for installation in a mobile device.
 Usually application is targeted for a certain platform.
 Application that is coded in a specific programming language, such as Objective C for iOS and
Java for Android operating systems.

4. Native Mobile App
 Can take full advantage of all the device features–they can use the camera, the GPS, the
accelerometer, the compass, the list of contacts, and so on.
 They can also incorporate gestures (either standard operating-system gestures or new, app-
defined gestures).
 And native apps can use the OS notification system and can work offline.

5. Mobile Web App
 A Web site designed for the small screens of mobile phones.
 They’re accessed through the mobile device’s web browser (i.e. on the iPhone, this is Safari by
default)
 They don’t need to be downloaded and installed on the device.
 Can’t work offline.

6. Native vs. Mobile

7. Hybrid apps
 Hybrid apps are part native apps, part web apps.
 Like native apps, they can be installed, live in an app store and can take advantage of the many
device features available.
 Like web apps, they rely on HTML being rendered in a browser.(browser is embedded within the
app).
 HTML5 Mobile app that resides inside a thin native container, combining the best (and worst)
elements of native and HTML5 apps.

8. Hybrid apps
Hybrid apps are also popular because they allow cross-platform development: that is, the same
HTML, CSS, JavaScript code components can be reused on different mobile operating systems,
reducing the development costs significantly. Tools such as PhoneGap and Sencha-Touch allow
people to design and code across platforms, using the power of HTML.

10. Implementation of Hybrid apps
Local - You can package HTML and JavaScript code inside the mobile application binary, in a
manner similar to the structure of a native application. In this scenario you use REST APIs to
move data back and forth between the device and the cloud.
Server - Alternatively you can implement the full web application from the server (with optional
caching for better performance), simply using the container as a thin shell over the UIWebview.

11. PhoneGap
 Core of PhoneGap applications is they use HTML5 and CSS3 for their rendering, and
JavaScript for their logic.
 PhoneGap framework embeds HTML5 code inside a native WebView of the device, using
a Foreign Function Interface to access the native resources of the device.
 Applications execute within wrappers targeted to each platform, and rely on standards-
compliant API bindings to access each device's sensors, data, and network status.

12. Supported Features

13. Supported Features
 Up to Cordova 2.9.0 all these features were included in the PhoneGap project by default.
 But as From Cordova 3.0.0 all this features will be break into separate plug-ins and have to
manually add each plug-in using the PhoneGap Command-line Interface.

14. Creating PhoneGap Project
 The easiest way to set up an application is to run the PhoneGap command-line utility, also
known as the command-line interface(CLI).
 In another scenario, you can send your code to a PhoneGap Build server to be compiled
remotely for various platforms.

15. Creating PhoneGap Project
 Command: “create directory appID AppName”
◦ directory : directory to be generated for your project.
◦ appID : A reverse domain-style identifier
◦ Ex- com.example.hello
◦ AppName : application's display name/text
Ex- “create hello com.example.hello HelloWorld”

16. Basic Components of a PhoneGap Project
 www/
◦ config.xml (config file for PhoneGap)
◦ index.html (the main page for the application)
◦ spec.html (page for Jasmine unit testing)
◦ css/ (css files)
◦ img/ (images)
◦ js/ (JavaScript files)
◦ res/ (resources used by PhoneGap
◦ icon/ (OS-specific icon files)
◦ screen/ (OS-specific splash screen files)
◦ spec/ (libraries used by Jasmine)

17. Basic Components of a PhoneGap Project
 Libs/CordovaLib
◦ Native implementations of PhoneGap supported features.
 Cordova
◦ PhoneGap/Cordova files need to build, clean, run PhoneGap code.

18. Building a sample PhoneGap application
 First let’s create the UI using HTML5 and CSS.
 Now let’s add JavaScript code to get the functionality.
 Modify the platform-specific configuration settings
◦ (in app/res/xml/config.xml)
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>
(in app/AndroidManifest)
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

19. Building PhoneGap Apps for deploy
1. Use platform supported IDEs to build apps.
Ex-Eclipse for Android, Xcode for iOS.
2. Use PhoneGap Build service.

20. PhoneGap Build Service
 A cloud-based build facility to compile applications for the many mobile platforms.
 Takes the pain out of setting up development and emulation environments for the various
platforms.
 As an application developer, you will create the application logic through HTML, CSS, and
JavaScript. Then create a single zip file with all of your application content.
 An app-store ready app for Apple iOS*, Google Android, Palm*, Symbian*, BlackBerry*, and
more.

21. PhoneGap Build Service

22. Pros of PhoneGap
 Just need HTML5/CSS/Javascript skills to build app to iOS, Android, Windows phone,
Blackberry, etc.
 Code Is Reusable: Single code base for all platforms.
 Distribute apps via the App Store or Android Market.
 Use of external libraries like jQuery, jQM, Sencha.
 Reduced Development Costs.

23. Cons of PhoneGap
 A certain latency in the performance of the experience
 Lack of pre-built native UI widgets, transitions, standard controls- Therefore development time
can take longer, styling the app to look native.
 Some of the device or OS features are not accessible via PhoneGap plug-ins.
 No Background Processing- because JavaScript is not multi-threaded.
 No remote debugging mechanism to debug JavaScript code runs on the device.

24. Cons of PhoneGap
 A PhoneGap app can occupy several times the memory size of a native app. this memory will
grow in time because developers don’t have direct control over objects in memory.
 You get lowest-common-denominator access to features. When a native feature is supported,
often you can only access it in one way: the portable framework's way.
 All mobile platforms are constantly changing and evolving. Therefore you have to adapt your
PhoneGap app time to time.

25. When to use PhoneGap
 Deploy to many platforms.
 App have no Complex Business Logic.
 Access basic native functionality.
 Doesn’t need advanced Graphics.
 For a team of Web Developers.

26. Useful Technologies and Frameworks
 jQuery
 jQuery Mobile / Sencha Touch
 iScroll
 Swipe.js
 SQLite
 Purl.js

27. Questions?