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

30 апреля 2021, 13:00
0

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

Делимся нашим кейсом по разработке мобильного приложения для криптовалютной биржи Twim.
Разработка мобильного приложения для криптовалютной биржи 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: это был наш первый проект в сфере биржевой торговли и он занял почетное место среди других наших финтех приложений. Теперь мы знаем об этом гораздо больше — и рады делиться своими знаниями с другими людьми.

Ответить?
Введите капчу