Привет всем, я вернулся с еще одним быстрым проектом IoT, сделанным на выходных, которым можно легко управлять с помощью приложения.., но, поскольку я не фанат установки полноценных приложений на свой телефон, что, честно говоря, занимает так много space и в основном не используется часто, но все же установлен на нашем телефоне, поэтому, как обычно, я решил создать прогрессивное веб-приложение.
В этой статье я покажу вам, как я создал PWA и использовал его для управления устройствами IoT (в данном случае для отправки сообщений на беспроводной дисплей).
Обзор :
Итак, идея состоит в том, чтобы создать прогрессивное веб-приложение (PWA) специально для отправки сообщений на дисплей. и отражать то, что на нем показано в режиме реального времени. Поскольку это легкое приложение, основное внимание уделяется пользовательскому интерфейсу и UX. Итак, я расскажу вам, как я создал свое красивое, отзывчивое и полнофункциональное приложение, и как вы тоже можете это сделать.
Давайте поговорим об обзоре потока о том, как это работает на более высоком уровне.
- Пользователю необходимо выполнить начальную часть входа в систему в пользовательском интерфейсе и на беспроводном дисплее (поясняется ниже).
- Затем пользователь вводит сообщение в поле ввода или говорит с компьютером (да! Я использовал распознавание речи).
- Как только пользователь нажимает кнопку отправки, сообщение отображается на беспроводном дисплее. Ну, не напрямую, сообщение сначала обновляется в базе данных и извлекается микроконтроллером ESP8266, а затем отображается на дисплее. (объяснено позже)
- Текущее сообщение также обновляется в режиме реального времени. Таким образом, если вы одновременно просматриваете сообщение на своем компьютере и телефоне и переключаетесь с одного из них, вы сможете увидеть изменения в обоих местах в режиме реального времени.
Самое приятное то, что приложение имеет быстрое время отклика, так как не используются библиотеки или зависимости.
Как обычно, мы разделим статью на две части:
- Аппаратное обеспечение и его кодировка: Wireless Display.
- Программное обеспечение: прогрессивное веб-приложение и внутренние сценарии.
Дисплей:
Устройство представляет собой светодиодный матричный дисплей 8x8 (модуль из 4), соединенный с модулем ESP8266 (узел MCU), который случайно завалялся у меня дома (поскольку он использовался в моем предыдущем проекте Notter:- Cross-platform Note Использование прогрессивного веб-приложения с отображением напоминаний об оборудовании).
На приведенной выше диаграмме показаны схемы подключения матричного дисплея с узловым микроконтроллером.
Node MCU запрограммирован на непрерывную отправку HTTP-запроса GET к серверному PHP-скрипту с именем пользователя и паролем, который извлекает данные из базы данных.
Но перед этим нам нужно ввести наши учетные данные, так как изначально MCU запустит локальный сервер на себе и отобразит IP-адрес страницы входа, размещенной на нем. Пользователь должен войти в систему со своими учетными данными. После успешного входа в систему отобразится «логин как», за которым следует имя пользователя. Затем на беспроводном дисплее начинает отображаться любое сообщение, установленное на приборной панели. Дисплей продолжает прокручивать сообщение, и оно продолжает отображаться до тех пор, пока сообщение не будет удалено или изменено с приборной панели (если только не будет отключено питание).
Приложение :
Приложение представляет собой PWA (прогрессивное веб-приложение), которое в основном представляет собой веб-сайт, который можно установить на любом из ваших устройств, если ваш браузер поддерживает его (что делает большинство современных браузеров). Он работает путем установки экземпляра веб-сайта в браузере отдельно от любого собственного приложения и использует рабочий сценарий службы, который кэширует часто посещаемые или используемые страницы веб-сайта для автономного использования вместе с файлом манифеста, который обычно содержит метаданные о приложении, такие как цвет темы или иконки и т.д. Подробнее об этом можно прочитать здесь.
Таким образом, Dash-B — это, по сути, эстетически приятная приборная панель, где пользователи могут ввести сообщение, которое будет отображаться на беспроводном дисплее.
Дизайн пользовательского интерфейса — это то, чем я всегда увлекался, но мне никогда не приходило в голову использовать его с пользой. Создание подобных приложений действительно помогает мне проникнуться этим и узнать о нем больше. Поэтому я решил использовать некоторые из последних тенденций в дизайне пользовательского интерфейса, такие как «Glassmorphism» и Темный режим, также приложение поддерживает Автоматическую тему это означает, что цвет темы будет меняться в зависимости от темы вашего устройства, будь то темный или светлый.
Просто зайдите в настройки своего устройства и найдите общесистемный режим темной темы, который можно найти в параметрах Темы или Отображение на мобильных устройствах, у вас может быть ярлык для него в Быстрые настройки или Центр управления (iOS). Кроме того, убедитесь, что в настройках вашего браузера тема соответствует системной теме, иначе Автоматическая тема не будет работать, так как настройки браузера переопределяют системные настройки.
Помимо Визуальные элементы, Удобство использования — это еще одна вещь, которая играет важную роль в общей функциональности любого Приложения. Таким образом, для простоты использования есть также возможность говорить с приложением вместо того, чтобы печатать. Распознавание речи было одной из функций, которая меня зацепила (из-за виртуальных помощников), потому что, как только вы освоите ее, пути назад уже не будет. Поэтому я решил добавить аналогичную функциональность и в свое приложение. К счастью, я обнаружил, что в JavaScript есть собственный способ реализовать это. Он называется «SpeechRecognition API», да, многовато для названия…😅. По сути, когда вы нажимаете кнопку Микрофон, приложение издает звук, который, кстати, полностью создан на JavaScript, и начинает слушать через микрофон вашего устройства (для доступа к микрофону требуется разрешение пользователя), а когда оно слышит что-то, оно переводит в текст и возвращает то же самое в поле ввода. Как только он перестанет слушать, он снова воспроизведет звук, почти как любой умный динамик на рынке.
Для устройств с клавиатурой: нажатие клавиши «Alt» в системе Windows или «!» в системе Macintosh активирует функцию распознавания речи.
Маленькая кнопка «✖» в самом правом углу ввода сообщений удаляет последнее сообщение и очищает дисплей.
Кроме того, я забыл упомянуть, что пользователь должен сначала войти в систему, прежде чем использовать приложение, и после входа приложение сохраняет сеанс в течение примерно двух дней. Поскольку это не критические данные, касающиеся приложения, поэтому я выбрал локальное хранилище для хранения сведений о сеансе вместо использования файлов cookie (которые, очевидно, лучше и безопаснее), но для любого конкретного приложения с критически важными данными всегда следует использовать хорошее шифрование и сеанс cookie.
Бэкэнд-скрипты:
Сценарии Backend — это логика, развернутая на стороне сервера, которая обновляет данные в базе данных. У них есть три основных функции:
- Аутентификация
- Извлечение данных
- Обновление данных
Аутентификация: всякий раз, когда пользователь входит в приложение или на дисплей (как упоминалось выше), он выполняет простую аутентификацию для имени пользователя и пароля и возвращает, являются ли учетные данные правильными или нет.
Извлечение данных.Дисплей и приложение постоянно запускают конечную точку API для получения данных и обновления дисплея и панели мониторинга, если есть какое-либо обновление. Таким образом, данные обновляются в режиме реального времени.
Обновление данных: это самая важная функция, поскольку она обновляет данные в базе данных. После того, как поле ввода отправлено либо голосовой командой, либо путем ввода, сообщение отправляется в этот сценарий через запросы POST API, которые затем, в свою очередь, обновляются в базе данных. если вы отправите пустое сообщение, оно очистит дисплей, как кнопка «✖».
И это было все…
Вот как я сделал «Dash-B: доска для отображения сообщений Wireless IoT с прогрессивным веб-приложением». Надеюсь, это дало вам достаточно идей и поможет вам создавать собственные проекты Интернета вещей с помощью PWA. Я хотел бы услышать о любых приложениях, которые вы делаете или делали в прошлом, пожалуйста, дайте мне знать в комментариях или отправьте мне сообщение на LinkedIn. Кроме того, не стесняйтесь задавать любые вопросы или если вам нужна помощь в отношении этого или любого другого проекта IoT.
Также, пожалуйста, поделитесь своим мнением о том, что вы думаете об этом приложении и что можно добавить или улучшить. Ваши отзывы и/или конструктивная критика всегда приветствуются. Не стесняйтесь связаться со мной на LinkedIn.
Прочтите статью на LinkedIn
О, и если вы все еще здесь, спасибо за прочтение статьи.😊
Конец
Автор: Ганприт Сингх
Первоначально опубликовано на https://www.linkedin.com.
