How to set up Cordova plugin project with IDE support?

Question

I've been struggling to set up my cordova plugin project. Mainly due the facts that:

• Plugins need to be in a separate folder away from the main project

• When I use, for example, cordova build android to build the project, cordova copies the java file from my plugin folder and put it into platforms/android/src folder.

• Thus I should not modify my plugin's .java file in the Android project manually, I have to write my code in my plugin folder.

• But I can't import plugin folder into the IDE project, thus I don't have code completion.

• It's basically impossible to write Java/Objective-C without IDE support

How can I set up an IDE(for example, for Android Studio) project with code completion for my plugin development?

Solution 1

Developing a Cordova plugin is a bit of a pain.

Here is a way to do it :

1. Create the basic files of your plugin (plugin.xml file, .java file for Android plugin, .h and .m files for iOS) in a separated folder for your plugin
2. Provide in your plugin.xml what is needed to install the plugin
3. Install your plugin in your Cordova app : cordova plugin add /path/to/pugin
4. Build the platforms you want to develop your plugin. cordova build android or cordova build ios

Then for each platform, you'll have to work directly on your plugin in the builded project :

• Android : open with Android Studio the builded Android project located in yourCordovaAppFolder/platforms/android with "Import project (Eclipse ADT, Gradle, etc.)"

  1. Open the Project tool window : View > Tool Windows > Project , or ⌘ + 1
  2. Open your plugin class file located at : android > java > com.your.plugin > YourPlugin

• iOS : open with Xcode the builded iOS project located in yourCordovaAppFolder/platforms/ios In Xcode, your plugin class files are located in the Plugins folder

You can then develop and test directly your plugin for each platform without the need to reinstall it again and again and again... just run the project from Android Studio/Xcode, and don't reinstall your plugin, it will erase what you have done in the project.

When you think your developments are done (or when you want to), replace the plugin file(s) in the original plugin folder created at very first step, with the one from the project you were developing on.

EDIT :

I've discovered that Eclipse made an update last summer, Eclipse Mars (4.5) that includes Thym (The HYbrid Mobile Tools).

If needed they have a Github project page.

I've quickly tested it, it allows to create Cordova projects, easily add plugins, and run directly on desired platform (Android, iOS).

Microsoft has also made a free version of Visual Studio for Apache Cordova, but I haven't tested it.

Regarding Eclipse with Thym, my first quick conclusion is that it is practical to develop Cordova apps but won't be THE ultimate solution to develop Cordova plugins because it is not oriented this way and was not made for plugins but apps making (and it is probably the same for Visual Studio for Apache Cordova).

By the way I had some trouble to launch iOS simulator with Eclipse+Thym, so maybe it still needs improvements even if it looks already good.

Solution 2

The solution I tend to use follows that outlined by Niko in the accepted answer. However, I add the --link flag when adding the plugin:

cordova plugin add --link ../cordova-plugin-example

which (at least on Mac and probably Linux) creates symbolic links to the plugin directory instead of copying it. Then, editing the plugin files within the Android project in 'platforms/android' with Android Studio actually modifies the files in the plugin directory. This allows to keep the plugin directory separate (and under it's own version control). And removing and adding the plugin should - at least theoretically - not lose changes to the plugin.

The approach should work equally for iOS plugins.

Beware that I have no idea whether or how --link works on Windows machines.

Hint: I found this option in the help:

cordova help plugin

which gives:

     [...]
     [--link] ... when installing from a local path, creates a symbolic link to the plugin
                  instead of copying files. The extent to which files are linked vs copied
                  varies by platform. Useful for plugin development.

Solution 3

I would like to suggest yet another workflow for the development of Cordova plugins. It approach is similar to the workflows already mentioned earlier, with the difference that I like to have an independent project to maintain + test + debug the plugin code without the need for a separate test application.

The outline of the workflow looks like this.

Step 1 - Prepare the Cordova platform.
1.1 Download android release cordova-android-x.y.z.zip of the version you want from the github source site:
https://github.com/apache/cordova-android

1.2. Expand the archive, go to framework/ directory
1.3. create a local.properties file with contents: 'sdk.dir=/opt/android-sdk'
     Adjust the path so that it points to the location of the Android SDK on your machine.
1.4. Execute: 'ant jar'
The result is a cordova-x.y.z.jar

Step 2 - Create/test the plugin with IDE support.
2.1. Create an empty Android project using Android Studio.
2.2. Copy the cordova-x.x.x.jar to the app/libs directory of your project.
2.3. Create the plugin code + unit tests (you have code completion and can build the code using the unit tests).
2.4. OPTIONAL If necessary you can add a webview and test the code inside the webview as described here
https://cordova.apache.org/docs/en/latest/guide/platforms/android/webview.html

Step 3 - Package plugin files.
3.1. Create a plugin project with plugman.
3.2. Copy the files from the development project into the plugin project
3.3. Deploy and reuse.

The last step 3 could be automized, I personally never got around doing this.

Solution 4

There is much simpler solution for Android Studio and Cordova Plugin: After adding android platform, cordova creates an android project under platforms/android and you can create cordova plugin folder under android project and add plugin to project with command once. So, you do not need to use another for Java. As I said, there will be two same java files : /src and /PluginDevelopmentFolder. cordova build android doesn't manipulate any java file. I added fileTree to confirm:

Solution 5

read this https://cordova.apache.org/docs/en/edge/guide_appdev_hooks_index.md.html

I use NetBeans IDE on Debian Jessie. (NetBeans is best IDE for me, use it for QT, PHP, and now Cordova. But it uses a lot of RAM.)

After I push build button, my shell script removes, installs and runs the newly built app in VirtualBox (using adb). I don't move plugins to other directory because I don't need it, but you can set your directory and manually put plugin, and then include plugin using a script.

View more solutions

Comments

[Karan Kumar]

This is not advisable, sometimes you need to add/remove platform manually. so a cordova platform rm android will actually remove this folder and all its content.

[CarlLee]

Hey, I don't know if you have checked my comments yet, I used the exactly same solution before you answered the question. You can safely use cordova build android in CLI, it'll only replace your javascript code, and your Java code will remain intact

[Niko]

Oh indeed, thanks for pointing that out I missed your comment, sorry. I'll leave my answer for those who need it, and when I will have a better solution I will share it here

[adnbsr]

Yeah that is right, but the need is edit java files those will stick to project. what is the point of the remove?

[Karan Kumar]

Many a times you would face a situation when plugin is not added properly, or you have done everything correctly but the plugin functions are not executed. In this case, you'd have to remove and add the platform again. It happens. Its out there.

[Karan Kumar]

What you can edit your answer is... Do like this (the method you posted) , then copy the entire .java(or content of file) file into actual plugin directory. This is what most of developers are doing right now. PS. its easier to use Android Studio.

[Niko]

I've made a little update for IDEs that allow to develop Cordova apps :-)

[Oceans]

If you're thinking of using Eclipse (with THyM) as possible IDE might I suggest taking a look at this JBoss Developer Studio plugin. It really helped me a lot when learning Cordova, they have some good demo projects you can learn a lot from.

[Sinistralis]

Do any of these options have debugging support for the plugins? My main issue is I have no way to debug the .java or ios code living behind the JS, and Thym does not support editing anything but the www folder. It freaks out otherwise.

[natanavra]

@Sinistralis If you run the app with the native development IDEs (Xcode, Android Studio) you can debug the native plugin code. It really is a pain developing a Cordova plugin.

[Les Buchanan]

Great (for now) solution! Thanks Niko and CarlLee!