Поддержка iBeacons в вашем мобильном приложении Ionic Framework

Если вы не используете Mac, не пытайтесь добавлять и собирать для платформы iOS. Только Android будет работать на компьютерах с Linux и Windows.

Плагин, который мы собираемся использовать для iBeacons — это  cordova-plugin-ibeacan  от Питера Метца. На момент написания этого руководства я использовал последнюю версию commit  50315dbc . Если вы хотите быть авантюрным и посмотреть, работает ли более новая версия, это ваше дело.

С  IonicBeacon  в качестве рабочего каталога вашего терминала или командной строки, запустите следующее, чтобы установить плагин:

cordova plugin add https://github.com/petermetz/cordova-plugin-ibeacon.git

Мы почти готовы начать кодирование. Плагин iBeacon от Peter Metz представляет собой простой JavaScript и не очень хорошо работает с Ionic из коробки. Вместо этого мы собираемся использовать оболочку AngularJS, которую я написал для этого плагина. Обертка  нг-Cordova-маяк  можно найти на моей странице GitHub. Загрузите  файл ng-cordova-beacon.min.js  из  каталога dist и поместите его в  каталог вашего проекта  www / js  .

Затем откройте файл вашего проекта  www / index.html  и включите следующий файл JavaScript над  строкой app.js  :

<script src="js/ng-cordova-beacon.min.js"></script>

С включенной оболочкой AngularJS откройте файл вашего проекта  www / js / app.js  и включите следующий код:

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

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller("ExampleController", function($scope, $rootScope, $ionicPlatform, $cordovaBeacon) {

    $scope.beacons = {};

    $ionicPlatform.ready(function() {

        $cordovaBeacon.requestWhenInUseAuthorization();

        $rootScope.$on("$cordovaBeacon:didRangeBeaconsInRegion", function(event, pluginResult) {
            var uniqueBeaconKey;
            for(var i = 0; i < pluginResult.beacons.length; i++) {
                uniqueBeaconKey = pluginResult.beacons[i].uuid + ":" + pluginResult.beacons[i].major + ":" + pluginResult.beacons[i].minor;
                $scope.beacons[uniqueBeaconKey] = pluginResult.beacons[i];
            }
            $scope.$apply();
        });

        $cordovaBeacon.startRangingBeaconsInRegion($cordovaBeacon.createBeaconRegion("estimote", "b9407f30-f5f8-466e-aff9-25556b57fe6d"));

    });
});

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

$cordovaBeacon.createBeaconRegion("estimote", "b9407f30-f5f8-466e-aff9-25556b57fe6d")

<ion-content ng-controller="ExampleController">
    <div class="list">
        <div class="item" ng-repeat="(key, value) in beacons">
            <div class="row">
                <div class="col truncate">
                    {{value.uuid}}
                </div>
            </div>
            <div class="row">
                <div class="col">
                    major: {{value.major}}
                </div>
                <div class="col">
                    minor: {{value.minor}}
                </div>
            </div>
            <div class="row">
                <div class="col">
                    {{value.proximity}}
                </div>
            </div>
        </div>
    </div>
</ion-content>

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}