Cordova + Ionic + MobileFirst

CORDOVA + IONIC +MOBILEFIRST

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

First time in Australia!

WHAT I LEARNEDDon't mention Paul HoganDon't drink FostersOutback Steakhouse isn't

AGENDAApache Cordova (hybrid apps)Ionic (better hybrid apps)IBM MobileFirst (even better hybrid apps)

PART ONE - CORDOVA

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 DEMO

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!

WHAT IS IT?

"The beautiful, open source front-end SDK fordeveloping hybrid mobile apps with HTML5."

ionicframework.com

WHAT'S IN IT?

ANOTHER UI FRAMEWORK!!!!

CLI

WTF

WHAT'S IN IT?UI componentsUX componentsSPA Framework (AngularJS)Built for Hybrid Mobile development (Cordova)

CORDOVA

CORDOVA + IONIC

OPEN SOURCE AND FREE

WHAT YOU NEED TOKNOW

PhoneGap/CordovaAngularJS

INSTALLATION

Zip downloadnpm installTO BE CLEAR: It doesn't do Cordova/SDKs

sudo npm install -g ionic

THE CLI

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

DEMO

IONIC TESTING/EMULATING/ETCionic serveionic emulate/run

DEMO

CSS COMPONENTS

JAVASCRIPT

WHAT WE MEAN BY JAVASCRIPT...UI stuffUX stuffDirectives too!

<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>

DEMO

ROUTINGVarious directivesion-nav-view, ion-view, ion-nav-bar

DEMO

IONIC CREATORcreator.ionic.io

IONICONS.COM

ICON/SPLASHSCREEN GENERATION

IONIC VIEW (VIEW.IONIC.IO)

PLAYGROUNDhttp://play.ionic.io/

IONIC MARKETmarket.ionic.io

PUSH SERVICE (ALPHA)

ANALYTIC SERVICE (ALPHA)Track user interactionHeat maps

DEPLOY SERVICE (ALPHA)Deploy updates w/o app store updatesSupports channels (for things like beta testers)

BUILD SERVICE (NOT RELEASED YET)Similar to PhoneGap Build but focused on Ionic apps.

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.

COOL EXAMPLES:SHOWCASE.IONICFRAMEWORK.COM

REAL APPWarning - Sappy Story Coming

SUMMARY

CORDOVA GOOD

IONIC EPIC

CORDOVA + IONIC...

PART 3 - MOBILEFIRST

FYI - 7.1I'm using 7.1, which was VERY recently released.

MOBILEFIRST

MOBILEFIRSTSupports mobile appsMobile web, hybrid, nativeCLI to work with projectsServer

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

PARTSMobileFirst StudioCLIServerWeb console and analytics tool

EDITIONS/HOW TO USE ITIBM MobileFirst Platform Foundation Developer EditionIBM MobileFirst Platform FoundationA few other fancy versions we don't need to worry abouttoday

SUPPORTED OSWindowsLinuxMacAIX, Solaris

INSTALLATIONThis is where I'll pretend to install stuff...

Product Link: http://www.ibm.com/mobilefirst/us/en/

Product Link: http://www.ibm.com/cloud-computing/bluemix/

To be clear, everything I'm showing is free for you to play with.

WORKING WITH THE CLICreate a server (one time!)Start the serverCreate a hybrid MFP appWrite code and iterate

CREATING AND STARTING THE SERVERmfp create servername mfp start

DEMO

CREATING A HYBRID APPmfp cordova create

DEMO

WORKING WITH HYBRID APPSmfp cordova *

DEMO

BACK TO SERVERmfp push mfp console

DEMO

CLIENT-SIDE APIBasically - "extended" featuresLoggingGet WiFi pointsCall native functionalityMore...WL.* API

DEMO

ADAPTERSGlue between your mobile app and stuffServer-specificJava or JavaScript (reminder...)Setup via Studio or CLI

ADAPTERS - TYPESHTTPSQLCast Iron, Java, JMS, SAP JCo, SAP

CREATING ADAPTERSmfp adapter add //createmfp push //push and deploy changesmfp adapter call //testmfp adapter call adapter/procedure '["arg"]' //passing an arg

DEMO

MORE STUFF

APPLICATION MESSAGES

MOBILE BROWSERSIMULATOR