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

Мы делали приложение для клиентов дилерского центра BMW в Беларуси. Оно задумывалось как бизнес-инструмент и объединяло продажи, маркетинг, бухгалтерию, программу лояльности и возможность обратной связи. Здесь, помимо реализации «хотелок» заказчика круто была сделана анимация в каталоге.

Это один из крупнейших телеканалов в Беларуси. Мы сделали сначала для них сайт, а потом разработали мобильное приложение. Front-end часть сайта реализована как SPA на стэке Vue. js + Nuxt, а приложение, написанное на React Native, интегрировано в единую логику. И здесь одной из главных фишек стало онлайн-вещание.

Это наше собственное приложение-вишлист, в котором можно бронировать подарок из списка именинника, чтобы не получилось повторок, но при этом оставаться инкогнито. Регистрация в нем — по номеру телефона, чтобы потом подтянуть весь список контактов. Это позволяет видеть, кто тоже есть в Giftary и тоже составил календарь праздников и список желаний. Так вот, тут Маша сделала, чтобы подтягивались не только имена и номера телефонов, а еще и фото контактов, если таковые имеются. В противном случае в качестве аватарки будет рандомно присвоено милое эмоджи.

Это приложение — единая среда для мастеров индустрии красоты и их клиентов.
У него две части: «мастер» и «клиент». Клиент может быстро искать мастера по специализации, локации, фильтровать по отзывам и цене. Из интересного — подбор времени для записи. Система учитывает не только свободное время мастера, но и продолжительность выбранных услуг. В Easy Style есть собственный мессенджер, чтобы уточнить детали у мастера и хранить всю beauty-переписку в одном месте. На порядок удобнее, чем выискивать нужное сообщение в директ или вайбере. Сюда же вы получите напоминание о предстоящем визите к мастеру и уведомления в случае отмены.

На стороне мастера все еще интереснее. Приложение выполняет сразу 2 важные функции:

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

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

И, конечно же, в приложении есть отчеты и подробная статистика: количество заявок и заработок за день, неделю, месяц и весь год.

Но наше любимое — это возможность проходить авторизацию через VK, appleID, facebook или google.

Fashion House — один из главных и старейших ритейлеров Беларуси, который представляет топовые модные бренды: от Mango до Emporio Armani.

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

В приложении есть все преимущества веб-версии Fashion House и немножко больше. Например, возможность отсканировать штрих-код в магазине и попасть на страницу товара в каталоге. Это дает клиентам доступ к данным, которые раньше были только у сотрудников магазина: вся информация размерах, цветах, наличии в конкретных магазинах. И все это, разумеется, в режиме реального времени.

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

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

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

Здесь реализована сложная анимация для списка меню — автоматом переключается заголовок при скроле блюд.

Вызов такси из приложения — достаточно кликнуть по ссылке, и Яндекс Такси проложит маршрут и рассчитает стоимость поездки до выбранной вами точки.

Это SaaS-продукт для обмена приватными сообщениями между пользователями различных платформ.

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

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

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

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

Поддерживаем принцип offline first — приложение сохраняет данные при загрузке и позволяет просматривать контент, даже если у вас нет интернета.

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

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

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

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

Приложение, которое отвечает за пользование паркингами в ТЦ и БЦ. С его помощью можно оплачивать стоянку, покупать абонементы, узнавать загруженность.

Сделали таймер для парковки в виде батарейки, которая показывает, сколько у человека осталось оплаченного времени.
Открытие шлагбаума настроили по qr code — позволяет открывать шлагбаум из любой точки с помощью сканирования qr code.

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

При регистрации в приложении можем подгружать данные, если клиент у же есть в базе 1С. И ему не нужно будет заполнять свои данные. Еще сделаны приятные анимации переключения на режим поиска на экранах "Магазины" и "Фильтр по магазинам". Реализовали возможность фильтровать товары по собственному “Избранному”.

Настроили очень хитрый процесс оставления отзыва — супер вариативный с приятными анимациями.

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

Мы постарались показать, что на React Native можно безболезненно делать то же самое, что и на нативных языках. НО! Важно понимать, что это будет не игра, не что-то сверхскоростное и оперативное, а какой-то пользовательский сервис.

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