How to use custom plugin


#15

Pretty sure I just responded to you on slack, but I’ll post the same message here.

you need to have some typescript definitions for this,at least for the JS portion of the app similar to this

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/cordova/plugins/Device.d.ts

Basically what’s happening, TS doesn’t know about your code, so it wont build because it thinks you’re giving it invalid code. You need to let the compiler know about your plugin, and add it to typings


#16

Honestly I ran out off ideas :frowning:

My questions below may feel little basic for you :slight_smile:

The JS portion of my plugin file is ZplOverTcpIp.js which is www of the plugin

code having in ZplOverTcpIp.js is given below

var exec = require('cordova/exec');
exports.print = function(ipaddress,bclabels, success, error) {
    exec(success, error, "ZplOverTcpIp", "print", [ipaddress,bclabels]);
};

How can I let know about my plugin to compiler(typescripts) ?
I am not familiar with typings and you mentioned to add in typings, Please advise?

Thanks


#17

so it’s best to look at example, like the camera plugin.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/cordova/plugins/Camera.d.ts

So we first take care of the main camera method

interface Navigator {
     // we let the main navigator object know that it should have camera on it, and camera is a type of Camera.
// for you this would be your plugins main object
    camera: Camera;
}

Then we build out the methods for camera.

// Here we're describing the getPicture method
interface Camera {
    // getPicture has three arguments,
   // a success callback, error callback, and any options
    getPicture(

        cameraSuccess: (data: string) => void,
        cameraError: (message: string) => void,
        cameraOptions?: CameraOptions): void;
    
}

So this would be your plugin’s method, so something like customPrinter.print() followed by the success and error callback (or how ever you set it up)

Thats the general idea


#18

@Mike for our custom plugin ZPlPrint we have ZplOverTcpIp.js file created and if we create interface like you suggested ,imagine ZplOverTcpIp.d.ts and put it where asll .d.ts files are there
We are not sure how we can map that ZplOverTcpIp.d.ts to the actual code. Are we missing any step?

attaching file structure too.


#19

Whatever the interface we write for print in ts file , how it will interact with our custom plugin js file code as shown below.
our custom plugin js file.

var exec = require(‘cordova/exec’);
exports.print = function(ipaddress,bclabels, success, error) {
exec(success, error, “ZplOverTcpIp”, “print”, [ipaddress,bclabels]);
};

I am disconnected between the interface you suggest us to write for print and custom plugin that we need to interact with interface.

Please advise?


#20

To actually use the interface, you can do a few things.

The easiest would be to place in the root of your plugins directory.

This is the most straight forward and would let it travel with your plugin.

So this would go in the root, or the www folder, which ever you would like.

Then you can add a reference to in your typings/index.d.ts

Something like

/// <reference path="../plugins/com.plugin.name/index.d.ts" />

If you have this plugin on Github, I’d be able to give more detail


#21

@mhartington

Please find the changes that I made in the code

this is how i am calling in my current code to invoke the printer after the suggested changes
this.platform.ready().then(() => {

     ZPLPrinter.print(ip, bclables,
      function (success) {
        alert(success);
      }
      ,
      function (fail) {
        alert('fail');
      });
     
  });

however I still see the error Error TS2304: Cannot find name ‘ZPLPrinter’.
Did I miss anything else ?


#22

please find the sample zpl poc code at https://github.com/stirumala76/zpl-printer-poc/blob/master/MyIonic2Project/


#23

So there were a few things missing in your example project.

I ended up forking the repo, and sending a PR your way.

The changes are pretty minimal, but the overall idea is that you declare the module in you class, the give it a type that matches your definition file.

declare var ZPLPrinter: ZPLPrinter;

#24

Thanks @mike that was a great help from you. Will test it on ios and andriod and let you know if we have any issues.


#25

@mhartington mike We got the following issue…please find the error below.


#26

@mhartington I see some code changes in github,is the issue resolved?


#27

Hi @lthh89vt,

I am new to Ionic,

I’m using Ionic2 with typescript, and I didn’t manage to use this plugin : https://github.com/card-io/card.io-Cordova-Plugin

Can you share how could you hack this?
What need to included in the source code?

Thanks,
Punleu


#28

hi @stirumala,

Have you found solution for this?
I am having the same issue with https://ionicframework.com/docs/v2/native/cardio/

I’ve been searching for few days. I am still not able to use this plugin in Ionic2.

Thanks,
Punleu


#29

Are you testing this in chrome test lab or phone…?

haven’t tried but these are my initial thoughts for you in case if you haven’t done these

  1. create sample poc
  2. configured the pluigin in your ionic app and put an alert message in plugin code to see the card reader value as given in the doc, make sure u install the pluin in ur app
    https://ionicframework.com/docs/v2/native/cardio/
  3. deploy on phone android or IOS , I believe this plugin doesn’t work test lab, should deploy apk - android and ipa on ios .
  4. hook up the card reader scan to your phone.
  5. you can debug the app using android phone with chrome debug
    https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

good luck!!


#30

Hi Stirumala,

I got this fixed already. It’s the issue with Ionic View.
The solution is install the APK on the device.

Thanks,
Punleu


#31

hi Mhartington,
Cant you make any video demonstrating from scratch such that i can understand as i am a new bye to this development environment

Thanks
Vishu


#32

Hello if somen here got the error:

error TS2339: Property 'plugins' does not exist on type 'Window'.

Try like this:

(<any>window).plugins.somePlugin.doSomething();


#33

declare let cordova: any;

this.platform.ready().then(() => {
var success = function(result) {
alert(JSON.stringify(result, undefined, 2));
}
var failure = function(result) {
alert(JSON.stringify(result, undefined, 2));
}

	cordova.plugins.pluginname.method(message,success,failure);

});

#34

Once you added plugin to your project, go to the file (.ts) in which you want to use the plugin.
Then follow the steps given below

declare var yourplugin;
yourplugin.doSomething()

This helps me to call the method doSomething() in yourplugin.