Створіть додаток, який збирає дані датчиків

Sep 13, 2025

Як

Сьогодні доступні платформи для розробки взаємопов'язаних продуктів насолоджуються широкомасштабними доступними, і ми бачили натиснути на підвищену підтримку JavaScript в технологіях iOT, з потужними компаніями, як IBM, Google, Intel, Microsoft та Cisco відкриття API для їх продуктів. Результатом є розширена екосистема мікроконтролерів, лісоруби даних, підключені до хмарних послуг, та адаптованих інтерфейсів, які розбирають дані в режимі реального часу, всі, які представляють нові можливості для дизайнерів з веб-навичками клієнта.

13 кращих програм iPad для проектів Pro

З огляду на це, метою цього підручника є розробка та побудувати те, що це не просто "акуратний", але корисний у реальному світі: взаємопов'язаний продукт (або послуга), який завантажує дані погоди з датчика на місцевий веб-сервер і відображає ці дані в адаптивному користувальницькому інтерфейсі в режимі реального часу. Цей проект ілюструє, як ми можемо відірватися від безпосередніх маніпуляцій у дизайні інтерфейсу та демонструє деякі способи дизайнерів можуть взяти свої методи прототипів за допомогою веб-серверів та плоских конструкцій.

Подивитися на вихідні файли Для цього підручника .

Датчики та мікроконтролери

Для цього підручника ми будемо використовувати мікроконтролер Arduino. Це популярний вибір завдяки дешевий, легкий комплект розвитку та багато онлайн-підтримки. Щоб налаштувати мікроконтроллер на своєму комп'ютері, завантажте середовище розробки (варіант IDE) тут . Мікроконтроллер підключається до вашого комп'ютера за допомогою USB-кабелю, який також є його повноваженням. Код Arduino відомий як ескізи, які написані в C ++-коду, щоб аналізувати дані, що надходять з датчиків.

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — Наша прикладна програма містить датчик (1), мікроконтроллер (2), веб-API (3), а також адаптивний інтерфейс (4)

Оскільки ми розробляємо додаток, який читає дані погоди, я використовував датчик температури LM35. Це хороший, доступний варіант, але так само, як з мікроконтролерами, є достатньо вибрати. Налаштуйте датчик LM35 разом з перемичками дротів і макетів відповідно до Ці інструкції .

Мікроконтроллер працює з файлом ескізу, який створює канал даних з датчика температури LM35 безпосередньо у локальну файлову систему. Щоб встановити це, спочатку потрібно оголосити змінну, щоб утримувати аналогові дані з датчика (змінна - це спосіб назви та зберігання значення для подальшого використання програми - у цьому випадку дані з датчика).

Оголошення функції налаштування (), яка зв'язується з послідовним портом у вашому ноутбуці. Це називається, коли починається ескіз Arduino, і він буде записувати до серійного вікна. Серійний порт використовується для зв'язку між дошкою Arduino та ноутбуком.

Далі ми повинні встановити швидкість передачі передачі - швидкість передачі інформації. Ми хочемо, щоб швидкість 9600, що означає послідовний порт, здатний переносити максимум 9600 біт на секунду з сигналу, що походить у датчик температури LM35, що рухається через кабель USB у ваш ноутбук. Перетворіть дані захопленого сирого датчика в першу чергу у формат температури, потім від цілого до тексту, який потрібно вставити в JSON та утримувану пам'ять.

Нарешті, цикл вищезгаданої функції, тому датчик збирає дані температури безперервно. Мікроконтроллер Arduino буде запущений безперебійним у фоновому режимі, збираючи дані температури у послідовному порту вашого ноутбука.

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — Типовий налаштування Arduino, що складається з кабелів, дротів, штифтів, датчиків та підключення до ноутбука USB

Веб-API

Після того, як читання температури записується в пам'ять, до нього потрібно додати час, перш ніж вставити його в формат JSON. Почати, нам потрібно встановити місце, де буде проживати файл JSON, і відкрити цей файл за короткими інтервалами, щоб додати показники.

Це можна досягти, використовуючи технологію розширеного веб-сервера, але це виходить за рамки цієї статті, і відведе нас до різних дотичних даних. Заради простоти ми будемо використовувати обробку, щоб розібрати дані датчиків, але є багато вгору-і-приїзду, надійна технологія програмування веб-серверів на базі веб-серверів, які можуть бути використані для придбання даних датчика з пам'яті послідовного порту в будь-який веб-сервер або хмара ( подивитися тут ).

Обробка використовує файл ескізу, щоб отримати дані, надіслані Arduino, слухаючи дані в послідовному порту та повертаючи рядок, щоб утримувати показання. Він також використовує функцію малювання (), яка постійно виконує рядки коду, що містяться всередині свого блоку - у цьому випадку, взявши значення від послідовного порту, додавши час часу та друку їх у текстовому файлі, що закінчується в структурі JSON до ["18:05:53", 43.00].

Врешті-решт, ми закінчуємо системою, яка включає в себе лише один датчик температури, мікроконтроллер та веб-сервер. Це прототип для більшої системи придбання даних, що складається з датчиків та хмари, що представляє реальне світовий продукт або послугу.

Адаптивний інтерфейс

На цьому етапі ми хочемо скласти простий інтерфейс з односторонньою програмою (SPA) Starter Pack та інструментом на основі JS, як React або кутовий. Я вибрав реагувати, тому що це дозволяє легко описати, який браузер повинен зробити, видаляє багато шуму при побудові DOM у браузері, і зв'язує дані з будь-якого API дуже швидко. Крім того, замість того, щоб відновити весь DOM, він лише оновлює елементи, які змінилися, що було відмінно підходить для прототипів.

Щоб розпочати роботу з UI, спочатку встановіть спа-центр за допомогою одного з багатьох стартових пакетів, доступних в Інтернеті. Дуже зручний - веб-додаток Boyplate Реактивний комплект . Після того, як ви ознайомилися з структурою файлу, вам потрібно буде встановити новий компонент, який звертається до канаву JSON у локальному веб-сервері або службі хмари та обробляє дані для відображення.

У реагування, SetState є основним методом, який використовується для запуску UI оновлень. Зміни викликаються обробниками подій або зворотних дзвінків, а потім потрібно правильно реалізувати, щоб прочитати файл JSON. Нарешті, ми визначаємо змінні показання, щоб тримати парасовані дані та & lt; читання списку / & gt; Тег у методі рендерингу, щоб представити компонент інтерфейсу, який служить візуалізацією:

 LoadPathsData () {
  це.SetState ({data: data});
}

loadinitialstate () {
  Повернення {data: {readings: []}};
}

Компонентний () {
  це. Завантаженняпатдата ();
}

рендеринг () {
  повернення ("
    & lt; div & gt;
      & lt; readingslist data = {this.state.data} / & gt;
    & lt; / div & gt;
  );
}

Визначте компонент із читанням обліку, щоб утримувати показання з попередньо створеного файлу JSON. Додайте новий клас (список читання) безпосередньо над визначенням класу. Реактивність використовує метод рендерингу для реалізації віртуального представлення рідного компонента DOM (наприклад, & lt; div / & gt; нижче) або будь-який інший визначений компонент. У результаті у нас є компонент інтерфейсу, який відображає читання JSON:

 Var ReadingsList = React.Createclass ({{
  Рендер: функція () {
    повернення ("
      & lt; div & gt;
      
      & lt; / div & gt;
    )
  }
});

Об'єднайте динамічні декларації CSS з відображенням даних, щоб стиль читання в браузері.

Ви можете примушувати освіжати на рівні компонентів, так і за браузером за короткими інтервалами. Це може бути зроблено, використовуючи більш надійну функцію реагування, яка відповідає функціонуванню (яка повідомляє, що вона потребує повторного запуску рендерингу () вище, покликаючи помилково), або реалізується в оздоровчому шаблоні з основною функцією SetInterVal.

При відновленні спа, всі компоненти перезавантажують показники температури в режимі реального часу, оскільки JS та CSS динамічно поєднуються у візуалізації крос-пристроїв. Результат показано на зображенні нижче.

The final interface shows the temperature readings from the sensor, and updates in real time — Остаточний інтерфейс показує показники температури від датчика, а оновлення в режимі реального часу

Що далі?

Основні концепції прототипування IOT, показані в цій статті, можуть бути побудовані для розробки взаємопов'язаних продуктів або послуг, які роблять динамічні дані, корисні та використовуються в адаптивному UIS, незалежно від того, чи вони подаються на мобільному пристрої, менший дисплей або навіть інтерактивний екран телевізора. Основні навички веб-розробки можуть бути винесені за межі веб-серверів та інтерфейсів з плоским екраном за допомогою відкритих веб-технологій, з якими ми вже знайомі.

Веб-професіонали починають вивчати практичні способи роботи з масивами даних, які виникають у датчиках, а потім є користувальницький інтерфейс, розроблений навколо них. Ці дослідження пропонують нові способи мислення про дані та дизайн у взаємозалежних продуктах, в яких CSS не тільки про стилі, а транспортний засіб, за допомогою якого для створення значущих зв'язків між людьми та даними. Існує також багато для експерименту з новими та майбутніми технологіями, що базуються на CSS, які пара CSS декларації з елементами даних для посилення цифрових дослів, включаючи методи рендеризації браузера.

Дані - це все навколо нас, і у нас є унікальна можливість використовувати його, щоб побачити невидимий і писати гачки для нього в CSS через JavaScript ... Ми говоримо про зменшення тертя та створення бездоганної точки контакту між людьми та будь-яким цифровим продуктом. Прийняття JavaScript в платформах IOT пропонує CSS, як і раніше, буде первинним інструментом вибору на базі JavaScript або веб-браузерів всіх розмірів на деякий час.

Ця стаття спочатку з'явилася чистий журнал випуск 289; купити його тут !

Пов'язані статті:

Роль дизайну в Інтернеті речей
Чому ви повинні обійняти дизайн-мислення
5 Основні ресурси навчання CHATBOT

Створіть додаток, який збирає дані датчиків

Датчики та мікроконтролери

Веб-API

Адаптивний інтерфейс

Що далі?

Як - Найпопулярніші статті

Як створити Pin-Up Art

Сплячий портретний живопис з маслами

Зберігайте ідеальний контроль версії з абстрактним

Додайте ефект глюка до вашого веб-сайту

Як малювати традиційну британську сцену

Створіть декоративні плитки в дизайнері речовини

10 Золоті правила для чуйних SVGS

Створення якісних цифрових копій вашого мистецтва

Категорії