Wellness First: an inside look at Beacon technology

“Just like lighthouses have helped sailors navigate the world for thousands of years, electronic beacons can be used to provide precise location and contextual cues within apps to help you navigate the world.” (The Google Beacons development team)

What I find thrilling about beacons is that in their simplest sense they are unaware of themselves or any devices around them and we – humans – are not aware of them. So how is possible that these tiny transmitters are being used to help people in their daily lives? According to reports, 5 million beacons attached to the walls around the world are used to offer great help to people with regard to an array of things like travel, shopping, parking, entertainment, transportation, inventory management, assets tracking, indoor navigation  and at last but not least in the healthcare space through more efficient processes and improved patient-care.

Wellness First is a fictitious gym that utilizes beacons to improve the customer experience. In this post we’ll take a close look at the Ionic Framework Mobile App I’ve built that uses Estimote beacons to target a customer located near the room where a Yoga class  is just about to start and offers an unbeatable discount.

capture

What are beacons?

For those who are not familiar with Beacons, a Beacon is a small device that transmits a signal using Bluetooth low energy. They are generally low-cost, battery-powered and used to transmit a signal that can be picked up by nearby smart devices to provide timely, contextual information. Beacon signal range can vary from two to 80 meters, dependent on obstructions, settings and battery power. Many manufacturers today offer beacons that now contain memory, additional sensors such as temperature and motion, and cloud-connecting capabilities.

Estimote iBeacons

I’ve used Estimote iBeacons to play around with. They are compatible with iBeacon which is a communication protocol developed by Apple on top of Bluetooth Smart technology. It allows developers to create mobile apps aware of location context provided by beacons. Every beacon is identified by a 20 bytes long ID divided into three sections:

  • UUID (16 bytes)
  • major number (2 bytes)
  • minor number (2 bytes)

Those values are hierarchical. UUID, major, and minor values of particular beacons can be changed.

All Estimote Beacons have a default UUID:
B9407F30-F5F8-466E-AFF9-25556B57FE6D

Estimote Beacons have an amazing feature called “Flip to Sleep” sensor (enabled through the iOS management app) that allows to mute a beacon by placing it upside down and resume broadcasting simply by flipping the beacon back. This is how I could simulate enter / exit region events in the app.

capture2

Why do I need an app?

Estimote Beacons only broadcast their iBeacon ID. Beacons do not connect to the Internet themselves. The app also doesn’t need connectivity to be triggered by a beacon, in fact Wellness First doesn’t connect to the Internet at all. Having said that in real scenarios you can store iBeacon IDs in the cloud for enhancing your location-aware app with all sorts of features including dynamic, personal content.

.   capture3

Wellness First App

All right so you know a bit more about iBeacons, now it is time to get into the app.

As I explain the use case I’ll also walk you through the screens. The first screen is obviously the login screen that allows the user to authenticate and the app to deliver more personalized content/recommendations based on the user profile.

Now let’s assume Alessia has just joined Wellness First. She’s at the gym and when passing by the Yoga studio her Apple watch receives a signal from the beacon attached to the wall. Yoga is just about to start and she can attend for just 20 credits given it’s a last minute discounted offer.

capture5

She’s excited about something different and signs-up in one click. She’s ready to start!

capture6

capture7

Alessia has finished her first Hot Yoga class and is about to head off. As she exits the beacon region a pop-up shows up, Alessia can rate her experience that will be used to improve customers’ experience at Wellness First.

capture9

A look into the code

To begin with, we’ll create a new Ionic Framework Project and then install cordova-plugin-ibeacon for iBeacons developed by Peter Metz and the Angular JS wrapper Nic Raboy wrote for this plugin. After adding the AngularJS wrapper to the Ionic project’s www/index.html file

 http://js/ng-cordova-beacon.js

we have to edit app.js to include the wrapper

angular.module('starter', ['ionic', 'ngCordovaBeacon'])

Since the plugin uses native device code we need to wrap any calls to it in an $ionicPlatform.ready before we try to use it.  For iOS only we are requesting permission to use location services.  On Android this request will be ignored because it isn’t necessary.

 $cordovaBeacon.requestWhenInUseAuthorization();

The code below checks if there are any iBeacons is in range and how far they are.  If the broadcast is found, add the found beacon to an object and if the beacon found is HOT_YOGA then we need to broadcast the event to homeController (for the scope of this demo the notification appears only in the home screen).

code2

Below ‘hotYoga’ is the state that represents hotYoga.template (the view we want to redirect the user to when he clicks ‘Yeah’ on the pop-up)

 function broadcastBeacon(beaconID){
    if(beaconID == HOT_YOGA){
      var beaconInfo = {};
       console.info("Broadcasting HotYogaBeacon");
       beaconInfo["name"] = 'Hot Yoga Now!';
       beaconInfo["targetState"] = 'hotYoga';
       beaconInfo["message"] = 'Time to work up a sweat with our pick of the best hot yoga. Use just 20 credits for this last minute offer!!';
       $rootScope.$broadcast('beacon-found', beaconInfo);
    }
 }

Don’t forget to add homeCtrl to your controllers.js to handle the broadcast event from the beacons.

.controller('homeCtrl', ['$scope', '$rootScope', '$ionicPlatform', '$ionicPopup', '$state', '$cordovaVibration',
 function($scope, $rootScope, $ionicPlatform, $ionicPopup, $state, $cordovaVibration) {

 // Handle the broadcast event from the beacons
 $scope.$on('beacon-found', function(event, args) {
 
 var beaconNavDialog = $ionicPopup.confirm({
      title : args.name,
      template : args.message,
      cancelText : 'Not Now',
      okText : 'Yeah!'
 });

beaconNavDialog.then(function(res) {
  if (res) {
     $state.go(args.targetState);
  } else {
    // Otherwise, do nothing.
  return;
 }
 });
 });

}])

Because we want to be able to intercept when the user exits the beacon region the code below verifies if HOT_YOGA beacon exists in the list of the beacons previously found but it’s not in range anymore.

code6

Remember! The easiest way to test your app and conditional broadcasting is to enable “Flip to Sleep” mode of your Estimote Beacon through the Estimote Native app.Mute a beacon by placing it upside down and resume broadcasting simply by flipping the beacon back! It’s that easy!

capture10

Future Developments

A very valuable feedback came by one of the contributors of this blog who pointed out that one of the most interesting aspects of this app is the hint at gamification (‘use 20 credits to take a yoga class’). If the app could leverage a system by which people can earn credits for some sort of fitness related behavior (Come to the gym three days in a row to earn 10 points) as well as purchasing credits which can be exchanged for classes, then the app would benefit of a fitness tracker that makes the use of beacons even more solid.

Thanks for reading, until next post!

One thought on “Wellness First: an inside look at Beacon technology”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s