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

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

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

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

    •    Разработали клиентскую часть мобильного приложения (Flutter, кроссплатформенность и быстрый релиз на iOS/Android).    •    Реализовали главную страницу (баннеры, акции, спецпредложения, рекомендуемые товары, популярные бренды и категории).    •    Разработали каталог товаров (поиск по брендам, страницы акций, товарные группы: волосы, лицо, тело, ногти, макияж, техника, аксессуары, здоровье).    •    Внедрили корзину и бонусную систему (добавление в избранное, применение промокодов, визуализация списания баллов).    •    Реализовали процесс оформления заказа (доставка курьером или самовывоз, кластеризация точек на Яндекс.Картах, фильтрация точек по службе доставки, интеграция API оплаты Сбербанка и YooKassa).    •    Настроили обработку cookie для работы с сервером (через flutter_cookies_manager и http).    •    Разработали парсер для очистки HTML-кода (удаление лишних тегов, отображение только полезной информации, библиотеки html и flutter_html).    •    Провели интеграцию приложения с существующим сервером на Битриксе (адаптация под мобильный клиент).

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

Главная страница

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

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

Корзина и бонусная система

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

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

Оформление заказа

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

Процесс оформления и оплаты заказа в мобильном приложении должен былполностью повторять этот процесс на сайте.

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

При оплате заказа мы провели интеграцию систем оплаты внутри приложения, так как не удалось реализовать генерацию ссылки со стороны серверной части. Для генерации ссылки внутри приложения мы использовали специальные библиотеки Sberbank Acquiring и Yookassa Payments.

Возникшие трудности

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

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

Мы разработали минимально жизнеспособный продукт (MVP) мобильного приложения за четыре месяца.На данный момент наше приложение в среднем в месяц скачивают 2113 пользователей, а активно используют — 4032 человека. Эта статистика учитывает данные только из App Store и Play Market.После релиза мобильного приложения обороты компании увеличились на 8% по сравнению с предыдущем годом, что говорит о том, что с помощью удобного приложения компания смогла повысить лояльность существующих клиентов, увеличить число повторный покупок, и также расширить клиентскую базу.Продолжаем сотрудничество с клиентом. В настоящее время мы расширяем функционал приложения и добавляем новые возможности для пользователей.