Detecting Eddystone™ beacons in JavaScript made easy – Evothings presents the Cordova Eddystone plugin

Mikael KindborgBlogs, Tutorials

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Eddystone LighthouseEddystone™ beacons are coming to Cordova land! It is easy to write mobile apps for Eddystone beacons with the new open-source Eddystone Cordova plugin created by Evothings.

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 made the Eddystone beacon standard public in Summer of 2015. The release was accompanied by announcements of Eddystone beacons from major beacon vendors like Estimote, Kontakt.io, Radius Networks.

estimote-beacons-group-smallIf you have not heard of beacons before, a beacon consists of a small computer chip with a Bluetooth radio transmitter that sends out data signals for up to between 30 and 100 meters. This tiny “lighthouse” (Eddystone is actually a proper lighthouse in south-west England) allows mobile phone users to detect and access information about what is present 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 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 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.

kontakt_ioFor example, as an owner of a shop or cafe, you can just 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 travellers 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 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.

rad_beacons


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 myapp
cordova 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 ios
cordova platform add android

Step 4: Copy sample application code

EddystonePluginDemoApp
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.

If you wish to take a sneak preview, download Evothings Studio 2.0 Alpha, install the Evothings Viewer app, and run the Eddystone Scan example that comes with the Studio download. It is fun and easy to get started!