How to use cordova custom plugin in ionic

subbut · March 9, 2018, 4:02am

Hi addwebsolution,

i am new for ionic… please help me

home.html file have this code:

<button class=“btn” (click)=“showToast()”>Toast Message

home.ts file this code:

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { Platform } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
declare var Customplugin: any;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
constructor(private platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {}
showToast(){
Customplugin.show((data) => {
alert(data);
},(err) => {
alert(err);
});
}

}

my cordova plugin folder name: cordova-plugin-customplugin

cordova plugin.xml:

<?xml version='1.0' encoding='utf-8'?>

Customplugin

package.json:

{
“name”: “cordova-plugin-customplugin”,
“version”: “0.0.1”,
“description”: “”,
“cordova”: {
“id”: “cordova-plugin-customplugin”,
“platforms”: [
“android”
]
},
“keywords”: [
“ecosystem:cordova”,
“cordova-android”
],
“author”: “”,
“license”: “ISC”
}

Customplugin.js:

var exec = require(‘cordova/exec’);

var Customplugin = function() {
console.log(‘Customplugin instanced’);
};

Customplugin.prototype.show = function(msg, onSuccess, onError) {
var errorCallback = function(obj) {
onError(obj);
};

var successCallback = function(obj) {
    onSuccess(obj);
};

exec(successCallback, errorCallback, 'Customplugin', 'show', [msg]);

};

if (typeof module != ‘undefined’ && module.exports) {
module.exports = Customplugin;
}

and Customplugin.java :

package cordova-plugin-customplugin;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import org.json.JSONArray;
import org.json.JSONObject;
import org.json.JSONException;
import android.content.Context;
import android.widget.Toast;

/**

This class echoes a string called from JavaScript.
*/
public class Customplugin extends CordovaPlugin {

@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals(“coolMethod”)) {
String message = args.getString(0);
this.coolMethod(message, callbackContext);
return true;
}
if (“show”.equals(action)) {
show(args.getString(0), callbackContext);
return true;
}
return false;
}

private void coolMethod(String message, CallbackContext callbackContext) {
if (message != null && message.length() > 0) {
callbackContext.success(message);
} else {
callbackContext.error(“Expected one non-empty string argument.”);
}
}
private void show(String msg, CallbackContext callbackContext) {
if (msg == null || msg.length() == 0) {
callbackContext.error(“Empty message!”);
} else {
Toast.makeText(webView.getContext(), msg, Toast.LENGTH_LONG).show();
callbackContext.success(msg);
}
}
}

when i run ionic serve show this bellow message:

Runtime Error:

Customplugin is not defined

Stack:

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.8
Angular Core: 5.0.3
Angular Compiler CLI: 5.0.3
Node: 8.9.4
OS Platform: Linux 4.4
Navigator Platform: Linux x86_64
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36