How do I integrate Cordova plugin on Construct 3 with JavaScript?

From the Asset Store
Adventure Quiz interactive (Questions and answers via Json)
  • Hi,I need to implement this plugin:

    https://developers.yodo1.com/article-categories/cordova/

    I found this video where it uses Browser JavaScript to implement an Admob Cordova plugin, but I'm not sure if this is possible with this other plugin too.

    Subscribe to Construct videos now
  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • The best solution would be finding someone who could make an addon.

    If you want to do this with JS, you can try adding their script to the project, set its purpose to "Import for events". Then call its functions from the event sheet, for example showBanner()

    You may need to call onDeviceReady() function directly to initialize the API, I don't know if the event listener will work in C3 game.

    This will be difficult to test, because you'll have to build the app every time with this cordova plugin, it won't work in preview. If you are testing on Android, I suggest collecting logcat logs to check for console and error messages.

  • The best solution would be finding someone who could make an addon.

    If you want to do this with JS, you can try adding their script to the project, set its purpose to "Import for events". Then call its functions from the event sheet, for example showBanner()

    You may need to call onDeviceReady() function directly to initialize the API, I don't know if the event listener will work in C3 game.

    This will be difficult to test, because you'll have to build the app every time with this cordova plugin, it won't work in preview. If you are testing on Android, I suggest collecting logcat logs to check for console and error messages.

    Thanks so much for the answer! I'm trying it, so I made this for testing.

    For testing with this should work?

    And when is exported to add the plugin on the folder how can I do it?

    This is the documentation: https://developers.yodo1.com/knowledge-base/cordova-integration/

    I'm not sure if it's better to edit the config file and add the code or make this code as js, include it in the folder, and then add with the command like in the documentation.

  • Change function calls in your events to onDeviceReady(); and showBanner();

    Make sure to set the "Import for events" purpose on the script.

    Try running the game in preview on computer, and check console log - you should see "Running cordova-...." message.

    I would probably add Wait a few seconds before triggering onDeviceReady();, just in case.

    You need to export the game as Cordova project and build with Cordova CLI. Either add this plugin to the config files or execute this command:

    cordova plugin add <plugin id>
    

    .

    Looks like this ad network doesn't have its own Cordova plugin, it only needs cordova-plugin-device to detect device state. So maybe the lib can work without it. Or maybe you can add this plugin to config files after exporting and then continue building the project with Construct Build Service.

  • dop2000 OMG! Really useful tips, thanks so much, I've changed the function calls and changed "Import for events", but I'm checking the console log and I got this error.

    About "add this plugin to config files after exporting and then continue building the project with Construct Build Service."

    How I could do that? It would be very cool

  • The error in the log indicates that the method is called, so it's fine.

    To build with C3 you need to export your project for Cordova, then unzip the exported game and edit two files - config.json and config.xml

    See how other cordova plugins are configured there and add "cordova-plugin-device" the same way, preserving the correct formatting!

    After that add all files back to ZIP, open Export Manager in C3, load your updated zip there and click "Build application" icon.

    This will only work if cordova-plugin-device plugin is whitelisted in C3, I am not sure if it is.

  • Another option is to remove all references to this plugin, it's possible that ads will work without it.

    So you can try changing the script like this:

    function onDeviceReady() {
    
     console.log('Initializing API');
     document.getElementById('deviceready').classList.add('ready');
    
     const rivendell = window.rivendell
     console.log('banner align: ' + rivendell.BANNER_ALIGN.BANNER_HORIZONTAL_CENTER)
    
     rivendell.setBannerCallback(callback => {
     console.log("setBannerCallback event: " + JSON.stringify(callback.event))
     console.log("setBannerCallback error: " + JSON.stringify(callback.error))
     })
    
     rivendell.setInterstitialAdCallback(callback => {
     console.log("setInterstitialAdCallback event: " + JSON.stringify(callback.event))
     console.log("setInterstitialAdCallback error: " + JSON.stringify(callback.error))
     })
    
     rivendell.setRewardedAdCallback(callback => {
     console.log("setRewardedAdCallback event: " + JSON.stringify(callback.event))
     console.log("setRewardedAdCallback error: " + JSON.stringify(callback.error))
     })
    
     let appKey= "PUT ANDROID APP ID HERE";
     
     console.log("appKey: " + appKey)
     if(appKey == null)
     return
    
     rivendell.init(appKey, callback => {
     console.log("rivendell init: " + JSON.stringify(callback))
     switch (callback.event) {
     case rivendell.Event.ON_INIT_SUCCESS:
     console.log("init SUCCESS")
     break
     case rivendell.Event.ON_INIT_FAILED:
     console.log("init FAIL")
     break
     }
     })
    }
    
    function isBannerLoaded() {
     window.rivendell.isBannerAdLoaded(callback => {
     alert("Banner loaded: " + JSON.stringify(callback))
     })
    }
    
    function showBanner() {
     window.rivendell.showBannerAd()
    }
    
    function isInterstitialAdLoaded() {
     window.rivendell.isInterstitialAdLoaded(callback => {
     alert("Interstitial loaded: " + JSON.stringify(callback))
     })
    }
    
    function showInterstitialAd() {
     window.rivendell.showInterstitialAd()
    }
    
    function isRewardedAdLoaded() {
     window.rivendell.isRewardedAdLoaded(callback => {
     alert("RewardedAd loaded: " + JSON.stringify(callback))
     })
    }
    
    function showRewardedAd() {
     window.rivendell.showRewardedAd()
    }
    
  • The error in the log indicates that the method is called, so it's fine.

    To build with C3 you need to export your project for Cordova, then unzip the exported game and edit two files - config.json and config.xml

    See how other cordova plugins are configured there and add "cordova-plugin-device" the same way, preserving the correct formatting!

    After that add all files back to ZIP, open Export Manager in C3, load your updated zip there and click "Build application" icon.

    This will only work if cordova-plugin-device plugin is whitelisted in C3, I am not sure if it is.

    Thanks, I will check how to edit the xml because I used to did on Construct 2 but know the format has changed.

    Yes! I checked here: https://www.construct.net/en/forum/construct-3/plugin-sdk-10/build-server-cordova-plugin-149266 and cordova-plugin-device is there!

    About removing the plugin references, it wasn't working haha but was a good point. Possible because when you add the plugin it needs to add the Admob ID.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)