Detecting Eddystone™ Beacons in JavaScript Made Easy

In this tutorial you will learn how to create a Cordova app written in JavaScript that can detect Eddystone beacons. The plugin can also be used with PhoneGap and Ionic.

Why Eddystone matters

Eddystone is the most significant beacon technology we have seen at Evothings to date. Google proposed the Eddystone beacon standard, and went public with it in Summer of 2015. The release was well prepared, and hence accompanied by announcements of Eddystone beacons from major beacon vendors like Estimote, Kontakt.io and Radius Networks.

If you haven't heard of beacons before in this context, a beacon consists of a small computer chip with a Bluetooth radio transmitter which sends out data signals for up to between 30 and 100 meters. This tiny “lighthouse” (Eddystone is actually a proper lighthouse, located in south-west England) allows mobile phone users to detect and access information about what is present nearby at a physical location.

You can literally browse the streets by scanning for beacons nearby. Perhaps there is a shop or bar around that you did not know about? You might discover that a cool band is playing tonight at the restaurant, right where you are having lunch. You may even connect to machinery and services nearby via a beacon (perhaps get something to drink from a futuristic vending machine while exploring all the beacons).

Eddystone uses a different method for sending out signals than Apple iBeacon does. The difference may seem subtle at first, but is much more far reaching than you might first think.

Here is why Eddystone matters:

• It is an open standard that can be implemented on any platform that supports the required Bluetooth Low Energy functionality.
• By contrast, the iBeacon format offered by Apple is proprietary and not officially supported on Android. Support for scanning for Eddystone beacons is available on both iOS and Android.
• Apps can scan for any Eddystone beacons, regardless of who made them or who placed them on location.
• With iBeacon, apps need to be preconfigured with fixed beacon UUIDs, and Apple does not allow the user of an app to alter these ids.
• Eddystone beacons can broadcast URLs, meaning that apps can directly act on beacon data sent out, without the need for having access to a lookup table of beacons IDs on a server somewhere. This is much more flexible and open than iBeacon, which locks down the use of beacons to specific apps.
• Depending on your application, Eddystone beacons can offer you game changing opportunities.

For example, as an owner of a shop or cafe, you can place a beacon at the entrance door, configured with the URL to your web site – and anyone within 50 to 100 meters strolling by on the street with an Eddystone scanner/browser app can see your beacon and access your web site, facebook page, twitter flow or database of all the beer you have currently in store. This is a perfect way for people in a crowded city to get an overview of what is around them.

Other applications include providing information to travelers and tourists, hotel guests, visitors at museums, airports, hospitals, and so on. Industry applications can use beacons to track production, goods, spare parts, transports, etc.

After this introduction aimed to bring you up to speed on beacons, we dive right into the hands-on tutorial for creating an Eddystone mobile application in JavaScript.

What you need

Beacons

You need at least one Eddystone beacon to test the app with. Beacons can be purchased from vendors like Estimote, Kontakt.io, Radius Networks.

Or a Beacon Emulator

If you don’t have any beacons and want to get started right away, you can run an Eddystone emulator on your computer. Your computer must have support for Bluetooth Low Energy (BLE). There are several emulators around that send out Eddystone signals. One we recommend is node-eddystone-beacon (first install node.js to use this emulator).

Apache Cordova

To build the app you need the Cordova build system, which build tools installed for Android and/or iOS. Visit the Cordova documentation for how to get started. Also check out the Evothings Cordova Guide.

Step 1: Create a Cordova project

Once you have Cordova installed, create a new project with the following command:

cordova create myapp com.mydomain.myeddystoneapp Eddystone

This creates a Cordova project in the folder myapp, with the given app id, and the name “Eddystone”.

Step 2: Add the Eddystone plugin

Go into the app folder you’ve just created and add the plugin with these commands:

cd myappcordova plugin add cordova-plugin-eddystone

Step 3: Add platforms

Next add the mobile platform(s) you want to build for (iOS and/or Android):

cordova platform add ioscordova platform add android

Step 4: Copy sample application code

The Eddystone plugin comes with a sample application that displays detected beacons and their data. The code is contained in a single index.html file.

Go to the www directory in the Cordova project and open index.html in a text editor. Delete the contents of the file (so you get a blank document). Then copy and paste the code from the Eddystone example app, open the example code in raw format, which is easy to copy and paste.

Save index.html. Now we are ready to build and run the app.

Step 5: Build and Run

On iOS build the app with:

cordova build ios

Open the generated Xcode project in folder platform/ios and launch the app on an iOS device (the emulator won’t work, as it does not support BLE).

On Android, build with this command:

cordova build android

This generates an Android Studio project. One way to install the app on an Android phone is to use the adb command:

adb install -r platforms/android/build/outputs/apk/android-debug.apk

When running the app you should be able to see any nearby Eddystone beacons appear on the display!

Dive into the Code

A good starting point is to study the example code in index.html.

It is very easy to start scanning for beacons in JavaScript. Just call the startScan function:

evothings.eddystone.startScan(successCallback, errorCallback)

For example:

function successCallback(beacon){   console.log('Jippie, found a beacon: ' + beacon.name)   if (beacon.url)       console.log('  url: ' + beacon.url)}function errorCallback(error){    console.log('Darn, something went wrong: ' + error)}evothings.eddystone.startScan(successCallback, errorCallback)

Make sure to visit the plugin README file to learn more about the Eddystone JavaScript API.

Rapid Beacon App Development with Evothings Studio

This tutorial introduces the Evothings Eddystone plugin. In upcoming posts, we will show how to use Evothings Studio to develop Eddystone apps interactively, with a very quick turn around time.