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-rocks
project), мы сначала вводим:
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.