How to include 3rd party plugin in index.html

[Noah_D_]

I have successfully been able to import the Wizcorp/phonegap-facebook-plugin during the build process.

I've read and understand that I will not be able to test this 3rd party plugin in the emulator, or via the test or debug tabs, so I've created a test build for Android.

As mentioned above, during the build process, I do get the message: 

Plugin "com.phonegap.plugins.facebookconnect" installed.

Based on the documentation, I believe I am supposed to reference this API via calls to the facebookConnectPlugin, such as:

     facebookConnectPlugin.login(["publish_stream", "publish_actions", "offline_access"],
          fbLoginSuccess,
          function (error) { alert("There was an error: " + error) });

However, I know that in the app, as in the emulator, the facebookConnectPlugin is not defined, because I get an alert based on the following block:

             if (typeof facebookConnectPlugin != 'undefined'){
                
                // do stuff

            } else {
                
                alert("FacebookConnectPlugin Not Defined");
                
            }

I assume this is because I need to include the 3rd party library in my code in addition to including it in my project where suggested by the helpful comments, something like:

        <!-- Most third-party libraries should go here. References (below) are just examples to give you the general idea... -->
        <!-- <script src="lib/mc/hammer.js"></script> -->

However, I don't know the path where the 3rd party library is ultimately located in the package.  Can someone tell me how this works?

Also, is there a better way to debug this functionality than to build, email, install, and test a brand new .apk every time (even if it's outside the XDK?).  As it stands, I get no data except what I alert.  Is there a way to access the console, do stepthrough debugging, etc. for apps that are heavily reliant on 3rd party plugins?  I fear the process for iOS is going to be even more onerous.  

Thanks!

Noah

[Swati_S_Intel1]

Hello,

You are right, at the moment you can not test third-party plugins in emulator or with App Preview. 

For including third party plugin, you don't need to add it in the source code. You just need to point the Projects settings under third-party plugins to the correct URL for the repo, provide plugin ID and plugin name. The build system fetches the repo and builds with it. If you were able to successfully build, you would find the plugin in the plugins folder under www folder in your .apk, 

Swati

[Noah_D_]

Hi Swati!

I appreciate the direction!

Are you saying that the standard process for adding in a 3rd party library would be to:

1. Specify the library via the project page or the intelxdk.config.additions.xml 
2. Build the app
3. Download the .apk on the desktop
4. Change the extension to .zip
5. Unpack the apk
6. Browse the www folder to find what folder the library was installed in
7. Edit the index.html (or other appropriate file) to include the library file(s). 

[Noah_D_]

Following the steps above, I am still not able to get the objects instantiated by the plugin to be recognized.

When I unzipped and inspected my APK, I found that the plugin file was stored in

www/plugins/com.phonegap.plugins.facebookconnect/www/phonegap/plugin/facebookConnectPlugin/facebookConnectPlugin.js

So in my index.html, I added the following to the header:

<script src="plugins/com.phonegap.plugins.facebookconnect/www/phonegap/plugin/facebookConnectPlugin/facebookConnectPlugin.js"></script>

However, the following block still alerts that FacebookConnectPlugin is undefined:

            if (typeof facebookConnectPlugin != 'undefined'){
                
                //do stuff

            } else {
                
                alert("FacebookConnectPlugin Not Defined");
                
            }

I'd be grateful for any direction I can get.

Thanks!

Noah

[Noah_D_]

I didn't mention it earlier and I don't think it's the problem, but as a matter of completeness, I thought I'd mention that I'm importing the plugin using the intelxdk.config.additions.xml file.  Here's that code.  

<intelxdk:plugin intelxdk:name="com.phonegap.plugins.facebookconnect" intelxdk:value="https://github.com/Wizcorp/phonegap-facebook-plugin/"> 
    <intelxdk:param intelxdk:name="APP_ID" intelxdk:value="330730883663103" /> 
    <intelxdk:param intelxdk:name="APP_NAME" intelxdk:value="fizz points" /> 
</intelxdk:plugin>

[Noah_D_]

Also, just thought I'd mention that I will happily write a guide on this if I can get the problem solved.  And if Wizcorp is interested in integrating it, I will happily write a readme for Intel XDK users to be included in the Github.

[Swati_S_Intel1]

Hello Noah,

Here are the steps to include a 3rd party plugin in your app using XDK:

1. Under the Projects tab expand "third-party plugins" menu

2. Click on "Get Plugin from the Web"

3. Enter the plugin name

4. Enter the plugin ID

5. Enter the plugin URL

6. Click "Import"

That's it. XDK will take care of the rest. You do not need to dissect the .apk to get the folder, nor you need to add in the index.html, I just mentioned where the plugin goes to answer your previous question.

Swati 

[Noah_D_]

Hi Swati,

Thanks for your continued attention.

I don't think I'm being clear.  I'm not having trouble importing the plugin, assuming that the build message "Plugin com.phonegap.plugins.facebookconnect installed" is assumed to be correct.

What I am having trouble with is accessing the plugin in code.  According to the plugin documentation, there should be JavaScript object called facebookConnectPlugin, which has functions for login, logout, etc.  But I am not able to access that object in my index.html, even when I build the apk and test it on my device.  I have tried accessing it without adding a script to my index.html file, and I have tried adding a script to the file, but neither have worked thus far.

Any thoughts?

[PaulF_IntelCorp]

Where are you testing your code? When you include third-party plugins you cannot test them in the Emulate, Test or Debug tabs. You need to build the app and test on device. We do not currently have a means to support testing third-party plugins directly in the XDK, this is a future enhancement, but not something you can do now.

[kristina_k_]

Hi

any news on the topic from above?  i`mfocussing the same issue as @Noah did

 3rd party plugin and how to integrate properly into XDK?...since some days now i tried and searched a lot..XDK is explaining perfectly the integration and usage of the out-of-the-box plugins....regarding 3rd party i could find no helpful hints

i´m facing the same issue like @Noah did. "What I am having trouble with is accessing the plugin in code". ..i´m able to import the plugin via the XDK GUI...but within the code get this "unknown" message! ..when i call the plugins function!?....

also possible that i make some mistake while calling the 3rd party methods!?...for XDK and its doc i only find HOW to import those 3rd pary methods..but cannot find any working example HOW to use it within the code..

this is the plugin i would like to try:

https://github.com/moust/cordova-plugin-videoplayer

my overall TARGET is to "get" a simple RTSP viewer. a viewer for a IP CAM ( not the build in webCam! ). the XDK oob implemented controls seem not to work for RTSP!?..so i would like to try some th3d Party implants....This RTSP stuff i will in parallel start to discuss in an other feed within this forum.

thx for any helping hint

greets

kristina

[PaulF_IntelCorp]

See the plugins webinar here > https://software.intel.com/en-us/xdk/docs/webinars-videos-links < and investigate the "hello cordova" demo app for examples of calling plugin APIs.

Add your videoplayer plugin as follows: