кейс по кроссплатформенной разработке
На что способен React Native
Мы, команда Веб Секрет в целом, и ее мобильные разработчики на React Native, Маша и Виталик, в частности, хотим поделиться своими кейсами, что и как мы сделали в кроссплатформенной разработке за последние пару лет. Надеемся, вам пригодится наш опыт.
Если вы топите за Flutter и всей душой ненавидите React Native, закройте эту статью. Если вы в каждой бочке затычка и считаете, что только нативные языки — тру, тоже воздержитесь от чтения, пожалуйста. Если вам интересно, на что способны кроссплатформенные приложения и почему в некоторых случаях можно со спокойной душой не вкладывать тонны денег в разработчиков под iOs и Android, велком!
1
BMW
Мы делали приложение для клиентов дилерского центра BMW в Беларуси. Оно задумывалось как бизнес-инструмент и объединяло продажи, маркетинг, бухгалтерию, программу лояльности и возможность обратной связи. Здесь, помимо реализации «хотелок» заказчика круто была сделана анимация в каталоге.
«Практически все наши проекты включают сложную интеграцию с 1С. «Байернкрафт» не стал исключением: покупки, события и история обслуживания в приложении синхронизированы с системами дилера»
2
ОНТ
Это один из крупнейших телеканалов в Беларуси. Мы сделали сначала для них сайт, а потом разработали мобильное приложение. Front-end часть сайта реализована как SPA на стэке Vue. js + Nuxt, а приложение, написанное на React Native, интегрировано в единую логику. И здесь одной из главных фишек стало онлайн-вещание.
Был разработан собственный плеер для онлайн-вещания и для просмотра видео. Также в плеере есть возможность показывать разные типы рекламы: графические и текстовые объявления, видеоролики, проигрываемые в начале и в середине видео, объявления-заставки продолжительностью 10 секунд. После просмотра отображаются другие релевантные видео.
3
Giftary
Это наше собственное приложение-вишлист, в котором можно бронировать подарок из списка именинника, чтобы не получилось повторок, но при этом оставаться инкогнито. Регистрация в нем — по номеру телефона, чтобы потом подтянуть весь список контактов. Это позволяет видеть, кто тоже есть в Giftary и тоже составил календарь праздников и список желаний. Так вот, тут Маша сделала, чтобы подтягивались не только имена и номера телефонов, а еще и фото контактов, если таковые имеются. В противном случае в качестве аватарки будет рандомно присвоено милое эмоджи.
4
Easy Style
Это приложение — единая среда для мастеров индустрии красоты и их клиентов.
У него две части: «мастер» и «клиент». Клиент может быстро искать мастера по специализации, локации, фильтровать по отзывам и цене. Из интересного — подбор времени для записи. Система учитывает не только свободное время мастера, но и продолжительность выбранных услуг. В Easy Style есть собственный мессенджер, чтобы уточнить детали у мастера и хранить всю beauty-переписку в одном месте. На порядок удобнее, чем выискивать нужное сообщение в директ или вайбере. Сюда же вы получите напоминание о предстоящем визите к мастеру и уведомления в случае отмены.
У него две части: «мастер» и «клиент». Клиент может быстро искать мастера по специализации, локации, фильтровать по отзывам и цене. Из интересного — подбор времени для записи. Система учитывает не только свободное время мастера, но и продолжительность выбранных услуг. В Easy Style есть собственный мессенджер, чтобы уточнить детали у мастера и хранить всю beauty-переписку в одном месте. На порядок удобнее, чем выискивать нужное сообщение в директ или вайбере. Сюда же вы получите напоминание о предстоящем визите к мастеру и уведомления в случае отмены.
На стороне мастера все еще интереснее. Приложение выполняет сразу 2 важные функции:
Мастер сам настраивает график работы и доступное время. Тут заложено «умное» формирование расписания. Приложение будет предлагать время для записи так, чтобы оно расходовалось максимально эффективно, избегая неудобных «окон».
- Новый инструмент привлечения клиентов. Все мастера отображаются на равных условиях: клиенты видят профиль, пакет услуг, месторасположение, цены, рейтинг, основанный на отзывах.
- Автоматизированный планировщик загрузки. Easy Style полностью берет на себя расписание мастера, поскольку может учитывать не только автоматические заявки из приложения, но и добавленные вручную: записи постоянных клиентов, запросы в Instagram или по телефону — все будет храниться в едином планировщике.
Мастер сам настраивает график работы и доступное время. Тут заложено «умное» формирование расписания. Приложение будет предлагать время для записи так, чтобы оно расходовалось максимально эффективно, избегая неудобных «окон».
И, конечно же, в приложении есть отчеты и подробная статистика: количество заявок и заработок за день, неделю, месяц и весь год.
Но наше любимое — это возможность проходить авторизацию через VK, appleID, facebook или google.
Но наше любимое — это возможность проходить авторизацию через VK, appleID, facebook или google.
5
Fashion House
Fashion House — один из главных и старейших ритейлеров Беларуси, который представляет топовые модные бренды: от Mango до Emporio Armani.
Еще год назад компания даже не была представлена в интернет-среде, а сегодня у нее одно из самых продвинутых решений для e-commerce и сложная интеграция с десятком сервисов.
В приложении есть все преимущества веб-версии Fashion House и немножко больше. Например, возможность отсканировать штрих-код в магазине и попасть на страницу товара в каталоге. Это дает клиентам доступ к данным, которые раньше были только у сотрудников магазина: вся информация размерах, цветах, наличии в конкретных магазинах. И все это, разумеется, в режиме реального времени.
Еще год назад компания даже не была представлена в интернет-среде, а сегодня у нее одно из самых продвинутых решений для e-commerce и сложная интеграция с десятком сервисов.
В приложении есть все преимущества веб-версии Fashion House и немножко больше. Например, возможность отсканировать штрих-код в магазине и попасть на страницу товара в каталоге. Это дает клиентам доступ к данным, которые раньше были только у сотрудников магазина: вся информация размерах, цветах, наличии в конкретных магазинах. И все это, разумеется, в режиме реального времени.
Помимо этого можно заценить подгрузку картинок по мере скролла, это сделано, чтобы весь объем изображений не загружался одномоментно.
Еще в каталоге можно картинку свайпать влево/вправо, как и в привычных нативных приложениях. Это нужно, чтобы, не заходя в каждый товар, посмотреть фотографии предмета одежды с разных ракурсов.
Еще в каталоге можно картинку свайпать влево/вправо, как и в привычных нативных приложениях. Это нужно, чтобы, не заходя в каждый товар, посмотреть фотографии предмета одежды с разных ракурсов.
Реализовали возможность использовать QR код на кассе для авторизации, теперь вместо скидочной карты достаточно просто его предъявить администратору.
React Native сделал поддержку и доработку приложения Fashion House очень простой. А за счет использования общего с сайтом API сюда подтянутся любые обновления функционала сайта.
Настроили авторизацию по SMS. На телефон приходит код, который автоматом подтягивается из SMS в приложении и не нужно вводить его вручную. И Сделали очень классные состояния при пустой Корзине и в Избранном.
6
YPA in food
Это приложение, которое дает гостю полное управление над своими походами в любимые заведения: от брони стола и заказа блюд до автоматической оплаты и перечисления чаевых на карту официанта.
Здесь реализована сложная анимация для списка меню — автоматом переключается заголовок при скроле блюд.
Здесь реализована сложная анимация для списка меню — автоматом переключается заголовок при скроле блюд.
Приложение поддерживает четыре основные системы автоматизации, используемые в ресторанном бизнесе. Любая бронь, заказ, комментарий к нему и оплаты фиксируются в терминале заведения. Пока в Беларуси нет ничего похожего.
Сканер QR кода стола, который открывает доступ к расширенному меню.
Настроена работа с большим количеством меток на карте: все они группируются в кластеры, а еще у всех типов заведений кастомные иконки.
Вызов такси из приложения — достаточно кликнуть по ссылке, и Яндекс Такси проложит маршрут и рассчитает стоимость поездки до выбранной вами точки.
Оставляя отзыв, можно сразу сделать фотографию места или блюда — сделан доступ к камере, соответственно, не нужно переходить в галерею и выбирать снимок там.
7
Plasma Messenger
Это SaaS-продукт для обмена приватными сообщениями между пользователями различных платформ.
Здесь на React Native мы настроили авторизацию по faceID и touchID для входа в приложение.
Сделали полноценный чат, похожий на привычный telegram — есть и шифрование, и статусы доставки/прочтения, и пересылка ответов на сообщения.
Создали кучу тактильных откликов в приложении, например, при неверном вводе кода или копировании сообщения.
Здесь на React Native мы настроили авторизацию по faceID и touchID для входа в приложение.
Сделали полноценный чат, похожий на привычный telegram — есть и шифрование, и статусы доставки/прочтения, и пересылка ответов на сообщения.
Создали кучу тактильных откликов в приложении, например, при неверном вводе кода или копировании сообщения.
Реализовали фоновую обработку пушей — сложная в разработке фишка. Когда приходит пуш, приложение смотрит его и согласно внутренней логике решает, отображать его или нет.
Поддерживаем принцип offline first — приложение сохраняет данные при загрузке и позволяет просматривать контент, даже если у вас нет интернета.
Поддерживаем принцип offline first — приложение сохраняет данные при загрузке и позволяет просматривать контент, даже если у вас нет интернета.
Сделали так, что выбирать фото из галереи можно по альбомам, которые сформированы на смартфоне.
8
LiveXP
Экосистема для изучения иностранных языков. Она состоит из веба, где собраны профили преподавателей различных языков, и приложения, которое представляет собой профиль, чата с репетитором, расписания и истории уроков.
Мы настроили авторизацию через Apple ID, Facebook, Google.
И сделали так, чтобы все взаимодействие с бэкендом происходило на сокетах — это значит, что данные в приложении будут обновляться в реальном времени.
Мы настроили авторизацию через Apple ID, Facebook, Google.
И сделали так, чтобы все взаимодействие с бэкендом происходило на сокетах — это значит, что данные в приложении будут обновляться в реальном времени.
9
Touch&GO
Решение для жилых комплексов и коттеджных поселков, которое позволяет жильцам беспрепятственно въезжать на территорию, создавать пропуска для гостей, контролировать безопасность места жительства.
Нарисовали крутой онбординг в формате всем привычных по Инстаграму сторис.
Сделали кастомный тайм пикер – меняешь часы, и время возможного нахождения человека на территории меняется.
10
Hippo Parking
Приложение, которое отвечает за пользование паркингами в ТЦ и БЦ. С его помощью можно оплачивать стоянку, покупать абонементы, узнавать загруженность.
Сделали таймер для парковки в виде батарейки, которая показывает, сколько у человека осталось оплаченного времени.
Открытие шлагбаума настроили по qr code — позволяет открывать шлагбаум из любой точки с помощью сканирования qr code.
Открытие шлагбаума настроили по qr code — позволяет открывать шлагбаум из любой точки с помощью сканирования qr code.
11
Пивточка
Приложение, которое позволило оцифровать систему лояльности в сети пивных магазинов как для постоянных клиентов, так и для новых посетителей.
При регистрации в приложении можем подгружать данные, если клиент у же есть в базе 1С. И ему не нужно будет заполнять свои данные. Еще сделаны приятные анимации переключения на режим поиска на экранах "Магазины" и "Фильтр по магазинам". Реализовали возможность фильтровать товары по собственному “Избранному”.
Клиенту понадобилось добавить apple wallet. Поэтому я долго искала подходящую библиотеку, но ничего годного не нашлось. Поэтому написала свой package и зарелизила его для Open Source.
Создали классную анимацию на онбординге. А еще сделали удаление элементов длинным свайпом влево, как, например, в чате в Telegram.
Настроили очень хитрый процесс оставления отзыва — супер вариативный с приятными анимациями.
Сделали для удобства так, чтобы фильтры и дополнительная инфа скрывалась при скролле каталога вниз, и открывались при скролле вверх — это позволяет просматривать больше контента на экране.
Резюмируя
Мы постарались показать, что на React Native можно безболезненно делать то же самое, что и на нативных языках. НО! Важно понимать, что это будет не игра, не что-то сверхскоростное и оперативное, а какой-то пользовательский сервис.
И не сравнивайте React Native приложениями со страшными кроссплатформенными «кирпичами» из прошлого типа cordova, xamarin. Ведь считая, что все что не натив — говно, вы не задумывайтесь, что это говно можно и нативно написать. Мы же на своем примере показали, как сделать хорошее приложение с красивым интерфейсом и классными анимациями.
И не сравнивайте React Native приложениями со страшными кроссплатформенными «кирпичами» из прошлого типа cordova, xamarin. Ведь считая, что все что не натив — говно, вы не задумывайтесь, что это говно можно и нативно написать. Мы же на своем примере показали, как сделать хорошее приложение с красивым интерфейсом и классными анимациями.