Приложение для аренды пауэрбанков

Главное о кейсе

В итоге мы смогли разработать кроссплатформенное приложение для iOS и Android, которое работает в связке с IoT станциями. Несмотря на то, что изначально мы планировали разработать только одно приложение, в процессе разработки поняли, что заказчику понадобятся еще два:
Приложение для рекламы — приложение для медиарекламы и размещения плейлистов с видеороликами.
Приложение для техперсонала — приложение для техников, которые мониторят работоспособность станций и обновляют прошивку.
На момент запуска приложения в Москве стояло 1000 станций, из них 100 в метро. Большую часть трафика планируется привлекать через метро, но и не забывать про кафе. На момент 15 июня 2021 года было поставлено в кафе 200 “тостеров” — это маленькие станции на 4 слота.

As a result, we’ve managed to develop a cross platform application for iOS and Android, which works in pair with an IoT station. Though at first we were planning on developing only one application, during the whole process we’ve realised that the client would need another two apps:
Advertisement application - an app for placing advertisements and video playlists.
Technical staff application - an app for tech staff to monitor if the station works properly and to update its firmware.
At the time of launch there were somewhere around 1000 stations in Moscow, 100 of them placed in metro stations. Most of the traffic is planned to be received from metro stations, but we also keep in my mind cafe ones. By the 15th of June 2021 we’ve placed 200 “toasters”(small 4 bank stations) in cafes.

Бизнес-задача и ее решение

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

Чтобы разобраться со станцией, связались с производителем и предыдущим подрядчиком заказчика — до этого он успел разработать десктопное приложение. Несмотря на то, что старый код был написан на Java (мы работаем с Node.js), смогли произвести реверсинжениринг и разобраться в сути.
Так мы поняли, что:
1. Станция ≠ сервер (она посылает запросы, а не обрабатывает их)
2. Станция подключается к фиксированному IP (поменять его мы не можем)
3. Станция настроена на работу с операторами сотовой связи (не всеми)

Подключить станцию локально нельзя: чтобы она получала и отправляла запросы, нужно постоянно держать включенным сервер с актуальной версией кода.
Сменить IP тоже нельзя: производители станции утверждали, что мы не справимся. Обратились к ним за помощью — скачали TeamViewer, дали доступ к коду и наблюдали, что они делают. Поняли, что без китайцев это сделать было бы нереально — всё писалось иероглифами. Мы записали все действия и сели разбираться. Они вводили данные в шестнадцатеричной системе и определенном порядке. Воспроизвести их и перевести ASCII в HEX было несложно — так мы и научились менять настройки станции.
Заказчик очень просил добавить бэкдропы как в Maps — нативном приложении для iOS. В React Native анимация делается на JS, из-за чего при попытке анимировать все свойства происходит падение частоты кадров до 30fps.
Когда делали Energo, библиотек, которые могли бы нам помочь, не было. Пришлось использовать абсолютное позиционирование и делать перекрытие элементов, чтобы “спрятать” шторку на главном экране приложения и имитировать поведение нативного бэкдропа. В итоге мы добились стабильного показателя фпс для анимации.

Other than the ordinary task of delivering a ReactNative development, we also had to face a challenge of working with the renting station itself.

To figure out its work pattern we’ve contacted the manufacturer and previous contractor, who previously developed a desktop application. Despite the fact that the code was written in Java (and we work with Node.JS), we’ve done reverse engineering and got the main idea:
1. Station ≠ server (it sends requests and doesn’t receive them)
2. Station connects to the constant IP address (we couldn’t change it)
3. Station is designed to work with mobile operators (not all of them)

It was impossible to connect the station locally: the server with the actual version of the code should’ve been turned on all the time.
Same with changing the IP address: the manufacturer assured us that we couldn’t do it. So we’ve requested their assistance, downloaded a TeamViewer and learned step by step.
The data was in a hexadecimal system and in the particular order. The task was to convert ASCII into HEX. It wasn’t too difficult to accomplish. That’s how we’ve learned to set up the station's settings.
The client also asked us to add backdrops like in Maps (a native iOS application). We tried doing an animation in ReactNative via JS, but it was locked to 30fps.
There were no libraries that could help us, so we decided to use the absolute positioning and create overlapping elements to “hide” a curtain on the main screen and imitate a native backdrop. As a result, we have succeeded in maintaining stable 60fps.

Прочая информация о кейсе

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

EnerGO is a startup for Moscow’s metro stations and cafes so the visitors could rent powerbanks for their smartphones.

Скриншоты