What is iBeacon?

iBeacon is a new technology that uses Bluetooth Low Energy (BLE), which is now attracting attention because it is standardly installed in iOS7 of iPhone.
In the past, NFC was often used to carry out O2O measures that actually led to stores from online announcements. However, NFC is not supported by the iPhone, so the overall O2O is growing.

However, iBeacon is compatible with iPhone as standard and uses a general-purpose technology called BLE. And although iBeacon is a trademark of Apple Inc., similar technology can be applied to Android devices, and it is expected that it can be used for the entire smartphone.

For this reason, iBeacon is attracting attention as a trump card for O2O.

The details here site You may want to look at.

 

Can iBeacon be used with PhoneGap?

When using iBeacon with PhoneGap, you can utilize iBeacon by using a plugin.

At the moment, there seem to be two plugins.

petermetz – I was worried at first because there are few samples, but I feel that it is quite convenient when I actually use it. It also supports Android.

https://github.com/petermetz/ cordova-plugin-ibeacon

jumbo-in-Jap – The sample is rolling around, but I feel that it is a bit unsatisfactory in terms of functionality.

https://github.com/ jumbo-in-jap / phonegap-ibeacon-plugin

 

Implementation overview

The implementation of the app This site I implemented it by referring to.

The source code used as reference Download here I tested it.

The file index.html contains the HTML data for the info page of the application.

The JavaScript code, including iBeacon setup and logic, is in the file app.js.

 

iBeacon tracking

To track iBeacon, specify the UUID of the beacon you want to get notifications for.

Here, id is used to identify the page associated with the beacon, and the code that defines the area for the page is:

// Regions that define which page to show for each beacon.app.beaconRegions = [{id: 'page-feet', uuid: 'A4950001-C5B1-4B44-B512-1370F02D74DE', major: 1, minor: 1}, {id: 'page-shoulders', uuid:' A4950001-C5B1-4B44-B512-1370F02D74DE ', major: 1, minor: 2}, {id:' page-face ', uuid:' A4950001-C5B1-4B44- B512-1370F02D74DE ', major: 1, minor: 3}]

You will need the UUID of the beacon you want to track.

The same UIID allows you to use major and minor integers to uniquely identify the beacon, in which case it can be shared by multiple beacons.

It is not mandatory to specify a major / minor number when tracking beacons.

 

iBeacon monitoring

Next, let's look at the code for tracking beacons.

Please note that it is used for two kinds of tracking iBeacons.

** Monitoring enabled with startMonitoringForRegion tracks the start and end regions.

Monitoring can both have a low update rate when the app can run in the foreground and background and does not include proximity information. Ranging only works in the foreground, ** enabled with startRangingBeaconsInRegion, has a fast update rate, and has proximity information (ProximityImmediate, ProximityNear, ProximityFar).

For more information about iBeacons Foreground Mode vs Background, explore this report from Radius

The sample app is used throughout to determine the proximity of mitigation beacons.

However, the code also allows beacon monitoring for demonstration purposes. The code on the area monitors the next piece of iteration and allows for the extent of each area.

// Start monitoring and ranging our beacons.for (var r in app.beaconRegions) {var region = app.beaconRegions [r] var beaconRegion = new cordova.plugins.locationManager.BeaconRegion (region.id, region.uuid, region. major, region.minor) // Start monitoring. cordova.plugins.locationManager.startMonitoringForRegion (beaconRegion) .fail (console.error) .done () // Start ranging. cordova.plugins.locationManager.startRangingBeaconsInRegion (beaconRegion) .fail ( console.error) .done ()}

 

Response to iBeacon

A delegate object with a callback function is used to fire the beacon event, as shown in the following code.

// The delegate object contains iBeacon callback functions.var delegate = locationManager.delegate.implement ((dideDetermineStateForRegion: function (pluginResult) (/ (pluginResult) {//console.log('didStartMonitoringForRegion: '+ JSON.stringify (pluginResult))}, didRangeBeaconsInRegion: function (pluginResult) {//console.log('didRangeBeaconsInRegion:' + JSON.stringify (pluginResult)) app .didRangeBeaconsInRegion (pluginResult)}})

Contains information about the beacon (s) that had a pluginResult object.

Uncomment the call to console.log in app.js to enable logging for examining the code in the file.

The log output is displayed in the Tools window of Evothings Workbench.

 

Run the sample app

You can download the sample app from the following site.

This article is also a translation of the following site.

http://evothings.com/quick-guide-to-writing-mobile-ibeacon-applications-in-javascript/

Thank You.