кейс по кроссплатформенной разработке

На что способен React Native

Мы, команда Веб Секрет в целом, и ее мобильные разработчики на React Native, Маша и Виталик, в частности, хотим поделиться своими кейсами, что и как мы сделали в кроссплатформенной разработке за последние пару лет. Надеемся, вам пригодится наш опыт.
Если вы топите за Flutter и всей душой ненавидите React Native, закройте эту статью. Если вы в каждой бочке затычка и считаете, что только нативные языки — тру, тоже воздержитесь от чтения, пожалуйста. Если вам интересно, на что способны кроссплатформенные приложения и почему в некоторых случаях можно со спокойной душой не вкладывать тонны денег в разработчиков под iOs и Android, велком!
1
BMW
Мы делали приложение для клиентов дилерского центра BMW в Беларуси. Оно задумывалось как бизнес-инструмент и объединяло продажи, маркетинг, бухгалтерию, программу лояльности и возможность обратной связи. Здесь, помимо реализации «хотелок» заказчика круто была сделана анимация в каталоге.
«Практически все наши проекты включают сложную интеграцию с 1С. «Байернкрафт» не стал исключением: покупки, события и история обслуживания в приложении синхронизированы с системами дилера»
Виталик Яловчук
mobile
2
ОНТ
Это один из крупнейших телеканалов в Беларуси. Мы сделали сначала для них сайт, а потом разработали мобильное приложение. Front-end часть сайта реализована как SPA на стэке Vue. js + Nuxt, а приложение, написанное на React Native, интегрировано в единую логику. И здесь одной из главных фишек стало онлайн-вещание.
Был разработан собственный плеер для онлайн-вещания и для просмотра видео. Также в плеере есть возможность показывать разные типы рекламы: графические и текстовые объявления, видеоролики, проигрываемые в начале и в середине видео, объявления-заставки продолжительностью 10 секунд. После просмотра отображаются другие релевантные видео.
Мария Сидоревич
mobile
3
Giftary
Это наше собственное приложение-вишлист, в котором можно бронировать подарок из списка именинника, чтобы не получилось повторок, но при этом оставаться инкогнито. Регистрация в нем — по номеру телефона, чтобы потом подтянуть весь список контактов. Это позволяет видеть, кто тоже есть в Giftary и тоже составил календарь праздников и список желаний. Так вот, тут Маша сделала, чтобы подтягивались не только имена и номера телефонов, а еще и фото контактов, если таковые имеются. В противном случае в качестве аватарки будет рандомно присвоено милое эмоджи.
4
Easy Style
Это приложение — единая среда для мастеров индустрии красоты и их клиентов.
У него две части: «мастер» и «клиент». Клиент может быстро искать мастера по специализации, локации, фильтровать по отзывам и цене. Из интересного — подбор времени для записи. Система учитывает не только свободное время мастера, но и продолжительность выбранных услуг. В Easy Style есть собственный мессенджер, чтобы уточнить детали у мастера и хранить всю beauty-переписку в одном месте. На порядок удобнее, чем выискивать нужное сообщение в директ или вайбере. Сюда же вы получите напоминание о предстоящем визите к мастеру и уведомления в случае отмены.
На стороне мастера все еще интереснее. Приложение выполняет сразу 2 важные функции:

  1. Новый инструмент привлечения клиентов. Все мастера отображаются на равных условиях: клиенты видят профиль, пакет услуг, месторасположение, цены, рейтинг, основанный на отзывах.
  2. Автоматизированный планировщик загрузки. Easy Style полностью берет на себя расписание мастера, поскольку может учитывать не только автоматические заявки из приложения, но и добавленные вручную: записи постоянных клиентов, запросы в Instagram или по телефону — все будет храниться в едином планировщике.

Мастер сам настраивает график работы и доступное время. Тут заложено «умное» формирование расписания. Приложение будет предлагать время для записи так, чтобы оно расходовалось максимально эффективно, избегая неудобных «окон».
И, конечно же, в приложении есть отчеты и подробная статистика: количество заявок и заработок за день, неделю, месяц и весь год.

Но наше любимое — это возможность проходить авторизацию через VK, appleID, facebook или google.
5
Fashion House
Fashion House — один из главных и старейших ритейлеров Беларуси, который представляет топовые модные бренды: от Mango до Emporio Armani.

Еще год назад компания даже не была представлена в интернет-среде, а сегодня у нее одно из самых продвинутых решений для e-commerce и сложная интеграция с десятком сервисов.

В приложении есть все преимущества веб-версии Fashion House и немножко больше. Например, возможность отсканировать штрих-код в магазине и попасть на страницу товара в каталоге. Это дает клиентам доступ к данным, которые раньше были только у сотрудников магазина: вся информация размерах, цветах, наличии в конкретных магазинах. И все это, разумеется, в режиме реального времени.
Помимо этого можно заценить подгрузку картинок по мере скролла, это сделано, чтобы весь объем изображений не загружался одномоментно.
Еще в каталоге можно картинку свайпать влево/вправо, как и в привычных нативных приложениях. Это нужно, чтобы, не заходя в каждый товар, посмотреть фотографии предмета одежды с разных ракурсов.
Реализовали возможность использовать QR код на кассе для авторизации, теперь вместо скидочной карты достаточно просто его предъявить администратору.
React Native сделал поддержку и доработку приложения Fashion House очень простой. А за счет использования общего с сайтом API сюда подтянутся любые обновления функционала сайта.
Виталик Яловчук
mobile
Настроили авторизацию по SMS. На телефон приходит код, который автоматом подтягивается из SMS в приложении и не нужно вводить его вручную. И Сделали очень классные состояния при пустой Корзине и в Избранном.
6
YPA in food
Это приложение, которое дает гостю полное управление над своими походами в любимые заведения: от брони стола и заказа блюд до автоматической оплаты и перечисления чаевых на карту официанта.

Здесь реализована сложная анимация для списка меню — автоматом переключается заголовок при скроле блюд.
Приложение поддерживает четыре основные системы автоматизации, используемые в ресторанном бизнесе. Любая бронь, заказ, комментарий к нему и оплаты фиксируются в терминале заведения. Пока в Беларуси нет ничего похожего.
Мария Сидоревич
mobile
Сканер QR кода стола, который открывает доступ к расширенному меню.
Настроена работа с большим количеством меток на карте: все они группируются в кластеры, а еще у всех типов заведений кастомные иконки.
Вызов такси из приложения — достаточно кликнуть по ссылке, и Яндекс Такси проложит маршрут и рассчитает стоимость поездки до выбранной вами точки.
Оставляя отзыв, можно сразу сделать фотографию места или блюда — сделан доступ к камере, соответственно, не нужно переходить в галерею и выбирать снимок там.
7
Plasma Messenger
Это SaaS-продукт для обмена приватными сообщениями между пользователями различных платформ.

Здесь на React Native мы настроили авторизацию по faceID и touchID для входа в приложение.

Сделали полноценный чат, похожий на привычный telegram — есть и шифрование, и статусы доставки/прочтения, и пересылка ответов на сообщения.

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

Поддерживаем принцип offline first — приложение сохраняет данные при загрузке и позволяет просматривать контент, даже если у вас нет интернета.
Сделали так, что выбирать фото из галереи можно по альбомам, которые сформированы на смартфоне.
8
LiveXP
Экосистема для изучения иностранных языков. Она состоит из веба, где собраны профили преподавателей различных языков, и приложения, которое представляет собой профиль, чата с репетитором, расписания и истории уроков.

Мы настроили авторизацию через Apple ID, Facebook, Google.

И сделали так, чтобы все взаимодействие с бэкендом происходило на сокетах — это значит, что данные в приложении будут обновляться в реальном времени.
9
Touch&GO
Решение для жилых комплексов и коттеджных поселков, которое позволяет жильцам беспрепятственно въезжать на территорию, создавать пропуска для гостей, контролировать безопасность места жительства.
Нарисовали крутой онбординг в формате всем привычных по Инстаграму сторис.
Сделали кастомный тайм пикер – меняешь часы, и время возможного нахождения человека на территории меняется.
10
Hippo Parking
Приложение, которое отвечает за пользование паркингами в ТЦ и БЦ. С его помощью можно оплачивать стоянку, покупать абонементы, узнавать загруженность.
Сделали таймер для парковки в виде батарейки, которая показывает, сколько у человека осталось оплаченного времени.
Открытие шлагбаума настроили по qr code — позволяет открывать шлагбаум из любой точки с помощью сканирования qr code.
11
Пивточка
Приложение, которое позволило оцифровать систему лояльности в сети пивных магазинов как для постоянных клиентов, так и для новых посетителей.
При регистрации в приложении можем подгружать данные, если клиент у же есть в базе 1С. И ему не нужно будет заполнять свои данные. Еще сделаны приятные анимации переключения на режим поиска на экранах "Магазины" и "Фильтр по магазинам". Реализовали возможность фильтровать товары по собственному “Избранному”.
Клиенту понадобилось добавить apple wallet. Поэтому я долго искала подходящую библиотеку, но ничего годного не нашлось. Поэтому написала свой package и зарелизила его для Open Source.
Мария Сидорчук
mobile
Создали классную анимацию на онбординге. А еще сделали удаление элементов длинным свайпом влево, как, например, в чате в Telegram.
Настроили очень хитрый процесс оставления отзыва — супер вариативный с приятными анимациями.
Сделали для удобства так, чтобы фильтры и дополнительная инфа скрывалась при скролле каталога вниз, и открывались при скролле вверх — это позволяет просматривать больше контента на экране.
Резюмируя
Мы постарались показать, что на React Native можно безболезненно делать то же самое, что и на нативных языках. НО! Важно понимать, что это будет не игра, не что-то сверхскоростное и оперативное, а какой-то пользовательский сервис.

И не сравнивайте React Native приложениями со страшными кроссплатформенными «кирпичами» из прошлого типа cordova, xamarin. Ведь считая, что все что не натив — говно, вы не задумывайтесь, что это говно можно и нативно написать. Мы же на своем примере показали, как сделать хорошее приложение с красивым интерфейсом и классными анимациями.