Introduction to Cordova
0 likes421 views
Cordova allows developers to use web technologies like HTML, CSS, and JavaScript to build applications that can be deployed to mobile platforms. It bridges the gap between web views and native device capabilities by allowing access to features like the camera, contacts, and geolocation through JavaScript APIs. Cordova packages the web application code along with platform-specific native code into a binary that can be submitted to app stores. Developers can test their Cordova apps in desktop browsers, emulators like Ripple, or by building and deploying to connected devices.
Introduction to Cordova
- 1. INTRODUCTION TO CORDOVA MAKING NATIVE-ONLY DEVS JEALOUS SINCE 2009
- 2. WHO AM I? Developer Advocate for IBM Focused on MobileFirst and Bluemix Web Standards, HTML5, JavaScript, Mobile, ColdFusion www.raymondcamden.com @raymondcamden
- 5. GENESIS (OF PHONEGAP) Built at an iPhoneDevCamp in 2009 Started by Nitobi Adobe bought Nitobi (2011) Currently at 5.1.1
- 6. $$$? PhoneGap is free No, really, free Open Source
- 7. APACHE CORDOVA cordova.apache.org PhoneGap is Adobe's implementation PhoneGap == Cordova
- 8. LET'S GET TECHY Creates "Hybrid" applications Native wrapper around a web view HTML (CSS,JS) handles layout Cordova "bridges the gap" to native capabilities
- 9. ABOUT THAT GAP... Cordova tries to follow standards When it doesn't need to do anything, it doesn't In the perfect world, Cordova won't exist
- 10. SUPPORTED PLATFORMS iOS Android Windows Phone 8 BlackBerry 10 (docs.cordova.io)Super Long URL
- 11. OTHER PLATFORMS Firefox OS Amazon Fire OS Ubuntu Tizen Windows 8
- 12. FEATURES (STUFF YOU CAN DO WITH JAVASCRIPT!) Accelerometer - when the device moves Camera - pictures of your cat Capture - audio, video, stills of your cat Compass - for when you're lost in the woods Connection - type of connection
- 13. FEATURES Contacts - find and create new friends Device - device and OS version metadata Events - various app/hardware related events File - native file system access (and upload/download) Geolocation - for when you're lost in the woods
- 14. FEATURES Globalization - date/number/currency formatting Media - related to audio playback (supports record as well) Notification - visual, audible, and tactile notifications Splashscreen - for your splash screen needs
- 15. FEATURES Plugin API for anything you can imagine...
- 16. UNOFFICIAL FEATURES Use any of the 10 million JavaScript libraries Use any of the 10 million APIs Deploy to app store
- 18. WHO IS USING CORDOVA?
- 19. REAL WORLD DEMO Ray, click to the right if the demo worked.
- 25. HOW IS IT DONE? Going from HTML to Binary Making use of the "special" stuff Thinking Differently
- 26. HOW IS IT DONE? Install Node Install cordova via npm: sudo npm install -g cordova (Windows folks open your command prompt as an Admin) Get SDK(s) (technically optional)
- 27. HOW IS IT DONE? Command line init to create the project Switch to your editor Edit HTML, simulate, build (via CLI)
- 28. DEMO I'll show creating a project and explain what the folders represent.
- 29. ADDING PLATFORMS cordova platforms add X (to add something) cordova platforms (to report)
- 30. DEMO I'm going to show adding iOS and Android as well as checking what is there/installed.
- 31. BUILDING/EMULATING/TESTING prepare compile build == prepare + compile emulate run
- 32. MY CYCLE edit stuff cordova emulate
- 33. DEMO
- 34. HOW DO WE DO THE AWESOME? Include cordova.js (this will NOT exist in www) Wait for "deviceready" event plugins for each feature (so to do X, you add the plugin X) config.xml (handles settings)
- 35. DEMO I'm going to demo the camera API and totally screw it up.
- 36. PLUGINS All core features use plugins Additional features use plugins Everything driven from CLI (list, add, and remove)
- 37. DEMO Let's fix the camera demo.
- 38. DEMO Let's show a few more: demos/contactpickerui, demos/camera_vintagagejs, demos/mp3
- 39. REAL WORLD BUILDING Desktop Browser Mobile via Web Ripple Emulator Local SDK to Simulator/Device
- 40. DESKTOP BROWSER Pro: Super Fast Pro: No setup Pro: Debugging Rocks Con: UI isn't right Con: UX isn't right Con: Features missing Con: Security restrictions
- 41. MOBILE VIA WEB Pro: Kinda Fast Pro: Minimal setup Pro: UI and UX testing Con: Features missing Con: Security restrictions Con: Debugging sucks
- 42. RIPPLE EMULATOR Pro: Fast Pro: Similar UI Pro: Free Pro: Security restrictions gone Con: Not 100% supported Con: Still not on the device
- 43. LOCAL SDK TO SIMULATOR/DEVICE Pro: The Real Deal Con: Slow(ish) Con: Not Free Con: Debugging *really* sucks TO BE CLEAR: YOU MUST ALWAYS TEST ON A REAL DEVICE
- 44. WHAT RAY DOES (MOST OF THE TIME...) Desktop iOS Emulator Genymotion for Android: http://www.genymotion.com (Ray, show this)
- 45. TESTING
- 46. TESTING On Desktop, just continue to use dev tools.
- 47. TESTING On Mobile, just continue to use dev tools.
- 48. REMOTE DEBUG Safari for iOS, Chrome for Android "Full" dev tools for mobile web or Cordova
- 49. DEMO
- 51. DEMO
- 52. SO WHAT ABOUT THAT WHOLE "THINK DIFFERENT" THING?
- 53. USER INTERFACE
- 54. SUGGESTIONS Libraries (like Bootstrap) Responsive design and testing in general
- 55. USER EXPERIENCE
- 56. SUGGESTIONS Libraries (again) Testing on devices Handling offline with client-side storage
- 57. ARCHITECTURE
- 58. SUGGESTIONS Single Page Architecture AngularJS, jQuery Mobile, etc
- 59. ALL IN ONE SOLUTION
- 61. PHONEGAP BUILD
- 62. THE 411 Web based platform to do builds Supports iOS, Android, Windows Phone, Blackberry, webOS, Symbian Has an API too NO SDKS NO COMPILING NO MESS!
- 63. $$$
- 64. DEMO
- 66. Connects your desktop to your physical device (ios, android, windows phone)
- 67. DEMO
- 68. WHAT TO GO NEXT? Help - Google Group for PhoneGap Developers - people.phonegap.com cordova.apache.org plugins.cordova.io
- 69. "APACHE CORDOVA IN ACTION" manning.com/camden
- 70. THANK YOU!