Iot с использованием nodeJS (johnny-five), Vue с использованием socket.io и Ardunio

В этой статье я постараюсь показать вам, как можно использовать сервер node.js (экспресс) с интерфейсом vue.js и некоторыми другими интересными инструментами, такими как socket.io и johnny-five.

Эта статья предназначена для веб-разработчиков, которые хотят исследовать мир оборудования с помощью знакомых им инструментов. вы также можете найти здесь репозиторий GitHub.

Внешний интерфейс: https://github.com/mikiastilahun/nalaiot-frontend.

Бэкэнд: https://github.com/mikiastilahun/nalaiot-backend

Бэкэнд

Во-первых, вам нужно запустить новый проект узла, используя

yarn init -y

Это создаст файл с именем package.json, который содержит информацию о вашем проекте. затем установите зависимости express, johnny-five и socket.io

yarn add express johnny-five socket.io

Теперь, прежде чем мы начнем кодировать, нам нужно настроить наш Arduino для приема команд при последовательной связи, и на самом деле это действительно просто сделать. Вам просто нужно загрузить S tandardfirmataPlus. здесь - ссылка на него.

затем нам нужно создать новый файл с именем app.js, как показано ниже, и я все объясню построчно.

В первых пяти строках мы импортируем и инициализируем наши модули. После импорта модуля johnny-five нам нужно создать новый объект доски, и мы можем передать, хотим мы REPL или нет.

Мы также создаем новый экспресс-сервер и присоединяем его к встроенному модулю HTTP, а затем инициализируем наш сокет с HTTP-сервером в качестве параметра.

Остальное - вот где настоящая логика. johnny-five имеет разные события, которые мы можем прослушивать с помощью метода «on» в объекте платы, и одно из них - «готово», что означает, что наша плата Arduino подключена и готова принимать любые команды.

После этого нам также нужно прослушать установление соединения, чтобы открыть сокет с клиентом. Теперь мы все готовы использовать Джонни-пять. Мы собираемся использовать три светодиода (красный, зеленый и желтый), и мы собираемся включать и выключать их из любого веб-браузера. прикрепите соответствующие контакты к светодиодам, для меня зеленый подключен к контакту номер 8, желтый - 2, а красный - 4.

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

Последнее, что нужно сделать - это прослушивать соединения в определенном порту.

Внешний интерфейс

Для внешнего интерфейса мы собираемся использовать Vue.js вместе с socket.io, что упрощает установку соединения с сокетом и запуск событий на сервере.

Чтобы начать новый проект Vue, вы должны использовать Vue CLI. Затем добавьте зависимости, используя:

yarn add vue-socket.io vuetify

мы используем vuetify только в эстетических целях, поэтому вы можете опустить его, если хотите реализовать только функциональность.

Согласно документации, нам нужно указать URL-адрес для подключения к сокету.

Теперь в файле app.vue создайте методы, которые запускают события при нажатии соответствующей кнопки.

в последней заметке посмотрите видео ниже для последнего прототипа и расскажите мне, как сделать его лучше, по электронной почте [email protected].