Примечание редактора: статья, изначально написанная Джен Лупер для Telerik.
Идея создания готовых к использованию внутренних систем близости была мечтой многих стартапов в последнее время. Хотя спутниковый GPS прекрасно работает для позиционирования автомобиля на дороге, он не очень хорошо подходит для более точного позиционирования. Возможно, вы захотите найти место на заднем этаже здания, марку супа на полке в продуктовом магазине или даже один продукт в продаже на витрине. Найти масштабируемое техническое решение, которое предлагает «маяки» или «nearables» для розничных продавцов, оказалось сложной задачей. Например , ByteLight предлагает решение для объединения существующей инфраструктуры светодиодного освещения в помещении, Bluetooth и датчиков для точного определения местоположения покупателей в магазине и отправки им оповещений. Любой, кто совершал покупки в продуктовых магазинах Stop and Shop и пользовался сканером ScanIt , прыгалкогда вещь издает звуковой сигнал и мигает купоном, когда вы проходите мимо продукта, понимает силу датчиков этого типа. Я признаю, что предпочел делать покупки в магазине, который предлагает этот тип сканирующего устройства, чтобы быстрее пройти проверку.
Существуют доступные способы использования мощности маяков в качестве рекламного инструмента даже для небольших предприятий.
Маяки для остальной части нас
Для магазина или некоммерческой организации, которая не может позволить себе инвестировать в полный капитальный ремонт инфраструктуры, такой как Stop and Shop’s, есть еще способы использовать силу маяков. Представляем Estimotes!
Маяки Estimote — это небольшие устройства, которые предлагаются в двух комплектах по цене $ 99 за комплект. Эти маленькие маячки представляют собой небольшие резиновые устройства в форме камня с липкой подложкой, которые можно прикрепить к продукту, полке или стене. Скоро появятся наклейки с маяками, которые будут еще легче прикрепляться к небольшим участкам. Перспективы очень маленькие для этих маленьких машин… и они очень красивые!
У маяков Estimote есть несколько вариантов использования. Если у вас есть четыре маяка, вы можете разместить их в комнате и настроить мобильное приложение для локализации себя относительно маяков. Таким образом, один пользователь приложения может найти другого по их связи между устройством и маяками. Поскольку базовый комплект разработчика поставляется с тремя маяками, мы можем использовать их для упражнения на близость, которое показывает, насколько мы близки к реальному маяку с помощью мобильного телефона. Существует множество реальных вариантов использования этой функции, но в демонстрационных целях было бы интересно создать игровое приложение «горячая / холодная», чтобы показать, насколько близко или далеко ваше устройство от маяка. Вы даже можете создать действительно эпическую охоту на мусор для нескольких пользователей. В целях данного руководства я собираюсь продемонстрировать, как создать проект с более «гражданским хакером», приложение для публичной библиотеки.
Рынок плагинов на помощь!
До недавнего времени разработчик приложений мог использовать только маяки Estimote для написания нативного кода, поскольку на момент написания этой статьи не было REST API. К счастью, по состоянию на конец октября у нас есть готовый плагин Cordova, который ждет нас в использовании!
Для этого приложения, мы будем использовать два плагинов от Telerik в куратором рынке : в Estimote плагин и плагин сканера штрих — кодов . С помощью этих двух плагинов мы сможем поместить наш маяк в книгу, которую хочет представить библиотека. Найдя книгу, читатель библиотеки будет использовать сканер штрих-кода для сканирования номера ISBN книги и поиска дополнительной информации о нем. Давайте начнем!
Создать проект AppBuilder
Для начала создайте новый проект в AppBuilder, войдя в AppBuilder и нажав «создать новый проект». Это может быть пустой проект с интерфейсом с вкладками. С помощью всего лишь нескольких файлов мы собираемся создать интерфейс для интерфейса с двумя вкладками. Первая вкладка будет там, где приложение будет искать маяки, а вторая будет содержать кнопку для запуска сканера штрих-кода и ссылку, которая появится после сканирования штрих-кода, чтобы пользователь мог обнаружить книгу. Мы собираемся подключить приложение к простому поиску ISBN, но вы можете расширить приложение, включив более подробный поиск ISBN.
Создать пользовательский интерфейс
Добавьте два файла для двух вкладок в нашем интерфейсе:
- просмотров / beacons.html
- просмотров / scan.html
В файле маяков создайте простой макет с двумя кнопками:
<div data-role="view" data-title="Find Featured Books" data-layout="main" data-model="app.beaconService.viewModel">
<div class="rounded">
<div id="beaconlog">
Looking for beacons...
</div>
<div class="buttons">
<button data-role="button" class="button start" data-bind="click: start">Start Searching</button>
<button data-role="button" class="button stop" data-bind="click: stop">Stop Searching</button>
</div>
</div>
</div>
В scan.htmlсоздать только одну кнопку и пустой , divчто будет располагаться ссылка на книгу:
<div data-role="view" data-title="Scan an ISBN bar code" data-layout="main" data-model="app.beaconService.viewModel">
<div class="rounded">
You found a beacon! Now scan the ISBN bar code on the back cover to learn more about the featured book.
<div class="buttons">
<button class="button scan">Scan a Bar Code</button>
</div>
<div id="bookinfo">
</div>
</div>
</div>
Настроить index.html
В index.html, давайте добавим наши два вида к tabstrip:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/beacons.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!-- application views will be rendered here -->
<div data-role="footer">
<div data-role="tabstrip">
<a href="views/beacons.html"><div class="icon icon-target"></div>Beacons</a>
<a href="views/scan.html"><div class="icon icon-focus"></div>Scan</a>
</div>
</div>
</div>
</body>
</html>
В scripts/app.js, установите beacons.htmlв качестве начального вида:
app = new kendo.mobile.Application(document.body, {
// you can change the default transition (slide, zoom or fade)
transition: 'slide',
// comment out the following line to get a UI which matches the look
// and feel of the operating system
skin: 'flat',
// the application needs to know which view to load first
initial: 'views/beacons.html'
});
Заставить кнопки работать
Наконец, давайте добавим beacons.jsфайл в папку скриптов. Этот файл является «мозгом» приложения, который отвечает на ввод пользователя и использует плагин для сбора необходимой информации о расположении маяка:
// if a beacon is detected, we show the data received
function onBeaconsReceived(result) {
if (result.beacons && result.beacons.length > 0) {
var msg = "<b>I found " + result.beacons.length + " beacons! Find them and scan the ISBN codes of the books to which they are attached to learn more about them.</b><br/>";
for (var i=0; i<result.beacons.length; i++) {
var beacon = result.beacons[i];
if(beacon.distance > 0){
msg += "<br/>";
if (beacon.color !== undefined) {
msg += "There is a <b>" + beacon.color + "</b> beacon ";
}
msg += "within " + beacon.distance + " meters of this location.<br/>";
}
else{
msg += "...but it's too far to find. Try retracing your steps to find it.<br/>";
}
}
}
else {
var msg = "I haven't found a beacon just yet. Let's keep looking!"
}
document.getElementById('beaconlog').innerHTML = msg;
}
// watch for the beacon's signal
document.addEventListener('beaconsReceived', onBeaconsReceived, false);
(function (global) {
var BeaconViewModel,
app = global.app = global.app || {};
BeaconViewModel = kendo.data.ObservableObject.extend({
start: function () {
//note, we can't test custom plugins in simulator, so this code reminds us to test on device
if (!this.checkSimulator()) {
window.estimote.startRanging("Beacons");
}
},
//sometimes, we want the app to stop checking for beacons, which it otherwise does every second.
stop: function () {
if (!this.checkSimulator()) {
window.estimote.stopRanging();
}
},
//fired when the 'scan' button is pressed
scan: function () {
cordova.plugins.barcodeScanner.scan(
function (result) {
setTimeout(function() {
var url = 'http://www.lookupbyisbn.com/Search/Book/' + result.text + '/1';
var bookinfo = "<a href='#' onclick=window.open('" + url + "','_blank')>Learn more about this book</a>";
document.getElementById('bookinfo').innerHTML = bookinfo;
}, 0);
},
function (error) {
alert("Scanning failed: " + error);
}
)
},
//are we on sim?
checkSimulator: function() {
if (window.navigator.simulator === true) {
alert('This plugin is not available in the simulator.');
return true;
} else if (window.estimote === undefined) {
alert('Plugin not found. Maybe you are running in AppBuilder Companion app which currently does not support this plugin.');
return true;
} else {
return false;
}
}
});
app.beaconService = {
viewModel: new BeaconViewModel()
};
})(window);
Подключи плагины
AppBuilder позволяет легко добавлять плагины Cordova в любой проект. Чтобы добавить плагин, щелкните правой кнопкой мыши имя приложения на правой панели Project Navigator и выберите «Управление пакетами».
В появившемся окне перейдите на вкладку Marketplace Plugin Marketplace и выберите плагины Barcode Scanner и Estimote. Нажмите «Установить» на каждом, чтобы установить их.
Сделать его красивее
Недавно я начал использовать Coolors для создания красивых цветовых палитр для своих приложений, поэтому я выбрал одну и добавил несколько пользовательских CSS и иконок из icomoon . Имея всего 100 строк CSS, мы получаем приложение, которое выглядит действительно чистым:
body, html {
margin: 0;
height: 100%;
width: 100%;
}
/*custom overrides*/
.km-view-title,.km-footer{
background-color: #A2B03F;
}
.km-flat{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.km-flat .km-content{
background-color: #B7F2F6;
color: #302B2F;
}
.km-flat .km-tabstrip .km-state-active{
background-color: #DE4823;
}
.rounded{
border-radius:5px;
background-color:#FFFEF0;
margin:10px;
padding:10px;
}
.km-phone .km-tabstrip .km-icon{
display:none;
}
.km-flat .km-tabstrip .km-button{
font-size: 1em;
}
.start{
background-color: #A2B03F !important;
width:48%;
}
.scan{
background-color: #A2B03F !important;
width:100%;
margin-top:20px !important;
margin-bottom:20px !important;
}
.stop{
background-color: #DE4823 !important;
width:48%;
}
#beaconlog{
text-align: left;
width:100%;
border: 1px solid #DDD;
border-radius: 5px;
padding: 5px;
margin-bottom:10px;
color: #666;
}
#bookinfo{
text-align: left;
width:100%;
padding: 5px;
color: #666;
font-size:2em;
font-weight:bold;
text-align:center;
}
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?efunuv');
src:url('fonts/icomoon.eot?#iefixefunuv') format('embedded-opentype'),
url('fonts/icomoon.woff?efunuv') format('woff'),
url('fonts/icomoon.ttf?efunuv') format('truetype'),
url('fonts/icomoon.svg?efunuv#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-size: 3em;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1.5;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-focus:before {
content: "\e01b";
}
.icon-lightbulb:before {
content: "\e030";
}
.icon-target:before {
content: "\e04e";
}
Тестирование на устройстве
Теперь нам нужно развернуть наше приложение на реальном устройстве, чтобы протестировать плагин. Невозможно протестировать пользовательский плагин, такой как сканер Estimote или Barcode, в клиенте AppBuilder в браузере, в сопутствующем приложении или в интерфейсе командной строки — вам необходимо протестировать на реальном устройстве. Подготовка к сборке устройства может быть довольно сложной процедурой, особенно для iOS, где вам потребуется установить сертификат, подготовить устройство и выполнить локальную сборку, после чего AppBuilder сможет развернуть ваше приложение на подключенном устройстве.
Обратите внимание, что идентификатор приложения, который вы используете для своего профиля обеспечения, должен соответствовать идентификатору, который включен в кодовую базу. Дважды щелкните «свойства» в Навигаторе проекта и измените поле «Идентификатор приложения». Он должен выглядеть как «com.company.appname».
Пожалуйста, обратитесь к следующей документации, которая проведет вас через процесс на каждой ОС. Вам нужно будет выполнить эту настройку для вашего устройства, прежде чем продолжить.
После того, как вы завершили настройку, вы можете нажать «построить», и интерфейс проведет вас через установку приложения на подключенное устройство. Когда QR-код создается AppBuilder, вы можете просто использовать QR-ридер на своем устройстве, чтобы загрузить и установить только что созданное приложение.
Использование приложения
Конечно, вам понадобятся маяки Estimote, чтобы протестировать это приложение. Предполагая, что у вас есть, вы можете взять его и поместить в книгу в своей личной библиотеке. В приложении нажмите кнопку «Начать поиск» и идите к книге. Вы увидите, как расстояние между вами и маяком уменьшится.
Как только вы попадете в книгу, откройте вкладку «Сканирование». Нажмите кнопку «Сканировать» и отсканируйте штрих-код на обратной стороне книги, чтобы получить его ISBN.
Ссылка появится, как только сканер заберет штрих-код. Нажмите на ссылку для навигации по ISBN .
Продли демоверсию!
Полная кодовая база доступна для вас на GitHub . Пожалуйста, не стесняйтесь раскошелиться, разорвать его, получить несколько маяков, попробовать плагины, посмотреть, что вы можете создать, и рассказать нам об этом!