Detecting and Monitoring Beacons on Android with Oracle JET

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>

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.