在您的 Ionic Framework 移动应用程序中支持 iBeacon

我最近挑选了一些 Estimote iBeacons 来玩，我想我会尝试让它们在 Ionic Framework Android 和 iOS 应用程序中工作。

如果您不熟悉 iBeacon，它们是小型蓝牙接近设备。有许多不同的制造商，但 Estimote 似乎拥有最好的宣传电池寿命和耐用性。 iBeacons 通常每 100 毫秒到 1000 毫秒广播一次信号，具体取决于配置或品牌。广播信号包含一个 UUID 和两个数字标识符，分别是主要版本和次要版本。

在开始编写代码之前，我将分享一些 iBeacon 的可能用例：

当您的设备检测到您靠近博物馆中的特定 iBeacon 时触发一些文字或音频。把一个放在意大利的大卫雕像附近，然后砰的一声，当你接近它时，你可以得到关于它的信息。
跟踪商店中的客流量。也许你有一家像沃尔玛这样的大型商店，每个部门都有 iBeacons。您可以看到哪个部门的流量最多。
根据设备到信标发现，计算游乐园中特定游乐设施的队列/线路的时间长度。

还有无数其他有用的场景。

好了，您对 iBeacons 有了更多的了解，现在是时候进入代码了。假设您已经在您的机器上配置了 Ionic，请从终端或命令提示符运行以下命令：


 ionic start IonicBeacon blank
cd IonicBeacon
ionic platform add ios
ionic platform add android

如果您使用的不是 Mac，请不要尝试为 iOS 平台添加和构建。只有 Android 可以在 Linux 和 Windows 机器上运行。

我们要用于 iBeacons 的插件是 Peter Metz 的 cordova-plugin-ibeacan 。在编写本教程时，我使用的是提交 50315dbc 的最新版本。如果您想冒险并查看更新版本是否有效，那取决于您。

使用 IonicBeacon 作为终端或命令提示符的工作目录，运行以下命令来安装插件：


 ionic start IonicBeacon blank
cd IonicBeacon
ionic platform add ios
ionic platform add android

我们几乎准备好开始编码了。 Peter Metz 的 iBeacon 插件是纯 JavaScript，开箱即用的 Ionic 效果不佳。相反，我们将使用我为这个插件编写的 AngularJS 包装器。包装器 ng-cordova-beacon 可以在我的 GitHub 页面上找到。从 dist 目录下载 ng-cordova-beacon.min.js 并将其放入项目的 www/js 目录中。

接下来，打开项目的 www/index.html 文件并在 app.js 行上方包含以下 JavaScript 文件：


 ionic start IonicBeacon blank
cd IonicBeacon
ionic platform add ios
ionic platform add android

包含 AngularJS 包装器后，打开项目的 www/js/app.js 文件并包含以下代码：


 ionic start IonicBeacon blank
cd IonicBeacon
ionic platform add ios
ionic platform add android

让我们分解这里发生的事情。


 ionic start IonicBeacon blank
cd IonicBeacon
ionic platform add ios
ionic platform add android

首先我们需要将 ng-cordova-beacon 注入 AngularJS 模块。添加后，我们可以继续在我们的控制器中使用它。

由于插件使用本机设备代码，我们需要在尝试使用它之前将对它的任何调用包装在 $ionicPlatform.ready 中。我们仅针对 iOS 请求使用定位服务的许可。在 Android 上，此请求将被忽略，因为它不是必需的。

在 $rootScope.$on 调用中，我们正在监听范围命中。基本上我们正在检查 iBeacon 是否在范围内以及它有多远。如果找到广播，将找到的信标添加到我们可以在前端视图上使用的对象。

最后，我们开始对一个信标区域进行测距。对于不同的集合，您可以根据需要多次调用它，但我只是针对一组信标进行测距。一组如下：


 ionic start IonicBeacon blank
cd IonicBeacon
ionic platform add ios
ionic platform add android

我选择使用 estimote 作为后面的 UUID 的人类可读标识符。您可以选择包括主要版本和次要版本，但如果将它们排除在外，您就是在使用通配符。每个 UUID 可以有多个 majors 和 minors，所以通过将它们关闭，您可能会得到很多结果。

最后要担心的是这个应用程序的外观。回到项目的 www/index.html 文件，在 <ion-content> 标签之间添加以下代码：


 ionic start IonicBeacon blank
cd IonicBeacon
ionic platform add ios
ionic platform add android

我使用的 Ionic 类不包含我们需要添加的名为 truncate 类。打开项目的 www/css/style.css 并添加以下内容：


 ionic start IonicBeacon blank
cd IonicBeacon
ionic platform add ios
ionic platform add android

我们正在使用它，所以我们很长的 UUID 值不会从屏幕上浮出水面。相反，如果它们太长，它们将被优雅地剪掉。

以上是应用程序检测到 iBeacon 时的样子。

结论

您可以使用 iBeacon 做很多很酷的事情，并且它们不难与 Ionic Framework 一起使用。您可以从 Estimote 获取开发者工具包，其中包括多个与 Android 和 iOS 兼容的信标。

可以在下面看到本文的视频版本。

在您的 Ionic Framework 移动应用程序中支持 iBeacon

结论

相关文章