20.03.2018

Разработка сервиса «Курьерская служба» для интернет-магазина «Вольтмаркет»

Voltmarket.ru – официальный интернет-магазин известного российского производителя ЭТК Энергия. Магазин имеет широкий ассортимент товаров, большой штат сотрудников и собственную службу доставки. Большая нагрузка на службу доставки требует удобного и понятного инструмента управления и внутреннего взаимодействия между всеми ее сотрудниками для быстрой и эффективной работы. Именно с такой проблемой столкнулись наши клиенты.

Суть проблемы проста – курьерская служба пользуется для работы стандартными инструментами административной панели Битрикс, которая, не смотря на все свои плюсы, к сожалению, имеет громоздкий, не всегда и не для всех удобный интерфейс. Множество лишних для менеджера или курьера свойств, возможностей, настроек, вкладок, потребность совершать не всегда понятные интуитивно действия – все это создает дополнительную нагрузку на отдел, увеличивает трудозатратность и значительно снижает эффективность работы каждого отдельно взятого сотрудника.

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

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

Цель проекта:

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

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

Основные задачи:

  1. Расширить функционал модуля «Интернет-магазин» в административной панели Битрикс. Необходимо было дополнить компонент «Просмотр заказа» возможностью выгрузки заказа в отдел доставки (ОД), интерфейсом управления которым будет выступать наше приложение. Данных функционал должен быть доступен администраторам и менеджерам интернет-магазина. Это стандартные группы пользователей в CMS.

    Поля, необходимые для ОД:

    • Идентификатор заказа;
    • ФИО покупателя/ Название организации (для юр. лиц);
    • Адрес доставки;
    • Телефон покупателя;
    • Дата доставки;
    • Данные водителя, который должен обработать заказ;
    • Комментарий для водителя;
    • Склад отгрузки товара;
    • Стоимость заказа;
    • Состав заказа;
    • Способ платы;
    • Способ доставки (самовывоз из склада/доставка).
  2. Создать публичную часть сервиса. В интерфейсе должен присутствовать список выгруженных из админ. панели заказов, карта с отмеченными адресами заказов и местоположением каждого водителя, фильтры списка заказов, поиск заказа по id, возможность редактировать/удалять/создавать заказы прямо из приложения, а также возможность распечатать маршрутный лист для курьера.

    1. Список заказов и отметки их адресов на карте должны быть синхронизированы между собой. На карте должны отображаться только те заказы, которые выведены на странице в соответствии с фильтрами. При выборе точки заказа на карте, соответствующая строка списка должна быть подсвечена. При выборе заказа в списке, должен выбираться соответствующая точка на карте.
    2. Фильтрация заказов в панели оправления должна осуществляться по следующим критериям:

      • дата доставки,
      • склад отгрузки товара,
      • водитель, который должен осуществить доставку,
      • способ оплаты,
      • способ доставки (самовывоз/доставка).
    3. При загрузке страницы и фильтрации списка заказов по складу отгрузки товаров, карта должна автоматически центрироваться в соответствующем городе. Если складов несколько (вариант в фильтре – все склады), отображать при загрузке тот город, к которому относится первый заказ из списка. В графе фильтра «дата доставки» указывается текущая дата на момент входа в систему, при необходимости можно выбрать любую другую.
    4. Кнопка «Маршрутный лист» открывает в новой вкладке готовую для печати страницу в формате А3, с полным списком заказов, сформированным фильтром.
    5. Необходимо предусмотреть возможность создания, редактирования, удаления, смены водителя и смены статуса заказа прямо из публичной части сервиса. При попытке удалить заказ, должно всплывать confirm-окно с вопросом о подтверждении удаления.
    6. Заказы должны иметь систему статусов. Таких статусов три:

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

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

    7. Кроме списков заказов с доставкой на текущую дату или выбранную пользователем в фильтре, необходимо внизу страницы показать «Список просроченных заказов» - список заказов, у которых срок доставки уж истек относительно выбранной даты.
    8. . Для заказов с московский складов, адреса доставки которых находятся за пределами МКАД, но не дальше Московской области, на карте необходимо построить маршруты от МКАД до точек назначения, с указанием километража.

  3. Ввести в административную панель Битрикс новые группы пользователей, с разными возможностями и правами доступа:

    • Менеджеры заказов – имеют полный доступ к заказам, управлению ими, как в административной панели Битрикс, так и в приожении.
    • Курьеры магазина – имеют возможность просматривать свои заказы, фильтровать их, менять статусы заказов на «Выполнен» или «Отказ».
    • Менеджеры на аутсорсе - могут управлять заказами, отгрузка товаров для которых производится из закрепленного за ними одного или нескольких складов. Имеют доступ только к приложению сервиса.

    Кроме того, предусмотреть возможность для администраторов ограничивать права того или иного пользователя по параметрам:

    • Склад отгрузки товара,
    • Способ доставки (самовывоз/доставка).
  4. Проанализировать Google Play на предмет наличия приложений, которые представляют из себя программный GPS-трекер, с возможностью передавать координаты на сервер по http протоколу в режиме реального времени. При отсутствии такого рода приложений - написать собственное приложение. Организовать скрипт на сервере заказчика, который будет принимать данные от приложений, установленные на устройствах курьеров, в виде координат и записывать их во внутреннее хранилище данных.

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

Решение поставленных задач.

  1. Для реализации первого пункта нам потребовалось подписаться на событие OnBeforeProlog в системе «Битрикс», вызвав метод, который определит нужную нам страницу (в данном случае — это просмотр заказа), вытащит необходимые данные по заказу и подключит скрипты, которые внесут изменения в структуру DOM. С помощью javascript, мы сгенерировали кнопку «Выгрузить в ОД», по нажатию на которой будет всплывать html-форма выгрузки заказа в отдел доставки. Если заказ уже был выгружен, кнопка принимает зеленый цвет.

    Права на функционал мы настроили штатными средствами cms Битрикс.

    После успешной выгрузки менеджер увидит соответствующее оповещение, а заказ уже будет доступен в публичной части сервиса.

  2. Для упрощения реализации второго пункта были использованы следующие технологии:

    • Bootstrap - бесплатный фреймворк для разработки адаптивных и мобильных web-проектов. Значительно ускорил процесс создания удобного интерфейса сервиса.
    • Jquery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Заметно упростил работу с ajax запросами и с обращением к DOM.
    • API Яндекс.Карт - набор сервисов, который позволил использовать картографические данные и технологии Яндекса для построения карты, точек и маршрутов.

    Ниже представлен общий интерфейс получившегося веб-приложения.

    Авторизация.

    Яндекс-Карта с точками доставок и информацией по каждой точке со связью с элементом списка заказов.

    Пример построения маршрута с определением километража.

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

    Пример отображения списка просроченных заказов.

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

    Пример генерации маршрутного листа для курьера.

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

    Также мы создали 2 дополнительных пользовательских поля в профиле пользователя:

    • ID склада, доступного в курьерской службе,
    • Ограничить видимость в курьерской службе.

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

  4. Для реализации четвертого пункта был проанализирован Google Play на предмет наличия приложений, которые представляют из себя программный GPS-трекер, с возможностью передавать координаты на сервер по http протоколу в режиме реального времени.

    В результате поиска было принято решение использовать GPS-трекер под названием GPSMTA. Данное программное обеспечение позволяет производить тонкую настройку передачи данных по http протоколу на любой сервер с разной периодичностью. Работает под операционной системой Android.

    Настойка трекера на передачу данных представлено на рисунке ниже:

    Ссылка на страницу программы - doro.poltava.ua/gpsm/gpsmta.html

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

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

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

    Отображение местоположения водителей в реальном времени:

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