Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Internet of Things
Code

Створення інтелектуальних пристроїв на основі Arduino та Node.js за допомогою PubNub

by
Difficulty:IntermediateLength:MediumLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Ukrainian (українська мова) translation by Nadia Gonzales (you can also view the original English article)

У зв'язку із розквітом maker movement: (* широкий термін для визначення індивідуальних винахідників, розробників та ремонтників, чия діяльність пов'язана з технікою. Тут і надалі примітка перекладача) організація Maker Faire (* виставка, яку організовує журнал Make, щоб «славити інженерне мистецтво, наукові проекти та тип мислення DIY (Do-It-Yourself – зроби [це] сам, про ремонт, виготовлення, збирання чогось власноручно)»), створення 3D-принтерів, роботів DIY, безпілотних літальних апаратів тощо – завдяки популярності Arduino (* комплект, основою якого є мікроконтролер (мікрокомп'ютер, розроблений спеціально для убудовуваних систем керування технологічними процесами, периферійними, комунікаційними, побутовими приладами та іншими пристроями), з відкритим первинним кодом) велика кількість розробників програмного забезпечення стали хакерами апаратного забезпечення.  Ви можете підключити Arduino до свого комп'ютера за допомогою кабелю USB (* universal serial bus – універсальна послідовна шина), завантажити IDE (* Integrated Development Environment – інтегроване середовище розроблення) і бац: все готово для розробки.

Проте я бачу, що багато веб-розробників залишилось не при справах, оскільки Sketch, язик програмування на основі язика С для програмування плати Arduino, – це не те, із чим веб-розробники почувають себе зручно. Але що, якщо би у вас була можливість використовувати JavaScript – язик, з яким ви вже знайомі?  Не з'явилося би бажання погратися з Arduino?

У цьому посібнику я вам покажу, з чого почати при роботі з Arduino за допомогою Node.js; також ми докладно розберемо процес створення прототипу (* створення демонстраційної або спрощеної, пробної версії (моделі, макета) нової системи; необхідно для уточнення вимог до системи, оцінювання термінів реалізації тощо) застосунку IoT (* Internet of Things – Інтернет речей; концепція мережі, що складається із взаємозв'язаних фізичних пристроїв, які мають вбудовані датчики, а також програмне забезпечення, що дозволяє здійснювати передачу і обмін даними між фізичним світом і комп'ютерними системами, за допомогою використання стандартних протоколів зв'язку) за допомогою API на JavaScript системи PubNub (* швидко працююча система обміну повідомленнями між будь-якими пристроями та платформами).

Johnny-Five – фреймворк для створення роботехніки на JavaScript

Тепер я хочу вам представити Johnny-Five – фреймворк для програмування роботехніки на JavaScript.  Johnny-Five – платформа з відкритим початковим кодом, численність товариства розробників якої постійно росте (по всьому світі почали з'являтися підтримувані товариством NodeBots Days (* зустрічі по всьому світі, на яких люди збираються для спільного вивчення Arduinos, Tessels, Edison's, Raspberry Pis, NodeCopters тощо)).

Що ж, давайте почнемо використовувати Johnny-Five для програмування Arduino Uno (* "Uno" означає «один» на італійській та є еталонною моделлю для платформи Arduino)!

1 Встановлення Arduino

Необхідне апаратне та програмне забезпечення:

Для початку підключіть вашу Arduino Uno до комп'ютера за допомогою кабелю USB.  Також завантажте Arduino IDE та встановіть її на ваш комп'ютер.  IDE буде вам необхідна тільки для початкового налаштування.

В IDE Arduino перейдіть до Tools > Port та впевніться, що необхідна плата, Arduino Uno, підключена до правильного порту (tty.usbmodem… для Mac, cu.usbmodem… для Windows).

Arduino port

Johnny-Five взаємодіє із Arduino за допомогою протоколу Firmata, тому вам необхідно встановити StandardFirmata:

  • В IDE відкрийте File > Examples > Firmata > StandardFirmata.
  • Клацніть кнопку upload (кнопка зі стрілкою).
  • Дочекайтеся, поки в інформаційному вікні буде показано повідомлення  “Done uploading” (* «завантаження завершено»).
  • Закрийте IDE.  Більше IDE вам не потрібна, якщо ви тільки не хочете використовувати її для написання коду.
Arduino StandardFirmata

Opening StandardFirmata

2. Створення «Hello World» (* перша найпростіша програма, яку створюють початківці в області комп'ютерних наук)

Впевніться, що Node.js встановлено на вашому комп'ютері.  Створіть відповідну папку, наприклад, js-hello, потім перейдіть до неї (за допомогою команди cd (* change directory)) та встановіть Johnny-five за допомогою npm (* менеджер пакунків для Node).

Тепер давайте напишемо «Hello World» за допомогою Johnny-Five.  Оскільки ви маєте певне відмінне апаратне забезпечення, то ви за допомогою нього створите «Hello World», якою буде кліпання світла LED (* Light Emitting Diode – світловипромінюючий діод (СВД)

Необхідне апаратне забезпечення:

  • 1 Arduino (Genuino) Uno
  • 1 СВД
  • 1 прототипна плата
  • 2 дротяні перемички з двома штировими кінцями (1 червона, 1 чорна)
  • 1 резистор (200 – 330 Ω)
What you need to build a hardware LED with Arduino

Знайте свої СВДи

СВДи поляризовані: позитивна клема (+) називається анодом, а негативна (-) – катодом.  Звичайно у кожного СВД є дві ніжки, та більш довгою є контакт анода. Про це слід пам'ятати при створенні електричного  ланцюга.

Збирання ланцюга

Давайте договоримося про кольори, щоб уникнути плутанини:

  • Чорна перемичка використовується для заземлення
  • Червона перемичка використовується для подачі електричної напруги

Не обов'язково, щоб ваші перемички мали чорний та червоний кольори, але використовуйте перемички двох різних кольорів, щоб не заплутатися.  При цьому найбільш ефективним та коректним способом використання перемичок буде підключення червоної до позитивної клеми (* у нащому випадку використовуємо контакт 13), а чорної – до землі (контакт GND (ground)).

Arduino circuit board

Ви можете ознайомитися більш докладно з прототипною платою, резисторами та основами всіх частин на Adafruit!

Реалізуємо кліпання СВД за допомогою Johnny-Five

Тепер ви будете працювати з програмним забезпеченням.

Створіть файл blink.js та вставте нижченаведений код:

Виконайте:

СВД повинен буде кліпати з інтервалом у 500 мс. Якщо цього не відбувається, то перевірте ланцюг та код.

LED connected to circuit board

arduino-johnnyfive-blinkgif

Тепер, коли ви засвоїли основи, давайте продовжимо та дізнаємося, як реалізувати можливість підключення до Інтернету для вашого апаратного забезпечення та як створити прототип вашого першого інтелектуального (* "розумний", з розвиненою логікою, оснащений мікропроцесором; звичайно цей термін застосовується для опису електронного пристрою зі вбудованим мікропроцесором, тобто який можна програмувати для виконання різних функцій) пристрою!

3. Розробка прототипу інтелектуальної освітлювальної системи

Ринок інтелектуальних прозорих лампочок різноманітний: Philips HUE и LIFX.  За допомогою смартфонів та планшетів ви можете змінювати їх яскравість та колір.

Тепер ви створите прототип дещо подібного, завдяки чому буде можливо здійснювати дистанційне керування Arduino і СВД із браузера.

Створення пристрою, що відповідає концепції IoT, за допомогою JavaScript

Важливим моментом тут є перетворення вашого апаратного забезпечення в прилад IoT шляхом підключення до Інтернету.  На відміну від ситуації з використанням Bluetooth (* технологія безпровідного ближнього короткохвильового радіозв'язку (до ЗО м), що дає змогу об'єднувати пристрої різних типів для передавання мовлення і даних), як тільки пристрій підключено до Інтернету, ви можете керувати вашим СВД із будь-якої точки світу.   Для полегшення реалізації зв'язку з рознімний з'єднанням ми будемо використовувати API на JavaScript PubNub.

Мережа потоку даних (DSN – Data Stream Network) PubNub надає глобальну інфраструктуру (* основоположна сукупність компонентів, об'єднана в систему) и дозволяє вам доволі просто створювати та масштабувати застосунки, що працюють у режимі реального часу, та пристрої IoT.  Інтелектуальний СВД, що ми збираємося створити, працює наступним чином: 

Smart LED flow chart

Наприклад, при контролюванні користувачем із Сан-Франциско Arduino в Токіо відбувається наступне:

  1. Користувач публікує повідомлення «Make the light green» (* «Змінити колір на зелений») зі свого мобільного телефону.
  2. Повідомлення відправляється до центру оброблення та зберігання даних до Сан-Франциско.
  3. Дані синхронізуються між усіма центрами оброблення та зберігання даних.
  4. Arduino підписується на отримання повідомлень із центру оброблення та зберігання даних у Токіо та змінює колір світла.

Дію завершено всього лише за чверть секунди.

У цьому посібнику ви будете створювати прототип присрою.  Проте якщо ви маєте SDK (* System Design Kit –  набір розробника системи), то ви фактично можете створювати споживацькі товари на зразок Emberlight smart lighting platform.

Необхідне апаратне забезпечення:

  • Arduino (Genuino) Uno
  • 1 RGB-(* система передавання кольору RGB (Red-Green-Blue)) СВД (загальний катод)
  • 1 прототипна плата
  • 4 дротяні перемички з двома штировими кінцями (червона, чорна, зелена, синя)
  • 1 резистор (220 Ω x 2, 330 Ω x 1)
Hardware you need

Знайте свій СВД

RGB-СВД – це СВД «три в одному», де в єдиному корпусі поєднуються червоний, зелений та синій кольори. RGB-СВДи комбінують ці кольори для створення мільйонів відтінків. Кожний RGB-СВД містить чотири контакти – один на колір – та загальний катод (чи анод). У цьому посібнику ви будете використовувати RGB-СВД із загальним катодом.

LED RGB cathode diagram

Збирання ланцюга

Спробуйте зібрати ланцюг наступним чином. На відміну від контактів, які використовували в попередньому прикладі «кліпання СВД», тут ви будете використовувати контакти PWM (* Pulse Width Modulation – широтно-імпульсна модуляція (ШІМ), PWM приймає аналогові вхідні сигнали та формує два цифрові вихідні сигнали, протилежні один одному за знаком), які відмічені знаком '~' на вашій платі Arduino.

Різниця між цими контактами по суті полягає у різниці вихідних сигналів (* в першому випадку – аналоговий, у другому – цифровий). Наприклад, коли ви підключаєте СВД до цифрового контакту, у вас буде тільки два стану: замкнуте (* стан «включено») та відкрите (* стан «викоючено»). Здійснення кліпання – це просто переключення двох станів. Проте для створення мільйонів відтінків за допомогою RGB-СВД вам необхідні проміжні стани, тому вам необхідно буде використовувати аналогові контакти PWM.

Підключіть RGB-СВД за допомогою дротяних перемичок та прототипної плати до контактів Arduino під номерами 6, 5 и 3 (для червоної, зеленої та синьої відповідно). Загальний контакт підключено до землі.

RGB LED connected to breadboard

У цій схемі я використовувала резистори з опором 220Ω (для червоної) и 330Ω (для зеленої и синьої), оскільки червоний колір занадто інтенсивний при використанні того ж опору для зеленого та синього. Ви можете це підрегулювати під час роботи. Якщо ви захочете дізнатися більше про опір та здійснення обчислень згідно із законом Ома, то я раджу вам ознайомитися з матеріалами на Adafruit.

Створення веб-інтерфейсу користувача

Тепер ви створите веб-інтерфейс для контролювання СВД.

Використайте елемент HTML5 <input type="range">, щоб намалювати повзунковий перемикач, що дозволе користувачеві змінити значення кожного “R”, “G” і“B”. Значення кожного кольору знаходиться в діапазоні від 0 до 255 (min="0" max=»255»), і при цьому змінюються на цілі величини, оскільки інкремент має значення 1 (step="1").

За рахунок цього елементу відбувається контроль інтенсивності червоного кольору. Я не буду обговорювати оформлення за допомогою CSS у цьому посібнику, але ви можете ознайомитися з початковим кодом на GitHub (віка gh-pages), щоб подивитися, яке стильове оформлення я визначила для візуальних компонентів  UI (* user interface – користувальницький інтерфейс).

Далі ми дізнаємося, як використовувати API на JavaScript PubNub для передачі даних про колір від UI к Arduino.

Отримайте свої власні ключі для API і потім імпортуйте бібліотеку JavaScript із CDN (* content delivery network – мережа доставлення контента) або зі свого пристрою.

Ініціалізуйте зразок:

Давайте передамо дані для зміни кольору СВД при генеруванні подій у UI.

Додайте слухач подій change для зразку повзунка в DOM (* Document Object Model – об'єктна модель документа) і передайте будь-які зміни до PubNub за допомогою методу publish.

Ви можете використовувати будь-яке ім'я для channel в рядку, але пам'ятайте, що необхідно буде використовувати те ж ім'я при отриманні даних пізніше.

Далі ви будете використовувати Node.js, щоб отримати дані для апаратного забезпечення!

Перетворення Arduino у пристрій IoT за допомогою Johnny-Five і PubNub

Дуже просто запалити RGB СВДи за допомогою Johnny-Five. Для цього використовуйте код нижче:

Чи засвітився ваш СВД червоним? Якщо ні, то перевірте ваш код та ланцюг. Якщо й після цього не працює, то, скоріш за все, ви використовуєте загальний анод СВД замість катода. Спробуйте забрати перемичку від землі та приєднати до контакту 5V.

Тепер подивіться на рядок під коментарем // test. Ви побачите метод color, за допомогою якого визначається значення кольору. У нашому випадку червона компонента має значення 255, а решта – 0, таким чином ваш СВД світиться чисто червоним.

За допомогою Johnny-Five ви можете визначати значення RGB от 0 до 255, як і значення властивості color CSS. Спробуйте змінити значення та поекспериментувати з кольором вашого СВД!

Далі ви будете динамічно змінювати значення за допомогою даних, присланих від UI браузера.

Для отримання даних використовуйте метод subscribe PubNub.

Встановіть модуль pubnub за допомогою npm:

Ігіціалізуйте зразок таким же чином, як ви робили на стороні браузера:

Ви можете прочитати дані, звертаючись до того ж каналу, який ви використовували для відправки даних. Одразу після отримання даних викливається функція зворотного виклику, завдяки якій ви можете передати значення СВД.

Повернений об'єкт объект m – це повідомлення, що прийшло з боку браузера. Наприклад, коли синя компонента має значення 150, ви отримуєте дані {color: 'blue', brightness: 150}, а потім, коли надходять наступні дані –  {color: 'red', brightness: 150} – значення red = 150 складається з blue = 150, у результаті чого маємо фіолетовий колір.

Для ознайомлення з повним початковим кодом відвідайте /node/index.js на GitHub (вітка master).

Та-да-а! Ви тільки-но створили прототип вашого першого інтелектуального СВД IoT.

Internet of Things LED lit up

Ви можете використовувати інші мікроконтролери, наприклад, Raspberry Pi, разом із Johnny-Five ті PubNub, так що варто спробувати створити більше додатків IoT!

Посилання

  • Johnny-Five: Оригінальний фреймворк для програмування роботехніки на JavaScript.
  • PubNub: Мережа потоку даних в режимі реального часу, що дозволяє розробникам створювати та масштабувати мобільні застосунки, веб-додатки та застосування IoT, що працюють в режимі реального часу.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.