Building Hybrid Applications using PhoneGap
34 likes16,537 views
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.
Building Hybrid Applications using PhoneGap
- 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
- 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
- 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
- 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 ?
- 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
- 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