Exercise: Use a Plugin

Overview

For the Beginner Workshop, we are using the PhoneGap Developer App instead of compiling our own app. The PhoneGap Developer App does not support installing plugins. However, it comes bundled with the official Apache Cordova plugins.

In this quick exercise, we will access the vibration plugin. You can use the PhoneGap CLI or the PhoneGap Desktop App. The instructions should be the same for both.

Vibration Plugin

1. Create or open a Hello World project.

2. Pair it with the PhoneGap Developer App to preview the app.

3. Open www/js/index.js in your text editor.

4. Locate lines 31 - 37:

31 // deviceready Event Handler 32 // 33 // The scope of 'this' is the event. In order to call the 'receivedEvent' 34 // function, we must explicitly call 'app.receivedEvent(...);' 35 onDeviceReady: function() { 36 app.receivedEvent('deviceready'); 37 }, ```

1. When the deviceready event fires, then PhoneGap is ready to access native plugins.

2. Let's call the vibration plugin once the device is ready:

3. Locate lines 31 - 41:

31 // deviceready Event Handler 32 // 33 // The scope of 'this' is the event. In order to call the 'receivedEvent' 34 // function, we must explicitly call 'app.receivedEvent(...);' 35 onDeviceReady: function() { 36 app.receivedEvent('deviceready'); 37 var deviceReadyDiv = document.getElementById('deviceready'); 38 deviceReadyDiv.addEventListener('click', function(e) { 39 console.log(navigator.vibrate(300)); 40 }, false); 41 }, ```

1. Save file and wait for the PhoneGap Developer App to reload.
2. Vbrrrrrrr The device should have vibrated!