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].