Twim

Подготовились и разобрались в особенностях работы биржи

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

Технический директор Twim, Илья Логинов, провëл для нас лекции и рассказал все нюансы сложных ордеров. Например, мы узнали, как работает скользящий стоп-лосс. К разработке интерфейса мы тоже подготовились: досконально изучили примерно 10 популярных криптобирж. Для работы над проектом выбрали UX-дизайнера с опытом торговли на бирже.

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

Спроектировали UX

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

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

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

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

Сделали UI-дизайн

На старте проекта мы получили от Twim наброски логотипа. Дальше разрабатывали фирменный стиль, и позже он стал основой для UI веб-терминала.

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

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

Использовали свою архитектуру при разработке

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

Каждый элемент нашего архитектурного паттерна четко описан, а архитектура опубликована публично (репозиторий iOS команды Surf и репозиторий Android команды Surf). Такая стандартизация помогает клиенту легко забрать проект инхаус при необходимости.

Настроили отрисовку биржевых графиков

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

TradingView написана на JavaScript, поэтому для отображения графиков мы использовали компонент WebView и написали нативные обертки на Swift и Kotlin. Данные получали от сервера биржи по gRPC и передавали их в TradingView.

Обеспечили высокую скорость передачи данных

Twim было очень важно, чтобы котировки обновлялись постоянно и практически в реальном времени — 20 раз в секунду. Чтобы обеспечить такую скорость передачи данных, для взаимодействия с backend мы использовали комбинацию gRPC, HTTP/2, protobuf.

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

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

Избежали перегрева аккумулятора устройства и мерцания экран

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

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