Каким должно быть приложение для криптобиржи: наш опыт разработки

Разбираем, что нужно пользователю от приложения криптобиржи и какие ошибки в нём бесят больше всего.

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

Приложение мы разработали. В 2018 году оно появилось в сторах сперва в стадии бета-теста, а потом и раннего доступа. Но планируемый запуск приложения на азиатском рынке не состоялся из-за падения курса биткоина.

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

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

Чтобы понять, как сделать хорошее приложение, мы попросили CTO Twim Илью Логинова прочитать нам несколько лекций о том, как работают криптобиржи.

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

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

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

Для Twim мы разработали нативные приложения для iOS и Android. Использовали стандартную для индустрии архитектуру, в которую внесли некоторые дополнительные элементы. Стандартная схема удобна для разработчика: заранее понятно, как писать код, как приложение поведёт себя в разных бизнес-сценариях и как упростить автотестирование. Каждый элемент архитектуры задокументирован, поэтому команде заказчика, которая будет поддерживать приложение, будет просто с ним работать.

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

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

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

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

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

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

Вот, например, отзыв пользователя о начале работы с приложением Binance.

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

На создание UX Twim мы потратили около двух месяцев.

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

Например, приложения крупнейших криптобирж Binance и Bitfinex оформлены в чёрной теме. А вот ориентированная на рынок России и стран СНГ криптобиржа EXMO поддерживает сразу 2 режима — у них есть возможность переключиться с тёмной «ночной» темы на светлую «дневную».

Для Twim мы выбрали тёмную тему. Остальные элементы сделали выделяющимися и контрастными. Кнопки — жёлто-оранжевыми, потому что этот цвет хорошо виден на тëмном фоне. Для шрифтов выбрали белый, но определённой степени интенсивности.

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

Чтобы отрисовать графики для Twim, мы воспользовались библиотекой самой популярной платформы финансовой визуализации TradingView. Её используют практически все торговые терминалы. Её преимущество в том, что благодаря гибким настройкам можно отобразить огромное количество индикаторов, которые могут понадобиться трейдерам.

С технической точки зрения процесс отображения графиков в биржевом приложении не так прост, как кажется. Для отображения графиков из TradingView нам понадобился компонент WebView. Он позволяет встраивать web-страницы в Android-приложения. Чтобы графики корректно показывались и на IOS, и на Android устройствах, мы написали дополнительные обработки — нативные обертки на Swift и Kotlin.

Процесс выглядел так.

Очень важно, чтобы котировки в приложении криптобиржи обновлялись постоянно и практически в реальном времени. Не все приложения могут похвастаться высокой скоростью работы. Например, у пользователей есть нарекания к скорости работы мобильного приложения площадки для профессиональных трейдеров KuCoin. А приложение биржи EXMO не оптимизировано для работы на мобильном трафике.

Вот как реагировали пользователи на то, что в приложении Binance после обновления временно снизилась скорость работы.

Как мы решали эту проблему?

При разработке приложения мы стремились сохранить высокую скорость передачи данных — они должны были обновляться до 20 раз в секунду. Поэтому вместо REST мы использовали связку из gRPC, HTTP/2 и буферов протоколов (protobuf).

Вот как это работало. gRPC — высокопроизводительный фреймфорк для удалённого вызова процедур от Google. С его помощью приложение передавало потоки данных — котировки криптовалют — от сервера к клиенту и обратно. Протокол HTTP/2 преобразовывал данные в бинарный вид. Это экономило трафик и повышало скорость их передачи.

Протокол сериализации protobuf стал альтернативой JSON. Он упаковывал данные для клиента и сервера и делал это очень быстро, так как они были в бинарном виде, оптимизированы под минимальный размер сообщения.

В 2017 году, когда мы делали приложение для Twim, Android корректно работал с gRPC, так как уже были стабильные библиотеки. А вот для iOS мы написали интерпретатор, который генерировал сущности на языке Swift, на котором писали приложение для iOS. Сейчас в такой прослойке необходимости нет, так как разработчики уже сделали реализацию для Swift.

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

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

Как мы решали эту проблему?

Мы сложили данные в стек — можно сравнить со списком или стопкой. Пока интерфейс отрисовывает новые данные, с сервера приходят ещё обновления, они последовательно складываются в наш «список»-стек. Когда UI обращается за новыми данными, он берёт последнее, самое актуальное обновление, и рисует его. Так процессор успевает переработать информацию, а аккумулятор работает в нормальном режиме.

Мы разрабатывали и другие приложения для финтех сектора. Если вам интересно почитать про наши проекты, заходите на наш сайт. Если появились вопросы по разработке приложения для Twim, пишите в комментариях, будем рады ответить. Кстати, весь код мы публикуем в публичных репозиториях: репозиторий iOS команды Surf и репозиторий Android команды Surf.