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?

Answer 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.

Answer 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. 

Answer 3

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:

Answer 4

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.

Answer 5

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.