Я люблю сторонние проекты. Они дают мне возможность поиграть творческими мускулами и по-новому использовать такие технологии, как Интернет вещей (IoT). К счастью, мне не пришлось долго искать следующую; Распространенная загадка для владельцев домашних животных привела к появлению этой концепции ошейника для собак на основе Интернета вещей.

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

В этом руководстве я покажу вам, как настроить оборудование, необходимое для создания собачьего ошейника Интернета вещей. Мы также рассмотрим, как создать интерфейсное и внутреннее веб-приложение, которое вы можете использовать, чтобы позвонить и найти своего питомца. Мы будем использовать Arduino Uno, платформу Johnny-Five JavaScript Robotics & IoT Platform, Heroku и несколько других компонентов. В конце концов, вам будет намного удобнее использовать свои навыки JavaScript на оборудовании. И, надеюсь, вы получите массу удовольствия на этом пути! Готовы начать? Пойдем!

Оборудование, которое вам понадобится

Вот список оборудования и ресурсов, которые вы будете использовать для создания своего ошейника для Интернета вещей:

Arduino Uno (21 доллар)
Пьезозуммер (9 долларов)
Беспроводной коммуникатор (10 долларов)
Блок питания (6 долларов)
Макет и провода (опционально: 9 долларов)
Хобби-дино Heroku (0 долларов)
Корпус (все, что может удерживать электронику и поместиться на ошейнике)

** Цены конечно меняются.

Настройка вашего внешнего интерфейса

Хороший побочный проект дает вам свободу пробовать то, что вы обычно не делаете на работе. В соответствии с этим принципом, передняя часть этого IoT-проекта представляет собой просто кнопку с текстом для включения и выключения зуммера - нет необходимости использовать фреймворк, такой как React или Angular. Мы напишем код с помощью файла HTML, файла CSS и файла чистого JavaScript.

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

Внутри корневой папки создайте следующие три файла:

  • index.html
  • index.css
  • index.js

index.html

Теперь приступим к написанию кода для файла index.html:

<!DOCTYPE html>
<html>
  <head>
    <link rel=”stylesheet” href=”./index.css”>
    <title>Find My Dog</title>
  </head>
  <body>
    <header>I have no clue where they went.</header>
    <main>
      <button id=’beeper-btn’ type=”button”>Activate the noise</button>
    </main>
    <script src=”./index.js”></script>
  </body>
</html>

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

index.css

Теперь давайте напишем файл CSS:

body {
  font-family: ‘Lato’, ‘Trebuchet MS’, sans-serif;
}
header, main {
  text-align: center;
}
header {
  font-size: 36px;
}
button {
  background-color: rgb(255, 0, 0);
  border: unset;
  font-size: 24px;
  margin-top: 24px;
  padding: 12px;
}
button:hover {
  background-color: rgba(255, 0, 0, 0.5);
  font-size: 24px;
}

Если вы не вносили никаких изменений в файлы index.html и index.css, ваша страница должна выглядеть следующим образом:

Если вы внесли правки, то ваш результат может выглядеть немного иначе. Впрочем, не беспокойтесь - это один из лучших аспектов сторонних проектов! Вы можете использовать что-то минималистичное, как в примере, показанном выше, или вы можете немного пофантазировать и опробовать некоторые интересные функции CSS.

index.js

Пришло время написать базовый JavaScript. Лучшая часть? Никаких зависимостей устанавливать не нужно!

const beeperBtn = document.querySelector(‘#beeper-btn’);
let isBeeperActivated = false;
const toggleBeeper = () => {
  isBeeperActivated = !isBeeperActivated;
  isBeeperActivated ?
    fetch(‘http://localhost:3000/api/startBeeper')
      .then(console.log)
    :
    fetch(‘http://localhost:3000/api/stopBeeper')
      .then(console.log)
}
beeperBtn.addEventListener(‘click’, toggleBeeper);

Этот файл выполняет только три функции:

  1. Он добавляет прослушиватель событий «onclick» к кнопке из index.html.
  2. Он устанавливает переменную состояния под названием «isBeeperActivated».
  3. Когда кнопка нажата, она изменяет состояние и вызывает соответствующую внутреннюю конечную точку.

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

Настройка вашего оборудования

Если вы зашли так далеко, поздравляем - вы выполнили весь внешний интерфейс этого проекта! Теперь займемся оборудованием. В этом разделе мы рассмотрим, как настроить вашу макетную плату с Arduino Uno, динамиком и другими компонентами.

Во-первых, давайте убедимся, что ваш Arduino Uno готов к работе с платформой Johnny-Five. Вам нужно будет загрузить набросок Standard Firmata на свою доску. Самый простой способ сделать это - через IDE Arduino. Если вы никогда раньше не работали с Arduino, не расстраивайтесь; это прямой тип загрузки с переходом по клику. Вот удивительное пошаговое руководство по этому процессу. Он покажет вам, как найти пример скетча Standard Firmata, который поставляется с IDE Arduino, и процесс загрузки скетча на ваш Arduino.

Затем вам нужно настроить Arduino на работу с модулем Bluetooth HC 05. Вот руководство, которое я использовал для этой части. Вы увидите схему подключения HC 05 к Arduino и эскиз, который вам нужно будет загрузить, чтобы заставить HC 05 взаимодействовать с последовательным портом Arduino. После завершения этого шага повторно загрузите скетч Standard Firmata и подключитесь к Johnny-Five.

После того, как вы настроили свою доску, вы можете добавить к ней мощность с помощью аккумуляторной батареи и подключить пьезо-зуммер. Подключите красный провод аккумуляторной батареи к контакту Vin на плате, а черный провод - к одному из контактов GND платы на стороне питания. Ваш модуль HC 05 должен быть подключен к контакту 5V и другому контакту GND. Наконец, вы можете подключить пьезозуммер к контакту 13 и контакту GND.

Хотите, чтобы ваша проводка была чистой? Попробуйте использовать макетную плату и перемычки, чтобы упростить отслеживание ваших подключений. Примечание: это изменит размер вашей оболочки. Говоря о которых…

После того, как вы соберете компоненты вместе, вы можете поместить их в корпус. Убедитесь, что аккумулятор доступен, чтобы вы могли его включать и выключать. Я решил положить свою в маленькую сумку в коробку. Это лучший способ лечения оборудования? Черт возьми нет! Но помните, никто больше не увидит этого, кроме вас. Так что не стесняйтесь проявлять супер креатив. Я выбрал коробку SweetTarts. (Он идеально отражает личность моей собаки.)

Настройка серверной части

Ух! Если вы зашли так далеко, похлопайте себя по плечу - вы только что завершили раздел оборудования! Было не так уж сложно, правда? Теперь перейдем к последнему фрагменту кода этого IoT-проекта: серверной части Node.

Я решил развернуть свое приложение на Heroku; это быстро, легко и, что самое главное, бесплатно для подобных вещей. Вы можете зарегистрироваться здесь. Но не стесняйтесь пользоваться любым сервисом, который вам больше нравится. После регистрации убедитесь, что у вас установлен Heroku CLI, чтобы вы могли развернуть приложение позже. Вы можете найти инструкции по установке здесь: https://devcenter.heroku.com/articles/heroku-cli#download-and-install

Теперь откройте терминал и проверьте правильность установки Heroku CLI с помощью следующей команды:

heroku — version

Затем вам нужно будет войти в свою учетную запись Heroku с помощью команды:

heroku login

Это перенаправит вас на веб-страницу, где вы можете войти в систему со своими учетными данными GitHub. Теперь у вас есть все готово для развертывания этого приложения непосредственно в Heroku.

Но сначала вам нужно установить несколько пакетов, чтобы это заработало. Внутри корневой папки создайте следующие новые файлы:

  • server.js
  • Procfile

Теперь откройте терминал и приготовьтесь к установке всех необходимых пакетов. Я предпочитаю npm, но не стесняйтесь использовать пряжу.

npm install cors express johnny-five

Это единственные пакеты, которые вам понадобятся, и это похоже на настройку любого другого приложения Node.

server.js

Вам нужно будет создать две конечные точки, чтобы контролировать, когда звуковой сигнал включен или выключен. Это конечные точки, на которые вы ссылались во внешнем интерфейсе в этих запросах на выборку. Откройте файл server.js и добавьте следующий код:

const { Board, Led } = require('johnny-five');
const cors = require('cors');
const express = require('express');
const PORT = process.env.PORT || 3000;
const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

const board = new Board({
  port: "COM4",
});

let beeper;

board.on("ready", () => {
  console.log("Ready!");
  beeper = new Led(13);
});

app.get('/api/startBeeper', (req, res) => {
  console.log('on');
  beeper.on();
  res.send({
    message: 'on'
  });
});

app.get('/api/stopBeeper', (req, res) => {
  console.log('off');
  beeper.off();
  res.send({
    message: 'off'
  });
});

app.listen(PORT, () => {
  console.log(`endpoints running on port ${PORT}`);
});

Этот код устанавливает обычное экспресс-приложение и подключает его к localhost: 3000. Он также создает новый экземпляр объекта Board, чтобы вы могли подключиться к вашему Arduino и объявить переменную, представляющую звуковой сигнал. Вам нужно получить адрес Bluetooth и использовать его в параметре порт для платы. Это позволит вам подключиться к вашей доске после развертывания на сервере Heroku. Затем он запускает Board с методом on и параметром ready. Внутри этого блока кода вы можете отправить сообщение на консоль, чтобы знать, что плата должна быть включена.

Наконец, вам нужно установить значение для beeper. Я определил его как светодиод, потому что нам нужен только простой сигнал «высокий / низкий», посланный на плату, чтобы он заработал. Когда дело доходит до оборудования, часто бывает лучше, чтобы все было проще. Beeper также подключен к контакту 13, как и его физический аналог.

Последняя часть серверной части записывает две конечные точки. Поскольку мы включаем и выключаем звуковой сигнал нажатием кнопки на передней панели, одна конечная точка включает его, а другая выключает.

Обычно я не оставляю console.log в своем коде, но это действительно может помочь при отладке. Иногда оборудование работает сразу. В других случаях может потребоваться немного поработать, чтобы все это работало вместе. Этот код подготавливает вас к обоим сценариям и является всем, что вам нужно для работы звукового устройства. Технически вам даже не нужен интерфейс, если вы помните имена конечных точек!

Johnny-Five творит чудеса с объектом Board. Когда вы вызываете метод board.on (), он автоматически находит и подключается к Bluetooth-адресу модуля HC 05, пока на него и на Arduino подается питание. После подключения кода к физической плате Johnny-Five ищет физический зуммер на основе номера пина, который вы передали объекту LED. Когда вы нажимаете кнопку на передней панели, она вызывает соответствующую конечную точку, отправляя высокий или низкий сигнал на контакт 13, который включает или выключает звуковой сигнал.

Procfile

Наконец, введите следующее в Procfile. Это файл, специально используемый Heroku, который определяет команды, которые должны выполняться приложением при запуске. В этом случае мы определяем наш веб-процесс как наш сервер.

web: node server.js

Если вы хотите использовать просто идиоматический узел без каких-либо специфичных для Heroku файлов, вы можете использовать поле start из файла package.json.

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

Развертывание приложения для собачьего ошейника IoT

Мы почти закончили! К этому моменту вы, вероятно, уже потратили несколько часов на этот проект Интернета вещей, так что давайте извлечем из него максимум пользы. Поскольку собаки могут исчезнуть где угодно, разумно развернуть ваше приложение, чтобы вы могли получить к нему доступ где угодно.

Я решил подключить свое приложение к Heroku, развернув его через интерфейс командной строки Heroku. Heroku предоставляет отличные простые инструкции по быстрой настройке и запуску. Вам нужно обязательно изменить несколько вещей, в том числе:

  • Вызовы API, которые вы делаете в корневом файле index.js, теперь должны ссылаться на URL-адрес и порт, которые вы используете в Heroku.
  • Вам нужно будет добавить файл package.json в корень вашего проекта, и вы можете найти его код ниже. Вот как Heroku узнает, как запустить ваше приложение в производственной среде.
{
  “name”: “dog-locator”,
  “version”: “0.1.0”,
  “scripts”: {
    “build”: “npm install”,
    “dev”: “npm run build && npm run start”,
    “start”: “node server.js”
  },
  “dependencies”: {
    “concurrently”: “⁵.1.0”,
    “cors”: “².8.5”,
    “express”: “⁴.17.1”,
    “johnny-five”: “¹.4.0”,
    “path”: “⁰.12.7”
  }
}

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

Если вы хотите клонировать код для этого проекта, вы можете получить его на GitHub здесь: https://github.com/flippedcoder/arduino-johnny-five-locator

Теперь откройте терминал и приготовьтесь использовать Heroku CLI. Поскольку оно у вас уже установлено и вы вошли в систему, вы сможете запустить команду для создания нового пустого приложения на Heroku:

heroku create

Затем выполните следующую команду, чтобы развернуть проект непосредственно в Heroku:

git push heroku master

После того, как вы поместите проект в последнюю строку, вы должны увидеть в своем терминале что-то похожее на это, и тогда ваш проект будет запущен!

Честно говоря, мне нравится развертывать побочные проекты на этой платформе, потому что CI / CD - одно из моих слабых мест, и это хорошая практика! А наличие этого приложения в прямом эфире позволяет мне легко находить собаку, куда бы я ни пошел.

Что вы будете строить дальше?

Поздравляю! Теперь у вас есть полностью функционирующий ошейник для собак IoT, который позволяет вам найти своего питомца где угодно! А теперь проверьте это. Играйте в прятки… Бегайте по заднему двору… Бросайте фрисби… Делайте то, что вы обычно делаете со своей собакой. Здесь самое главное - убедиться, что новый ошейник подходит вам и образу жизни вашего щенка.

Теперь, когда вы завершили создание ошейника для собак с использованием Интернета вещей, остался только один вопрос: что вы будете строить сейчас? Эти усилия требуют времени, терпения и настойчивости, однако процесс часто бывает забавным и полезным. Я надеюсь, что этот побочный проект дал вам некоторые идеи о том, над чем работать дальше.

Если вы создаете что-то новое на основе этого проекта или просто хотите просмотреть код, вы можете найти его здесь. И если вам нужно вдохновение для вашего следующего IoT-проекта, я настоятельно рекомендую эти ресурсы:

Https://www.instructables.com/circuits/
https://learn.adafruit.com/
https://www.coursera.org/learn/iot

Не забывай обо мне в Твиттере! Я размещаю там в основном полезные вещи.