PhoneGap allows developers to build mobile apps using standard web technologies like HTML, CSS, and JavaScript. It works by packaging web apps so they can be deployed and run as native mobile applications on different platforms. The document discusses how to build an Android app using PhoneGap, including setting up the project structure, adding the PhoneGap library, implementing a basic "Hello World" app, and extending functionality through plugins. It also covers debugging PhoneGap apps and some limitations compared to native development.

1. Building Android Using
PhoneGap
By – Mr.Prajyot Mainkar (@prajyotm)

2. SO WHAT’s IN PLATE
KEY TOPICS
Topics Time Duration
Introduction 15 mins
About PhoneGap and Libs 30 mins
PhoneGap Demo 30 mins

3. About Me
C.E.O & Founder
SPM Softwares & Designers
Project Management
Professional Mentor,
Google Developer Group
Head Maven,
Head, Startup Saturday Goa Developer Advocate, Goa Android User Group
Androcid.com

4. About Me

5. TYPES OF APPS
CHOOSE WHICH SUITS
NATIVE APPLICATION MOBILE WEB
App Designed Using Local Resources Integrating app functionality
APPLICATION with web
and is mobile os centric development techniques
CROSS PLATFORM DEV TOOLS NATIVE & WEB APPLICATION
Using the respective model to create cross Writing minimal native UI and loading web
native apps that works on all intended services for data transmission over server
targets

6. Native Apps Are PRESENT
But Hybrid Apps are The Future
Native App Web App Hybrid App
Cross Platform
Linkable
Discoverable
Device API

7. What is PhoneGap?

8. •An Open Source Platform to
create native apps using web
technologies
•A JavaScript library/wrapper
•A Native Library for every
platform ( Multi Platform
Support)
•Compilation helper/builder

9. API’s In PhoneGap

11. Case Study Apps - PhoneGap

12. WHAT CAN YOU DO WITH PHONEGAP?
Moby is designed by GPS and
location-based services applications
expert Contigo. It’s a private location-
sharing app for the people who matter
most to you. The mobile app, built
using the PhoneGap framework,
answers the question, "Where are
you?" by sharing users' coordinates
with family and friends. Unlike similar
services, Moby only shares your
location with the people you choose,
for the length of time you want. Moby
also acts as a personal safety app
allowing users to request help from
family and friends at the touch of a
button.

13. WHAT CAN YOU DO WITH PHONEGAP?
HealthTap is the best way to quickly find,
trusted, reputable doctor answers to
health questions anytime, anywhere for
free!
✓ Get fast, free, trustworthy health
answers on any symptom, condition,
medication or health concern from over
14,000 of the best U.S. doctors
✓ Connect with doctors by starting
private conversations in a safe, HIPAA-
secure environment

14. Titanium V/s PhoneGap

15. •JavaScript API that provides access to Native Functions
•Supports HTML5/CSS3
•Supports Web Standards & Re-use Across Enterprise Apps
•Supports DOM based JavaScript Libraries/Frameworks
•Supports the most platforms
•JavaScript API that provides access to Native Functions
•Compiles to Native Code
•Could provide better performance.

16. A Simple Hybrid Application
•Take advantage of the strengths of PhoneGap.
•Support multiple platforms.
•Works Together.
•Easy Compilation.
•Smart Share among your network.

17. And yes!
There would be
codes

18. Getting Started with Android

19. Step 1 : Create a New Project

20. Step 2 : PhoneGap Processing
In the root directory of your project, create two new directories:
1./libs
2.assets/www
•Copy cordova-2.0.0.js from your Cordova download earlier to assets/www
•Copy cordova-2.0.0.jar from your Cordova download earlier to /libs
•Copy xml folder from your Cordova download earlier to /res
•Verify that cordova-2.0.0.jar is listed in the Build Path for your project.
•Right click on the /libs folder and go to Build Paths/ > Configure Build Path.
•Then, in the Libraries tab, add cordova-2.0.0.jar to the project.
•Refresh the project

21. Step 2 : PhoneGap Processing

22. Step 3 : Class File Processing
Edit your project's main Java file found in the src folder in Eclipse:
1.Add import org.apache.cordova.*;
2.Change the class's extend from Activity to DroidGap
3.Replace the setContentView() line with super.loadUrl("file:///android_asset/www/index.html");

23. Step 4: Android Manifest
Use the following permissions between the <uses-sdk.../>
and <application.../> tags.
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"

24. Step 5 : Hello World
Create and open a new file named index.html in the
assets/www directory. Paste the following code:
Deploy and Run the Code

25. Extending Power of PhoneGap

26. Plugins in PhoneGap
Adobe® PhoneGap™ Build
supports a curated selection
of PhoneGap Plugins, to
extend the native
functionality exposed by the
PhoneGap native-app
container.
https://github.com/phonegap/phonegap-plugins

27. What Tools Are Available?

29. What Libraries Are Available ?

31. Debugging PhoneGap

32. http:// Debug.phonegap.com
What about Device API'? using WebView, Line-by-Line
Debugging could be pain
Weinre lets us to debug and manipulate the DOM from our PCs

33. Challenges in PhoneGap

34. 1. How safe is it to use embedded
Webview?
2. HTMl5 and CSS3 support
3. Debugging and profiling
4. Performance and Memory Usage
5. Screen Sizes and Orientation
6. DPI's
7. User Interface - or just use the
Native Look
8. Performance and Optimization

35. What is NOT PhoneGap ?

36. 1. PhoneGap is NOT a UI Framework
2. PhoneGap Doesn't include a
browser and/or a rendering engine
3. PhoneGap Doesn't compile
4. Every Platform needs its own
compilation
5. HTML5/CSS3 Compatibility
Check – http://www.mobilehtml5.org

37. GET IN TOUCH
CONTACT US Address:
SPM Softwares & Designers
f facebook.com/prajyotmainkar
Zarina Towers,St.Inez,Panaji Goa
t twitter.com/prajyotm
Phone:
+91-9822987513
linkedin.com/in/prajyotm
Email:
prajyotm@msn.com