Beacon in Ionic

Ionic Native
1

Hi to all. I’m trying to scan near beacons with my ionic’s app. Code is that:

import { Injectable } from '@angular/core';
import { Platform, Events } from 'ionic-angular';
import { IBeacon } from "@ionic-native/ibeacon";
import { Device } from '@ionic-native/device';

/**
 * Generated class for the BeaconPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
@Injectable()
export class BeaconProvider {

  delegate: any;
  region: any;

  constructor(public platform: Platform, public events: Events, public ibeacon: IBeacon, public device: Device) {
  }

  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
        this.ibeacon.requestAlwaysAuthorization();

        // create a new delegate and register it with the native layer
        this.delegate = this.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
        this.region = this.ibeacon.BeaconRegion('deskBeacon', this.device.uuid);

        // start ranging
        this.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;
  }

import { Component } from '@angular/core';
import { NavController, Platform, Events } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { AuthService } from './../../provider/auth-service';
import {RestServiceProvider} from "../../providers/rest-service/rest-service";
import {IBeacon} from "@ionic-native/ibeacon";
import  { NgZone } from "@angular/core";
import { BeaconProvider } from "../../provider/beacon-provider";
import { BeaconModel } from "../beacon/beacon-model";

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {

  username: any;
  email: any;
  isConnected: any;
  beacons: BeaconModel[] = [];
  zone: NgZone;

  constructor(public navCtrl: NavController, public platform: Platform, private auth: AuthService, public http: HttpClient, public restProvider: RestServiceProvider, private ibeacon: IBeacon, public beaconProvider: BeaconProvider, public events: Events) {

    this.username = this.auth.getUserInfo()["name"];
    this.email = this.auth.getUserInfo()["email"];
    this.http.get('https://projectkobe.herokuapp.com/issynchronized'+this.email+'').subscribe(data => {
      var str = JSON.stringify(data);
      this.isConnected = data["isConnected"];
      if(this.isConnected)
      {
        this.isConnected = "Si";
      }
      else {
        this.isConnected = "No";
      }
    });

    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);
        });

      });

    });
  }

}

<ion-header ng-app="App">
  <script src="js/ng-cordova-beacon.min.js"></script>
  <script src="beacon.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list no-lines>
    {{beacons}}
    <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>

Result is: blank.
this.beacon.delegate return a null value, so this.delegate.didRangeBeaconsInRegion() can’t be executed. I noticed that if I leave app open for a long time, it enter into this.delegate.didRangeBeaconsInRegion() but “didRangeBeaconsInRegion” isn’t fired. How I can resolve that?
Thanks to all.
N.B.: All permission are set

2

i think you are missing one } after return promise;

3

do u have beacon transmit/advertise code, too?