Управление миром с поддержкой Bluetooth из Интернета

Краткое введение

Web Bluetooth - это новая технология, которая соединяет Интернет с Интернетом вещей. Интернет-соединение Bluetooth настолько ново, что его все еще создают и создают прототипы! Но, конечно, это не значит, что мы не можем с этим играть ...

По сути, Web Bluetooth позволяет вам управлять любым устройством Bluetooth с низким энергопотреблением (умной бытовой техникой, аксессуарами для здоровья, такими как пульсометры или мониторы глюкозы, датчики температуры и т. Д.) Прямо с вашего ПК или смартфона без предварительной установки приложения.

Web Bluetooth в конечном итоге позволит разработчикам создать одно решение, которое будет работать на всех платформах, включая мобильные и настольные, что означает снижение затрат на разработку, больше интерфейсов управления с открытым исходным кодом для различных физических продуктов и больше инноваций.

В этом посте я объясню основы веб-Bluetooth, создав демонстрационное веб-приложение, которое управляет интеллектуальной лампочкой, которую я изменил, разработанную в предыдущем посте. Кроме того, я расскажу, как вы можете расширить это приложение до прогрессивного веб-приложения. Это новый захватывающий подход, о котором мы поговорим позже в этой статье.

Я предполагаю, что для этого урока вы уже знакомы с такими терминами Bluetooth Low Energy, как периферийные устройства, услуги и характеристики. Если нет, ознакомьтесь с предыдущим постом, чтобы узнать о них.

Вы можете подумать: «Но, Ури, мы уже можем отправлять команды на лампочку, и разве к лампочке еще не прилагается приложение?» Что ж, оно поставляется с приложением, но включает ли это приложение голосовое управление?

(Это не так, и я собираюсь показать вам, как вы можете создать такой, который работает.)

Если вы нетерпеливы, вы можете увидеть код здесь или попробовать онлайн-демонстрацию (см. Следующий раздел о поддерживаемых браузерах / платформах). Если вам нужна дополнительная информация о Web Bluetooth, ознакомьтесь с этой статьей для разработчиков Google.

Могу ли я использовать Интернет через Bluetooth?

По состоянию на ноябрь 2018 года Web Bluetooth работает в Chrome для Android 6+, Windows 10, Mac OS X, Linux и Chrome OS. Однако все быстро меняется, поэтому было бы неплохо периодически проверять страницу состояния реализации.

В этой демонстрации я буду использовать Chrome для создания своего веб-приложения. Он должен работать из коробки на большинстве платформ (Linux может потребовать дополнительной настройки).

Веб-интерфейс Bluetooth API

API предоставляется в пространстве имен navigator.bluetooth JavaScript. Основано ли оно на обещаниях, поэтому сначала убедитесь, что вы с ними знакомы.

Чтобы использовать Web Bluetooth, ваш сайт должен обслуживаться через безопасное соединение (HTTPS). Защищенный веб-сайт становится требованием для растущего числа новых веб-API, и его довольно легко настроить. Один из способов (который я использую здесь) - это использование хостинга GitHub, также известного как gh-pages.

Создание веб-приложения Bluetooth

Это последовательность действий, которая будет общей для всех веб-приложений Bluetooth. Прежде чем увидеть код, давайте сначала посмотрим на последовательность:

  1. Найдите соответствующее устройство
  2. Подключитесь к нему
  3. Получите услугу, которая вас интересует
  4. Получите интересующую характеристику
  5. Прочтите, напишите или подпишитесь на характеристику

Теперь пример кода - подключитесь к умной лампочке, а затем напишите в нее:

Этот код сканирует устройство с сервисным номером ffe5, затем запрашивает эту услугу, запрашивает характеристический номер ffe9 и, наконец, записывает четыре байта: bb 25 05 44, который представляет собой команду для лампочки медленно переходить между всеми цветами радуги и белым, как я объяснил в предыдущем посте.

Теперь, как его запустить: есть несколько способов сделать это, но все они немного сложны. Вы можете вставить приведенный выше код в консоль Chrome после включения флажка Web Bluetooth, но это работает только в поддерживаемых операционных системах (например, Mac с Chrome 53, Linux или Chrome OS).

Если у вас есть устройство Android 6, вы можете включить режим разработки, подключить его к ПК с помощью USB-кабеля, а затем в Chrome на ПК перейти по следующему URL-адресу: chrome: // inspect. Это откроет консоль Chrome, которая будет подключена к устройству Android - именно так я обычно делаю это на своем компьютере с Windows. Вот страница, на которой шаг за шагом объясняется этот последний метод.

Вы можете ознакомиться с кодом демонстрационного приложения, которое управляет лампочкой, в этом примере здесь. Приведенный выше код находится в функции connect ().

Исправление проблем

Если устройства не отображаются, убедитесь, что:

  1. Включены и Bluetooth, и службы определения местоположения. На Android 6 для поиска устройств BLE требуются как Bluetooth, так и доступ к местоположению.
  2. Никакое другое приложение не подключено к целевому устройству. Устройства BLE перестают рекламировать свои услуги после того, как к ним подключится какое-либо приложение.
  3. Если вы по-прежнему не видите никаких устройств, попробуйте перезапустить Chrome, выключить и снова включить Bluetooth или перезагрузить устройство.

Другой пример вы можете найти в документе со стандартной спецификацией Web Bluetooth. В этом примере показано, как подключиться к устройству монитора сердечного ритма, прочитать характеристику местоположения службы (которая сообщает вам, где расположен датчик - какая часть тела) и подписаться на уведомления из характеристики сердечного ритма, что означает, что вы будете получать событие всякий раз, когда прибор выполняет новое измерение. Если вы хотите увидеть рабочий пример, посмотрите эту демонстрацию на GitHub.

Взаимодействие с Интернетом вещей: изменение цвета лампы

Мы видели код, который подключается к лампочке и отправляет ей команды, поэтому давайте теперь создадим функцию, которая устанавливает цвет по значениям красного, зеленого и синего:

Обратите внимание, что функция предполагает, что мы сохранили ссылку на объект характеристики, полученный на предыдущем шаге, в глобальной переменной с именем ledCharacteristic.

Мы можем подключиться к устройству, и теперь у нас есть функция, с помощью которой можно изменить его цвет. Как обсуждалось в последнем посте, значения компонентов цвета определены как значения RGB от 0 до 255. Например, чтобы установить фиолетовый цвет, мы должны использовать:

setColor(255, 0, 255);

Теперь, когда у нас есть наша основная функция, мы можем добавить кнопки для различных цветовых предустановок или создать полнофункциональную палитру цветов, позволяющую пользователю устанавливать любой цвет, который он желает. Или мы также можем ...

Добавьте голосовое управление!

Поскольку у нас есть базовая функциональность приложения, давайте сделаем его более интересным, добавив голосовое управление. Это будет использовать Web Speech API. Я возьму ярлык и воспользуюсь крошечной библиотекой JavaScript под названием annyang, которая обеспечивает более простой интерфейс для Speech API.

Использовать библиотеку annyang так же просто, как перечислить все голосовые команды, которые вы хотите реализовать, а затем вызвать метод start ():

Как видите, добавлять новые команды довольно просто. Вы можете поэкспериментировать с добавлением новых цветов, команды «выключить» или даже более интересных команд, таких как «случайный цвет», «плавное затухание» или «быстрое мигание».

Реализация Web Speech API в Chrome использует сервисы Google Cloud для распознавания речи, поэтому до получения результатов требуется примерно 1 секунда.

Вызов annyang.start () запрашивает у пользователя разрешение на доступ к его микрофону, чтобы он мог слушать их голос. В реальном приложении я добавлю кнопку микрофона и вызову этот метод только после того, как пользователь нажмет эту кнопку. В конце концов, иметь веб-страницу с просьбой разрешить использовать микрофон первым делом, когда вы загружаете страницу, довольно жутко, вам не кажется?

Наконец, вы, вероятно, заметили, что я передал параметр continuous: true методу start (). Это гарантирует, что функция постоянно прослушивает команды пользователя, а не только один раз.

Превращение его в прогрессивное веб-приложение

Итак, мы можем управлять умной лампочкой из нашего браузера, но что, если бы мы хотели управлять ею с нашего телефона, и не только из браузера на нашем телефоне, но и из приложения на нашем телефоне? Войдите в Progressive Web App.

Короче говоря, прогрессивные веб-приложения (PWA) - это веб-сайты, которые выглядят, работают и - все чаще - функционируют, как собственные приложения. Воспользовавшись потрясающими новыми возможностями, которые мы сейчас имеем при разработке в Интернете (например, Web Bluetooth!), Теперь мы можем использовать такие вещи, как сервис-воркеры, чтобы имитировать возможности собственных приложений, такие как работа в автономном режиме, уведомления и всевозможные полезные вещи.

Итак, поскольку у нас уже есть приложение для управления лампочкой, давайте посмотрим, сможем ли мы превратить его в PWA.

Вот пример задачи: что, если я не в сети и хочу изменить цвет лампочки? К счастью, с помощью PWA я могу создать Service Worker, который будет определять поведение приложения, когда телефон отключен.

(Для тех из вас, кто обращал внимание: вы правы, у нас не будет доступа к функции голосового управления из-за зависимости Google Cloud Speech API, но это не значит, что мы не можем все еще есть полезное поведение!)

Чтобы автоматически сгенерировать сервис-воркер, я воспользуюсь инструментом под названием sw-precache. Я не буду здесь вдаваться в подробности, но вы можете прочитать об этом в этом замечательном сообщении в блоге моего друга Васима Чегама.

Кроме того, я добавлю файл manifest.json для установки значка и названия приложения (когда пользователи добавляют наш сайт на свои домашние экраны). Это также создает красивый экран-заставку, который отображается во время загрузки приложения:

Наличие и сервис-воркера, и автономного файла манифеста, а также тот факт, что сайт обслуживается по HTTPS, дает приятный бонус - если пользователь часто посещает наше веб-приложение, он автоматически получит запрос от Chrome добавить ярлык для приложение на главный экран его устройства:

Эта функция называется Баннеры с установкой приложений. Подробнее об этом и квалификационных критериях вы можете прочитать здесь.

Интернет Bluetooth и физический Интернет

В предыдущем посте я обсуждал все крутые вещи, которые можно делать с Physical Web. С помощью Physical Web вы можете отправить ссылку на свой веб-сайт с маяка Bluetooth на устройство пользователя. С PWA эта ссылка может быть на ваше веб-приложение, которое выглядит, воспринимается и функционирует как собственное приложение. Затем с помощью Web Bluetooth вы можете разговаривать с устройством!

Одна интересная функция, которая в настоящее время разрабатывается, - это возможность передавать устройство из физического Интернета в Интернет через Bluetooth. Согласно текущим спецификациям, если пользователь открыл ссылку через Physical Web, ссылка на устройство, с которого была создана ссылка, будет доступна на веб-странице через navigator.bluetooth.referringDevice.

Это означает, что пользователю не нужно будет проходить через диалоговое окно выбора устройства и снова подключаться к нему, что, по сути, ликвидирует разрыв между Physical Web и Web Bluetooth. Все, что нужно сделать пользователю, это обнаружить веб-ссылку для соседнего устройства с помощью Physical Web, затем Physical Web передаст устройство на вашу веб-страницу, как только они откроют ссылку, и вы сможете начать общение с устройством. прямо с этой веб-страницы.

Довольно круто, правда?

Другие известные веб-проекты Bluetooth

Безопасность: всегда то, о чем мы хотим помнить. Нетрудно придумать несколько хороших шуток, которые вы, возможно, захотите провести с помощью Web Bluetooth, но в то же время есть и более гнусные вещи, которые плохие парни могут захотеть попробовать с ним. К счастью, ребята из команды Chrome довольно умны и встроили в платформу соображения безопасности. Джеффри Яскин из команды Chrome написал отличный пост о модели безопасности Web Bluetooth.

Хотя это все еще новая технология, уже существуют некоторые общественные проекты, которые используют веб-Bluetooth для управления различными устройствами. Вот некоторые из моих любимых:

Вы можете найти список других веб-проектов Bluetooth здесь. И еще несколько ресурсов:

p.s. - если вы вообще беспокоились о безопасности Web Bluetooth, будьте уверены: команда Chrome уже занимается этим. Прочтите отличный пост Джеффри Яскина о модели безопасности Web Bluetooth, чтобы узнать больше.

Призыв к действию: давайте продвинем вперед Bluetooth через Интернет!

Создавайте свои собственные демонстрации, делитесь ими с сообществом ... создавайте классные вещи.

Еще одна небольшая вещь, которую вы можете сделать, чтобы продвинуть Web Bluetooth вперед, - это проголосовать за Web Bluetooth в Microsoft Edge. Даже если вы не используете его, его включение поможет продвинуть стандарт вперед, облегчая жизнь всем. Вы можете проголосовать за него до трех раз на UserVoice.

Если вам случится найти ошибки, придумать полезные функции или получить другие отзывы, я знаю, что команда Chrome хочет Обратная связь, обратная связь, обратная связь. Вы можете сделать это на их Странице проблем GitHub.

И, как всегда, если у вас возникнут какие-либо вопросы или вы создадите какие-нибудь крутые веб-проекты Bluetooth, дайте мне знать в комментариях!