04. How to Use with IBM Worklight

floatinghotpot edited this page Sep 18, 2014 · 3 revisions

Assume you are familiar with IBM worklight, and know how to add a cordova plugin to worklight project.

If not yet, please read the training material from IBM

Download the plugin

Download the ZIP file from github. Unzip and you will find following files:

  • plugin.xml, the definition file to tell cordova or plugman CLI how to handle the contained files. (read this file, you will know where to copy related file)

  • www/AdMob.js, the javascript API interface, wrapper to call cordova.exec()

  • src/android/cordova-admob.jar, the java native code to implement the API.

  • src/android/google-play-services.jar and version.xml, the google play service SDK.
  • src/ios/CDVAdMob.*, the objective-C native code wrapper to call the APIs.
  • src/ios/AdMobAds.framework, the AdMob SDK and native code to implement the API.

Add plugin reference to config.xml

  • Android, res/xml/config.xml:
    <feature name="AdMob">
        <param name="android-package" value="com.google.cordova.admob.AdMob" />
    </feature>
  • iOS, config.xml is located in the native folder of the iOS environment.
    <feature name="AdMob">
        <param name="ios-package" value="CDVAdMob" />
    </feature>

Add Android Native Code to Project

  • Copy cordova-admob.jar and google-play-services.jar to libs/.

  • Copy version.xml to res/values/.

Add iOS Native Code to Project

  • Copy CDVAdMob.h, CDVAdMob.m, and AdMobAds.framework to native folder.
  • Open the project with Xcode.
  • Add CDVAdMob.h and CDVAdMob.m to Classes.
  • Add AdMobAds.framework in frameworks (in Phase Settings).
  • Go to Build Settings, change the search paths for Library and Framework to: $(SRCROOT)/** $(SRCROOT)/Frameworks"/** $(LOCAL_LIBRARY_DIR)/Frameworks/** $(PROJECT_DIR)/** $(PROJECT_DIR)/Frameworks/**

Then build and run.

Call the javascript API

Check the AdMob.js, find cordova.exec() related code, for example:

admobExport.createBanner = function(args, successCallback, failureCallback) {
    var options = {};
    if(typeof args === 'object') {
        for(var k in args) {
            if(k === 'success') { if(args[k] === 'function') successCallback = args[k]; }
            else if(k === 'error') { if(args[k] === 'function') failureCallback = args[k]; }
            else {
                options[k] = args[k];
            }
        }
    } else if(typeof args === 'string') {
        options = { adId: args };
    }
    cordova.exec( successCallback, failureCallback, 'AdMob', 'createBanner', [ options ] );
};

Comparing it with the training content, you will know how to call it in your javascript code.

Credits

Thanks to Kevin Gurden, for fighting through the way using AdMob Plugin Pro in IBM worklight, as worklight does not support importing Cordova plugins directly.