Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hybrid App Development using PhoneGap/Cordova

1,203 views

Published on

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

Published in: Education, Technology
  • Be the first to comment

Hybrid App Development using PhoneGap/Cordova

  1. 1. Hybrid App Development using PhoneGap/Cordova
  2. 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. 3. Overview of Mobility and scopes  Mobile phones become smart  Multiple features and appealing services
  4. 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. 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. 6. Why Mobile Apps? Popularity of smart phones Manifoldness of possibilities App store opportunities Unmatched user experience 1 2 3 4 Application visibility45
  7. 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. 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. 9. Advantages of Mobile Web Approach  Immediacy  Compatibility  Upgradability  Instantly  Shareability  Reach  Lifecycle  Time and Cost  Support and Sustainability
  10. 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. 11. What is PhoneGap ?  An open source development framework for building cross platform mobile apps
  12. 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. 13.  iPhone / iPhone 3G and Higher  Blackberry OS 5.x and Newer  Android  Web OS  Windows Phone 7  Symbian  Bada Supported Platforms
  14. 14. xui HTML5 & JavaScript Frameworks
  15. 15. API’s
  16. 16. Tools Emulators Ripple Any platform emulator (iOS Simulator, Android Virtual Devices, etc) Debugging Weinre (web inspector remote) IDEs Eclipse Dreamweaver
  17. 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. 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. 19. Demo Time
  20. 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
  21. 21. Nilanchala Panigrahy javatechig@gmail.com +91- http://javatechig.com Thank You!

×