Мы в Purrweb недавно начали работать с криптовалютной индустрией — первый проект получили осенью 2021 года. В этой статье рассказываем, как мы разработали приложение-кошелек Broex: постигали тонкости криптоторговли, пытались не спалить смартфоны, и доказали, что энтузиазм команды — далеко не последний аргумент в борьбе за проект.
Маленький кошелек с большими планами
Broex — лицензированный мультивалютный криптокошелек. У Broex европейская лицензия, которая гарантирует легальность и безопасность сделок. Это серьезное преимущество для такого проекта. Но как конкурировать с другими кошельками?
Оказывается, несмотря на низкий порог входа на криптовалютный рынок, около половины потенциальных пользователей отсеивается из-за недостатка знаний, страха стать жертвами мошенников, или просто нажать не на ту кнопку и потерять все деньги.
Broex сфокусировались на том, чтобы помочь новичкам, предложив им самый понятный в мире кошелек, самую быструю верификацию, а также возможность хранить на счете как криптовалюты.
Заказчики обратились к нам еще в конце лета 2021 года, когда биткоин только-только восстанавливался после колоссального обвала. В тот момент было сложно прогнозировать спрос на криптовалюту, но они верили в проект, и этот энтузиазм был заразителен.
Задача «со звездочкой»
У заказчиков была веб-версия продукта, а вот с мобильным приложением как-то не задалось. В App Store оно так и не вышло — его все время отклоняли. Это стало большой проблемой, ведь важно иметь доступ к кошельку откуда угодно, а пользоваться веб-версией с телефона неудобно.
Нам предстояло разработать кроссплатформенное приложение для iOS и Android с нуля, не повторив при этом ошибок прошлой команды и используя бэкенд, который писали не мы.
Мы хотели попробовать себя в разработке криптовалютных приложений, и возможные подводные камни нас не останавливали. Благодаря нашему энтузиазму мы и получили этот проект, несмотря на отсутствие опыта.
Мне понравилась активность ребят, вовлеченность и неподдельный интерес к проекту с первых созвонов. Мне было понятно, что они не очень-то разбираются в крипте. Но они всему быстро научились: задавали глупые вопросы, не стеснялись, спрашивали, интересовались, сами копали информацию.
Почему нам было важно разобраться в теории
Нам уже не раз приходилось разбираться в чем-то новом. Например, без русскоязычной документации мы выяснили, как работают китайские станции для зарядки и хранения павербанков EnerGO, которые теперь стоят в столичном метро. Но это была лишь часть большого проекта, а в случае с Broex нам не хватало самых основ, теоретической базы.
Когда дело касается блокчейна и криптовалют, недостаточно просто уметь хорошо разрабатывать приложения. Важно понимать, как устроена логика покупки, обмена, перевода и вывода криптовалюты, а также округлений, подсчета баланса и формирования комиссии. Кроме того, в этой сфере много сложных терминов — монета, токен, адрес, смарт-контракт. Если их не знать, то непонятно, какие запросы приложение отправляет на бэкенд, и какие данные будут возвращаться.
У наших разработчиков и менеджеров был опыт в финансовой индустрии: мы разработали платформу Fintarget для БКС-брокер. Но изучать криптовалюту пришлось во всех подробностях. Иначе было бы невозможно не то что обеспечить финансовую безопасность пользователей, но и в принципе работать с бэкендом заказчика.
А пользователю «ломать голову» не нужно
Заказчики очень хорошо знали свою аудиторию, их потребности и мотивацию, и делились этой информацией с нами. Если нам, как разработчикам, важно было разобраться, как все устроено в криптопространстве, то пользователей это вообще не интересует.
Абсолютно всем не важно знать историю каждой криптовалюты, знать как работает блокчейн. Им важно понимать, как зайти, обменять и вывести с минимальными затратами. И, самое главное, без страха сделать что-то не так.
Основной задачей было сделать все удобно, красиво и понятно, не нагружая пользователя лишней информацией. Тем более, что Broex ориентировался на новичков.
Чтобы сделать приложение более «дружелюбным» к новичкам, мы уделили особое внимание навигации, а также использовали привычные для большинства пользователей паттерны.
Не даем заблудиться в экранах
Пользователи всегда должны понимать, где они находятся, и как им решить свою основную задачу. Мы сделали так, что при реализации побочных сценариев пользователь остается на том же экране, а новый контент появляется на всплывающих снизу «шторках» — их еще называют бэкдропами. Например, просмотр списка транзакций в Broex — основной сценарий, а его сортировка — побочный.
Бэкдропы обеспечивают пользователю быстрый доступ к дополнительным функциями приложения и при этом не дают запутаться в экранах.
Бэкдропы привычны для пользователей и минимизируют «вложенность приложения». «Вложенность» — это навигационная особенность, при которой пользователю приходится переключаться между несколькими экранами, все сильнее отдаляясь от исходного. Зачастую это не совсем удобно.
Подписываем все элементы
В Broex на каждом экране много кнопок, полей ввода и других элементов интерфейса. Чтобы пользователю было понятно, что куда относится, мы продумали названия всех элементов, не оставили непонятных иконок и не забыли про плейсхолдеры в строках ввода.
Ориентируемся на то, что привычно
Классические финансовые приложения знакомы многим, даже новичкам в крипте. Поэтому в конкурентном анализе мы рассматривали и непрямых конкурентов, например, Тинькофф Инвестиции.
Наши дизайнеры использовали привычную для финтеха структуру страниц, когда вверху экрана — карточка с информацией по счету, а остальной контент — списком ниже.
Мы точечно заимствовали у банковских и инвестиционных приложений поведение отдельных элементов интерфейса. Например, модуль селектора валюты обычно делают через бэкдроп — в Broex так же.
Долой стереотипы в дизайне
Когда Broex обратились к нам, у них еще не было полноценного дизайн-гайда. Нам дали только логотип и основной цвет — классический синий. Поэтому, прежде чем проектировать UI, мы выяснили пожелания заказчика через позитивные и негативные референсы.
Самый распространенный стиль в дизайне криптокошельков — это киберпанк. Мы хотели избежать подобных стереотипов и поэтому обратились к классическим финансовым приложениям. Их стиль был привычнее для новичков, понятнее и визуально «чище».
Разобрались в верификации
В плане стека никаких новшеств для нас не было — для разработки мобильных приложений всегда используем React Native. А вот небольших технических нюансов оказалось много.
К примеру, криптовалютные биржи обязаны верифицировать пользователей через процедуру KYC («know your customer» — «знай своего клиента»). Это стандарт безопасности и мера против отмывания денег.
Мы реализовали KYC в приложении через SDK SumSub. Это решение уже использовалось на бэкенде заказчика, поэтому выбора у нас не было. Но, к счастью, SumSub — отличный сервис, и проблем с ним не возникло.
Главным минусом оказался встроенный UI, который нельзя кастомизировать. Зато в остальном все очень быстро и просто интегрируется, легко настраивается. Есть даже тестовая среда для проверки работоспособности.
Сделали свой селектор валют
Селектор валют — базовый элемент многих финансовых приложений. Обычно это выпадающий список с валютами в алфавитном порядке. Мы перепробовали много разных селекторов, но ни один нам не подошел.
Мы пробовали несколько библиотек — например, react-native-modal-dropdown и react-native-select-dropdown. Каждую из них приходилось доделывать или изменять. К примеру, в них не было предусмотрено постоянное обновление родительского компонента, а у нас часто менялись курсы валют. Или нельзя было выделить выбранный элемент. А когда потребовалось добавить туда поиск, мы решили, что проще будет сделать селектор самим.
В результате мы разработали оригинальный компонент на основе уже упомянутого бэкдропа — модального окна, открывающегося внизу экрана. Новый селектор выполнял все нужные нам функции и при этом органично вписывался в дизайн приложения.
Непредвиденные трудности: греем смартфоны и головы
Когда работаешь с чужим бэкендом, точно столкнешься с какими-то сложностями и ограничениями. Прямого доступа к бэкенду у нас не было. Ситуация усугублялась еще и тем, что его разрабатывали под веб-версию кошелька, без учета всех особенностей мобильного приложения.
Все сложные вычислительные операции лучше выносить на бэкенд, а приложение нагружать по минимуму. Тогда и телефоны будут меньше нагреваться. А владельцы 5-х айфонов и других старых устройств вообще скажут вам спасибо.
К сожалению, никакие глобальные изменения на бэкенде внедрить было нельзя — тогда пришлось бы переписывать веб-фронтенд. Поэтому в большинстве случаев мы устраняли возникающие ошибки на стороне мобильного приложения.
Решаем проблемы на стороне приложения
В какой-то момент из-за колоссального объема данных, обновляющихся в режиме реального времени, приложение начало тормозить и сильно разогревать телефон.
Мы нашли компромисс между тем, какие данные нужно обновлять немедленно, а какие могут подождать. В режиме реального времени обновляется все, что связано с валютными операциями: покупка, продажа, вывод средств. А все остальное (например, курсы валют) мы решили обновлять раз в три секунды.
Другая проблема, с которой мы столкнулись, была связана с одной из важных функций приложения — графиком цен на ту или иную валюту.
График рисуется по точкам, содержащим две координаты — время и курс. Бэкенд формирует их в режиме реального времени. Время известно всегда, а запрос на курс валюты может и не пройти из-за внешних сбоев. Тогда нам вернутся координаты подобного вида: {x: 100, y: undefined}. Такую точку отметить на системе координат невозможно, и возникает ошибка.
Мы решили проблему так: фильтровали массив данных, отсеивали подобные точки, и только потом отдавали его графику. Это было вполне допустимо, ведь таких значений было немного, и они практически никогда не шли друг за другом.
Сотрудничаем с командой бэкенда
Но не все задачи можно решить на стороне приложения. К счастью, нам удалось наладить контакт с командой бэкенда, и ребята оптимизировали отдельные функции там, где это было возможно. Например, изначально бэкенд не предусматривал некоторые пользовательские сценарии, такие как фильтр истории транзакций.
По каждому запросу информация о транзакциях приходила целиком, и приложение было вынуждено сохранять и отображать десятки тысяч транзакций. Мы убедили команду заказчика настроить пагинацию данных на бэкенде: теперь они отправлялись на фронтенд в ограниченном объеме и подгружались по мере необходимости.
Не откладывали релиз в долгий ящик
Нередко заказчики тормозят релиз, потому что хотят добавить очередную функцию. Мы были приятно удивлены, когда Broex сами предложили начать публиковать приложение с ранних версий. И с каждым релизом оно становилось все больше и функциональнее.
Сначала мы ограничились базовыми функциями без валютных операций. Но даже на данном этапе пользователи приложения уже могли:
- пройти регистрацию и процедуру KYC;
- настроить меры безопасности в профиле;
- просмотреть список своих активов и информацию о них;
- изучить и добавить в избранное интересующие их активы.
К декабрю добавили финансовые операции, причем сюда вошли не только получение и отправка валют по уникальному адресу кошелька, но также покупка и вывод активов на карту.
В последний релиз мы включили биометрию для iOS: теперь авторизоваться можно по Face ID и Touch ID. Также немного дополнили профиль, и теперь в нем доступны валюта по умолчанию, интеграция с соцсетями и информация о версии приложения.
Светлое криптовалютное будущее компании Purrweb
Получить проект без опыта в криптовалютной индустрии нам помог энтузиазм, а разработать — техническая экспертиза в смежных областях и упорство команды. Кроме того, побывав на месте пользователей-новичков, мы смогли лучше понять барьеры, с которыми они сталкиваются, и учесть их в процессе создания дизайна приложения.
Возникшие технические сложности прокачали нас в крипторазработке. Этот опыт мы уже применяем в новых проектах: один из них связан с NFT, второй — с криптоинвестициями. Бэкенд разрабатываем сами — это не только удобнее, но и дает больше возможностей для оптимизации работы приложений.
