{"id":4711,"title":"\u041f\u043e\u0434\u043a\u0430\u0441\u0442 \u043e\u0442 Mercedes-Benz \u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u0445 \u0441 \u0410\u043d\u0442\u043e\u043d\u043e\u043c \u041a\u043e\u043c\u043e\u043b\u043e\u0432\u044b\u043c","url":"\/redirect?component=advertising&id=4711&url=https:\/\/vc.ru\/promo\/263165-korotko-podkast-o-tehnologiyah-i-innovaciyah-ot-mercedes-benz&hash=c6f93899ff5e0c658ae71a18a81977a3309accf3b2bfd459f77ec74e37ef61d4","isPaidAndBannersEnabled":false}
Сервисы
Surf

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

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

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

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

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

Как мы изучали рынок

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

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

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

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

Особенности приложений для криптобиржи

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

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

1. Приложение должно работать и с телефона, и с планшета

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

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

Для смартфона нужны только базовые возможности: стоимость портфеля, котировки криптовалют, совершённые операции

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

Интерфейс для планшета в приложении Twim

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

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

2. Приложение должно быть удобным

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

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

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

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

Прототип интерфейса для Twim

3. Чем отличается дизайн приложения для криптобиржи

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

Пример оформления в чёрной теме — так выглядят экраны криптобирж Binance и Bitfinex

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

В мобильном приложении EXMO можно выбрать удобную тему

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

Такой дизайн интерфейса разработал Surf

4. Графики — важная часть приложения для криптобиржи

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

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

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

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

  1. Данные от сервера биржи по протоколу для удалённой передачи данных gRPC передавались в TradingView.
  2. Там они преобразовывались в графики и отправлялись в приложение через WebView.
  3. В зависимости от того, каким устройством пользуется трейдер, iOS или Android, использовалась нужная нативная обёртка.
Графики в Twim отображаются в том же дизайне, в каком оформлено приложение

С какими проблемами мы столкнулись и как их решали

Низкая скорость передачи данных

Очень важно, чтобы котировки в приложении криптобиржи обновлялись постоянно и практически в реальном времени. Не все приложения могут похвастаться высокой скоростью работы. Например, у пользователей есть нарекания к скорости работы мобильного приложения площадки для профессиональных трейдеров 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.

{ "author_name": "Surf", "author_type": "self", "tags": [], "comments": 25, "likes": 29, "favorites": 101, "is_advertisement": false, "subsite_label": "services", "id": 234708, "is_wide": true, "is_ugc": true, "date": "Fri, 16 Apr 2021 13:11:30 +0300", "is_special": false }
0
25 комментариев
Популярные
По порядку
Написать комментарий...
11

Пожалуйста, никогда не делайте только тёмную или только светлую тему. Дайте пользователю выбирать самому. Я вот тёмные темы не люблю и часто отказываюсь от приложения или сайта только из-за отсутствия светлой темы (исключение только для Порнхаба, т.к. не вижу хорошей альтернативы, там хорошее комьюнити).

Ответить

Комментарий удален

7

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

Это как Ютуб.

Ответить
3

Интересный у вас аналог ютюба 

Ответить

Комментарий удален

0

Интересный способ разогреть руку: посмотреть на тех кто подписан, почитать комменты, посмотреть новинки, запостить пару своих мыслей, НО ВОТ ПОСЛЕ ЭТОГО-О-О-О КАК СЛЕДУЕТ всё.

Ответить
0

Названием поделитесь?

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

5

Так уж вышло, что я дизайнер интерфейсов и по совместительству – криптовалютный трейдер. Торговал на 5-6 площадках, и у меня сложились определённые мысли, которые возникли в голове в ответ на написанное вами.

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

Во-вторых, я вообще у вас не увидел CustDev и работы с качественными и количественными данными. На каком основании вы решили, что пользователям нужны "график, биржевой стакан, заявки и котировки валютных пар"? Возможно, исследование-то было, но про него в кейсе ничего не сказано.

В-третьих, каждое приложение для криптовалютной торговли отвечает определённой бизнес-цели. Например, азиатские биржи - это инструмент перочинный нож, в них есть вообще всё. Американские же биржи имеют либо урезанный функционал, либо нарочито кусочный (например, Robinhood). Да, я делаю поправку на 2017-й год.

Я это всё к чему. Слежу за вашими кейсами в банковской сфере, и там как раз-таки всё круто. Ожидал и от этого кейса более глубокого погружения, но разочаровался. 

Ответить
1

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

Ответить

Комментарий удален

Комментарий удален

3

ну и каким же должно оно быть? с точки зрения UX/UI сделали копию уже имеющихся приложений, никаких фишек нет. скучно.

Ответить
2

Разве gRPC это протокол?

Ответить
2

Поправили. Спасибо вам за внимательность!

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

1

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

Ответить
4

И как вам покупка крипта через желтый банк?

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

2

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

Ответить

Комментарий удален

1

Я честно говоря подумал что всякие котировки должны быть как каналы в RabbitMQ, чем-то не подходит?

Ответить

Комментарий удален

0

@Инспектор они реально умнеют

Ответить

Комментарий удален

Комментарий удален

1

Спасибо за статью, было интересно читать.

Ответить
0

Ошибки приносящие убыток. 

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

0

Вы из какого года и какой Вселенной пишете, если в 17-м биток «ещё был дорогим», а Binance не было и можно было пилить свою криптобиржу?

Ответить
0

Лучше Бинанса навряд ли получится что то придумать

Ответить

Комментарий удален

Комментарий удален

0

Копия приложения финам на 99%
Это не плохо на самом деле, ибо оно не плохое.

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

0

Господа, не потому что Хейтер, стараюсь донести до людей, что с этой биржей нельзя иметь дел, от слова СОВСЕМ!!! Кидают на деньги, пишу так как сам попал на круглую сумму!!! Начинают отписываться стандартными фразами, а потом просто извините, так получилось... 

Ответить

Комментарий удален

Читать все 25 комментариев
Как оцифровать ремонт колесных пар? Ответ нашли в Первой грузовой компании

Мы завершили разработку интеллектуальной системы, которая на основе контрольно-технических измерений позволяет отслеживать толщину колесных пар (ИС КТИ). С ее помощью компания снижает расходы на ремонт и повышает уровень клиентского сервиса. Проект является частью масштабной разработки под названием «Цифровой вагон». В статье мы подробно…

PERI развивает систему управления производством с 1С:ERP
От простого робота до Защитника: как мы создавали телефонного секретаря Олега, которого потом начали копировать

В начале июня мы запустили Защитника Олега — нашего нового общедоступного телефонного секретаря, разработанного на базе похожего решения для абонентов Тинькофф Мобайла (работает с 2019 года).

Aleph расширяет присутствие на Ближнем Востоке: холдинг приобрел контрольный пакет акций Connect Ads

Aleph Holding, глобальный партнер крупнейших диджитал платформ и материнская компания Httpool, объявил о приобретении контрольного пакета акций Connect Ads. Компания является провайдером цифровых медиа и рекламных решений в странах Ближнего Востока и Африки.

На сайте «Медузы» появится витрина с мерчем — часть средств от продаж пойдёт на поддержку работы издания Статьи редакции

Создавать и продавать мерч будут партнёры, издание — придумывать идею и слоганы.

На первые страницы Google в Норвегии поднялся спам-сайт, замаскированный картинкой со «Смешариками» Статьи редакции

«Один спамерский домен получает большую долю всего поискового трафика Google в стране».

Эту картинку видит пользователь при заходе на сайт мошенников
Итоги Python meetup: медленные языки, быстрые роботы
Клуб весёлых и непонимающих, как работает реклама — почему креаторы с КВН-бэкграундом не подходят для маркома

Самый сильный бренд — всегда самый смешной? (нет)

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

«Spotify: История продукта». Создание десктопного приложения

От десктопного приложения с серверами в шкафу до революционного формата потоковой передачи музыки.
«Spotify: История продукта» — серия статей от команды Spotify в России, где читатели vc.ru могут узнать, как создавался сервис, какие решения стояли за продуктовыми изменениями и кто придумал музыкальные стриминги такими, какими они выглядят сейчас.

«Яндекс.Про» отстранил курьера от работы из-за неправильного адреса клиента

Несколько лет назад я прочитал на VC занимательную статью о том, как в одной из американских IT компаний искусственный интеллект самостоятельно уволил сотрудника, а тот никак не смог этому противостоять. Тогда мне это показалось забавным, исключительным случаем, но я и подумать не мог, что такие ситуации могут быть отлажены в «систему» и…

Как Askona обманывает покупателей, а Aliexpress и Tmall не видят очевидного

Здравствуйте! Всегда был только читателем на vc и не думал, что когда-то придётся выйти из тени, но сейчас я не вижу другого выхода. Постараюсь кратко и по факту.
Видя очередную распродажу с мегаскидками на Али, я решился заказать матрас и в нагрузку к нему анатомическую подушку в Askona Official Store. Скомбинировав скидки, купоны, монеты и всё…

null