Search code examples
cordovaphonegap-pluginscordova-plugins

Getting PhoneGap plugins working

I've created my first phonegap app yesterday following the tutorials and using the PhoneGap Developer App. Now I'm trying to get plugins working, I'm not sure if I'm missing a step somewhere or doing it completely wrong.

On OSX, I installed nodejs using brew install nodejs followed by sudo npm install -g phonegap.

After phonegap was installed, I created a sample project phonegap create sample-app followed by cd sample-app and phonegap serve. I can now see the sample app inside the phonegap android app and if I make changes to the html / js, I can see it reflected immediately on my phone.

Now I've tried installing the flashlight plugin to see if I can get plugins to work.

phonegap cordova plugin add https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin.git
phonegap cordova prepare

Inside my index.html I've included the flashligh.js:

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/plugins/Flashlight.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

Inside the generated index.js, I've added a line to toggle the flashlight: window.plugins.flashlight.toggle();

// Update DOM on a Received Event
receivedEvent: function(id) {

    window.plugins.flashlight.toggle();

    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');
    receivedElement.innerHtml = navigator.geolocation.getCurrentPosition;

    console.log('Received Event: ' + id);

}

I've restarted the app just to make sure (killing the process and running phonegap serve again), but I don't see any flashlight switching on.

Typing in phonegap plugins list, I get the following results:

cordova-plugin-flashlight 3.0.0 "Flashlight"
cordova-plugin-geolocation 1.0.1 "Geolocation"
cordova-plugin-whitelist 1.0.0 "Whitelist"

Am I missing any steps or are there another way to do it?

Solution

  • I got rid of phonegap and went straight cordova and the plugins work fine.

    cordova create app za.co.mycee.app "MyCee App"
cd app
cordova platforms add android
cordova platforms add ios

# add plugins
cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-console
cordova plugin add cordova-plugin-dialogs
cordova plugin add cordova-plugin-geolocation

# run on phond
cordova run android

    On the generated index.js I simply copied code snippets from the webpage:

    // onSuccess Callback
//   This method accepts a `Position` object, which contains
//   the current GPS coordinates
//
function onSuccess(position) {
    var element = document.getElementById('geolocation');
    element.innerHTML = 'Latitude: '  + position.coords.latitude      + '<br />' +
                        'Longitude: ' + position.coords.longitude     + '<br />' +
                        '<hr />'      + element.innerHTML;
}

// onError Callback receives a PositionError object
//
function onError(error) {
    alert('code: '    + error.code    + '\n' +
          'message: ' + error.message + '\n');
}

    and inside onDeviceReady I've added this line:

    var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 30000 });

    In index.html I've added this html:

    <div id="geolocation">
                GEO Location Goes Here
            </div>

    Now every time I run cordova run android, I can see the GPS coordinates being added. Not sure why I can't get it working in Phonegap, Cordova works perfect.