Проект

IoT-лаборатория

Награды

Золотое приложение

Медицина, здоровье, фитнес, красота

Tagline

Лучшая публикация агентства

Tagline

Лучшее решение в Mobile, AR, VR, IoT

Tagline

Лучшее решение в IoT

Золотое приложение

Медицина, здоровье, фитнес, красота

Tagline

Лучшая публикация агентства

Tagline

Лучшее решение в Mobile, AR, VR, IoT

Tagline

Лучшее решение в IoT

IoT-софт, веб-портал и мобильное приложение для медтех-стартапа

Экспертизы

Аналитика Проектирование Дизайн Frontend Backend

Дата

2019

Тип продукта

Мобильные приложения

Интерфейсы и дашборды

Порталы и сервисы

Отрасль

Медицина и здоровье

Содержание

Заказчик
Проблема и задача
Аналитика
Проектирование интерфейса
При проектировании нужно было решить две головоломки
Дизайн
Сенсорная клавиатура IoT-интерфейса
Календарь и таймер IoT-интерфейса
Кнопки изменения физических параметров
Защита от случайного нажатия
Разработка и технологии
Готовый продукт

Видео-презентация IoT-разработки для микробиологической лаборатории

Стоимость разработки — $ 50 000 — 80 000. Срок проекта — 7 месяцев. Команда проекта — 14 человек: менеджер проекта, специалист по автоматизации систем управления, аналитик, архитектор, 6 разработчиков, 4 дизайнера.

Заказчик

Американский стартап, который поставляет оборудование и программное обеспечение на предприятия здравоохранения и в биотехнологические лаборатории США. В основе стартапа идея умной лаборатории: единого ИТ-пространства для лабораторного оборудования с возможностью удаленного управления, дистанционного проведения исследований и обмена полученными данными. В перспективе — внедрение machine learning.

Проблема и задача

У компании были чертежи будущего инкубатора. По задумке это микробиологическая камера со встроенным модулем для регуляции температуры и подключаемыми модулями для управления составом атмосферы внутри нее.

Для производства продукта компании были нужны инвестиции и предпродажи. А для этого необходимо презентовать готовый продукт, продемонстрировать его инновационность и привлекательность для покупателей.

Стартап обратился в Атвинту, чтобы мы оживили эту систему при помощи IIoT-технологий* и сделать ее более удобной для пользователей, чем уже существующие аналоги.

Перед Атвинтой стояли задачи:

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

*IIoT — сокращение от Industrial Internet of Things, т.е. «Промышленный Интернет вещей». Эти технологии схожи с IoT на потребительском рынке. Отличие — в дополнительной безопасности и стабильность работы системы, разграничении по правам доступа, защите от случайного ввода и изменения данных.

Аналитика

Особенность проектирования софта для «умных вещей» — разобраться не только с пользовательским взаимодействием через интерфейс, но и понять принцип работы самого устройства. Если по-простому, нам предстояло сначала изучить, как будет работать электроника, и только потом браться за разработку интерфейса и программирование.

Устройство прибора: как работает электроника

В общем виде прибор должен работать так:

В металлическую камеру встроен модуль для управления температурой внутри него. Дополнительно к камере подключают модули для управления концентрацией газов: кислорода, азота и углекислого газа. Исследователь настраивает параметры для модулей и отслеживает, как изменение факторов среды влияет на поведение исследуемого образца. Пользователи управляют оборудованием в самой лаборатории или дистанционно. В лаборатории параметры задают через дисплей микробиологического инкубатора, дистанционно — через веб-сервис или мобильное приложение.

Видео-презентация IoT-разработки для микробиологической лаборатории

Илья Горбаров

CEO Атвинты

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

Мы привлекли к работе специалиста по электронике и автоматизированным системам управления. По его консультациям заказчик в США собрал прототип будущего продукта, а мы параллельно создали эмулятор: к Raspberry Pi с экраном подключили микроконтроллер, имитирующий работу реального оборудования.

Илья Горбаров

CEO Атвинты

Перевезти всё оборудование в Россию оказалось нереально. Например, таможня несколько недель не пропускала элемент Пельтье за 400 баксов. Таможенники требовали то одни документы, то другие. Мы не могли так долго ждать каждую деталь, иначе проект бы попросту встал. В итоге приняли решение оставить у нас только программирование и консультации по электронной части.

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

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

Итак, прибор с помощью модулей температуры, влажности, O2, CO2 и N2 меняет микроклимат внутренней камеры и передает исследователю информацию о текущем состоянии эксперимента.

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

Например, задана сессия, чтобы температура через 3 часа поднялась до значения Х. Датчик автоматически через 3 часа повысит температуру, а исследователь будет мониторить, как изменятся показания остальных датчиков после повышения температуры.

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

Сотрудникам лабораторий нужны такие функции инкубатора:

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

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

Подробнее о разработке UX в статье: Цели пользователя — вперед: как проектировать интерфейс для разных устройств на примере IoT-лаборатории

Потребности пользователей: какую информацию будут считывать

Илья Горбаров

CEO Атвинты

Основатель стартапа — медик по образованию. Он знает потребности в лабораторном оборудовании для этой сферы, и насколько неудобно и непонятно то, что предлагают другие компании: интерфейс скорее запутывает, чем помогает запустить эксперимент, датчики дают погрешность, данные выводятся неточно.

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

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

Мы учли эту потребность и сделали визуальный прогресс-бар внизу каждого экрана.

Проектирование интерфейса

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

В первую очередь спроектировали интерфейс для лабораторного оборудования, после чего адаптировали его к десктопу и мобайлу. Делать наоборот нельзя: интерфейс IIoT-девайса напрямую завязан со спецификой работы электронной части продукта, в то время как требования для веб-сервиса и мобильного приложения — гибче.

При проектировании нужно было решить две головоломки

Конструктор для создания независимых сессий

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

Например, для исследования нужно в течение часа поддерживать постоянную температуру 30°С. При этом первые полчаса эксперимента будем повышать концентрацию CO2 до заданного уровня, а вторые полчаса — снижать его содержание в камере.В момент запуска сессии температурному модулю передается целевая температура, которую он будет поддерживать на протяжении эксперимента, параллельно модулю CO2 передается целевое содержание углекислого газа. Через полчаса модулю CO2 будет передано другое значение концентрации. Он запустит проветривание камеры и снизит содержания газа.

Отсюда вытекают особенности экрана сессии:

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

Мы сделали обозначения сессии в виде кирпичиков-кнопок.

Длина кирпичика визуально показывает, сколько времени поддерживается целевое значение каждого показателя: температуры, влажности или концентрации газа. Ширина блока спроектирована исходя из средней площади нажатия пальцем. При нажатии на кнопку-кирпичик открывается окно настройки.

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

Максимум данных на маленьком экране

Диагональ экрана микробиологического инкубатора — всего 7 дюймов, или 17,8 см. Для сравнения — это размер мобильного телефона. Например, у iPhone Xs Plus экран 6,5 дюймов.

И на этом экране необходимо показать все данные по каждому модулю: как менялись за время эксперимента показатели температуры, содержания азота, кислорода, углекислого газа. А ведь эксперимент может длиться неделями! И на экране нужны отчеты с данными за все время.

Дополнительная сложность: каждый показатель имеет свои единицы измерения: температура — в градусах Цельсия или Фаренгейта, содержание газов — в процентах. А значит, нужно придумать, как вывести все параметры на одном графике, несмотря на то, что у них разные шкалы значений.

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

При отрисовке дизайн-макетов сделали графики еще удобнее для восприятия: задали каждому модулю свой цвет графика и маркировки. На шкале флажком соответствующего цвета отмечено текущее значение параметра.

Еще один экран, где нужно скомпоновать данные — история сессий. На этом экране сделали еще большее упрощение графиков по каждому параметру. Здесь по каждому параметру пользователь видит общий тренд в виде графика и границы изменения показателей за время каждой сессии. Детальный отчет открывается при клике на плашку сессии.

Обратите внимание на упрощенные графики. Это не просто символические иконки, а миниатюра большого графика с экрана состояния.

Дизайн

Главный принцип интерфейса — сделать удобно и под цели пользователей. Это правило актуально и для массового пользователя, и для промышленной разработки. С одним отличием: в цене ошибки пользователя.

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

Цветовое решение: удобство восприятия данных

Интерфейс выполнен в темной теме с контрастными цветами графиков: так данные удобно считывать с экрана и при этом цвета интерфейса не спорят цветовым решением самого устройства.

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

Устройство показывает не только ход эксперимента в виде графика, данные в отчетах представлены в виде таблиц. Информацию в таком виде проще считывать, если она расположена на белом фоне. Поэтому экран с отчетами реализован в светлой теме.

Удобство взаимодействия пользователя с интерфейсом

Мы начали с разработки интерфейса микробиологического инкубатора, а после адаптировали его для веб-портала и мобильного приложения. Главное отличие этих версий — в способе ввода информации пользователем: в десктопном интерфейсе пользователь управляет курсором, а на экране девайса и в приложении — пальцем.

Как спроектировать взаимодействия для браузера и мобильных, было понятно: для веба, iOS и Android есть стандартные решения. Для интерфейса основного устройства пришлось придумывать логику и элементы ввода информации с нуля.

Для начала исследовали все привычные решения, которые существуют на рынке: как устроены сенсорные клавиатуры, выбор даты и изменение числовых параметров в существующих интерфейсах. Изучили, что общего во всех этих интерфейсах, а где способы ввода отличаются. После этого узнали у пользователей, какими интерфейсами пользоваться удобнее и почему. На основе собранной информации реализовали инпуты.

Сенсорная клавиатура IoT-интерфейса

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

Календарь и таймер IoT-интерфейса

Реализовали календарь программирования отложенных сессий с заданной датой и временем начала. Для удобства мы не стали делать полный календарь: пользователю достаточно видеть ближайшие дни. Даты в виде квадратных плашек удобно нажимать на сенсоре и листать в бок. Выбор времени старта сделали в виде колеса прокрутки.

Кнопки изменения физических параметров

В некоторых случаях пользователям нужно повысить или снизить значение параметра в текущей сессии. Изменить температуру или концентрацию газов в камере можно с экрана мониторинга кнопками «+» и «—» соответственно.

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

Необходимо было наглядно показать процесс работы модуля и при этом не запутать пользователя лишней информацией на экране.

Для наглядности время отклика модуля реализовано в виде прогресс-бара вокруг кнопки повышения/понижения параметра. Рядом с кнопкой расположено целевое значение показателя, а на графике отображаются текущие показания датчиков и тренд ближайших изменений.

Защита от случайного нажатия

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

Адаптация под десктоп и мобайл

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

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

Под каждый формат дизайнеры Атвинты разработали UI-кит со всеми элементами и всеми их состояниями. В них описаны все кнопки, иконки и даже схематичные состояния графиков для экрана с историей сессий.

Закажите разработку дизайна мобильного приложения, веб-сервиса или сложного интерфейса

Разработка и технологии

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

Для этого:

Запрограммировать для Raspberry Pi систему управления инкубатором: интерфейс промышленного оборудования, систему сбора и локального хранения данных об исследованиях
Подружить «мозг» инкубатора на Raspberry Pi и микропроцессоры подключаемых модулей, чтобы верно передавать команды на электронику
Реализовать облачное хранение данных и удаленное управление через веб-сервис и мобильное приложение
Предусмотреть бесперебойность работы оборудования и оперативное решение технических проблем в случае их возникновения

Оживить лабораторное оборудование

Для управления инкубатором в него встроен компьютер Raspberry Pi, соединенный с сенсорным экраном. Через экран пользователь управляет лабораторным девайсом. А сам компьютер собирает, хранит и передает на сервер данные о ходе эксперимента при подключении к интернету.

Мы с нуля разработали программное обеспечение под Raspberry Pi с учетом спроектированной логики интерфейса. Дальше предстояло связать «мозг» инкубатора с электронными модулями: создать программу, которая передает команды от интерфейса на электронные модули, собирает информацию с датчиков и записывает на жесткий диск прибора.

Сложность в том, что микробиологическая камера и электронные модули работают на разных процессорах. Интерфейс и сам инкубатор — на компьютере Raspberry Pi. А встроенный температурный и съемные газовые модули (CO2, N2, O2, влажность) — на микропроцессорах Arduino. Для них пришлось писать независимую прошивку, которая считывает показания датчиков и получает команды для запуска или остановки модуля.

Еще один нюанс: при разработке программы для IIoT недостаточно просто написать код. Необходимо тестировать, как он работает в связке с электроникой.

Тестировать прошивку под Arduino у себя не получилось: попытка собрать тестовый модуль провалилась, когда таможенники несколько недель не пропускали в Россию нужные детали.

Тестовый образец модуля заказчик собрал у себя. Программисты Атвинты написали к нему интерфейс обмена данными, который переводит запрос микроконтроллера модуля в электронные сигналы. А наш специалист по электронике и автоматизации консультировал заказчика по технической части.

Мы параллельно реализовали программу обмена между операционными системами интерфейса и модуля устройства. Программа преобразовывает команды, введенные пользователем через интерфейс, в нужный формат и передает их на микропроцессор модуля. Микропроцессор дает команду электронике: нагреть или охладить камеру, повысить концентрацию газа. Датчики модуля передают сигнал обратно к интерфейсу, и пользователь видит на экране текущее состояние эксперимента.

Синхронизировать лабораторный девайс с вебом

Фишка продукта — в возможности удаленно управлять лабораторией и следить за ходом эксперимента, а также аккумулировать все результаты исследований на удаленном сервере. Для этого необходима синхронизация с веб-сервером в реальном времени.

В IoT есть привычный протокол передачи данных MQTT. Однако под наши задачи он не подходил. Поэтому мы создали свой протокол, отвечавший потребностям разработки.

Юрий Кабанов

MQTT — это pub/sub. Такой протокол вполне подойдет для приложений уровня «подписаться и следить за показаниями», например, если мы хотим отображать в мобильном или веб-приложении текущие значения. Но он плох для синхронизации исторических данных и не имеет нормального разграничения доступа, который требовался в этом проекте. Из-за этого пришлось бы поверх него сделать request-response API.Все это обусловлено тем, что мы подписываемся на изменения показаний. Если подписавшихся нет, то данные никому и не будут доставлены. При этом MQTT-брокеры не имеют собственного хранилища, за исключением небольшого буфера. Нам же важно сохранять данные на устройстве и автоматически синхронизировать их с облаком при подключении оборудования к интернету.Еще MQTT лично мне не понравился из-за отсутствия подходящих удобных библиотек на Go.Чтобы не бороться с недостатками pub/sub и не городить поверх него дополнительный протокол, не писать свои библиотеки, мы взяли request-response протокол (gRPC) и построили поверх него свой API.Еще один плюс такого решения — надежность синхронизации. Данные гарантированно не потеряются, как в случае ограниченного буфера MQTT-брокера, есть гарантия at-least-once доставки и идемпотентность апдейтов.

Для выхода устройства в сеть разработали программный модуль интерфейса и настройки для поключения через кабель, Wi-Fi или 3G-модем. Даже если устройство какое-то время работает в офлайн-режиме, сразу после подключения интернета автоматически произойдет синхронизация с учетной записью на сервере.

Позаботиться о безопасности и бесперебойности работы

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

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

Для защиты устройства от постороннего вмешательства предусмотрели автоблокировку инкубатора. Открыть или изменить данные на самом устройстве можно только по пин-коду.

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

Как заказать веб разработку в Атвинте

Готовый продукт

Наш заказчик еще в процессе разработки заключил предварительные контракты на поставку с несколькими исследовательскими институтами в США. После релиза они презентовали продукт инвесторам и привлекли 15 млн. долларов на производство и развитие продукта.

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

Спустя год на базе разработанного программного обеспечения и интерфейса мы вместе с заказчиком развили концепцию «умной лаборатории», которая объединяет в себе различные устройства, анализирует данные с помощью искусственного интеллекта и помогает проводить сложные исследования благодаря технологиям машинного обучения.

Удобный и функциональный дизайн интерфейса стал одним из ключевых факторов успеха для IoT-продукта. Хотите так же? UX-дизайнеры Атвинты помогут спроектировать интерфейс, который будет удобен, понятен и визуально привлекателен для вашей аудитории.

На Tagline Awards 2018 проект получил серебро в номинации «Mobile, AR, VR, IoT», а в 2019 — золото в номинации «Лучшее использование IoT». В феврале 2019 разработка принесла нашему агентству 2 место на всероссийском конкурсе «Золотое приложение».