Волковский п-кт 146 "лит. А" этаж 3

Домашний магазин.рф

Разработка мобильного приложения iOS и Android для сервиса доставки

Разработка мобильного приложения iOS и Android для сервиса доставки еды, товаров и продуктов

Мобильное приложение iOS и Android для сервиса доставки товаров.

Разработка нативного мобильного приложения для сервиса Доставки товаров в регионе АР Крым под ос iOS и Android, web панель управления приложением и интеграцией со сторонними сервисами.

Заказчик — действующий бизнес по доставке и обеспечению отелей в АР Крым.

Ниша: Доставка товаров населению и отелям полуострова Крым (b2c, b2b).

Сторонние сервисы интеграции: 1С предприятие, смс-сервис, банковский эквайринг для приема платежей в приложении.

Год реализации: 2019

Срок реализации проекта «под ключ»: 42 рабочих дня

Задача

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

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

Немаловажными были 2 требования:

Первое — интегрировать сервис с 1С  для синхронизации и отображения актуальных данных и автоматического изменения цен.

Второе — интегрировать сервис с банковским эквайрингом для приема платежей и оплаты товаров покупателями в приложении.

1 этап. Разработка Ui/Ux мобильного приложения, технического задания, графического интерфейса.

В первую очередь, что мы сделали — опросили Заказчика, и входе общения (опроса) собрали все его пожелания и «хочухи» и поняли его переживания по вопросу реализации проекта и готового продукта в целом и реализации каждого отдельного функционала в частности.

Второе — четко сформировали, расписали все задачи и декомпелировали их на более мелкие. Расставили приоритеты реализации. Таким образом Заказчик увидел, что все не так печально, грустно и страшно, на самом деле как казалось изначально.

Третье — создали прототипы экранов, максимально отвечающие требованиям UX, пожеланиям Заказчика и гайдлайнам Apple и Google.

Четвертое — на основе прототипов создали карту экранов или другими словами логику переходов между экранами приложения.

Далее на созданные прототипы экранов красок и таким образом получили готовый UI дизайн экранов приложения. 

На основе готовых дизайн макетов, расписали каждую функцию, каждое действие, даже самого незначительного, объединили все в один документ и в результате появилось техническое задание или user story (тут кому как больше нравиться), в котором все четко и понятно не только для разработчиков, а в первую очередь понятно самому Заказчику.

Пример технического задания на разработку мобильного приложения для сервиса доставки

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

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

По условиям Договора разработки, мы не можем публиковать техническое задание на разработку мобильного приложения в полном объеме. Для наглядности, по согласованию с Заказчиком, чтобы наши клиенты могли понять какое техническое задание Заказчик получает в рамках Договора разработки мы выбрали 5 листов и объединили их в мини документ формата .pdf (откроется в новом окне)

Более подробно о технических заданиях, которые наша команда создает, как в рамках Договора разработки, так и отдельным продуктам, Вы можете прочитать нашу статью, но у нас сейчас повествование о совсем о другом

Главная, стартовая или домашняя страница мобильного приложения

На главной странице мобильного приложения отражены следующие элементы:

Фильтр разделов — позволяет быстро отобразить товары из разделов каталога приложения.

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

Лента товаров отображает классное и качественное фото каждого товара, его название и краткое описание. А по нажатию на фото, пользователь может перейти в карточку данного товара.

Нижнее навигационное меню, имеющее следующие иконки для быстрого переключения по разделам мобильного приложения и позволяющие перейти в разделы: Каталог, Избранное (товары добавленные в избранное), Профиль пользователя, а также вернуться на главную страницу приложения, через кнопку-иконку «Подборка», таким образом мы создали навигационное меню приложения.

Раздел мобильного приложения Каталог

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

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

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

В панели администрирования приложения можно задать порядок (очередность) вывода категорий в каталоге.

Раздел мобильного приложения - карточка товара.

Карточка товара.

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

Фото товаров

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

Фото можно увеличить во весь экран мобильного устройства просто сделав тап по выбранному фото и рассмотреть детали товара, используя зумирование (наверное очевидно, что фото, в этом случае должно быть просто отличного качества и не стоит об этом упоминать, но все же….).

Розничные, оптовые и акционные цены на товары.

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

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

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

Первый — из панели администрирования при добавлении товара в ручном режиме.

Второй — из импортируемого файла, например выгрузка из 1С файла форматов .xls и .cvs, которые Вам предоставляет Ваш поставщик.

Третий вариант — автоматическое добавление через интеграцию с 1С, которая также реализована в данном проекте.

Описание товара и доставки

Также в данном разделе приложения покупатель может видеть описание товаров и продуктов,  их  характеристики. Информацию о доставке, об условиях оплаты и возврата товаров, что позволяет покупателю принять решение о покупке. 

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

Похожие товары

Данный раздел также настраиваемый администратором, не только в ключе «выводить или не выводить», у категории товаров или на определенном товаре, а именно настраиваемый для каждого товара, что именно выводить в разделе «Похожие товары».

Цель раздела «Похожие товары» банальна — увеличение среднего чека покупки.

Добавление товара в корзину

Когда пользователь определился с выбором нужного количества товара для заказа, он нажав на кнопку «Добавить в корзину» может увидеть общую стоимость позиции товара, включая скидку за опт, если такая применима к данной товарной позиции.

Добавление товаров в приложение

Все данные, которые покупатель видит в карточке товара (фото, название, описание, цена и т.п.), могут добавляться в приложение тремя способами, описанными выше в разделе «Цены».

Раздел мобильного приложения - Корзина

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

В корзине пользователь видит информацию о каждом выбранном в приложении товаре к покупке, а именно:

  • миниатюру фото
  • название товарной позиции
  • краткое описание товара
  • количество единиц данной товарной позиции
  • скидку, если она предусмотрена на данный товар.

 

Кроме того пользователь может добавить большее количество единиц для каждого товара из корзины или уменьшить их количество в заказе. Для этого пользователю необходимо нажать на кнопки, расположенные на фото товара — кнопка «плюс» (добавить) и кнопка «минус» (уменьшить) количество. При этом если добавлена в корзину всего одна единица товара, то в этом случае, при уменьшении количества этот товар удаляется из корзины, предварительно запросив подтверждение о данном действии у пользователя.

Пользователь может перейти в карточку товара из корзины, просто нажав на фото товара в корзине.

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

Нажимая на кнопку «Оформить заказ» пользователь будет перенаправлен на страницу оплаты.

Закрытие корзины происходит путем нажатия на иконку «Крестик», тем самым пользователь покидает корзину, но добавленные в нее товары остаются в ней.

Раздел приложения - оформление заказа

На данном экране мобильного приложения, пользователь видит дублирование информации о заказ перед его оплатой.

Покупатель может добавить или изменить адрес доставки.

Нажав на кнопку «Оформить заказ» пользователь переходит на экран подтверждения и оплаты заказа через 3d secure. Оплата происходит на странице банка, которая открывается внутри приложения, без перехода в браузер. Для пользователя это выглядет как оплата в самом приложении.

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

Экран мобильного приложения - добавление банковской карты

Экран выбора или добавления карты для оплаты, перед оформлением заказа.

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

Привязка карты происходит путем списания суммы в 1р с карты покупателя и последующим ее возвратом.

Создан с целью упростить оплату заказа. Все данные по картам хранятся на стороне банка. в приложение отдается только информация о последних 4х цифрах карты.

Раздел - мои покупки

Мы считаем историю покупки не маловажным фактором для повышения LTV приложения.

На данный экран приложения пользователь попадает через свой личный кабинет.

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

Кроме того на данном этапе разработки, мы создали полноценный графический интерфейс мобильного приложения (сверстали экраны) и сделали роутинг экранов из дизайн макетов, тем самым Заказчик уже на текущем моменте смог установить и увидеть мобильное приложение на своих устройствах под ос iOS и Android.

Так же, в первом этапе разработки мы спроектировали сервер и БД. Создали серверную часть на 35%.

Итоги 1 этапа разработки мобильного приложения Домашний магазин

Сроки первого этапа составили:

Дизайн — 64 рабочих часа.

Составление технического задания — 24 рабочих часа.

Проектирование серверной части — 16 рабочих часов.

Написание серверной части до окончания текущего этапа — 64 часа.

Верстка и роутинг экранов для ос iOS — 64 рабочих часа.

Верстка и роутинг экранов для ос Android — 64 рабочих часа.

Тестирование UX функционала — 16 рабочих часов.

Итого*: 1 месяц или 22 рабочих дня.

Второй, он же заключительный этап разработки приложения.

Во втором этапе мы создали полноценную серверную часть.

Разработали протокол API для интеграции клиентской части (приложения) с серверной частью проекта. Интегрировали сам сервер с приложением.

Нарисовали, сверстали и соединили с сервером панель администрирования.

Протестировали работоспособность функционала.

Нарисовали иконку и подготовили готовое мобильное приложение для публикации в Google Play (Android) и AppStore (iOS), сделали экспресс ASO и выгрузили приложение на аккаунты заказчика в маркетах.

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

Сроки второго этапа составили:

Серверная часть — написание, оставшиеся 65% — 60 рабочих часов.

Протокол API — 32 рабочих часа.

Интеграция сервера с мобильным приложением — 40 рабочих часов.

UX и UI Дизайн панели администрирования — 32 рабочих часа.

Верстка web панели администрирования — 24 рабочих часов.

Интеграция web панели администрирования с сервером — 24 рабочих часа.

Тестирование всего функционала 60 рабочих часов.

Подготовка к публикации в store — 8 рабочих часов.

Итого*: 1 месяц или 22 рабочих дня.

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

В сухом остатке

Резюмируя все вышеописанное, можно сказать следующее.

В приложении реализован функционал:

Клиентская часть (мобильное приложение для клиентов Заказчика):

  • Просмотр товара.
  • Фильтрация товаров по категориям.
  • Добавление в корзину.
  • Регистрация и авторизация пользователя.
  • Личный кабинет пользователя.
  • Подтверждение номера телефона через смс-код.
  • Оплата банковской картой, через эквайринг, прямо в приложении.
  • Управление банковскими картами в приложении.
  • F.A.Q. Динамический раздел «Вопрос-ответ».
  • Раздел «Вы смотрели» и «Вам понравиться».
  • Push уведомления. Рассылка и системные.
  • Прочий, вспомогательный функционал.

Панель администрирования:

  • Добавление товара.
  • Создание/Редактирование/Удаление разделов каталога.
  • Интеграция с 1С Предприятие (Торговля) для обмена данными и актуальных остатков.
  • Ручное добавление товаров в приложении.
  • Парсинг (быстрое добавление товаров) из выгруженных файлов форматов .csv и .excel
  • Статистика и аналитика.
  • Быстрое оповещение о новом заказе через email и смс, ответственных лиц.
  • Система статистики и аналитики, по различным направлениям и разрезам.
  • Указания товаров в разделах «Вам понравиться».
  • Указание товаров для Up Sale.
  • Разделение прав пользователей на Super Admin (Бог, владелец сервиса), Модератор (полу Бог), оператор (просто человек).
  • Прочий, немаловажный и нужный функционал.

Стек разработки мобильного приложения

Разработка приложения iOS — swift, objective C

Разработка приложения Android — Kotlin

Разработка серверной части приложения — node js

Разработка web панели администрирования — bootstrap, css

Создание дизайна — Sketch, Figma

Команда разработки

Менеджер проекта — 1 чел

Разработчик iOS — 2 чел

Разработчик Android — 2 чел.

Back end разработчик (Серверная часть) — 2 чел

Front end разработчик (верстка web) — 1 чел

Дизайнер-проектировщик мобильного приложения — 1 чел.

Тестировщик — 1 чел + вся команда

Общее время разработки мобильного приложения: от заключения Договора, до готовности приложения к публикации в Google Play (Android) и AppStore (iOS) составило 2 месяца или 44 рабочих дня.

Сейчас, мы создаем для данного проекта и его web версию (т.е. web сайт), который имеет один общий, с приложением, сервер и панель администрирования. После его создания, представители Заказчика (администратор, модератор, оператор) будут добавлять все в одном месте, видеть статистику и аналитику, как с сайта, так и из приложения, видеть все заказы в едином пространстве.

Если Вы хотите создать качественное нативное мобильное приложение под ос iOS и Android для своего бизнеса или Start Up проекта для доставки еды или иных товаров, мы готовы Вам в этом помочь. Для этого просто оставьте заявку у нас на сайте в форме ниже, мы всегда с Вами найдем общий язык, как по стеку технологий, так и по бюджету.