city not found
HomeDevelopmentGet Started with Location Beacons in Your Mobile App – Web Ascender

Get Started with Location Beacons in Your Mobile App – Web Ascender

Beacons are tiny actual physical units that broadcast wireless alerts to cell apps which can then respond appropriately. In shorter, your cell app will know when your mobile phone moves nearer to or even more away from a beacon that is caught on a wall (or anywhere else).

The time period “beacon” is usually utilised to refer to both equally the actual physical unit by itself as very well as the technologies regular and protocol that is utilised to communicate with them.

Beacons spelled out in 3 points

  1. Each and every beacon transmits tiny wireless alerts utilizing a Bluetooth Small Energy (BLE) radio.
  2. Smartphones are constantly scanning for these beacon alerts. If your mobile phone detects a close by sign it can launch an app on your mobile phone that responds appropriately.
  3. Apps can screen information suitable to your actual physical location, or update a screen on the wall. For illustration, when you stroll into a cafe your mobile phone could routinely screen the present consume specials. Or, if you stroll close to a product or service in a shop your mobile phone could induce a screen on the wall to exhibit you extra specific product or service information and facts.

A beacon future to an Apple iphone 5s

Help for beacon technologies is designed-in to both equally iOS and Android. The “iBeacon” identify was coined by Apple (but is also supported on Android) and Google is backing the “Eddystone” variation, but both equally are seriously just manufacturer names for the fundamental Bluetooth Small Energy (BLE) protocol utilised for conversation. There are complex dissimilarities involving iBeacon and Eddystone, but for the most element they work the exact same way and both equally can be supported in a one app.

Arms-On Example of Beacons

Let us make a brief iOS cell app that can “listen” for a beacon and screen essential information and facts like in/out of vary and approximate length from the beacon. These are the essential making blocks you’ll have to have to make a extra complete-highlighted cell app.

Here’s what it will appear like when we’re accomplished:
location beacons in mobile app

Our concluded demo app on iOS

If you’d like to obtain the concluded app, you can grab it from Github, usually, browse on!


  1. At minimum one Beacon. Estimote beacons are really common, and that is what we’ll be utilizing in this illustration.
  2. An iOS unit that supports Bluetooth 4. (Apple iphone 4S or later on, iPad third-gen or later on).
  3. Latest edition of Appcelerator Titanium SDK (five.five.one as of this composing) and Appcelerator Studio.
  4. Laptop computer with current edition of Mac OSX and Xcode installed

Create a new Titanium Alloy app

$ appc new -t titanium

Replace your index.xml with

Replace your index.tss with




width: Ti.UI.Dimension,

height: Ti.UI.Dimension,

shade: "#000"



fontSize: twelve


width: Ti.UI.FILL,

height: Ti.UI.Dimension,


fontSize: 11

Replace your index.js with

var TiBeacons = require('org.beuckman.tibeacons')

$.beaconLabel.textual content = "Beacon: " + Alloy.CFG.beacon.uuid + "nMajor: " + Alloy.CFG.beacon.major + "nMinor: " + Alloy.CFG.beacon.insignificant

$.label.textual content = "Flip the change to begin checking for the Beacon"

monitorStartTimestamp = null


function onEnterRegion(e) 

Ti.API.information('ENTER area: ' + JSON.stringify(e))



function onExitRegion(e) 

Ti.API.information('EXIT area: ' + JSON.stringify(e))



function onDeterminedRegionState(e) 

Ti.API.information('DETERMINED area: ' + JSON.stringify(e))

print("[RegionState] " + e.regionState)

function onBeaconRanges(e) 

Ti.API.information('RANGES: ' + JSON.stringify(e))

if(e.beacons && (e.beacons.size > )) 

print('[Variety] ' + e.beacons[].proximity)

function onBeaconProximity(e) 

Ti.API.information('PROXIMITY: ' + JSON.stringify(e))

print('[Proximity] ' + e.proximity + "(" + e.fromProximity + ", " + e.precision + ", " + e.rssi + ")")

function toggleMonitoring() 

if ($.monitoringSwitch.worth) 

monitorStartTimestamp = new Day()

print("Commence checking and ranging")


notifyEntryStateOnDisplay: "Sure",

uuid: Alloy.CFG.beacon.uuid,

major: Alloy.CFG.beacon.major,

insignificant: Alloy.CFG.beacon.insignificant,

identifier: "Estimote"



print("Quit checking and ranging")



function clearLog() 

$.label.textual content = ""

function print(s) 

var now = new Day()

var secondsPassed = ((now - monitorStartTimestamp) / one thousand)

var padding = "0000"

$.label.textual content = (padding + Math.round(secondsPassed)).slice(-padding.size) + "s " + (s + "n") + $.label.textual content

TiBeacons.addEventListener('bluetoothStatus', function(e)

Ti.API.information('bluetoothStatus = ' + JSON.stringify(e))


TiBeacons.addEventListener("enteredRegion", onEnterRegion)

TiBeacons.addEventListener("exitedRegion", onExitRegion)

TiBeacons.addEventListener("determinedRegionState", onDeterminedRegionState)

TiBeacons.addEventListener("beaconRanges", onBeaconRanges)

TiBeacons.addEventListener("beaconProximity", onBeaconProximity)



if (!Ti.Geolocation.locationServicesEnabled) 

alert('Please enable location services')

Update your config.json

For our demo we’ll only be worried with checking a one beacon. Edit your config.json file and enter the particulars of your beacon’s UUID, major and insignificant versions. If you’re utilizing Estimote beacons you can locate this information and facts utilizing the Estimote cell app, or by logging into your account at https://cloud.estimote.com.

"world wide": 


"uuid": "B9407F30-F5F8-466E-AFF9-25556B57FE6D",

"major": 61020,

"insignificant": 26147

Down load and put in the TiBeacons module into your titanim job

The TiBeacons module gives the bridge involving Titanium and the fundamental beacon framework in iOS.
Down load the ZIP and extract it into your project’s modules folder.

Update your tiapp.xml file

We have to have to insert a reference to the TiBeacons module:


We also have to have to insert a several points to allow our app to use location providers in iOS:





We use reduced-energy Bluetooth and iBeacons units to offer suitable information and facts to you.

Deploy to your iOS unit

You are going to have to have a serious unit to take a look at this app, considering that beacons cannot be examined utilizing the iOS simulator at the minute. This implies you’ll have to have a valid Apple Developer account, certification, and provisioning profile with your device’s UUID.

Assuming you have all the certs and profiles in buy, join your mobile phone and deploy the app utilizing Appcelerator Studio.

As you stroll around you need to see the display update frequently with the status of your beacon. It will exhibit enter/exit activities when you go in and out of vary of the beacon. As you go around you need to see the vary improve involving unidentified, significantly, close to, and rapid.

Notice: It can acquire up to 30 seconds for your mobile phone to realize that you are “out of range” of a beacon (and screen the “exit” occasion). This is because of to the beacon protocol by itself, and are unable to be adjusted. It’s accomplished this way to prevent false-positives (e.g. if the beacon sign is temporarily blocked but you are nonetheless in vary)

Even more Looking through

Estimote has a ton of wonderful information and facts on their web-site. You can also purchase beacons from them, obtain their SDKs, and browse extra about beacon technologies in normal and how it can be utilised.

Apple’s iBeacon

Google’s Eddystone (open beacon format)

Bluetooth reduced energy beacons (Wikipedia)

No comments

leave a comment