Сообщение 3 из 3. Наш путь к Интернету вещей через ESP8266, Firebase и Plotly.js

TL;DR

Домашняя страница My Medium находится здесь.

Этот пост входит в серию из 3 постов, как описано ниже. Эти 3 сообщения отражают архитектуру проекта, которую мы выбрали для достижения простого проекта регистрации яркости / построения графика в реальном времени. Мы надеемся, что они помогут разработчикам или студентам открыть для себя чип ESP8266 и платформу Firebase. Более того, мы считаем, что разработанное здесь решение может стать интересной альтернативой комплексным решениям Google, AWS и Azure IoT [ссылка, ссылка и ссылка], когда нам нужно Простое управление всего несколькими подключенными устройствами. (Например, мы не будем создавать брокера MQTT и не заниматься реестром устройств.)

Сообщение 1 [ссылка]: мы исследуем, как ESP8266 может регулярно собирать аналоговые данные и передавать свое 10-битное эквивалентное значение в Firebase База данных в реальном времени. В заключение остановимся на энергосбережении ESP8266.

Сообщение 2 [ссылка]: мы пишем облачную функцию Firebase на языке машинописного текста, чтобы поставить отметку времени для данных, только что отправленных в базу данных Firebase Realtime.

Сообщение 3 (это сообщение): с помощью веб-приложения, использующего библиотеку plotly.js, мы быстро строим в браузере аналоговые данные в зависимости от времени. Веб-приложение размещено на Firebase Hosting.

Публикация 3. Веб-приложение, размещенное на хостинге Firebase, подписывается на поток данных, поступающий из базы данных Firebase Realtime, и отображает его.

А) Где мы уехали

В конце поста 1 [ссылка] ESP8266 регулярно отправлял 10-битный показатель яркости, который он только что сделал, в узел measures базы данных Firebase Realtime:

В конце сообщения 2 [ссылка], каждый раз, когда отправлялся запрос на узел measures, облачная функция Firebase привязывала к нему временную метку. Затем полученный объект был помещен в узел timestamped_measures базы данных Firebase Realtime:

Теперь было бы неплохо, если бы веб-приложение каждый раз, когда метка времени помещается на узел timestamped_measures, могло бы получать последние 200 (например) мер с меткой времени в этом узле, чтобы сопоставить меры с метками времени. . Firebase SDK делает эту подписку очень простой и плотно (https://plot.ly/javascript/) без проблем отображает данные!

Действительно, в конце этого третьего и последнего поста, описывающего наш проект на основе ESP8266, мы получим следующее:

Б) Угловое веб-приложение или «классическое» веб-приложение?

Когда мы взломали этот небольшой проект (5 месяцев назад), перед написанием трех связанных сообщений Medium мы использовали Angular framework [link] для написания веб-приложения. Мы думали, что будем использовать его в этом последнем посте серии, поэтому он упоминается в URL-адресах 3 постов. Но когда мы опубликовали наши первые (4 месяца назад) и вторые (2 месяца назад) сообщения Medium [ссылка, ссылка], оказалось, что этот проект может стать основой для студентов, открывающих для себя IoT , даже если они изначально не были разработчиками. В этом контексте мы не можем просить их изучить Angular, прежде чем погрузиться в тему IoT, это действительно обескураживает. Итак, поскольку наш проект в конечном итоге стал более ориентированным на новичков, мы объясним здесь, как писать веб-приложение классически, т.е. с файлами html, javascript и css. После этого изменить URL-адреса сообщений Medium невозможно, поэтому Angular остается в них, и мы сожалеем об этом. Неплохой маркетинг!

Примечание. Если вы все равно хотите написать веб-приложение на Angular, следуйте замечательному ресурсу, упомянутому в разделе Благодарности в конце этого сообщения. Мы сами с этого начали.

В) Описание и настройка проекта

Примечание. Каждый раз, когда необходимо выполнить действие, ему предшествует строчная буква, например a. б. c. и т. д.

a. Перейдите в репозиторий проекта GitHub, чтобы увидеть полный исходный код нашего веб-приложения: https://github.com/olivierlourme/esp8266webapp. Есть даже ссылка на живую демонстрацию.

b. Клонируйте репозиторий в папку разработки (или загрузите его, если у вас не установлен git):

c:\_APP>git clone https://github.com/olivierlourme/esp8266webapp.git

c. Перейдите в только что созданный каталог проекта и запустите VS-код над ним:

c:\_APP>cd esp8266webapp
c:\_APP\esp8266webapp>code .

Примечание. В посте 2 [ссылка] мы разработали облачную функцию в esp8266 folder. Мы могли бы разработать наше веб-приложение в той же папке, поскольку это просто еще одна особенность проекта. Но чтобы презентация была четкой, а сообщения независимыми, мы выбрали другую папку для веб-приложения.

Примечание. Все файлы веб-приложения находятся в папке public, чтобы подготовить хостинг Firebase, подробно описанный в конце этого сообщения.

Давайте кратко объясним роль файлов index.html и script.js, находящихся в папке public. Мы не будем вдаваться в подробности, так как исходный код полностью прокомментирован в репозитории github.

index.html:

• index.html включает скрипты Firebase SDK, которые позволяют управлять базой данных Firebase Realtime проекта. Подробнее см. Https://firebase.google.com/docs/web/setup.

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase-app.js"></script>
<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase-database.js"></script>

• index.html включает библиотеку построения графиков javascript под названием plotly.js. Эта мощная библиотека, построенная на основе d3.js и stack.gl, позволяет легко вставлять сложные диаграммы на веб-страницы. См. Https://plot.ly/javascript/

<!-- Include Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

• index.html включает библиотеку moment.js. Эта библиотека может преобразовывать метки времени, выраженные во времени эпохи (миллисекунды), в даты, удобочитаемые человеком. См. Https://momentjs.com. Например: moment(1543658683000).format('YYYY-MM-DD HH:mm:ss') создаст
  '2018–12–01 11:04:43' для компьютера с часовым поясом GMT + 01: 00.

<!-- Include the moment.js library -->
<script src="https://momentjs.com/downloads/moment.js"></script>

• index.html затем в разделе <body> указано <div>, где будет размещен участок.

<!-- Plotly chart will be drawn inside this div. -->
<div id="myPlot" style="width: 100vw; max-height:75vh"></div>

• index.html включает наконец script.js сценарий, содержащий основную часть работы.

<!-- Include the script describing the work to do -->
<script src="script.js"></script>

script.js:

• script.js определяет в const названном config Конфигурацию проекта Firebase. Он не содержит конфиденциальной информации. Он позволяет веб-приложению идентифицировать проект Firebase на серверах Google. В любом случае, его не следует раскрывать без необходимости (например, если мы используем git, мы помещаем этот const в файл с именем config.js, мы ссылаемся на него из script.js и добавляем config.js к .gitignore).

d. Чтобы получить эту конфигурацию проекта Firebase, выполните 4 шага ниже и скопируйте то, что указано в «5»:

e. Вставьте эту информацию в начало script.js. У вас должно получиться что-то вроде этого:

const config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  projectId: "<PROJECT_ID>",
  storageBucket: "<BUCKET>.appspot.com",
  messagingSenderId: "<SENDER_ID>",
};

• script.js затем «подписывается» на изменения значений в узле Firebase Realtime Database, который мы хотим отобразить: когда происходит изменение (т.е. нажатие на узел), массив nbOfElts последних значений метки времени, а также массив nbOfElts последних значений яркости. Затем эти массивы питают x и y часть графика графика.

firebase.database()
  .ref('timestamped_measures')
  .limitToLast(nbOfElts) // gives the sliding effect!
  .on('value', ts_measures => {...

Примечание. Значение nbOfElts зависит от вас. Например, если задержка между измерениями составляет 5 минут, получается 12 измерений в час. Если вы хотите, чтобы график скользил по всему дню, вам нужно присвоить nbOfElts значение 24 * 12 = 288.

Примечание. Наше веб-приложение Firebase синхронизируется с базой данных, поскольку оно подключается к ней через то, что мы называем WebSockets [ссылка] , а не нормальный HTTP.

е. Адаптируйте правила базы данных Firebase Realtime

Пришло время адаптировать правила, которые предоставляют доступ к узлам нашей базы данных. В конце поста 2 [ссылка] у нас было следующее:

{
  "rules": {
    "measures": {
      ".read": "false",
      ".write": "false" 
    },
    "timestamped_measures": {
      ".read": "false",
      ".write": "false" 
    }
  }
}

Но теперь, когда мы хотим, чтобы наше веб-приложение читало узел timestamped_measures без какой-либо аутентификации, правила должны быть изменены на следующие:

{
  "rules": {
    "measures": {
      ".read": "false",
      ".write": "false" 
    },
    "timestamped_measures": {
      ".read": "true",
      ".write": "false" 
    }
  }
}

Г) Запуск сервера разработки, настройка хостинга Firebase

Г) 1) Описание

Здесь мы рассмотрим две темы:

• запустить сервер разработки, чтобы локально тестировать наше веб-приложение, улучшая его,
• настройте Firebase Hosting, чтобы наше приложение быстро размещалось на сервере Google.

Фактически, эти темы связаны: поскольку мы будем настраивать использование службы Firebase (здесь хостинг), мы получим выгоду от сервера разработки.

а. Чтобы обязательно войти в Firebase с правильной учетной записью (т.е. той, кто создал esp8266-rocksproject), мы сначала вводим:

c:\_APP\esp8266webapp>firebase logout

С последующим:

c:\_APP\esp8266webapp>firebase login

b. После входа в систему мы связываем esp8266webapp папку с службами Firebase, которые хотим использовать. Здесь нам просто нужен хостинг Firebase. Конечно, в этом проекте мы также используем базу данных Firebase Realtime, но она уже включена в index.html. Итак, команда:

c:\_APP\esp8266webapp>firebase init hosting

c. Задано несколько вопросов. Ниже мы выделяем наши ответы полужирным шрифтом:

? Are you ready to proceed? Yes
? Select a default Firebase project for this directory: esp8266-rocks
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? File public/index.html already exists. Overwrite? No

Генерируются несколько файлов (и страница 404):

D) 2) Использование сервера разработки Firebase

d. Запуск Firebase позволяет нам запустить локальный сервер разработки. Делаем так:

c:\_APP\esp8266webapp>firebase serve --only hosting

e. Мы получаем URL-адрес для тестирования нашего веб-приложения и вставляем его в браузер.

Фантастика! Приложение работает! И каждый раз, когда приходит новый такт, сюжет сдвигается влево.

Примечание. Теперь у нас больше нет доступа к терминалу, который запускал сервер разработки Firebase, потому что он монополизирован этим последним, отображая сообщения о входящих соединениях и запросах. Если нам нужно остановить сервер, мы нажимаем CTRL + C. Мы также можем открыть другой терминал, если нам все еще нужно, чтобы сервер работал.

Примечание. После сохранения изменения, внесенного в исходный код, мы должны обновить браузер, чтобы протестировать его, потому что сервер разработки Firebase не является действующим сервером, как этот: [« ссылка"].

D) 3) Использование хостинга Firebase

Когда мы будем удовлетворены своей разработкой, пора разместить веб-приложение.

е. После нажатия CTRL + C, чтобы остановить сервер разработки Firebase, нам просто нужно ввести эту команду:

c:\_APP\esp8266webapp>firebase deploy --only hosting

Через несколько секунд развертывание будет завершено, и мы получим общедоступный URL-адрес нашего веб-приложения: https://esp8266-rocks.firebaseapp.com. Тестируем в браузере (у вас тоже!), Работает отлично!

Примечание. Если у вас есть собственный домен, вы можете подключить к нему свое веб-приложение Firebase. См. [Ссылка].

Г) 4) Сколько данных можно выгрузить из базы?

С тарифным планом Firebasebase «Spark» (бесплатным) можно загружать до 10 ГБ в месяц. Этого можно будет быстро достичь, если:

• У нас много точек на графике, т.е., если nbOfElts высокий.
• У нас для него высокая частота обновления.
• К нашему веб-приложению подключено множество людей!

Чтобы узнать текущий загруженный объем данных, мы нажимаем Обзор проекта в консоли Firebase:

Заключение

Об этом сообщении

Это все на сегодня! Теперь у нас есть основа веб-приложения для мониторинга данных. Но его можно улучшить разными способами. Первое, что нужно сделать, это реализовать Firebase Authentication [ссылка] и роли для обработки доступа пользователя / администратора к веб-приложению. После этого правила базы данных должны быть обновлены соответствующим образом. Благодаря функции аутентификации веб-приложение могло:

• иметь элемент формы для администратора, чтобы выбрать период обновления (это может быть узел базы данных Firebase Realtime, записанный веб-приложением и прочитанный ESP8266 после каждого нажатия),
• есть кнопка для администратора, чтобы удалить measures и timestamped_measures узлы,
• иметь элемент формы для пользователей, чтобы задать количество последних элементов для печати. ​​

Затем мы могли бы рассмотреть возможность отправки уведомлений некоторым зарегистрированным пользователям. Например, пользователь может получить сообщение, если яркость опускается ниже персонализированного порога. Это возможно с помощью Firebase Cloud Messaging.

Мы уже реализовали оба аспекта (аутентификация / уведомления) в других контекстах, и это было действительно незамедлительно.

Благодарности за этот пост: Мы хотели бы поблагодарить здесь @angularfirebase (Джефф Делани), чьи видео-уроки представляют собой отличный контент. В частности, Эпизод № 39 Графики в реальном времени с Plot.ly [ссылка] побудил нас открыть для себя plotly.js в контексте Angular и дал нам идею оживить графики измерений, выполненных ESP8266.

Об этой серии из трех публикаций

С этим третьим и последним постом о теме ESP8266-Firebase у нас теперь есть полная картина ...

• Лично наша система (ESP8266 - Облачная функция - Веб-приложение) работала как шарм в течение многих дней. ESP8266 поставляется с аккумулятором емкостью 10.000 мАч и время от времени просто подталкивает. Все остальное время он остается в режиме глубокого сна. Более того, поскольку временные метки делегируются облачной функции, в конечном итоге ESP8266 потребляет очень мало энергии.
• Что касается безопасности, хотя секретная аутентификация для Firebase не идеальна, она выполняет свою работу. Единственным серьезным недостатком, о котором мы будем сожалеть, является отсутствие простого шифрования флеш-памяти (см. Пост 1, [ссылка]).
• ОБНОВЛЕНИЕ (15 марта 2019 г.). Чтобы пойти дальше и создать более профессиональное, масштабируемое и безопасное решение, прочитайте следующий пост на Medium под названием GCP-Cloud IoT Core с ESP32 и Mongoose OS.

О написании для Medium

Написание для Medium впервые было положительным опытом. Сначала мы не осознавали, насколько долгий процесс заключался в написании, выборе изображений, рефакторинге исходного кода, комментариев и т. Д., Чтобы безупречно представить наш проект. На взлом всего проекта у нас ушло меньше одного дня. Написание всего одного сообщения для Medium заняло как минимум 2 полных дня! Но действительно приятно, когда видишь, что людям из многих стран, даже из Франции :-), понравилось, и они оставили вам положительные отзывы. И это открыло интересные дискуссии и с нашими коллегами по работе. Так что в 2019 году мы обязательно напишем еще несколько постов. Следите за обновлениями и попробуйте сами!

Совет. По умолчанию заголовок вашего сообщения Medium влияет на URL-адрес сообщения. Если у вас длинный заголовок, у вас будет длинный URL-адрес для публикации, что иногда вызывает разногласия из-за длинных URL-адресов. Чтобы этого избежать, перед публикацией вы можете персонализировать URL своего сообщения, выбрав Настроить ссылку на историю после нажатия на 3 точки… (рядом с колокольчиком).

Мы были очень рады поделиться с вами этими новыми знаниями.

Ссылки на посты из этой серии: Пост 1, Пост 2, Пост 3, GitHub и Живая демонстрация.

Проверьте также этот пост: GCP-Cloud IoT Core с ESP32 и Mongoose OS.