View
2.300
Download
1
Category
Preview:
Citation preview
WHO AM I?Developer Advocate for IBMFocused on MobileFirst and BluemixWeb Standards, HTML5, JavaScript,Mobile, ColdFusionwww.raymondcamden.com@raymondcamden
AGENDAApache Cordova (hybrid apps)Ionic (better hybrid apps)IBM MobileFirst (even better hybrid apps)
GENESIS (OF PHONEGAP)Built at an iPhoneDevCamp in 2009Started by NitobiAdobe bought Nitobi (2011)Currently at 5.1.1
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
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
UNOFFICIAL FEATURESUse any of the 10 million JavaScript librariesUse any of the 10 million APIsDeploy to app store
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)
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)
PLUGINSAll core features use pluginsAdditional features use pluginsEverything driven from CLI (list, add, and remove)
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)
THE 411Web based platform to do buildsSupports iOS, Android, Windows Phone, Blackberry, webOS,SymbianHas an API tooNO SDKS NO COMPILING NO MESS!
WHAT TO GO NEXT?Help - Google Group for PhoneGapDevelopers - people.phonegap.comcordova.apache.orgplugins.cordova.io
"The beautiful, open source front-end SDK fordeveloping hybrid mobile apps with HTML5."
ionicframework.com
WHAT'S IN IT?UI componentsUX componentsSPA Framework (AngularJS)Built for Hybrid Mobile development (Cordova)
Creates projectsHandle plugins, platformsEmulate/RunBuild/PackageUpdate libraryServe to BrowserHandle Icon/Splash creationMore
PROJECT CREATIONionic start APPNAMEionic start APPNAME TEMPLATETemplates: (can be listed from CLI)CodePenDirectory
<ion-header-bar align-title="left" class="bar-positive"><h1 class="title">Title!</h1></ion-header-bar>
<ion-slide-box on-slide-changed="slideHasChanged($index)"><ion-slide> <div class="box blue"><h1>BLUE</h1></div></ion-slide><ion-slide> <div class="box yellow"><h1>YELLOW</h1></div></ion-slide><ion-slide> <div class="box pink"><h1>PINK</h1></div></ion-slide></ion-slide-box>
DEPLOY SERVICE (ALPHA)Deploy updates w/o app store updatesSupports channels (for things like beta testers)
MORE...Better Windows Phone supportBetter support for native scrollingVisual Studio template support
LEARNING MORElearn.ionicframework.comhttp://codepen.io/ionic/"Ionic in Action" - http://www.manning.com/wilken/"Cats with Cordova" - http://www.manning.com/camden/
Title not final.
FEATURESService ProxiesPush notificationsVersion managementSecurityAnalyticsTesting (IBM MobileFirst Platform Test Workbench)App Store (Enterprise-y)
MORE FEATURESClient-side utilities
Some examples:Get available wifi pointsGeography stuff (distance to...)Talking to a native class
Logging framework
EDITIONS/HOW TO USE ITIBM MobileFirst Platform Foundation Developer EditionIBM MobileFirst Platform FoundationA few other fancy versions we don't need to worry abouttoday
Product Link: http://www.ibm.com/cloud-computing/bluemix/
WORKING WITH THE CLICreate a server (one time!)Start the serverCreate a hybrid MFP appWrite code and iterate
CLIENT-SIDE APIBasically - "extended" featuresLoggingGet WiFi pointsCall native functionalityMore...WL.* API
ADAPTERSGlue between your mobile app and stuffServer-specificJava or JavaScript (reminder...)Setup via Studio or CLI
CREATING ADAPTERSmfp adapter add //createmfp push //push and deploy changesmfp adapter call //testmfp adapter call adapter/procedure '["arg"]' //passing an arg
Recommended