Integration into Ionic-Native

Now we are going to create the Ionic-Native package so that our app can be properly imported and used in future projects.

The Ionic-Native repository we’ll be forking.

Navigate to: https://github.com/ionic-team/ionic-native Fork the repo, and pull down a local copy to your computer. Open the ionic-native repo that we just pulled, in your favorite IDE, I personally use WebStorm. Now this is where it gets funky, I’ll list out what you need to do, but you can look at Ionic-Native’s developer docs for more help, if you need it. Within the Ionic-Native repository folder, navigate to src/@ionic-native/plugins/ Now create a folder called your-plugin-name . This will be similar to your plugin’s Github repository name, minus the cordova-plugin part. In that folder, create a file called index.ts Inside our newly created index.ts file, copy & paste the below code. Make the edits, which are commented & bolded appropriately.

import { Injectable } from '@angular/core';

import { Cordova, IonicNativePlugin, Plugin } from '@ionic-native/core';

@Plugin({

pluginName: 'YourPluginName',

plugin: 'cordova-plugin-your-plugin-name',

pluginRef: 'YourPluginName',

repo:

'https://github.com/YOUR-REPO-LINK-HERE',

platforms: ['iOS']

})

@Injectable()

export class YourPluginName extends IonicNativePlugin { /**

* Your plugin plugin functions go here.

* Function names should match the ones in your .swift & .js files.

* Otherwise you won't be able to execute them.

*/

@Cordova({

successIndex: 0,

errorIndex: 1

})

yourFunctionName(): Promise<any> {

return;

}

}

9. Now within the ionic-native project, run the following commands npm install & npm run build this will build the project plugins listed in the /src/@ionic-native/plugins folder. When the command finishes running, our plugin package will be output to the /dist/@ionic-native/your-plugin-name folder. This is what we will use to test our plugin, before trying to pull-request our changes to the Ionic-Native repo.

10. Once the build process finishes (this may take a few mins), your plugin package will be output to the /dist/@ionic-native/your-plugin-name folder. Copy your-plugin-name folder, and navigate back to your main project (The Ionic project that you’re going to test the plugin in).

11. Now, I am assuming that you have built your node_modules by now, but if you haven’t, go ahead and run the command npm install and it’ll install your project dependencies.

12. Navigate to the node_modules/@ionic-native folder, and paste the copied folder your-plugin-name into the @ionic-native folder. So that it looks like node_modules/@ionic-native/your-plugin-name . After that, we are pretty much done! You can import the plugin into your project now, like you would any other package.

An example of your node_modules folder.

import {YourPluginName} from '@ionic-native/your-plugin-name';

And in your constructor statement:

private pluginName: PluginName

And then to use the plugin, all you have to do is call it directly. From a function:

public someFunctionName(){

this.yourPluginName.yourPluginFunction().then(() => {

console.log("The yourPluginFunction ran without errors!");

}).catch(err => {

console.log("yourPluginFunction encountered the following error: ",err);

})

}

Note: That in the future, if you run the command npm install or add/remove another plugin you’ll have to re-do steps 10–12.

Installing the plugin

Now that we have all of that stuff finished up, all we have to do is add the plugin to our project by running the following command in your project root.

cordova plugin add ~/path-to-your-plugin/YourPluginName

In the future, you can just add the plugin from the repository directly, like you would any other. But for now, we’re going to do it locally, since we’re testing.