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, September 25, 13

BYOD

image: http://emergingtech.tbr.edu/sites/default/files/styles/flexslider_full/public/BYOD_0.jpg?itok=W5xrH3rr

3Wednesday, September 25, 13

“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

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

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

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 features

OS Packager

Android

Custom OS features

OS Packager

BBOS

HTML 5 app

8Wednesday, September 25, 13

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 audio data • Custom Canvas touch component

- Three different modes• Really fast!!

- 20ms return cycle

App Details

33Wednesday, September 25, 13

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, September 25, 13

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

Questions?

Jay Garcia

• @ModusCreate || @ModusJesus

• moduscreate.com

• https://github.com/ModusCreateOrg/custom-cordova-plugin-blog

• https://github.com/ModusCreateOrg/ModusModPlayer

44Wednesday, September 25, 13