introduction to cordova

INTRODUCTION TOCORDOVA

MAKING NATIVE-ONLY DEVS JEALOUS SINCE 2009

WHO AM I?Developer Advocate for IBMFocused on MobileFirst and BluemixWeb Standards, HTML5, JavaScript,Mobile, ColdFusionwww.raymondcamden.com@raymondcamden

GENESIS (OF PHONEGAP)Built at an iPhoneDevCamp in 2009Started by NitobiAdobe bought Nitobi (2011)Currently at 5.1.1

$$$?PhoneGap is freeNo, really, freeOpen Source

APACHE CORDOVAcordova.apache.orgPhoneGap is Adobe's implementationPhoneGap == Cordova

LET'S GET TECHYCreates "Hybrid" applicationsNative wrapper around a web viewHTML (CSS,JS) handles layoutCordova "bridges the gap" to native capabilities

ABOUT THAT GAP...Cordova tries to follow standardsWhen it doesn't need to do anything, it doesn'tIn the perfect world, Cordova won't exist

SUPPORTED PLATFORMSiOSAndroidWindows Phone 8BlackBerry 10

(docs.cordova.io)Super Long URL

OTHER PLATFORMSFirefox OSAmazon Fire OSUbuntuTizenWindows 8

FEATURES (STUFF YOU CAN DO WITHJAVASCRIPT!)

Accelerometer - when the device movesCamera - pictures of your catCapture - audio, video, stills of your catCompass - for when you're lost in the woodsConnection - type of connection

FEATURESContacts - find and create new friendsDevice - device and OS version metadataEvents - various app/hardware related eventsFile - native file system access (and upload/download)Geolocation - for when you're lost in the woods

FEATURESGlobalization - date/number/currency formattingMedia - related to audio playback (supports record as well)Notification - visual, audible, and tactile notificationsSplashscreen - for your splash screen needs

FEATURESPlugin API for anything you can imagine...

UNOFFICIAL FEATURESUse any of the 10 million JavaScript librariesUse any of the 10 million APIsDeploy to app store

NON-FEATURESUIUXNative Killer

WHO IS USING CORDOVA?

REAL WORLD DEMORay, click to the right if the demo worked.

HOW IS IT DONE?Going from HTML to BinaryMaking use of the "special" stuffThinking Differently

HOW IS IT DONE?Install NodeInstall cordova via npm: sudo npm install -g cordova (Windowsfolks open your command prompt as an Admin)Get SDK(s) (technically optional)

HOW IS IT DONE?Command line init to create the projectSwitch to your editorEdit HTML, simulate, build (via CLI)

DEMOI'll show creating a project and explain what the folders

represent.

ADDING PLATFORMScordova platforms add X (to add something)cordova platforms (to report)

DEMOI'm going to show adding iOS and Android as well as checking

what is there/installed.

BUILDING/EMULATING/TESTINGpreparecompilebuild == prepare + compileemulaterun

MY CYCLEedit stuffcordova emulate

DEMO

HOW DO WE DO THE AWESOME?Include cordova.js (this will NOT exist in www)Wait for "deviceready" eventplugins for each feature (so to do X, you add the plugin X)config.xml (handles settings)

DEMOI'm going to demo the camera API and totally screw it up.

PLUGINSAll core features use pluginsAdditional features use pluginsEverything driven from CLI (list, add, and remove)

DEMOLet's fix the camera demo.

DEMOLet's show a few more: demos/contactpickerui,

demos/camera_vintagagejs, demos/mp3

REAL WORLD BUILDINGDesktop BrowserMobile via WebRipple EmulatorLocal SDK to Simulator/Device

DESKTOP BROWSERPro: Super FastPro: No setupPro: Debugging Rocks

Con: UI isn't rightCon: UX isn't rightCon: Features missingCon: Security restrictions

MOBILE VIA WEBPro: Kinda FastPro: Minimal setupPro: UI and UX testing

Con: Features missingCon: Security restrictionsCon: Debugging sucks

RIPPLE EMULATORPro: FastPro: Similar UIPro: FreePro: Security restrictions gone

Con: Not 100% supportedCon: Still not on the device

LOCAL SDK TO SIMULATOR/DEVICEPro: The Real Deal

Con: Slow(ish)Con: Not FreeCon: Debugging *really* sucks

TO BE CLEAR: YOU MUST ALWAYS TEST ON A REAL DEVICE

WHAT RAY DOES (MOST OF THE TIME...)DesktopiOS EmulatorGenymotion for Android: http://www.genymotion.com(Ray, show this)

TESTING

TESTINGOn Desktop, just continue to use dev tools.

TESTINGOn Mobile, just continue to use dev tools.

REMOTE DEBUGSafari for iOS, Chrome for Android"Full" dev tools for mobile web or Cordova

DEMO

GAPDEBUGhttps://www.genuitec.com/products/gapdebug/

DEMO

SO WHAT ABOUT THAT WHOLE "THINKDIFFERENT" THING?

USER INTERFACE

SUGGESTIONSLibraries (like Bootstrap)Responsive design and testing in general

USER EXPERIENCE

SUGGESTIONSLibraries (again)Testing on devicesHandling offline with client-side storage

ARCHITECTURE

SUGGESTIONSSingle Page ArchitectureAngularJS, jQuery Mobile, etc

ALL IN ONE SOLUTION

IONICFRAMEWORK.COM

PHONEGAP BUILD

THE 411Web based platform to do buildsSupports iOS, Android, Windows Phone, Blackberry, webOS,SymbianHas an API tooNO SDKS NO COMPILING NO MESS!

$$$

DEMO

PHONEGAP DEVELOPERAPP

Connects your desktop to your physical device (ios, android,windows phone)

DEMO

WHAT TO GO NEXT?Help - Google Group for PhoneGapDevelopers - people.phonegap.comcordova.apache.orgplugins.cordova.io

"APACHE CORDOVA IN ACTION"

manning.com/camden

THANK YOU!