Eddystone™ 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.
If 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.
For 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.
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
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!