How to use an external plugin Cordova

[Mario_R_]

Hello to all,

perhaps it is a trivial question for many, but I can not use an external plugin for Cordova (https://github.com/Litekey/heartbeat-cordova-plugin), because I get the following error: Uncaught TypeError: Can not read property 'heartbeat 'of undefined. I tried the recommended example, but gave that error.

To add the plugin I did: Add plugins to this project -> Third-parts Plugins -> GIT repo -> Repo URLs.

Later I saw the plugin appear in the project, but when I go to call the method "take" this is not working.
Should I add a few references in the index.html?

Thank you

[Dale_S_Intel]

Make sure that cordova has finished initialization.  If you've got code that runs before getting the proper events, then it may not be set up yet, giving you "undefined".

One easy way to do is to use the "app.Ready" event provided by init-dev.js, which should be included automatically in any new cordova project created with the XDK.  You can see an example of this in the blank cordova sample, www/js/init-app.js, with this line:
 

document.addEventListener("app.Ready", app.initEvents, false) ;

You can read more about "app.Ready" here - https://github.com/xmnboy/blank-xdk-cordova-project

[Mario_R_]

Thank you for your response Dale.I am sure to run the plugin after initialization, since I call the function through a button. Below is a complete example:

$(document).on("click", "#btn_test_home", function(evt) {        
        
      var props = {
            seconds: 10,
            fps: 30
        };

      cordova.plugins.heartbeat.take(props,                   
                  function (bpm){                    
                    console.log("Your heart beat per minute is:" + bpm);
                  },
                  function(){                    
                    console.log("Has not posible measure your heart beat");
        });        
 });

However, I noticed the following errors when you start the app:

deviceready has not fired after 5 seconds. cordova.js: 1189
Channel not fired: onCordovaReady cordova.js 1182
Channel not fired: onCordovaInfoReady cordova.js 1182

It might be the reason why it does not run the plugin heartbeat?

[Elroy_A_Intel]

This plugin seems to have been last updated in July. Did you set the Cordova CLI version to 4.1.1?

[Mario_R_]

Elroy Ashtian Jr (Intel) wrote:

This plugin seems to have been last updated in July. Did you set the Cordova CLI version to 4.1.1?

The version was set to 5.1.1, I changed the file intelxdk.config.android.xml but I always get the same error.

<intelxdk: cordova-cli version = "4.1.1" />

is this the correct way to set the CLI version of Cordova?

[Anusha_M_Intel1]

You can change the CLI version via the UI. Go to Projects Tab -> Build Settings -> Cordova CLI Version. 

[Mario_R_]

Anusha Muthiah (Intel) wrote:

You can change the CLI version via the UI. Go to Projects Tab -> Build Settings -> Cordova CLI Version. 

Tried but nothing changes. In any case, I can only choose between 4.1.2 and 5.1.1.

[PaulF_IntelCorp]

Mario R. wrote:

However, I noticed the following errors when you start the app:

deviceready has not fired after 5 seconds. cordova.js: 1189
Channel not fired: onCordovaReady cordova.js 1182
Channel not fired: onCordovaInfoReady cordova.js 1182

It might be the reason why it does not run the plugin heartbeat?

Mario -- I suspect there is a problem with the initialization of that plugin, when you see error messages like those above it usually means the cordova.js file did not finish. Generally, that is due to a plugin init, but sometimes it can be due to a bad order of the JS script includes in your index.html file. See the "hello cordova" index.html file (the project that Dale pointed to) for some comments and recommendations regarding ordering of JS script includes.

[Mario_R_]

I created a new project Cordova, imported the plugin, and put a button to call the function "take" as an example.
This is the order them to index.html

        <script src="cordova.js" id="xdkJScordova_"></script>

        <script src="js/app.js"></script>
        <!-- for your event code, see README and file comments for details -->
        <script src="js/init-app.js"></script>
        <!-- for your init code, see README and file comments for details -->
        <script src="xdk/init-dev.js"></script>
        <!-- normalizes device and document ready events, see file for details -->
        <script type="application/javascript" src="ionic/js/ionic.bundle.js"></script>
        <script type="application/javascript" src="js/index_init_services.js"></script>
        <script type="application/javascript" src="lib/jquery.min.js"></script>
        <script type="application/javascript" src="js/index_user_scripts.js"></script>      
        
        <script type="application/javascript" src="../plugins/com.litekey.cordova.plugins.heartbeat/www/heartbeat.js"></script>

Is the right order?

At start I get this error:

deviceready has not fired after 5 seconds. cordova.js:1189
Channel not fired: onCordovaReady cordova.js:1182

//when I call the function with a button
Uncaught TypeError: Cannot read property 'heartbeat' of undefined index_user_scripts.js:28

[PaulF_IntelCorp]

See the "hello-cordova" index.html file for an example of the recommended order and some comments explaining why.

I'm pretty sure your problem is being caused by the addition of this line:

<script type="application/javascript" src="../plugins/com.litekey.cordova.plugins.heartbeat/www/heartbeat.js"></script>

You should not be including that file in your index.html, the Cordova build system will include it as part of the plugin install process, that's what's inside the cordova.js file that gets created during build.

Based on the comments in the "hello-cordova" sample, here's my guess to ordering your JS files (it's a guess because I don't know precisely what's in some of those JS file, if they are simple libraries or code belonging to your app, etc.):

<script src="cordova.js"></script>

<script type="application/javascript" src="ionic/js/ionic.bundle.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>

<script type="application/javascript" src="js/index_init_services.js"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>      

<script src="js/app.js"></script>
<script src="js/init-app.js"></script>

<script src="xdk/init-dev.js"></script>