Разработка мобильного приложения для криптовалютной биржи Twim

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

Задача: сделать удобный интерфейс для телефонов и планшетов

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

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

Подготовка

Первым шагом в подготовке мобильного приложения стал анализ конкурентов и изучения рынка криптовалют. До этого проекта мы не работали с биржевой торговлей, поэтому мы начали с знакомства с криптобиржами: Илья Логинов (CTO Twim) провел для нашей команды несколько лекций о работе бирж и криптовалютной торговли. Чтобы сделать приложение Twim максимально удобным, мы завели аккаунты на 10 основных криптобиржах, чтобы пройти путь реального пользователя и найти их слабые места.

Инсайты

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

Высокая производительность

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

Удобный интерфейс

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

Адаптация под телефон и планшет

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

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

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

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

Наличие темного оформления

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

Отрисовка графиков

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

Что сделали Surf

Итак, мы поняли, какими качествами должно обладать хорошее приложение для криптобиржи. Что дальше?

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

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

3. Подготовили 2 версии приложения — под планшеты и под телефоны. Оптимизировали работу на обоих видах устройств.

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

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

С какими сложностями мы столкнулись

Медленная передача данных

Одна из основных жалоб пользователей криптобирж — низкая скорость передачи данных. Приложение должно обновлять их до 20 раз в секунду.

Чтобы сэкономить трафик и увеличить скорость, мы скомбинировали gRPC, HTTP/2 и protobuf (буферы протоколов). Так данные о котировках передавались от сервера к клиенту и обратно, по пути преобразовываясь в бинарный вид и “упаковываясь”, чтобы уменьшить размер данных.

С Android проблем не возникло — на момент разработки gRPC отлично работал с Kotlin. Для iOS пришлось писать дополнительную прослойку-интерпретатор для Swift.

Перегрев устройства и мерцание экрана

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

Чтобы снизить нагрузку на процессор и обеспечить нормальную работу аккумулятора, мы решили использовать стеки данных. Так, если новые данные приходят на устройство во время отрисовки интерфейса, они будут складываться в “стопку”. Когда приходит время обновить данные интерфейса, он использует самые верхние (свежие) данные в стеке, и отрисовывает только их.

Итог

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

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