X

Geertjan's Blog

  • June 5, 2016

Detecting and Monitoring Beacons on Android with Oracle JET

Geertjan Wielenga
Product Manager

Now that we have a beacon simulator, let's use it in setting up a simple "hello world" scenario with Oracle JET and beacon detection. We'll end up with a basic Android application that detects the beacon we're simulating in the previous blog entry.

1. Set Up the Application. Create a hybrid Oracle JET application for Android:




2. Install the Cordova Beacon Plugin. After creating the application structure using the dialogs shown above, use the Terminal window (or simply the command line), to install cordova-plugin-ibeacon into the "hybrid" folder in your application:


3. Verify the Cordova Beacon Plugin Installation. In the "hybrid/plugins" folder, you should see the plugin has been installed after the previous step:


4. Code the Beacon Detector. We'll use the "incidents" module in the application, defined by "src/js/views/incidents.html" and "src/js/viewModels/incidents.js" to set up some basic beacon detection functionality. In "incidents.html", remove all the content and add this instead:

<div class="oj-hybrid-padding">
<h3>Incidents Content Area</h3>
<div>
<button data-bind="click: detectBeacons">Start Monitoring</button>
<ul data-bind="foreach: messages">
<li><span data-bind="text: $data"></span></li>
</ul>
<button data-bind="click: clearList">Clear List</button>
</div>
</div>
In "incidents.js", add the following right below "var self = this;":





self.messages = ko.observableArray();
self.clearList = function () {
self.messages.removeAll();
};
self.detectBeacons = function () {
var delegate = new cordova.plugins.locationManager.Delegate();
delegate.didStartMonitoringForRegion = function (pluginResult) {
self.messages.push("Started monitoring: " + JSON.stringify(pluginResult));
};
delegate.didDetermineStateForRegion = function (pluginResult) {
self.messages.push("Found a beacon: " + JSON.stringify(pluginResult));
};
var uuid = 'E2C56DB5-DFFB-48D2-B060-D0F5A71096E0';
var identifier = 'Hello World';
var minor = 1;
var major = 1;
var beaconRegion = new cordova.plugins.locationManager.BeaconRegion(identifier, uuid, major, minor);
cordova.plugins.locationManager.setDelegate(delegate);
cordova.plugins.locationManager.startMonitoringForRegion(beaconRegion)
.fail(function (e) {
console.error(e);
})
.done();
};

5. Build, Deploy, and Use. Build ("grunt build platform=android") and run ("grunt serve platform=android destination=device") the application and, after it has installed, when you click the "Start Monitoring" button, you should see the messages you provided in the code above:


Above, you see a screenshot of my actual Android phone (i.e., this is not an emulator but my real device), with the UI created as defined in the HTML view shown above, which has its business logic created in JavaScript, as shown in the previous step too. 

The next step is to create a prettier user interface and Oracle JET has a lot of components (all free and open source) to help with that.

Continue to part 3 of this series...

Join the discussion

Comments ( 2 )
  • peppertech Tuesday, June 7, 2016

    I'm seeing a possible Beacon based scavenger hunt at Oracle OpenWorld this year? Hmmmm, the possibilities....


  • Sai Saturday, March 18, 2017

    Hi Geertjan!

    I am using your above code . It is working fine and as expected on Android .

    But on iOS , the app is not able to detect the beacon. I have posted the same OracleJET forum here : https://community.oracle.com/message/14280240#14280240

    Can you please try to suggest me on this.


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.