Спойлер: дымили электронки всем отделом! Зачем? Чтобы помочь клиенту, конечно же! К нам в Purrweb. обратился производитель электронных сигарет Plonq. Его инхаус-команда пробовала сделать PWA-приложение, но ей потребовалась помощь. Рекламная кампания уже была запущена, сроки поджимали, а в разработке было много сложностей. Но мы, конечно, взялись, потому что любим боль и приключения! Дисклеймер: В тексте упоминается продукция, связанная с потреблением никотина. Мы не призываем вас курить и напоминаем, что курение любой никотиносодержащей продукции вредит вашему здоровью.
Время чтения: 9 минут
Ищете слаженную команду разработки?
Поможем с дизайном и разработкой приложений для бизнеса и стартапов
Plonq разрабатывает и производит электронные сигареты и внедряет более осознанный подход к курению. Например, компания запустила первый в России экопроект по сбору и переработке электронных сигарет. На этот раз они разработали многоразовую сигарету, которая собирает статистику по количеству затяжек, изучает привычки пользователя и помогает отслеживать уровень потребления никотина.
Так выглядит само устройство. Компания получила престижную международную премию Red Dot в категории «Лучший продуктовый дизайн»
По замыслу Plonq, POD-система синхронизируется с приложением и передает в него данные. Владельцы устройств видят статистику потребления никотина и берут свою привычку под контроль, а устройство им в этом помогает.
Прежде чем обратиться в Purrweb, клиенты уже пробовали собрать приложение сами: сделали минималистичный дизайн, продумали отображение статистики, пользовательский путь. Но с разработкой возникли проблемы.
Продукты, связанные с курением, нельзя размещать в App Store и Google Play. И чтобы обойти это ограничение, компании понадобилось PWA-приложение.
Plonq стали искать опытную команду, которая глубоко вникнет в продукт, возьмет на себя бэкенд и фронтенд и бесшовно интегрируется в систему устройства. Так мы с ними и встретились — мы не только умеем создавать IoT-приложения разной сложности, но и знаем, как интегрироваться с внутренней командой клиента. То есть выстраивать здоровую коммуникацию, адаптироваться под уже существующие методы работы и оптимизировать процессы для достижения совместного результата.
А еще, когда мы видим, что на этапе разработки что-то можно улучшить, мы обязательно скажем об этом. Наш главный критерий оценки любой фичи — решает ли она бизнес-цели клиента.
Если вы слышали о PWA-приложениях, то поздравляем, о них знают не все! PWA (progressive web app) — это технология, которая превращает сайт в приложение. Получается мобильное приложение в браузере, которое выглядит почти неотличимо от привычного пользователю — то, что это PWA понятно только по адресной строке сверху или снизу.
Вместе мы обсудили функции приложения:
Состояние устройства. Приложение показывает вкус картриджа, уровень заряда и сигнала (апп синхронизируется с сигаретой по Bluetooth).
Это главная страница приложения
Количество затяжек и умная статистика. Минималистичные дашборды показывают, сколько затяжек человек сделал за день и сравнивает это число со средним за день, неделю и месяц. Если пользователь вышел из зоны действия Bluetooth — например, ушел с устройством, оставив телефон дома — приложение автоматически подгружает актуальную статистику при повторном подключении.
Владелец сигареты отслеживает количество потребляемого никотина
Цвет девайса. Plonq хотели отображать на экране цвет устройства, но мы предложили убрать эту функцию, потому что сигарета не фиксировала такие данные. Разработка фичи на стороне клиента или поиск обходных путей заняли бы время и потратили много сил и денег компании.
Режим контроля затяжек. Приложение дает возможность установить лимит затяжек на определенный промежуток времени. Если превысить указанное количество, то устройство начинает вибрировать.
Стандартное время блокировки: 10 минут
Нам предстояло:
Клиенты предоставили нам дизайн, свои наработки и привезли в офис три устройства с разными вкусами, чтобы мы тестировали их связь с приложением по мере разработки. Что именно мы сделали?
Помогли улучшить дизайн. Мы взяли в работу минималистичный интерфейс, ничего не меняя — дизайнеры клиента нашли удачное решение, с которым мы были полностью согласны. В процессе мы только помогли его немного докрутить. Например, заметили, что не хватало некоторых стейтов и попапов ошибок, и предложили их добавить.
Попапы ошибок, которые мы предложили добавить
Изучили исходный код. Разработчики Plonq уже пробовали связывать устройство и сайт. Они создали простую страницу с кодом и консолью под названием Plonq No Bugs для Chrome и протестировали передачу данных в реальном времени. Это изобретение впоследствии помогло нашим фронтендерам, но с кодом были небольшие проблемы. О том, как мы их исправили, подробнее расскажем дальше.
Так выглядел прототип приложения, которое нам предстояло сделать 🙂
Попарили, не прерывая работу. Наши разработчики дымили прямо за рабочим столом, а все курящие сотрудники просились на проект.
Как часто вы пользуетесь Bluetooth в браузере на смартфоне? Скорее всего, вы им вообще не пользуетесь! Вы просто подключаете наушники через настройки или разрешаете какому-нибудь приложению это сделать. Каждый раз, когда Bluetooth коннектится, автоматически включается нужный протокол, и все работает.
У браузеров все иначе. Если у мобильного Chrome на Android есть поддержка Bluetooth API, то у Safari такой функции просто нет — этот браузер не коннектится с Bluetooth. Занятный факт: «под капотом» все браузеры на айфоне — это Safari, поэтому ни один из них не подходил для нашего кейса.
Клиенты хотели, чтобы их приложением пользовались люди с разными типами смартфонов, поэтому они сделали свой браузер для IOS. Чтобы сконнектить PWA-приложение и устройство, наши разработчики погрузились в изучение документации по нему. А параллельно изучали BLE — протокол подключения Bluetooth к браузеру.
Взгляд на работу с Bluetooth в браузере с точки зрения разработки
Если наши разработчики находили небольшие баги, то инхаус-команда быстро их исправляла, но многое мы не могли преодолеть в принципе. Очевидно, что компания, которая занимается производством электронных сигарет, не разработает браузер на уровне многомиллиардной Google. Например, мы не смогли ускорить коннект с устройством, который по мере работы немного замедляется.
Мы улучшили ситуацию обходным путем. Например, заметили, что после реконнекта скорость передачи данных резко увеличивается. Поэтому в критически важных местах мы добавили невидимые реконнекты. Похожих кейсов было несколько, но почти все они — это дебри языка разработчиков. Мы не стали их сюда включать, верьте на слово!
Так выглядела консоль в кастомном браузере заказчика — непривычно для разработчиков
Совместная работа с кастомным браузером помогала коммуникации — мы с командой клиента были в постоянном контакте и стали еще лучше понимать друг друга. Но вместе с изучением BLE все это сильно затягивало время.
Подключить дополнительных разработчиков мы не могли, потому что проект был сложный: кастомный браузер, технологии PWA и BLE — один только онбординг занял бы очень много времени.
Наши разработчики разобрались с протоколом, и связали Bluetooth, кастомный браузер и устройство. А потом возникли новые сложности.
Клиенты придумали для приложения классную функцию — подсчет среднего количества затяжек за определенный период.
Глядя на дашборд, человек понимает, стал ли он курить больше или меньше
Чтобы эту функцию реализовать, команда клиента придумала формулу подсчета затяжек. Но у формулы был недостаток — она показывала адекватные числа только для тех пользователей, которые уже давно пользуются устройством. Если человек только зарегистрировался, то он получал нерелевантную статистику — например, в первую неделю курения он видел среднее в 4 раза меньше реального, потому что 4 расчетные недели еще не прошли.
Логика, по которой вычислялось среднее по формуле клиента
Мы предложили улучшить математику:
Помимо этого, мы храним данные о том, какое количество никотина было выкурено в конкретный момент времени. Теперь если человек возьмет сигарету в 7 утра, то он сравнит себя с предыдущими днями именно в 7 утра. Это тоже помогает лучше контролировать потребление никотина и механику своих привычек.
Устройство сконструировано так, что забрать с него информацию можно только один раз, после чего его нужно чистить. Мы не можем копировать данные частями. Поэтому раз в 5 секунд мы выкачивали весь пакет, отправляли его на бэк и очищали систему.
Но просто забирать данные вот так — это рискованно, потому что если случится дисконнект или баг (например, не удастся очистить устройство), то одни и те же записи могут отправляться дважды. Тогда пользователь получит некорректную статистику.
⚠️Дисклеймер: дальше мы рассказываем о победах разработчиков — будет звучать, как квантовая механика! Мы постарались максимально упростить все объяснения. Ну, поехали!
1. Избавились от ограничений устройства, добавив фильтрацию. Мы подтягивали на фронтенд последнюю запись с бэкенда, смотрели дату и отсеивали по ней: все, что после — новое, все, что перед — старое. Это защищало нас от рисков, описанных выше.
2. Отреагировали на изменение на стороне клиента. В какой-то момент Plonq поменяли алгоритм выкачивания пакетов, и теперь первая затяжка показывалась как самая новая. Она улетала на бэк, а после фильтрации прилетала обратно, потому что, с точки зрения, системы «самая новая» = «самая последняя». Весь остальной пакет отсеивался, потому что устройство отправляло данные не в том порядке.
Мы можем отсеивать данные разными способами, но чтобы снизить сетевой трафик и быстро загружать страницу, мы выбрали работу с сервером. Теперь отправляли пакет информации с устройства на него, и оттуда же подтягивали нужное, так же отсеивая по дате.
3. Синхронизировались со временем устройства. Время устройства немного отставало от настоящего текущего. Чтобы убрать временные разрывы, мы добавили еще один шаг: теперь, подключаясь к устройству, приложение запрашивает у него его время, сравнивает с реальным и добавляет разницу к каждой затяжке. Казалось бы, теперь точно все работает! Но нет…
4. Исправили баг с нестабильностью времени на устройстве. Оказалось, что в сигарете есть свой таймер. Главное, что о нем важно знать: он работал нестабильно. Происходили тики в подсчете времени, из-за которых и разница во времени постоянно оказывалась разной.
Пример: мы запрашиваем время устройства, сравниваем с текущим, разница оказывается 200 секунд. Запрашиваем еще раз, а она вдруг 196. Поэтому у одной и той же затяжки оказывалось разное время. Клиенты исправили недостаток на своей стороне, но мы потратили время на его обнаружение.
5. Синхронизировались по часовым поясам. Электронные сигареты Plonq любят люди по всей стране, а значит, что и приложение, и устройство работают в разных часовых поясах. Чтобы корректно отображать статистику, нам нужно было считать затяжки по времени пользователя. Если человек в последний раз покурил в первую секунду понедельника, то +1 должна появиться на этой неделе, а не на прошлой.
Дело осложнялось тем, что сервер, который хранит данные и нужен нам для фильтрации, использует для расчетов UTC (Coordinated Universal Time — Всемирное координированное время). Мы придумали, как синхронизировать данные — квантовую механику опустим!
Плюсы аутсорс-разработки — вы не только можете исправить сложные проблемы, но и найти скрытые
Из-за решения скрытых проблем — от кастомного браузера до тиков времени в устройстве — мы потратили больше времени, чем рассчитывали. Проект растянулся на 2 месяца. Получившийся срок был больше, чем первоначальный «горящий». Но для проектов такого типа два месяца разработки — это стандартная практика.
После релиза мы не оставляем клиентов, а продолжаем разрабатывать для них обновления, новые фичи и версии ПО. Для Plonq мы сделали классную функцию «Child Lock». Она помогает блокировать устройство после установленного времени, чтобы дети не игрались с ним, пока родители не видят.
Фича защищает и самих родителей, которые на автомате тянутся к сигарете после того, как только покурили
Есть 3 варианта блокировки:
Мануальная: пользователь просто нажимает кнопку в приложении, и функция активируется.
По таймеру: можно заранее выставить таймер. Например, на 2 минуты. Отсчет начнется после последней затяжки.
По картриджу: если несколько раз высунуть-всунуть картридж, то устройство заблокируется. Разблокировать его можно мануально.
Сейчас приложение активно используют покупатели Plonq: после релиза его установили свыше 1000 человек.
Мы ждем новых функций и идей от клиента. И новых головоломок для наших разработчиков! Они их любят: посмотрите, как мы собрали мозаику из API для криптокошелька (и сэкономили деньги клиента!) и создали омниканальный чат для закупщиков.
Насколько публикация полезна?
Оцени эту статью!
11 оценок, среднее 5 out of 5.
Оценок пока нет. Поставьте оценку первым.
Так как вы нашли эту публикацию полезной...
Подписывайтесь на нас в соцсетях!
Читать
Ваша заявка уже у нас :)
Обычно ответ занимает от 12 до 24 рабочих часов.
Может, вы хотите запланировать онлайн встречу?
Извините, что-то пошло не так при отправке запроса.
Попробуйте позже.