Создайте приложение, которое собирает данные датчика

Sep 15, 2025

Инструкции

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

13 лучших приложений для iPad для Pro Designers

С учетом того, цель этого урока - это разработать и построить то, что не просто «аккуратно», но полезно в реальном мире: взаимосвязанный продукт (или услуга), который загружает данные о погоде из датчика на локальный веб-сервер и отображает эти данные в адаптивном пользовательском интерфейсе в режиме реального времени. Этот проект иллюстрирует, как мы можем отказаться от прямого манипуляции в дизайне пользовательского интерфейса, и демонстрирует некоторые способы, которые дизайнеры могут принять их методы прототипирования за пределы веб-серверов и плоских конструкций.

Посмотреть на Исходные файлы Для этого учебника Отказ

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

Для этого учебника мы будем использовать микроконтроллер Arduino. Это популярный выбор благодаря дешевой цене, легкой комплектации для развития и множества онлайн-поддержки. Чтобы настроить свой микроконтроллер на вашем компьютере, загрузите среду разработки (опция IDE) здесь Отказ Микроконтроллер подключается к вашему компьютеру с помощью USB-кабеля, который также включает его. Arduino Code известен как эскизы, которые записываются в 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, и откроет этот файл с небольшими интервалами, чтобы добавить показания.

Это можно добиться с использованием расширенной технологии веб-сервера, но это за пределами объема этой статьи и заберет нас в разных касательных. Ради простоты мы будем использовать обработку для анализа данных датчика, но есть много опытных технологий программирования Web-серверов, на основе js, которые могут использоваться для получения данных датчика из памяти серийного порта в память в любой веб-сервер или облако ( глянь сюда ).

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

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

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

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

Чтобы начать работу с вашим интерфейсом UI, сначала установите спа, используя один из множества стартовых пакетов, доступных в Интернете. Очень удобно - это веб-приложение Boeterplate Реактивный комплект Отказ После того, как вы ознакомитесь с файловой структурой, вам необходимо настроить новый компонент, который обращается к подаче JSON в локальном веб-сервере или облачной службе и обрабатывает данные для отображения.

В реакции SetState является основным методом, используемым для запуска обновлений пользовательского интерфейса. Изменения запускаются обработчиками событий или обратные вызовы запроса сервера, а затем необходимо правильно реализовать, чтобы прочитать файл JSON. Наконец, мы определяем показания переменной, чтобы удерживать анализируемые данные, а также и LT; readingsList / & gt; Тег в методе рендера для представления компонента пользовательского интерфейса, который обслуживает визуализацию:

 LoadPathsData () {
  this.setState ({данные: данные});
}

loginitialstate () {
  return {data: {показания: []}};
}

ComponentWillMount () {
  this.loadpathsdata ();
}

оказывать() {
  возвращаться (
    & lt; div & gt;
      & lt; данные для чтения игрок = {this.state.data} / & gt;
    & lt; / div & gt;
  );
}

Определите компонент readingsList UI, чтобы удерживать показания из ранее созданного файла json. Добавьте новый класс (список чтений) непосредственно выше определения класса. Реагирование использует метод рендеринга для реализации виртуального представления нативного компонента DOM (например, & lt; div / & gt; ниже) или любой другой определенный компонент. В результате у нас есть компонент пользовательского интерфейса, который отображает показания JSON:

 VAR ReadingsList = Rect.CreateClass ({{
  Визуализация: Функция () {
    возвращаться (
      & lt; div & gt;
      
      & lt; / div & gt;
    Несомненно
  }
});

Объедините динамические декларации CSS с отображениями данных для стиля показаний в браузере.

Вы можете принудить - обновить либо компонент или уровень браузера с небольшими интервалами. Это можно сделать, используя более надежную функцию ATHOUPDATE RACT PERSEUPDATE (которая сообщает, что он должен повторно запустить рендеринг () выше, вызывая ForceUpdate) или реализован в рендеринге нефритового шаблона с базовой функцией Setinterval.

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

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

Что дальше?

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

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

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

Эта статья изначально появилась в Чистый журнал Выпуск 289; Купить это здесь !

Статьи по Теме:

Роль дизайна в интернете вещей
Почему вы должны принять дизайн мышления
5 Основные ресурсы обучения чатбота

Создайте приложение, которое собирает данные датчика

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

Интернет-API

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

Что дальше?

Инструкции - Самые популярные статьи

Ваше хранение Apple iCloud Full? Вот как освободить место

Рисунок Рисунок: руководство для начинающих

Получить больше от Artrage 6: верхние советы для повышения вашего рабочего процесса

Как к Китбаше на ходу с shapr3d

Создайте сцену с Renderman для Maya

Создание специальной печати отделки в InDesign

Создайте страницу анимированной сплит-экрана

Как добиться лучшего освещения с V-Ray

Категории