Tag Archives: Beacons

Creating a Beacon application with Ionic

This is a very quick “get going with beacons and Ionic 2” post.

The code can be found in a github repository here.

First create an Ionic app:

ionic start –v2 beacon-starter blank

Now, from the newly created application directory add the cordova beacon plugin:

ionic plugin add cordova-plugin-ibeacon

Next, create a provider (beacon-provider.ts) in a providers folder:

import { Injectable } from ‘@angular/core’;
import { Platform, Events } from ‘ionic-angular’;
import { IBeacon } from ‘ionic-native’;
/*
Generated class for the BeaconProvider provider.

See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable()
export class BeaconProvider {

delegate: any;
region: any;

constructor(public platform: Platform, public events: Events) {
}

initialise(): any {
let promise = new Promise((resolve, reject) => {
// we need to be running on a device
if (this.platform.is(‘cordova’)) {

// Request permission to use location on iOS
IBeacon.requestAlwaysAuthorization();

// create a new delegate and register it with the native layer
this.delegate = IBeacon.Delegate();

// Subscribe to some of the delegate’s event handlers
this.delegate.didRangeBeaconsInRegion()
.subscribe(
data => {
this.events.publish(‘didRangeBeaconsInRegion’, data);
},
error => console.error()
);

// setup a beacon region – CHANGE THIS TO YOUR OWN UUID
this.region = IBeacon.BeaconRegion(‘deskBeacon’, ‘F7826DA6-4FA2-4E98-8024-BC5B71E0893E’);

// start ranging
IBeacon.startRangingBeaconsInRegion(this.region)
.then(
() => {
resolve(true);
},
error => {
console.error(‘Failed to begin monitoring: ‘, error);
resolve(false);
}
);
} else {
console.error(“This application needs to be running on a device”);
resolve(false);
}
});

return promise;
}
}

 

Now import this provider into app.module.ts and add it to the providers folder.  Your app.module.ts file should then look like this:

 

import { NgModule } from ‘@angular/core’;
import { IonicApp, IonicModule } from ‘ionic-angular’;
import { MyApp } from ‘./app.component’;
import { HomePage } from ‘../pages/home/home’;
import { BeaconProvider } from ‘../providers/beacon-provider’

@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [BeaconProvider]
})
export class AppModule { }

 

Next, create a model called beacon-module.ts in a models folder:

export class BeaconModel {

uuid: string;
major: number;
minor: number;
rssi: number;

constructor(public beacon: any) {
this.uuid = beacon.uuid;
this.major = beacon.major;
this.minor = beacon.minor;
this.rssi = beacon.rssi;
}
}

(we don’t really need a model for this app but creating one makes me feel more grown up)

Now change home.ts so it looks like this:

// core stuff
import { Component } from ‘@angular/core’;
import { NavController, Platform, Events } from ‘ionic-angular’;
import { NgZone } from “@angular/core”;

// plugins
import { IBeacon } from ‘ionic-native’;

// providers
import { BeaconProvider } from ‘../../providers/beacon-provider’

// models
import { BeaconModel } from ‘../../models/beacon-model’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

beacons: BeaconModel[] = [];
zone: any;

constructor(public navCtrl: NavController, public platform: Platform, public beaconProvider: BeaconProvider, public events: Events) {
// required for UI update
this.zone = new NgZone({ enableLongStackTrace: false });
}

ionViewDidLoad() {
this.platform.ready().then(() => {
this.beaconProvider.initialise().then((isInitialised) => {
if (isInitialised) {
this.listenToBeaconEvents();
}
});
});
}

listenToBeaconEvents() {
this.events.subscribe(‘didRangeBeaconsInRegion’, (data) => {

// update the UI with the beacon list
this.zone.run(() => {

this.beacons = [];

let beaconList = data.beacons;
beaconList.forEach((beacon) => {
let beaconObject = new BeaconModel(beacon);
this.beacons.push(beaconObject);
});

});

});
}

}

and change home.html so it looks like this:

<ion-header>
<ion-navbar>
<ion-title>
My Beacons
</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-list no-lines>

<ion-item *ngFor=”let beacon of beacons”>
<ion-grid>
<ion-row>
<ion-col>Major</ion-col>
<ion-col>{{beacon.major}}</ion-col>
</ion-row>
<ion-row>
<ion-col>Minor</ion-col>
<ion-col>{{beacon.minor}}</ion-col>
</ion-row>
<ion-row>
<ion-col>RSSI</ion-col>
<ion-col>{{beacon.rssi}}</ion-col>
</ion-row>
</ion-grid>
</ion-item>

</ion-list>
</ion-content>

That’s all there is to it.  You will need to change the UUID in the beacon provider to the UUID of your own beacons.   If you run the app it should detect your beacons and display a list of them on screen (showing major, minor and RSSI):

image1-1

 

Hopefully, that will get you started!  Good luck.

 


I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic but also with native development skills. Please visit www.crossplatformsolutions.co.uk for more information about me and how I may be able to help you with mobile application development, particularly with Ionic but also with other mobile frameworks and technologies.  Thanks for visiting.