How to make a native wrapper for cordova plugin that uses javascript


#1

Hello guys,

I’m trying to create ionic native wrapper for a cordova plugin which uses javascript.

Is there any way? how can I make a native wrapper?

Thanks,


#2

Do you mean Javascript vs. Typescript that Ionic Native uses? Or what exactly do you mean?

If you “just” want to create an Ionic Native wrapper: https://github.com/ionic-team/ionic-native/blob/master/DEVELOPER.md


#3

This is the plugin I’m trying to use on Ionic. Is there any way to use a plugin like this on Ionic? there’s no NPM command. It has java files inside and that’s it.


#4

You install the plugin from Github (check the docs for cordova plugin add) and then use it as any other plain Cordova plugin in Ionic.


#5

Thanks but when I type:

cordova plugin add https://github.com/Wizcorp/cordova-plugin-yanap

my cmd crashes… it doesn’t install anything.
How can I install this plugin?


#6

works for me:

PS C:\Projects\Cordova Projects\7test> cordova plugin add https://github.com/Wizcorp/cordova-plugin-yanap
Adding cordova-plugin-yanap to package.json
Saved plugin info for "cordova-plugin-yanap" to config.xml
PS C:\Projects\Cordova Projects\7test>

#7

strange… will reboot my laptop and try again.
Thanks anyways.


#8

Well, I still get the an error message when I type the same command on cmd.
This is what I get:

Error: Failed to fetch plugin https://github.com/Wizcorp/cordova-plugin-yanap via registry.
Probably this is either a connection problem, or plugin spec is incorrect.
Check your connection and plugin name/version/URL.
Error: cmd: Command failed with exit code 1 Error output:
npm ERR! git clone C:\Users\jamesharvey\AppData\Roaming\npm-cache\_git-remotes\git-https-github-com-Wizcorp-cordova-plugin-yanap-git-0f890306 C:\Users\M4600\AppData\Local\Temp\npm-9332-86658ace\git-cache-1353156b\f2daf78a216cbf4e59ecea79b55a2a5f8a9597f9: Cloning into 'C:\Users\jamesharvey\AppData\Local\Temp\npm-9332-86658ace\git-cache-1353156b\f2daf78a216cbf4e59ecea79b55a2a5f8a9597f9'...
npm ERR! git clone C:\Users\jamesharvey\AppData\Roaming\npm-cache\_git-remotes\git-https-github-com-Wizcorp-cordova-plugin-yanap-git-0f890306 C:\Users\M4600\AppData\Local\Temp\npm-9332-86658ace\git-cache-1353156b\f2daf78a216cbf4e59ecea79b55a2a5f8a9597f9: error: cannot spawn sh: No such file or directory
npm ERR! git clone C:\Users\jamesharvey\AppData\Roaming\npm-cache\_git-remotes\git-https-github-com-Wizcorp-cordova-plugin-yanap-git-0f890306 C:\Users\M4600\AppData\Local\Temp\npm-9332-86658ace\git-cache-1353156b\f2daf78a216cbf4e59ecea79b55a2a5f8a9597f9: fatal: unable to fork
npm ERR! git clone C:\Users\jamesharvey\AppData\Roaming\npm-cache\_git-remotes\git-https-github-com-Wizcorp-cordova-plugin-yanap-git-0f890306 C:\Users\M4600\AppData\Local\Temp\npm-9332-86658ace\git-cache-1353156b\f2daf78a216cbf4e59ecea79b55a2a5f8a9597f9:
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "https://github.com/Wizcorp/cordova-plugin-yanap" "--production" "--save"
npm ERR! node v6.11.2
npm ERR! npm  v3.10.10
npm ERR! code 128

npm ERR! Command failed: git -c core.longpaths=true clone C:\Users\jamesharvey\AppData\Roaming\npm-cache\_git-remotes\git-https-github-com-Wizcorp-cordova-plugin-yanap-git-0f890306 C:\Users\jamesharvey\AppData\Local\Temp\npm-9332-86658ace\git-cache-1353156b\f2daf78a216cbf4e59ecea79b55a2a5f8a9597f9
npm ERR! Cloning into 'C:\Users\jamesharvey\AppData\Local\Temp\npm-9332-86658ace\git-cache-1353156b\f2daf78a216cbf4e59ecea79b55a2a5f8a9597f9'...
npm ERR! error: cannot spawn sh: No such file or directory
npm ERR! fatal: unable to fork
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\jamesharvey\ionicproject\npm-debug.log

[ERROR] An error occurred while running cordova plugin add https://github.com/Wizcorp/cordova-plugin-yanap --save (exit
        code 1).

Why does this happen? I’m running Windows 10. I installed node, cordova cli, ionic cli, angular cli.
Apparently I don’t have any internet connection problem.
Any idea on this would be appreciated.
Also, if possible, someone please make this into an NPM package or Ionic Native package. It has pretty good features.


#9

Actually, I had to use this command:

ionic cordova plugin add

And it didn’t work.
Even if it works, how can I import this plugin to app.module.ts?


#10

All Cordova plugins use JavaScript to provide an interface to Hybrid Apps: https://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html which you complement with one or more native implementations e.g., Android, iOS, etc.

Ionic Native: https://ionicframework.com/docs/native/ provides a TypeScript wrapper for Cordova/PhoneGap plugins.

The cordova-plugin-yanap plugin only has four stars so you might won’t to make a local copy in case you need to submit a pull request, etc.

To clone the project:

git clone https://github.com/Wizcorp/cordova-plugin-yanap.git

To add the plugin to your project:

cordova plugin add --link ../cordova-plugin-yanap

Your package.json:

  "dependencies": {
    ...
    "cordova-plugin-yanap": "../cordova-plugin-yanap"
  }

-> Even if it works, how can I import this plugin to app.module.ts?

You don’t. Create a test page and access the interface: https://github.com/Wizcorp/cordova-plugin-yanap/blob/master/www/Yanap.js and https://github.com/Wizcorp/cordova-plugin-yanap


#11

What is your ionic info output?


#12

Here’s my Ionic Info output.
If you guys can make yanap as an official, secondary native audio plugin, I would appreciate that.

cli packages: (C:\Users\jamesharvey\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    Node : v6.11.2
    npm  : 3.10.10
    OS   : Windows 10

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

#13

When I check my package.json file on my app, the plugin has been added in dependencies:

"cordova-plugin-yanap": "git+https://github.com/Wizcorp/cordova-plugin-yanap.git",

My cmd crashed but I guess it worked? I’m not sure.


#14

Have fun: https://github.com/ionic-team/ionic-native#plugin-missing


#15

That only means that one part worked, not necessarily that the plugin is where it should be…

One possible solution: Uninstall your node, install nvm (or nvm-windows if you are on Windows), install a new node (which includes npm) with this, then install ionic and cordova again and try your command again.


#16

Will try that NVM. Thanks,

Honestly I want to make these plugins myself. I realized these are just a few java files which are not longer than several hundred lines.
And Java seems very similar to angular typescript…


#17

Actually, I found cordova-plugin-yanap folder properly installed inside plugin folder.
So I guess it’s installed despite of all errors…

how can I use a plugin like this on home.ts file?

If someone can give me an advice regarding what should be inside app.module.ts, home.ts, I would really appreciate it.
All these javascript commands seem to be incompatible to use on typescript…


#18

See here e.g. How to use non native plugins on Ionic?
Integrating third party cordova plugins and using in ionic


#19

Thanks for your reply. I followed the instruction… however now it throws me ‘Yanap is undefined’ error.

In my app.components.ts top imports list.

declare var cordova: any;

and I put this inside
export class MyApp {

  ngOnInit(){
    cordova.Yanap

}

and I put below inside constructor:
var Yanap = cordova.plugins.Yanap;

then I assigned all function properties described in Yanap github page to a button.

Any idea on this? any help would be appreciated. Thanks. Honestly I don’t know how to use this plugin yet.


#20

This doesn’t make sense. The variable of this plugin is cordova.plugins.Yanap, so you declare cordova and then just use cordova.plugins.Yanap in your code.

(You should include which line the error is coming from, then it would be obvious it is the Cordova.Yanap one.)