Cordova iOS Native Plugin Development
Download as PPTX, PDF1 like528 views
This document provides a guide for web developers on developing native plugins for iOS using Cordova. It includes prerequisites, setting up a plugin project, creating necessary files like plugin.xml and package.json, and testing the plugin. Additionally, it outlines steps for publishing the plugin to the npm registry after debugging and ensuring its functionality.
![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.
});](https://image.slidesharecdn.com/cordovaplugindevelopmentv2-160318232626/85/Cordova-iOS-Native-Plugin-Development-10-320.jpg)
![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](https://image.slidesharecdn.com/cordovaplugindevelopmentv2-160318232626/85/Cordova-iOS-Native-Plugin-Development-11-320.jpg)
![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
}](https://image.slidesharecdn.com/cordovaplugindevelopmentv2-160318232626/85/Cordova-iOS-Native-Plugin-Development-13-320.jpg)
Cordova iOS Native Plugin Development
- 1. Cordova iOS Native Plugin Development MOBILE APP DEVELOPMENT FOR WEB DEVELOPERS.
- 2. JOSUE BUSTOS Artist, Software Developer
- 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 }
- 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?