Мобильное приложение для сети магазинов "Галерея косметики"

1. Вводная задача от заказчика, проблематика, цели

Проблема

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

• Низкая производительность влияла на количество заказов;
• Ограничения коробочного решения не позволяли адаптировать приложение под нужды бизнеса.
• Компания 1С Битрикс объявила о приостановке продажи лицензий на 1С Bitrix Mobile и исключила его из списка продуктов.

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

Задача

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Выбор стека разработки

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

Процесс работы

1.Проектирование

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

2.Разработка

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

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

Каталог товаров

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

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

На странице каталога находятся такие группы товаров как:

• Товары для волос
• Товары для лица
• Товары для тела
• Товары для ногтей
• Товары для макияжа
• Техника
• Аксеесуары
• Товары для здоровья

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

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

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

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

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

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

полностью повторять этот процесс на сайте.

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

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

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

• Использование cookie.
• Удаление HTML-кода из текста.

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

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

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

3. Результаты сотрудничества

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

Евгения С.

Менеджер проекта, Галерея Косметики

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