Как приручить китайское железо и подружить его со столичным метро: кейс приложения EnerGO

Когда у Purrweb заказали приложение для аренды аккумуляторов, мы ещё не знали, что нас ждёт. А ждали нас интернет вещей, китайский язык, антитеррористические правила в метро и пандемия. Мы расскажем об этом и о том, как одно приложение превращается в три в процессе разработки. Садитесь поудобнее и не забудьте поставить телефоны на зарядку.

Разработка мобильного приложения с железом из Китая похожа на первую поездку на велосипеде: колеса умеют ездить только по китайским дорогам, ты знаешь, как крутить педали, но не понимаешь, как связать с ними ноги. Такой «поездкой» для нас стала разработка IoT приложения EnerGO для аренды аккумуляторов, где железо — станции из Китая. В какой-то момент нам нужно было ехать одновременно на трех велосипедах.

EnerGO — стартап, с помощью которого пассажиры столичного метро и посетители кафе могут арендовать аккумуляторы для смартфонов на одной станции и оставлять на другой.

На разработку IoT проекта заказчика вдохновили поездки в Китай. Там он познакомился с ребятами, которые делают большие (с медиаэкранами) и маленькие (без экранов, только ячейки) станции для аренды аккумуляторов. К моменту старта у проекта в Москве уже были конкуренты, но заказчику хотелось сделать свой стартап на базе китайских технологий. Главное отличие от конкурентов — размещение станций в метро. На уровне приложения «киллер фичи» не закладывали: объём работ над MVP и так был большим.

Заказчик обратился к нам в сентябре 2019 года и предложил нам разработать мобильное приложение для своего стартапа. Релевантный опыт у нас уже был — дизайн аналогичного стартапа ChargedUp в Лондоне.

На старте мы договаривались сделать одно приложение — для арендаторов. Еще два приложения появились в процессе и, конечно, были срочными:

Начали с дизайна и решили опираться на похожие проекты, над которыми успели поработать: EvTrip и ChargedUp. Смотрели на конкурентов и паттерны от Apple — тогда как раз начали набирать популярность бэкдропы. Чтобы реализовать их на React Native, пришлось нехило попотеть, но об этом чуть позже.

За основные цвета взяли жёлтый и чёрный. Жёлтый как символ энергии, чёрный как хорошо контрастирующий с ним цвет.

Работу дизайнера распланировали на недельные спринты и справились с задачей за два спринта. Работали быстро и четко, во многом благодаря опыту с ChargedUp. С ним мы разобрались в матчасти ниши, узнали все, что нужно. От ChargedUp мы взяли лучшее: оптимальные UX-решения и нереализованные UI идеи.

Дизайн согласовали быстро и перешли к разработке. Работали командой из шести человек: менеджер, дизайнер, три разработчика и тестировщик. Использовали наш классический стек — React Native + Nest.js.

Основное приложение состоит из двух блоков: само мобильное приложение для пользователей и модуль работы со станцией. EnerGO для нас стал первым проектом с разработкой для интернета вещей (IoT), а именно для китайских станций зарядки и хранения аккумуляторов. Документация к станциям написана на китайском, который мы перевели через Google-переводчик. Такой перевод оставляет желать лучшего, поэтому мы пошли обходным путём: связались с производителем из Китая и предыдущим подрядчиком, который до нас работал над первой версией десктопного приложения. Хоть старый код и был написан на Java (мы работаем с Node.js), мы смогли в реверс-инжиниринг.

Мы поняли, что:

Станция — не просто «коробка» с аккумуляторами. Это «умное» устройство, у которого есть подключение к интернету. Эту задачу станция должна выполнять с помощью симкарты, но китайские станции российские симкарты читать отказывались. Долгое время мы этого не понимали, думали что проблема в нас, ведь в логах шли запросы. Примерно через месяц мы поняли, что с нами все ок, а вот станциям требовались специальные настройки в прошивке. Их должны были сделать в Китае перед отправкой. И сделали, но единственным оператором, которому это не помогло, был Билайн. Знаете, какую симку мы все это время использовали?

Тимлид на проекте EnerGO с улыбкой вспоминает момент «прозрения».

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

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

Заказчик очень просил добавить бэкдропы как в нативном приложении iOS — Maps. Мы думали, что это дело на пару часов, но всё оказалось немного сложнее. Сейчас объясним.

Проблема бэкдропов на React Native в том, что анимация делается на JS и когда анимируешь все свойства, частота кадров падает до 30 fps.

Мы включили смекалку и нашли выход: использовать PanResponder API и сделать верстку с абсолютным расположением объектов. Благодаря правильному позиционированию, нам удалось «спрятать» шторку — она уже лежит на главном экране приложения. Когда пользователь потянет экран вверх на определенное количество пикселей, произойдёт магия.

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

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

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

Здесь тоже главной проблемой были сроки, а в реализации всё очень легко. На бэке был готовый код, нужен был только клиент. По возможностям приложение похоже на пользовательское (которое скачивают арендаторы аккумуляторов). О дизайне здесь почти не беспокоились, техническая реализация была в приоритете.

Наверное, сложно найти проект из 2020 года, который не пострадал из-за ковида. Станции из Китая мы ожидали получить в середине ноября 2019 года. Но в это время Китай закрылся. Отправка сдвигалась на середину декабря, потом января. Пока ждали павербанки и станции, вышли за пределы MVP: сделали анимации в приложении, поработали над лендингом, докрутили панель администратора.

Мы помогали станциям пройти таможню, как могли — отвечали на технические вопросы в декларации. К концу января станции добрались в Москву. Одну маленькую станцию доставили к нам в офис в Омск, чтобы тестировать приложение в реальных условиях. Большая станция тяжелая и занимает много места, поэтому ее в Омск не повезли, но тестировать приложение на ней тоже нужно. Флоу маленькой станции отличался от большой, поэтому, чтобы быть уверенным в запуске на 100%, наш тимлид сам поехал в Москву на тестирование большой станции. Разработка приложения для интернета вещей — это непросто😅

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

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

Более серьезная проблема была в размещении станций в метро. На станциях не должно быть открытых ёмкостей (например, коробок, ящиков, мусорных корзин) — это антитеррористическая мера. Поэтому для станций в метро мы закупили специальные станции с закрывающейся заслонкой. Ее можно открыть только через приложение. В маленьких станциях заслонка открывается нажатием на неё.

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

Для флоу возврата мы предложили интересное дизайнерское решение. Теперь приложение спрашивает пользователя, какая перед ним станция. Маленькая — вставляй аккумулятор. Большая — сканируй QR-код станции и жди, пока она откроет заслонку. Если с запросом все успешно, слева от заслонки замигает лампочка.

Хотя основной трафик приходит через метро, про кафе и другие наземные точки не забываем. Чтобы станции было легко вписать в интерьер, EnerGO предлагает мини-версии зарядных станций на 4 слота. Вот как они выглядят.

В середине марта 2021 зарелизили версию приложения с кнопкой паровозика — это фильтрация станций, которые расположены в метро.

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

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

EnerGO достигли своих целей: стартап вышел на самоокупаемость осенью 2021 года, сейчас в Москве работает более 1000 станций аренды, а приложение нравится пользователям.

Оценили не только пользователи, но и профессиональные дизайнеры. В марте 2022 приложение заняло 2-е место в категории «Транспорт и Путешествия» в рейтинге «Золотое приложение». Посмотреть на дизайн поближе можно в нашем кейсе.

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

У нас ещё много интересных кейсов!
Недавно рассказывали про разработку приложения для рестораторов.
А ещё про создание криптокошелька.
И про эко-приложение для контроля выбросов в атмосферу.

Ставьте лайки и подписывайтесь! Так и нам будет приятно, и вы не пропустите новые материалы.
Пишите комментарии, мы на них обязательно ответим.

#дизайн #разработка #MVP #никтонечитаеттеги