A long presentation covering Apache Cordova, Ionic, and IBM MobileFirst

1. CORDOVA + IONIC +
MOBILEFIRST

2. WHO AM I?
Developer Advocate for IBM
Focused on MobileFirst and Bluemix
Web Standards, HTML5, JavaScript,
Mobile, ColdFusion
www.raymondcamden.com
@raymondcamden

5. First time in Australia!

9. WHAT I LEARNED
Don't mention Paul Hogan
Don't drink Fosters
Outback Steakhouse isn't

10. AGENDA
Apache Cordova (hybrid apps)
Ionic (better hybrid apps)
IBM MobileFirst (even better hybrid apps)

11. PART ONE - CORDOVA

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

13. $$$?
PhoneGap is free
No, really, free
Open Source

14. APACHE CORDOVA
cordova.apache.org
PhoneGap is Adobe's implementation
PhoneGap == Cordova

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

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

17. SUPPORTED PLATFORMS
iOS
Android
Windows Phone 8
BlackBerry 10
(docs.cordova.io)Super Long URL

18. OTHER PLATFORMS
Firefox OS
Amazon Fire OS
Ubuntu
Tizen
Windows 8

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

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

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

22. FEATURES
Plugin API for anything you can imagine...

23. UNOFFICIAL FEATURES
Use any of the 10 million JavaScript libraries
Use any of the 10 million APIs
Deploy to app store

24. NON-FEATURES
UI
UX
Native Killer

25. WHO IS USING CORDOVA?

26. REAL WORLD DEMO

27. HOW IS IT DONE?
Going from HTML to Binary
Making use of the "special" stuff
Thinking Differently

28. 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)

29. HOW IS IT DONE?
Command line init to create the project
Switch to your editor
Edit HTML, simulate, build (via CLI)

30. DEMO
I'll show creating a project and explain what the folders
represent.

31. ADDING PLATFORMS
cordova platforms add X (to add something)
cordova platforms (to report)

32. DEMO
I'm going to show adding iOS and Android as well as checking
what is there/installed.

33. BUILDING/EMULATING/TESTING
prepare
compile
build == prepare + compile
emulate
run

34. MY CYCLE
edit stuff
cordova emulate

35. DEMO

36. 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)

37. DEMO
I'm going to demo the camera API and totally screw it up.

38. PLUGINS
All core features use plugins
Additional features use plugins
Everything driven from CLI (list, add, and remove)

39. DEMO
Let's fix the camera demo.

40. DEMO
Let's show a few more: demos/contactpickerui,
demos/camera_vintagagejs, demos/mp3

41. REAL WORLD BUILDING
Desktop Browser
Mobile via Web
Ripple Emulator
Local SDK to Simulator/Device

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

43. MOBILE VIA WEB
Pro: Kinda Fast
Pro: Minimal setup
Pro: UI and UX testing
Con: Features missing
Con: Security restrictions
Con: Debugging sucks

44. RIPPLE EMULATOR
Pro: Fast
Pro: Similar UI
Pro: Free
Pro: Security restrictions gone
Con: Not 100% supported
Con: Still not on the device

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

46. WHAT RAY DOES (MOST OF THE TIME...)
Desktop
iOS Emulator
Genymotion for Android: http://www.genymotion.com
(Ray, show this)

47. TESTING

48. TESTING
On Desktop, just continue to use dev tools.

49. TESTING
On Mobile, just continue to use dev tools.

50. REMOTE DEBUG
Safari for iOS, Chrome for Android
"Full" dev tools for mobile web or Cordova

51. DEMO

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

53. DEMO

54. SO WHAT ABOUT THAT WHOLE "THINK
DIFFERENT" THING?

55. USER INTERFACE

56. SUGGESTIONS
Libraries (like Bootstrap)
Responsive design and testing in general

57. USER EXPERIENCE

58. SUGGESTIONS
Libraries (again)
Testing on devices
Handling offline with client-side storage

59. ARCHITECTURE

60. SUGGESTIONS
Single Page Architecture
AngularJS, jQuery Mobile, etc

61. ALL IN ONE SOLUTION

62. IONICFRAMEWORK.COM

63. PHONEGAP BUILD

64. 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!

65. $$$

66. DEMO

67. PHONEGAP DEVELOPER
APP

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

69. DEMO

70. WHAT TO GO NEXT?
Help - Google Group for PhoneGap
Developers - people.phonegap.com
cordova.apache.org
plugins.cordova.io

71. "APACHE CORDOVA IN ACTION"
manning.com/camden

72. THANK YOU!

74. WHAT IS IT?

75. "The beautiful, open source front-end SDK for
developing hybrid mobile apps with HTML5."
ionicframework.com

76. WHAT'S IN IT?

77. ANOTHER UI FRAMEWORK!!!!

79. CLI

80. WTF

81. WHAT'S IN IT?
UI components
UX components
SPA Framework (AngularJS)
Built for Hybrid Mobile development (Cordova)

82. CORDOVA

83. CORDOVA + IONIC

84. OPEN SOURCE AND FREE

85. WHAT YOU NEED TO
KNOW

86. PhoneGap/Cordova
AngularJS

88. INSTALLATION

89. Zip download
npm install
TO BE CLEAR: It doesn't do Cordova/SDKs
sudo npm install -g ionic

90. THE CLI

91. Creates projects
Handle plugins, platforms
Emulate/Run
Build/Package
Update library
Serve to Browser
Handle Icon/Splash creation
More

92. PROJECT CREATION
ionic start APPNAME
ionic start APPNAME TEMPLATE
Templates: (can be listed from CLI)
CodePen
Directory

93. DEMO

94. IONIC TESTING/EMULATING/ETC
ionic serve
ionic emulate/run

95. DEMO

96. CSS COMPONENTS

99. JAVASCRIPT

100. WHAT WE MEAN BY JAVASCRIPT...
UI stuff
UX stuff
Directives too!

101. <ion-header-baralign-title="left"class="bar-positive">
<h1class="title">Title!</h1>
</ion-header-bar>

102. <ion-slide-boxon-slide-changed="slideHasChanged($index)">
<ion-slide>
<divclass="boxblue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<divclass="boxyellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<divclass="boxpink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>

104. DEMO

105. ROUTING
Various directives
ion-nav-view, ion-view, ion-nav-bar

106. DEMO

108. IONIC CREATOR
creator.ionic.io

109. IONICONS.COM

110. ICON/SPLASHSCREEN GENERATION

111. IONIC VIEW (VIEW.IONIC.IO)

112. PLAYGROUND
http://play.ionic.io/

114. IONIC MARKET
market.ionic.io

115. PUSH SERVICE (ALPHA)

116. ANALYTIC SERVICE (ALPHA)
Track user interaction
Heat maps

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

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

119. MORE...
Better Windows Phone support
Better support for native scrolling
Visual Studio template support

120. LEARNING MORE
learn.ionicframework.com
http://codepen.io/ionic/
"Ionic in Action" - http://www.manning.com/wilken/
"Cats with Cordova" - http://www.manning.com/camden/
Title not final.

121. COOL EXAMPLES:
SHOWCASE.IONICFRAMEWORK.COM

122. REAL APP
Warning - Sappy Story Coming

123. SUMMARY

124. CORDOVA GOOD

125. IONIC EPIC

126. CORDOVA + IONIC...

128. PART 3 - MOBILEFIRST

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

133. MOBILEFIRST

134. MOBILEFIRST
Supports mobile apps
Mobile web, hybrid, native
CLI to work with projects
Server

137. FEATURES
Service Proxies
Push notifications
Version management
Security
Analytics
Testing (IBM MobileFirst Platform Test Workbench)
App Store (Enterprise-y)

138. MORE FEATURES
Client-side utilities
Some examples:
Get available wifi points
Geography stuff (distance to...)
Talking to a native class
Logging framework

139. PARTS
MobileFirst Studio
CLI
Server
Web console and analytics tool

140. EDITIONS/HOW TO USE IT
IBM MobileFirst Platform Foundation Developer Edition
IBM MobileFirst Platform Foundation
A few other fancy versions we don't need to worry about
today

141. SUPPORTED OS
Windows
Linux
Mac
AIX, Solaris

142. INSTALLATION
This is where I'll pretend to install stuff...

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

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

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

146. WORKING WITH THE CLI
Create a server (one time!)
Start the server
Create a hybrid MFP app
Write code and iterate

147. CREATING AND STARTING THE SERVER
mfpcreateservername
mfpstart

148. DEMO

149. CREATING A HYBRID APP
mfpcordovacreate

150. DEMO

151. WORKING WITH HYBRID APPS
mfpcordova*

152. DEMO

153. BACK TO SERVER
mfppush
mfpconsole

154. DEMO

155. CLIENT-SIDE API
Basically - "extended" features
Logging
Get WiFi points
Call native functionality
More...
WL.* API

156. DEMO

157. ADAPTERS
Glue between your mobile app and stuff
Server-specific
Java or JavaScript (reminder...)
Setup via Studio or CLI

158. ADAPTERS - TYPES
HTTP
SQL
Cast Iron, Java, JMS, SAP JCo, SAP

159. CREATING ADAPTERS
mfpadapteradd//create
mfppush//pushanddeploychanges
mfpadaptercall//test
mfpadaptercalladapter/procedure'["arg"]'//passinganarg

160. DEMO

161. MORE STUFF

162. APPLICATION MESSAGES

163. MOBILE BROWSER
SIMULATOR