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.

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

17. NON-FEATURES
UI
UX
Native Killer

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

50. GAPDEBUG
https://www.genuitec.com/products/gapdebug/

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

60. IONICFRAMEWORK.COM

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

65. PHONEGAP DEVELOPER
APP

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!