Building Hybrid Applications using PhoneGap

12,407 views

Published on

Building android applications using PhoneGap

Published in: Technology

Building Hybrid Applications using PhoneGap

  1. Building Android UsingPhoneGap By – Mr.Prajyot Mainkar (@prajyotm)
  2. SO WHAT’s IN PLATEKEY 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 APPSCHOOSE 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 PRESENTBut Hybrid Apps are The Future Native App Web App Hybrid AppCross PlatformLinkableDiscoverableDevice API
  7. What is PhoneGap?
  8. •An Open Source Platform tocreate native apps using webtechnologies•A JavaScript library/wrapper•A Native Library for everyplatform ( Multi PlatformSupport)•Compilation helper/builder
  9. API’s In PhoneGap
  10. Case Study Apps - PhoneGap
  11. 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.
  12. 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
  13. Titanium V/s PhoneGap
  14. •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.
  15. A Simple Hybrid Application •Take advantage of the strengths of PhoneGap. •Support multiple platforms. •Works Together. •Easy Compilation. •Smart Share among your network.
  16. And yes!There would becodes
  17. Getting Started with Android
  18. Step 1 : Create a New Project
  19. Step 2 : PhoneGap ProcessingIn the root directory of your project, create two new directories:1./libs2.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
  20. Step 2 : PhoneGap Processing
  21. Step 3 : Class File ProcessingEdit your projects main Java file found in the src folder in Eclipse:1.Add import org.apache.cordova.*;2.Change the classs extend from Activity to DroidGap3.Replace the setContentView() line with super.loadUrl("file:///android_asset/www/index.html");
  22. Step 4: Android ManifestUse the following permissions between the <uses-sdk.../>and <application.../> tags.android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
  23. Step 5 : Hello WorldCreate and open a new file named index.html in theassets/www directory. Paste the following code: Deploy and Run the Code
  24. Extending Power of PhoneGap
  25. Plugins in PhoneGapAdobe® PhoneGap™ Buildsupports a curated selectionof PhoneGap Plugins, toextend the nativefunctionality exposed by thePhoneGap native-appcontainer. https://github.com/phonegap/phonegap-plugins
  26. What Tools Are Available?
  27. What Libraries Are Available ?
  28. Debugging PhoneGap
  29. http:// Debug.phonegap.com What about Device API? using WebView, Line-by-Line Debugging could be painWeinre lets us to debug and manipulate the DOM from our PCs
  30. Challenges in PhoneGap
  31. 1. How safe is it to use embedded Webview?2. HTMl5 and CSS3 support3. Debugging and profiling4. Performance and Memory Usage5. Screen Sizes and Orientation6. DPIs7. User Interface - or just use the Native Look8. Performance and Optimization
  32. What is NOT PhoneGap ?
  33. 1. PhoneGap is NOT a UI Framework2. PhoneGap Doesnt include a browser and/or a rendering engine3. PhoneGap Doesnt compile4. Every Platform needs its own compilation5. HTML5/CSS3 CompatibilityCheck – http://www.mobilehtml5.org
  34. GET IN TOUCHCONTACT US Address: SPM Softwares & Designersf facebook.com/prajyotmainkar Zarina Towers,St.Inez,Panaji Goat twitter.com/prajyotm Phone: +91-9822987513 linkedin.com/in/prajyotm Email: prajyotm@msn.com

×