Сделали приложение для известной сети магазинов по продаже косметики

Мы в команде flaton разработали кросс-платформенное приложение для компании "Галерея косметики". В статье расскажу как делали, с чем столкнулись и что получилось в MVP за 4 месяца. Смотрим!

Компания «Галерея косметики» — это сеть розничных магазинов и салонов красоты, а также интернет-магазин. Здесь вы можете приобрести профессиональную косметику, товары для красоты и товары для дома. Ассортимент компании включает более 35 000 наименований продукции от самых популярных брендов из разных стран.

До обращения к нам у компании уже было готовое приложение, созданное на конструкторе Bitrix Mobile. Однако оно не соответствовало требованиям по ряду причин:

Для выбора команды на аутсорс-разработку клиент проводил внутренний отбор исполнителей, в котором участвовали 8 команд разработки. По результатам данного конкурса клиент решила обратиться к нам.

Перед командой стояла задача разработать клиентскую часть приложения и подготовить его к выпуску в официальных магазинах приложений: App Store, Google Play Market, AppGallery, Rustore. На момент обращения у клиента уже был готовыq дизайн приложения и его серверная часть, созданная на платформе Битрикс.

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

В работе над приложением с нашей стороны участвовали три человека: два разработчика на Flutter и менеджер проекта.

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

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

Как и во всех e-com приложениях вы можете добавить в избранное понравившиеся вам товары, для этого в в нижнем меню есть отдельный раздел.

В корзине есть поле для промокода и удобная визуализация списания баллов.

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

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

Для решения проблемы с cookie мы разработали механизм, который перехватывает и сохраняет cookie, полученные от сервера после успешной аутентификации пользователя. Для этого использовались специализированные библиотеки, такие как flutter_cookies_manager и http для Flutter. При последующих запросах к серверу приложение автоматически добавляет сохраненные cookie в заголовки HTTP-запросов, что позволяет поддерживать состояние сессии и аутентификацию пользователя.

Для решения второй проблемы мы разработали парсер, который удаляет ненужные HTML-теги и извлекает только полезную информацию для отображения в мобильном приложении. Для этого использовались регулярные выражения и библиотеки для парсинга HTML, такие как html и flutter_html.