Building Cordova Plugins
for iOS
Jay Garcia
1Wednesday, September 25, 13
Agenda
• Why is hybrid so important?
• Look at the anatomy of a Cordova Plugin
• Explore some examples
2Wednesday, Septemb...
BYOD
image: http://emergingtech.tbr.edu/sites/default/files/styles/flexslider_full/public/BYOD_0.jpg?itok=W5xrH3rr
3Wednesda...
“The main benefit of these hybrid apps appears
to be the need for companies to support as
many operating systems as possibl...
The future is Hybrid
“While hybrid apps will be the majority of
enterprise mobile apps, web technologies like
HTML5 will m...
Anatomy of a Hybrid app
• Deployed via a compiled binary
• Uses HTML5 for a portion of the UI
• Can integrate with native ...
Anatomy of a Cordova
Hybrid app
HTML 5
app
Custom OS
features
OS
Packager
Optional
7Wednesday, September 25, 13
Supporting Multiple
Platforms with Cordova
Custom OS
features
OS Packager
iOS
Custom OS
features
OS Packager
WP8
Custom OS...
An example plugin
9Wednesday, September 25, 13
An example plugin
Random
Number
9Wednesday, September 25, 13
An example plugin
Random
Number
Random
Number
Plugin
creates this file
9Wednesday, September 25, 13
Demo
Random
Number
10Wednesday, September 25, 13
11Wednesday, September 25, 13
The Cordova Plugin dev
process
12Wednesday, September 25, 13
Configure
Plugin
#1
The Cordova Plugin dev
process
12Wednesday, September 25, 13
Write ObjC
Classes
#2
Configure
Plugin
#1
The Cordova Plugin dev
process
12Wednesday, September 25, 13
Write ObjC
Classes
#2
Configure
Plugin
#1
The Cordova Plugin dev
process
Write teh
codez!
#3
12Wednesday, September 25, 13
Step #1:
Configure Cordova to
use the plugin
13Wednesday, September 25, 13
Edit config.xml
14Wednesday, September 25, 13
Edit config.xml
14Wednesday, September 25, 13
Edit config.xml
14Wednesday, September 25, 13
Step #2:
Create your Cordova
Classes
15Wednesday, September 25, 13
Create ObjC files
16Wednesday, September 25, 13
Create ObjC files
16Wednesday, September 25, 13
Create ObjC files
17Wednesday, September 25, 13
Create ObjC files
17Wednesday, September 25, 13
Create ObjC files
17Wednesday, September 25, 13
Create ObjC files
17Wednesday, September 25, 13
Step #3:
Write the code!
18Wednesday, September 25, 13
JavaScript to ObjC Bridge
{ JavaScript }
19Wednesday, September 25, 13
Executing Cordova plugin methods
(The Pattern)
20Wednesday, September 25, 13
Executing Cordova plugin methods
(The Pattern)
20Wednesday, September 25, 13
Executing Cordova plugin methods
(The Pattern)
20Wednesday, September 25, 13
Executing Cordova plugin methods
(The Pattern)
20Wednesday, September 25, 13
Executing Cordova plugin methods
(The Pattern)
20Wednesday, September 25, 13
Executing Cordova plugin methods
(The Pattern)
20Wednesday, September 25, 13
Initiating the “set” workflow
21Wednesday, September 25, 13
Initiating the “set” workflow
21Wednesday, September 25, 13
Initiating the “set” workflow
21Wednesday, September 25, 13
Initiating the “set” workflow
21Wednesday, September 25, 13
Initiating the “set” workflow
21Wednesday, September 25, 13
Initiating the “set” workflow
21Wednesday, September 25, 13
Initiating the “set” workflow
21Wednesday, September 25, 13
Initiating the “set” workflow
21Wednesday, September 25, 13
The “set” workflow
22Wednesday, September 25, 13
The “set” workflow
22Wednesday, September 25, 13
The “set” workflow
22Wednesday, September 25, 13
The “set” workflow
23Wednesday, September 25, 13
The “set” workflow
23Wednesday, September 25, 13
The “set” workflow
23Wednesday, September 25, 13
The “set” workflow
23Wednesday, September 25, 13
The “set” workflow
24Wednesday, September 25, 13
The “set” workflow
24Wednesday, September 25, 13
The “set” workflow
24Wednesday, September 25, 13
The “set” workflow
24Wednesday, September 25, 13
Initiating the “get” workflow
25Wednesday, September 25, 13
Initiating the “get” workflow
25Wednesday, September 25, 13
Initiating the “get” workflow
25Wednesday, September 25, 13
Initiating the “get” workflow
25Wednesday, September 25, 13
Initiating the “get” workflow
25Wednesday, September 25, 13
Initiating the “get” workflow
25Wednesday, September 25, 13
The “get” workflow
26Wednesday, September 25, 13
The “get” workflow
26Wednesday, September 25, 13
The “get” workflow
27Wednesday, September 25, 13
The “get” workflow
27Wednesday, September 25, 13
The “get” workflow
27Wednesday, September 25, 13
The “get” workflow
27Wednesday, September 25, 13
The “get” workflow
27Wednesday, September 25, 13
The “get” workflow
28Wednesday, September 25, 13
The “get” workflow
28Wednesday, September 25, 13
The “get” workflow
28Wednesday, September 25, 13
The “get” workflow
28Wednesday, September 25, 13
The “get” workflow
28Wednesday, September 25, 13
The “get” workflow
28Wednesday, September 25, 13
It works!
29Wednesday, September 25, 13
It works!
29Wednesday, September 25, 13
So...What else can we
do?
30Wednesday, September 25, 13
Custom audio FFT data renderer
31Wednesday, September 25, 13
Custom audio FFT data renderer
31Wednesday, September 25, 13
Custom audio FFT data renderer
31Wednesday, September 25, 13
Custom audio FFT data renderer
31Wednesday, September 25, 13
Demo
32Wednesday, September 25, 13
• Amiga Mod music Player
• Touch 2.2.1 UI
• Driven by custom PhoneGap plugin
- C++ Library wrapped with ObjC
• Renders FFT...
The Stack
{ JavaScript }
34Wednesday, September 25, 13
The Stack
{ JavaScript }
34Wednesday, September 25, 13
Get raw Data (JavaScript)
35Wednesday, September 25, 13
Get raw Data (JavaScript)
Update data
on View
35Wednesday, September 25, 13
Get raw Data (JavaScript)
35Wednesday, September 25, 13
Get statistic Data (ObjC)
36Wednesday, September 25, 13
Get statistic Data (ObjC)
36Wednesday, September 25, 13
Get statistic Data (ObjC)
36Wednesday, September 25, 13
Get statistic Data (ObjC)
36Wednesday, September 25, 13
Get statistic Data (ObjC)
36Wednesday, September 25, 13
Get statistic Data (ObjC)
36Wednesday, September 25, 13
Get FFT Data (ObjC)
37Wednesday, September 25, 13
Get FFT Data (ObjC)
37Wednesday, September 25, 13
Get Spectrum FFT Data (ObjC)
38Wednesday, September 25, 13
Get Spectrum FFT Data (ObjC)
38Wednesday, September 25, 13
Get Spectrum FFT Data (ObjC)
38Wednesday, September 25, 13
Get Spectrum FFT Data (ObjC)
38Wednesday, September 25, 13
Get FFT Data (ObjC)
39Wednesday, September 25, 13
Get FFT Data (ObjC)
39Wednesday, September 25, 13
Get FFT Data (ObjC)
39Wednesday, September 25, 13
Render FFT Data
40Wednesday, September 25, 13
Render FFT Data
Clear canvas
40Wednesday, September 25, 13
Render FFT Data
40Wednesday, September 25, 13
Render FFT Data
Update
canvas
40Wednesday, September 25, 13
Render FFT Data
40Wednesday, September 25, 13
It works!
41Wednesday, September 25, 13
Wrapping up
• BYOD pushing hybrid apps
• Hybrid is AWESOME
• Extends the capabilities of your web apps
42Wednesday, Septem...
Resources
• Objective C
• http://cocoadevcentral.com/d/learn_objectivec/
• http://mobile.tutsplus.com/tutorials/iphone/lea...
Questions?
Jay Garcia
• @ModusCreate || @ModusJesus
• moduscreate.com
• https://github.com/ModusCreateOrg/custom-cordova-p...
Upcoming SlideShare
Loading in …5
×

Building Cordova plugins for iOS

2,821 views

Published on

Published in: Technology, News & Politics

Building Cordova plugins for iOS

  1. 1. Building Cordova Plugins for iOS Jay Garcia 1Wednesday, September 25, 13
  2. 2. Agenda • Why is hybrid so important? • Look at the anatomy of a Cordova Plugin • Explore some examples 2Wednesday, September 25, 13
  3. 3. BYOD image: http://emergingtech.tbr.edu/sites/default/files/styles/flexslider_full/public/BYOD_0.jpg?itok=W5xrH3rr 3Wednesday, September 25, 13
  4. 4. “The main benefit of these hybrid apps appears to be the need for companies to support as many operating systems as possible” http://tabtimes.com/news/ittech-stats-research/2013/02/05/extreme-pressure- pushing-enterprise-deploy-hybrid-mobile-apps The BYOD Reality 4Wednesday, September 25, 13
  5. 5. The future is Hybrid “While hybrid apps will be the majority of enterprise mobile apps, web technologies like HTML5 will make up the most commonly used languages for building mobile applications by 2015” -David Mitchell Smith, VP & Gartner Fellow. 5Wednesday, September 25, 13
  6. 6. Anatomy of a Hybrid app • Deployed via a compiled binary • Uses HTML5 for a portion of the UI • Can integrate with native UI controls • Features typically extend beyond what HTML5 can do natively 6Wednesday, September 25, 13
  7. 7. Anatomy of a Cordova Hybrid app HTML 5 app Custom OS features OS Packager Optional 7Wednesday, September 25, 13
  8. 8. Supporting Multiple Platforms with Cordova Custom OS features OS Packager iOS Custom OS features OS Packager WP8 Custom OS features OS Packager Android Custom OS features OS Packager BBOS HTML 5 app 8Wednesday, September 25, 13
  9. 9. An example plugin 9Wednesday, September 25, 13
  10. 10. An example plugin Random Number 9Wednesday, September 25, 13
  11. 11. An example plugin Random Number Random Number Plugin creates this file 9Wednesday, September 25, 13
  12. 12. Demo Random Number 10Wednesday, September 25, 13
  13. 13. 11Wednesday, September 25, 13
  14. 14. The Cordova Plugin dev process 12Wednesday, September 25, 13
  15. 15. Configure Plugin #1 The Cordova Plugin dev process 12Wednesday, September 25, 13
  16. 16. Write ObjC Classes #2 Configure Plugin #1 The Cordova Plugin dev process 12Wednesday, September 25, 13
  17. 17. Write ObjC Classes #2 Configure Plugin #1 The Cordova Plugin dev process Write teh codez! #3 12Wednesday, September 25, 13
  18. 18. Step #1: Configure Cordova to use the plugin 13Wednesday, September 25, 13
  19. 19. Edit config.xml 14Wednesday, September 25, 13
  20. 20. Edit config.xml 14Wednesday, September 25, 13
  21. 21. Edit config.xml 14Wednesday, September 25, 13
  22. 22. Step #2: Create your Cordova Classes 15Wednesday, September 25, 13
  23. 23. Create ObjC files 16Wednesday, September 25, 13
  24. 24. Create ObjC files 16Wednesday, September 25, 13
  25. 25. Create ObjC files 17Wednesday, September 25, 13
  26. 26. Create ObjC files 17Wednesday, September 25, 13
  27. 27. Create ObjC files 17Wednesday, September 25, 13
  28. 28. Create ObjC files 17Wednesday, September 25, 13
  29. 29. Step #3: Write the code! 18Wednesday, September 25, 13
  30. 30. JavaScript to ObjC Bridge { JavaScript } 19Wednesday, September 25, 13
  31. 31. Executing Cordova plugin methods (The Pattern) 20Wednesday, September 25, 13
  32. 32. Executing Cordova plugin methods (The Pattern) 20Wednesday, September 25, 13
  33. 33. Executing Cordova plugin methods (The Pattern) 20Wednesday, September 25, 13
  34. 34. Executing Cordova plugin methods (The Pattern) 20Wednesday, September 25, 13
  35. 35. Executing Cordova plugin methods (The Pattern) 20Wednesday, September 25, 13
  36. 36. Executing Cordova plugin methods (The Pattern) 20Wednesday, September 25, 13
  37. 37. Initiating the “set” workflow 21Wednesday, September 25, 13
  38. 38. Initiating the “set” workflow 21Wednesday, September 25, 13
  39. 39. Initiating the “set” workflow 21Wednesday, September 25, 13
  40. 40. Initiating the “set” workflow 21Wednesday, September 25, 13
  41. 41. Initiating the “set” workflow 21Wednesday, September 25, 13
  42. 42. Initiating the “set” workflow 21Wednesday, September 25, 13
  43. 43. Initiating the “set” workflow 21Wednesday, September 25, 13
  44. 44. Initiating the “set” workflow 21Wednesday, September 25, 13
  45. 45. The “set” workflow 22Wednesday, September 25, 13
  46. 46. The “set” workflow 22Wednesday, September 25, 13
  47. 47. The “set” workflow 22Wednesday, September 25, 13
  48. 48. The “set” workflow 23Wednesday, September 25, 13
  49. 49. The “set” workflow 23Wednesday, September 25, 13
  50. 50. The “set” workflow 23Wednesday, September 25, 13
  51. 51. The “set” workflow 23Wednesday, September 25, 13
  52. 52. The “set” workflow 24Wednesday, September 25, 13
  53. 53. The “set” workflow 24Wednesday, September 25, 13
  54. 54. The “set” workflow 24Wednesday, September 25, 13
  55. 55. The “set” workflow 24Wednesday, September 25, 13
  56. 56. Initiating the “get” workflow 25Wednesday, September 25, 13
  57. 57. Initiating the “get” workflow 25Wednesday, September 25, 13
  58. 58. Initiating the “get” workflow 25Wednesday, September 25, 13
  59. 59. Initiating the “get” workflow 25Wednesday, September 25, 13
  60. 60. Initiating the “get” workflow 25Wednesday, September 25, 13
  61. 61. Initiating the “get” workflow 25Wednesday, September 25, 13
  62. 62. The “get” workflow 26Wednesday, September 25, 13
  63. 63. The “get” workflow 26Wednesday, September 25, 13
  64. 64. The “get” workflow 27Wednesday, September 25, 13
  65. 65. The “get” workflow 27Wednesday, September 25, 13
  66. 66. The “get” workflow 27Wednesday, September 25, 13
  67. 67. The “get” workflow 27Wednesday, September 25, 13
  68. 68. The “get” workflow 27Wednesday, September 25, 13
  69. 69. The “get” workflow 28Wednesday, September 25, 13
  70. 70. The “get” workflow 28Wednesday, September 25, 13
  71. 71. The “get” workflow 28Wednesday, September 25, 13
  72. 72. The “get” workflow 28Wednesday, September 25, 13
  73. 73. The “get” workflow 28Wednesday, September 25, 13
  74. 74. The “get” workflow 28Wednesday, September 25, 13
  75. 75. It works! 29Wednesday, September 25, 13
  76. 76. It works! 29Wednesday, September 25, 13
  77. 77. So...What else can we do? 30Wednesday, September 25, 13
  78. 78. Custom audio FFT data renderer 31Wednesday, September 25, 13
  79. 79. Custom audio FFT data renderer 31Wednesday, September 25, 13
  80. 80. Custom audio FFT data renderer 31Wednesday, September 25, 13
  81. 81. Custom audio FFT data renderer 31Wednesday, September 25, 13
  82. 82. Demo 32Wednesday, September 25, 13
  83. 83. • Amiga Mod music Player • Touch 2.2.1 UI • Driven by custom PhoneGap plugin - C++ Library wrapped with ObjC • Renders FFT audio data • Custom Canvas touch component - Three different modes • Really fast!! - 20ms return cycle App Details 33Wednesday, September 25, 13
  84. 84. The Stack { JavaScript } 34Wednesday, September 25, 13
  85. 85. The Stack { JavaScript } 34Wednesday, September 25, 13
  86. 86. Get raw Data (JavaScript) 35Wednesday, September 25, 13
  87. 87. Get raw Data (JavaScript) Update data on View 35Wednesday, September 25, 13
  88. 88. Get raw Data (JavaScript) 35Wednesday, September 25, 13
  89. 89. Get statistic Data (ObjC) 36Wednesday, September 25, 13
  90. 90. Get statistic Data (ObjC) 36Wednesday, September 25, 13
  91. 91. Get statistic Data (ObjC) 36Wednesday, September 25, 13
  92. 92. Get statistic Data (ObjC) 36Wednesday, September 25, 13
  93. 93. Get statistic Data (ObjC) 36Wednesday, September 25, 13
  94. 94. Get statistic Data (ObjC) 36Wednesday, September 25, 13
  95. 95. Get FFT Data (ObjC) 37Wednesday, September 25, 13
  96. 96. Get FFT Data (ObjC) 37Wednesday, September 25, 13
  97. 97. Get Spectrum FFT Data (ObjC) 38Wednesday, September 25, 13
  98. 98. Get Spectrum FFT Data (ObjC) 38Wednesday, September 25, 13
  99. 99. Get Spectrum FFT Data (ObjC) 38Wednesday, September 25, 13
  100. 100. Get Spectrum FFT Data (ObjC) 38Wednesday, September 25, 13
  101. 101. Get FFT Data (ObjC) 39Wednesday, September 25, 13
  102. 102. Get FFT Data (ObjC) 39Wednesday, September 25, 13
  103. 103. Get FFT Data (ObjC) 39Wednesday, September 25, 13
  104. 104. Render FFT Data 40Wednesday, September 25, 13
  105. 105. Render FFT Data Clear canvas 40Wednesday, September 25, 13
  106. 106. Render FFT Data 40Wednesday, September 25, 13
  107. 107. Render FFT Data Update canvas 40Wednesday, September 25, 13
  108. 108. Render FFT Data 40Wednesday, September 25, 13
  109. 109. It works! 41Wednesday, September 25, 13
  110. 110. Wrapping up • BYOD pushing hybrid apps • Hybrid is AWESOME • Extends the capabilities of your web apps 42Wednesday, September 25, 13
  111. 111. Resources • Objective C • http://cocoadevcentral.com/d/learn_objectivec/ • http://mobile.tutsplus.com/tutorials/iphone/learn- objective-c-day-1/ • Cordova: • http://bit.ly/cdv_plugin_dev_guide • http://bit.ly/cdv_plugin_spec 43Wednesday, September 25, 13
  112. 112. Questions? Jay Garcia • @ModusCreate || @ModusJesus • moduscreate.com • https://github.com/ModusCreateOrg/custom-cordova-plugin-blog • https://github.com/ModusCreateOrg/ModusModPlayer 44Wednesday, September 25, 13

×