Using Beacons in a Mobile App - IoT Nearables

Getting up close and personal with
IoT Nearables
Jen Looper

Jen Looper
Developer Advocate, Telerik
http://www.ladeezfirstmedia.com
@jenlooper

Except much more precise: indoor location FTW
Use several beacons to triangulate your location in a room

Beacons might feature:
• A bit of memory
• Accelerometer
• Temperature sensor
• Bluetooth (Smart, or BLE)
• Long-lived battery
• Gecko-style sticky backing

Bluetooth signal
• Beacons broadcast using bluetooth
• Find them between two inches and 230 feet distance
• Invisible underwater

Your phone picks up a signal (“advertising packet”) and your app
processes it
• Estimates distance
• Places phone in a context
• Measures signal strength
• Can ping 10x/second

Beacons have a unique Id
Associate this id with a product or a
call to action

And moar!
• Micro-location
• Geofence users
• Detect context changes
• Proximity marketing
• Turn-by-turn navigation

Not just for selling stuff
Kontakt.io use cases include:
• Public beacons for use by the blind
• Beacons for music festivals (Bonnaroo) to ‘heat map’ areas of
the festival and create ‘retrospective itinerary’ as a festival
souvenir for the users
• Restaurant interactions – check in, get free appetizers, etc
• Allow businesses to pay for patron parking fees in a movable
parking meter system
• ‘beaconizing’ SFO airport by offering voice-routing to visually-
empaired passengers
• Beacons in Africa – track and manage outbreaks
• Culture and tourism***

Museums!! Check out the Metropolitan
Museum’s ‘Beacon Walk’
http://bit.ly/met-museum-beacon
Uses Estimotes
with Beacondo
service

What about iBeacon?
iBeacon is a protocol created by Apple, for iOS 7 and 8 devices
Many hardware beacons leverage iBeacon technology

What types of hardware beacons are available now?
• DIY – Bluetooth dongle can be turned into a beacon
• Facebook Bluetooth Beacons
• Estimote beacons
• Kontakt.io beacons

Hacking the CES scavenger hunt
http://bit.ly/ces-hack

Estimotes have beefed up security
Manage your beacons’ UUIDs

A look at Estimote’s offering
Beacons and Stickers, $99 per pack, SDK + Cloud

A Civic Project - BookBeacon
Requirements:
• Create a mobile app for a public library
• Library will hide a beacon in the stacks, near a book with an ISBN
code
• Mobile app will help users find the beacon and, when found, open
barcode scanner to scan ISBN
• ISBN is used with an API to get more info about the book

Full tutorial:
http://bit.ly/beacons-appbuilder
Github repo:
https://github.com/jlooper/estimote-kendo

Create a mobile app – Telerik AppBuilder + Kendo UI Mobile
Create a hybrid mobile app project in Telerik Platform (http://platform.telerik.com)

Two views – manage beacons, scan books
/views/beacons.html
/views/scan.html

Two buttons in beacons.html: start and stop scanning for beacons
<div data-role="view" data-title="Find Featured Books" data-layout="main" data-
model="app.beaconService.viewModel">
<div class="rounded">
<div id="beaconlog">
Looking for beacons...
</div>
<div class="buttons">
<button data-role="button" class="button start" data-bind="click: start">Start
Searching</button>
<button data-role="button" class="button stop" data-bind="click: stop">Stop
Searching</button>
</div>
</div>
</div>

One button and one link in scan.html
<div data-role="view" data-title="Scan an ISBN bar code" data-layout="main" data-
model="app.beaconService.viewModel">
<div class="rounded">
You found a beacon! Now scan the ISBN bar code on the back cover to learn
more about the featured book.
<div class="buttons">
<button class="button scan">Scan a Bar Code</button>
</div>
<div id="bookinfo”></div>
</div>
</div>

Wire up the beacon scanning procedure
function onBeaconsReceived(result) {
if (result.beacons && result.beacons.length > 0) {
var msg = "<b>I found " + result.beacons.length + " beacons! Find
them and scan the ISBN codes of the books to which they are
attached to learn more about them.</b><br/>";
for (var i=0; i<result.beacons.length; i++) {
var beacon = result.beacons[i];
if(beacon.distance > 0){
msg += "<br/>";
if (beacon.color !== undefined) {
msg += "There is a <b>" + beacon.color + "</b> beacon ";
}
…

Plug in the plugins!
Use two plugins from http://plugins.telerik.com - curated Cordova plugins marketplace:
Estimote and BarcodeScanner

Integrating Barcode Scan plugin
scan: function () {
cordova.plugins.barcodeScanner.scan(
function (result) {
setTimeout(function() {
var url = 'http://www.lookupbyisbn.com/Search/Book/' + result.text
+ '/1';
var bookinfo = "<a href='#' onclick=window.open('" + url +
"','_blank')>Learn more about this book</a>";
document.getElementById('bookinfo').innerHTML = bookinfo;
}, 0);
},
function (error) {
alert("Scanning failed: " + error);
}
)
},

Let’s build something else: Beacon Hunt

Full tutorial:
http://bit.ly/beacon-hunt
Github repo:
https://github.com/jlooper/beacon-hunt.git

Estimote Beacons + Plugin + AppBuilder + Telerik Backend
Services = fun app!

Beacon Hunt Requirements:
• Allow an administrator or host to create a Beacon Hunt by creating a 6-digit PIN unique to that hunt
• Enable sending this PIN to users of the app via email
• Allow invitees to the hunt to input the PIN and subscribe to a push notification channel unique to the hunt
• On push of ‘start’ button, app starts pinging for beacons
• If beacon is found, appropriately colored button is generated, and when pressed, a push notification is sent
to the members of the hunt that this color beacon has been found (“claimed”).

Building the app – Step 1 - Setup
Using Telerik Platform makes it easy
Create an account at
platform.telerik.com and create an
app

Building the app – Step 2 – Scaffold
Scaffold a basic Kendo UI Mobile app
Create a hybrid project using a blank
JavaScript template

Building the app – (quick ‘n’ dirty)
Scaffold your app using code from github
https://github.com/jlooper/beacon-hunt.git

Building the app – Step 3 – Build ‘host’ screen
A 6 digit PIN will reserve your hunt ID.
Use Telerik Backend Services to store
it.
Add Backend
Services to your
project to store data

Build Data tier for ‘host’ screen
Add push notifications and cloud data
to your app project’s backend
configuration
Create a ‘content type’ to store
HuntPINs so they will remain unique for
use as push segments

Configure push notifications
Manage your app
provisioning (takes time to
do on iOS especially!)
Keep track of push stats in
the backend

Build the app – Step 4 – Plugins!!
Plugins.telerik.com

Integrate 3 plugins:
Install Custom plugins from the Plugin
marketplace in-browser

Build the app – Step 5 – Participant screen
Type the PIN, subscribe to a push segment,
start searching, claim a beacon, send push

Build the app – Step 5 – Participant screen
Your Hunt is geofenced according to the segment you are subscribed to, per your hunt PIN which is
stored in localStorage:
var customDeviceParameters = {
"Hunt":localStorage.getItem('registeredHunt')
};
…
currentDevice.register(customDeviceParameters)
.then(function (regData) {
model._onDeviceIsSuccessfullyRegistered();
}, function (err) {
model._onPushErrorOccurred(err.message);
});

Push to a segment
Anyone signed
into the GalHnt
segment
received this
push
The user claimed
the ‘ice’ color
beacon

Beacons are awesome.
What will you build?

Did you download Beacon Hunt? Ready to hunt for beacons?

Thanks!
Jen Looper
Developer Advocate, Telerik
http://www.ladeezfirstmedia.com
@jenlooper

Using Beacons in a Mobile App - IoT Nearables

More Related Content

Similar to Using Beacons in a Mobile App - IoT Nearables (20)

More from Jen Looper (20)

Recently uploaded (20)

Using Beacons in a Mobile App - IoT Nearables