Hybrid App Development using PhoneGap/Cordova Contents Overview of Mobility Enterprise Mobility & Industry challenges Mobile Web vs. Native App development Bridging the Native Gap & Intro PhoneGap PhoneGap features Creating “Hello World!” using PhoneGap PhoneGap Plugin development Resources

1. Hybrid App Development
using
PhoneGap/Cordova

2. Agenda
 Overview of Mobility
 Enterprise Mobility & Industry challenges
 Mobile Web vs. Native App development
 Bridging the Native Gap & Intro PhoneGap
 PhoneGap features
 Creating “Hello World!” using PhoneGap
 PhoneGap Plugin development
 Resources

3. Overview of Mobility and scopes
 Mobile phones become smart
 Multiple features and appealing services

4.  iPhone‟s biggest impact: making scene for data and app
 Text messaging is broaden to its audience beyond youth
 Advertising via mobile looks lot more appealing
 Easy access to Game‟s from different store attract heavy gamers
 Consumer oriented services like bill payment, payments status
checking, etc.
Social
Media
Consumer
Market
IT & Tech
Device
Manufacturer

5.  GeoLocation
 PIM Contacts
 Camera
 Barcode
 Date/Time Picker
 Native Menus
 Tab Bar
 Signature Capture
Social
Media
Consumer
Market
IT & Tech
Device
Manufacturer
 Bluetooth
 Calendar
 Push Alert
 Screen Rotation
 Native Maps
 Audio Playback /Ringtones
 NFC
 Navigation Bar

6. Why Mobile Apps?
Popularity of smart phones
Manifoldness of possibilities
App store opportunities
Unmatched user experience
1
2
3
4
Application visibility45

7. Industry Challenges
 Apps require a back-end server to access enterprise
 Development tools make a difference
 Developing the application for different platforms is cost effective
 Code base gets messy and difficult to maintain
 Time to market increases
Enterprise View
 Cross-platform apps
 Must consider security
 Access corporate data
 Apps must be managed

8. Native App
 Designed to run on device operating
system and machine firmware
 It typically need to be
adapted/adjusted for different device
Mobile Web App
 All or some part of the software
downloaded from web each time it
runs
 It is usually accessible form all
mobile platforms
Difference between Native Mobile app and Mobile web app

9. Advantages of Mobile Web Approach
 Immediacy
 Compatibility
 Upgradability
 Instantly
 Shareability
 Reach
 Lifecycle
 Time and Cost
 Support and Sustainability

10. HTML/JS/CSS
October 2011, PhoneGap was donated to the Apache Software
Foundation (ASF) under the name Apache Cordova.
Current PhoneGap 2.9.0

11. What is PhoneGap ?
 An open source development framework for building
cross platform mobile apps

12. Advantages
 One code base, multiple platforms
 Reuse existing web developer skills
 Shorter learning curve
 Faster development
 Mobile site and app with same code
 Reusable web code and
infrastructure
 Code portable to other
environments
 Based on open standards
 Active and growing community
 Open source with multiple large
stakeholders

13.  iPhone / iPhone 3G and Higher
 Blackberry OS 5.x and Newer
 Android
 Web OS
 Windows Phone 7
 Symbian
 Bada
Supported Platforms

14. xui
HTML5 & JavaScript Frameworks

15. API’s

16. Tools
Emulators
Ripple
Any platform emulator
(iOS Simulator, Android Virtual Devices, etc)
Debugging
Weinre (web inspector remote)
IDEs
Eclipse
Dreamweaver

17. Creating “Hello World” !
 Creating the Android Project and create a activity extending to
DroidGap
 Add phonegap.jar to libs folder <project>/libs
 Add „phonegap.jar‟ to java build path
 Add the config.xml file located inside xml folder required for
phone gap. Paste the entire xml folder inside res folder
 Add the required permissions to AndroidMainfeast.xml folder
 Creating the HTML (index.html) file and put in assets/www folder
 Create and start AVD. Run the Application

18. public class MainActivity extends DroidGap
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html")
//super.loadUrl(Config.getStartUrl());
}
}

19. Demo Time

20. Resources
Source: github.com/callback
Bugs: issues.apache.org/jira/browse/CB
Docs: docs.phonegap.com
Wiki: wiki.phonegap.com
Support: groups.google.com/group/phonegap
IRC: irc.freenode.net #phonegap
Apps: phonegap.com/apps

22. Nilanchala Panigrahy
javatechig@gmail.com
+91-
http://javatechig.com
Thank You!