Bluetooth Beacon Enabled Apps with BlueCats and PhoneGap

BLE beacons are the sort of technology that makes me excited to be a developer today. Not only are there so many possibilities, it is available for any developer to start developing for right now. Not a pre-order, not a still-in-development product, not a Kickstarter... Bluetooth beacons are already out there being used! In this article, we'll explore how you can get started with BLE Beacons pairing the BlueCats beacon Cloud Platform and API with PhoneGap.

What are BLE Beacons?

BLE stands for Bluetooth Low Energy and refers to the Bluetooth wireless network technology that has been designed to work with a much lower power consumption and much lower cost. These two factors alone have made it perfect for a range of new connected devices, including wearables, smart home automation and of most interest to us in this article - beacons.

Beacons are Bluetooth devices that can be placed almost anywhere to provide tracking of a user's location in that space. They can be throughout a building, on a billboard, inside a vehicle... almost anywhere that could benefit from knowing where your users are. Examples of the potential use in a smartphone app include:

• A museum tour mobile app that can tell where each user is within the museum and provide them relevant content.
• Interactive billboards that change or move around when users with an app are nearby!
• A smart phone automation system that knows which room you are in and runs certain things accordingly.

How do BlueCats Beacons fit in?

BlueCats beacons are BLE Beacons that come with an easily accessible API (available on Android, iOS and PhoneGap) and a cloud platform to manage them. A few weeks ago, I had the pleasure of meeting a few of the guys working on BlueCats beacons and the conversation with them had me itching to try it out! I honestly couldn't believe how ready the technology was to be implemented.

The Demo

I gave the BlueCats beacons a go, putting together a simple PhoneGap prototype that used their API to inject some location based functionality. I built a prototype countdown timer designed to remind computer addicted souls such as myself to get up every 30 minutes from the computer and move around.

Unlike regular countdown timers, this one uses the power of BlueCats beacons to know whether you've actually gotten up and moved to another room. Once the timer goes off, the user must get up and walk to another room with a specific beacon in order to reset the timer. As an added bonus, once they return to their computer a USB beacon recognises that they've returned and automatically restarts the timer for them.

Preparing Our PhoneGap App

To get started, lets prepare our demo PhoneGap app using the usual PhoneGap commands. If you don't already have PhoneGap, install it via this npm command:

[code language="js"] sudo npm install -g phonegap [/code]

Then we'll create our baseline app for this demo. I've called it "BreakEnforcer" but you can call it whatever you desire. When we run the below command, PhoneGap will set up all our basics.

[code language="js"] phonegap create BreakEnforcer [/code]

Prepare Our BlueCats App

If you're new to BlueCats and are looking for a good way to get started, this demo uses BlueCats beacons from the BlueCats StarterPack.

To get started with the BlueCats platform, you'll have to set up a BlueCats account. You can register the StarterPack at the BlueCats StarterPack Setup page.

Once your account is set up, go to the BlueCats Dashboard and log in.

From here, you'll see a dashboard that looks a bit like this:

Click the "Apps" link on the left hand side to go to the Apps dashboard and then click "Create New App".

Here, we can enter in our app's details. I named my app "Break Enforcer".

Choose the platform you'll be testing your app on. I chose Android as that's what I'll be testing everything on. However, because we are using Phonegap it should be simple enough to recreate the app for the others later on with ease. Then click "Create App".

Adding Our BlueCats App Into PhoneGap

BlueCats have a PhoneGap plugin we'll be using to bring in all our BlueCats beacon functionality. To include it in our PhoneGap application, run the following command within the BreakEnforcer directory (or whatever you called your app):

[code language="js"] phonegap plugin add http://ift.tt/1MCd2uv [/code]

If you go to the plugins folder of your PhoneGap app, you'll find a com.bluecats.beacons folder with our BlueCats functionality.

Our Code

All code for this demo is available on GitHub for you to view and adapt to your own beacon creations! I'll explain the main areas of the code and how they work.

Note: all of our code here is enclosed neatly within the app namespace, so when calling functions and such, you'll need to keep this in mind.

All of our code begins with an initialize() function. It runs two functions, bindEvents() and initCountdownTimer(). bindEvents() sets in motion our beacon functionality, whilst initCountdownTimer() focuses on our timer functions.

[code language="js"] initialize: function() { this.bindEvents(); this.initCountdownTimer(); }, [/code]

I've kept these relatively separate, so if you're using this as a baseline for a totally different app it shouldn't be too hard to swap out the timer bits for your own.

Our Beacon Functions

For the beacon functionality, we'll be using a very similar structure to the sample plugins/com.bluecats.beacons/Samples/HelloBeacons/index.js file you'll find in your BlueCats plugin folder. Their set up is quite clean and I thought it best to remain consistent! Our example is a little bit more streamlined as we won't be using all of the features in the sample app. We will be focused on keeping track of when we reach beacons. It is also possible to track when we move away from them or determine which beacon is closest to us - our app won't be worrying about these.

Back to the code! Within bindEvents(), we set up our event listener that listens for when our phone/tablet device is ready. We track this via the deviceready event.

[code language="js"] document.addEventListener('deviceready', this.onDeviceReady, false); [/code]

On deviceready, we run two beacon related functions. We'll explore each below.

[code language="js"] onDeviceReady: function() { app.receivedEvent('received'); app.watchBeacons(); }, [/code]

The receivedEvent() function is one that responds to three different beacon related events. It looks like so:

[code language="js"] receivedEvent: function(event) { var parentElement = document.getElementById('deviceready'), listeningElement = parentElement.querySelector('.listening'), receivedElement = parentElement.querySelector('.received'); listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;'); if (event == 'apptokenrequired') { receivedElement.innerHTML = 'App token not set' } else if (event == 'bluecatspurring') { // We are on the look out for beacons receivedElement.setAttribute('style', 'display:none;'); }; console.log('Received Event: ' + event); }, [/code]

Initially, it picks up our two message elements, .listening and .received. Then it hides the .listening element and our three event types come into play:

• 'received' - Whilst our receivedEvent() code doesn't directly refer to this event string, when we send it through initially it makes our .received element in our app visible. This is the element which says "Device is ready" by default.
• 'apptokenrequired' - This switches our .received element to say "App token not set".
• 'bluecatspurring' - This is passed in when our app is readily looking for beacons. When it does this, we clear the message so our beacon watching is done subtly.

Continue reading %Bluetooth Beacon Enabled Apps with BlueCats and PhoneGap%

by Patrick Catanzariti via SitePoint