Explore the process of creating an iOS cordova native plugin using Objective-C even if you have never touched native code. This quick guide is recommended for anyone interested in mobile hybrid app development, rapid prototyping using HTML5, CSS and JavaScript. Extend your app capabilities beyond web technology and utilize device sensors and API's to create a unique user mobile app experience. Enjoy!

1. Cordova
iOS Native Plugin
Development
MOBILE APP DEVELOPMENT FOR WEB DEVELOPERS.

2. JOSUE BUSTOS
Artist, Software Developer

3. @hozwe
npmjs.com/package/cordova-plugin-base64binary
https://www.behance.net/hozwe
https://www.linkedin.com/in/josuebustos
Follow me on…

4. Plugin development for iOS
 Xcode IDE
 iOS Device (recommended)
 iOS simulator
 Some familiarity with writing Objective-C code.
 Some experience implementing Cocoa Touch API’s.
 Cordova CLI must be installed.
 Cordova Plugman must be installed.
 A machine with Mac OSX installed.
Some Items you will need to get started for iOS native plugin development.

5. Configuring your plugin project
 plugin.xml
 The JavaScript interface
 Objective-C source code
 package.json
 Publish your plugin

6. Creating a plugin project
Open terminal window and type in the following text. You can copy paste the text here into
your terminal and modify it.
plugman create --name testPlugin --plugin_id cordova-
plugin-openwith --plugin_version 0.0.1 --path
/Users/myname/Desktop/firstplugin

7. Sample generated plugin project

8. plugin.xml starter
<?xml version="1.0" encoding="UTF-8"?> <plugin
xmlns="http://apache.org/cordova/ns/plugins/1.0" id="cordova-plugin-device"
version="0.2.3">
<name>Device</name>
<description>Your plugin description</description>
<license>Your license 2.0</license>
<keywords>Your, Plugin, Is, Unique</keywords>
<js-module src="www/testPlugin.js" name="device”>
<clobbers target=”Plugin" /></js-module>
</plugin>

9. iOS platform-specific
<platform name="ios">
<config-file target="config.xml" parent="/*”>
<feature name=”Echo">
<param name="ios-package" value=”Echo"/>
</feature>
</config-file>
<header-file src="src/ios/TestPlugin.h" />
<source-file src="src/ios/TestPlugin.m" />
</platform>

10. The JavaScript interface
// in your www/testPlugin.js plugin project
window.echo = function(str, callback) {
cordova.exec(callback, function(err) {
callback('Nothing to echo.'); },
"Echo",
"echo",
[str]
);
};
// in your www/index.js development project.
window.echo("echome", function(echoValue) {
alert(echoValue == "echome"); // should alert true.
});

11. Objective-C plugin class
/********* TestPlugin.h Cordova Plugin Header *******/
#import <Cordova/CDVPlugin.h>
@interface
Echo : CDVPlugin
- (void) echo:(CDVInvokedUrlCommand*)command;
@end
/********* TestPlugin.m Cordova Plugin Implementation *******/
#import ”TestPlugin.h" #import <Cordova/CDVPlugin.h>
@implementation Echo - (void)echo:(CDVInvokedUrlCommand*)command
{
CDVPluginResult* pluginResult = nil;
NSString* echo = [command.arguments objectAtIndex:0];
if (echo != nil && [echo length] > 0) {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
} else {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR]; }
[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}
@end

12. Create package.json
Copy paste the text below into your terminal and press enter. This will create a
package.json file into your root directory of your plugin project. Learn more about why this
file is needed on the cordova blog.
plugman createpackagejson /path/to/your/plugin

13. Sample package.json
{
name: "cordova-plugin-yourpluginname",
version: ”0.0.1 ",
description: ”Description of your plugin goes here",
cordova:
{
id: "cordova-plugin-yourpluginname",
platforms:
[“ios”]
},
repository:
{
type: "git",
url: "https://github.com/Joewsh/cordova-plugin-yourpluginname"
},
keywords:
["cordova”,”sample”,"ecosystem:cordova”,"cordova-ios”],
"author": {
"name": ”Your Name", "email": ”your@email.com", "url": "http://yourwebsite.com"
},
"license": "MIT",
"bugs": {
"url": “https://github.com/username/cordova-plugin-yourpluginname/isues"
},
"homepage": https://github.com/username/cordova-plugin-yourpluginname#readme
}

14. Final plugin project

15. Testing your plugin
To test your plugin type out or copy paste the text into your terminal and press return. You
can modify the command to specify your native environment.
NOTE: While testing, plugins must be installed in the platform specific directory. See next
slide for example.
plugman install --platform ios –project
/path/to/your/app/platforms/ios --plugin
/path/to/my/plugin

16. A test app
project with a
test plugin
installed.

17. Publish your plugin to NPM
// Enter the command below if you never published to the NPM
registry.
npm adduser
// Enter the command below after adding a user successfully
// you can also reuse this command to update your plugin
npm publish /path/to/your/plugin
// that’s it!!
After hours of debugging your native plugin and making sure it works in various scenarios.
You can now publish it to the NPM registry using the terminal command below.

18. Need help?
 Cordova Plugin Development Guide
 What else can Apache Cordova do?