«Нова Пошта» — Личный кабинет

Задача

Задачи, которые необходимо было реализовать в рамках этого проекта:

• Спроектировать новый интерфейс Личного кабинета
• Разработать веб-приложение
• Интегрировать frontend с API «Нова пошта»

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

Старт нового проекта начинается с исследования предметной области, анализа текущих проблем и обсуждения их с заказчиком. В случае Личного кабинета «Нова пошта» нам были предоставлены пользовательские истории, портрет посетителей сайта, отчет по опросу пользователей и результатам тестирования, которые здорово помогли в разработке интерфейса.

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

Material Design + Angular

Для ускорения разработки пользовательского интерфейса и создания высокопроизводительного веб-приложения была использована библиотека Material Design от Google, реализованная на фреймворке Angular. Такой подход к реализации интерфейса позволил сосредоточиться на бизнес-логике, продумать дизайн взаимодействия до мелочей, избежать написания с нуля UI и контролов ввода.

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

Авторизация пользователей

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

Список накладных

Основная страница Личного кабинета — это список накладных пользователя системы. Для удобства все накладные были разделены на категории:

• Созданные, но ещё не оформленые в отделении или курьером
• Входящие отправления
• Исходящие отправления
• Шаблоны-заготовки
• Архивированные
• Корзина с возможностью восстановления накладных

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

Кнопка быстрого доступа

Пожалуй, самый узнаваемый элемент Material Design — это, так называемая, Float Action Button. Этот элемент используется для быстрого доступа к самым важным функциям и всегда находится в одном месте на странице. Это простой способ совершить необходимое действие с любого экрана приложения.

Создание накладной

Большое внимание при разработке дизайна было уделено окну создания накладной. Для упрощения ввода данных и запоминания расположения полей, мы выстроили элементы по Z-паттерну — данные сгруппированы по рядам, заполнение каждого ряда слева направо. Так как создание накладной — повторяющийся процесс, мы постарались максимально заполнить данные по умолчанию. Например, объявленная стоимость посылки указана как минимально возможная. При этом, если указана обратная доставка денег, то объявленная стоимость автоматически повышается.

Оптимизирован ввод с клавиатуры, что позволяет без использования мышки быстро и эффективно работать с формами.

Трекинг посылки

Все исходящие и входящие отправления отображаются в интерфейсе Личного кабинета с общей информацией и историей движения посылки.

Шаблоны, реестры

Постоянный и самый требовательный пользователь Личного кабинета — клиент, который часто отправляет посылки. Например, интернет-магазин. Система позволяет создать копию накладной и получить аналогичный заказ. Пользователи могут создавать шаблоны с популярными описаниями отправлений и существенно упростить оформление новой накладной. Здесь также есть возможность сгруппировать несколько накладных в один реестр.

Контакты и адреса

Система хранит базу контактов пользователя с возможностью быстрого поиска по имени или номеру телефона. У каждого контрагента может быть несколько адресов получения: это может быть как отделение «Нова пошта», так и личный адрес. Для удобства контакты можно объединять в списки.

Статистика

Большую ценность для постоянных пользователей системы представляли статистические данные по их заказам. Мы хотели сделать Личный кабинет полноценным инструментом для мелкого частного предпринимателя — с возможностью не только создавать накладные и отслеживать их, но и анализировать прошлые отправления, видеть общую статистику по месяцам, дням и даже регионам страны.

Особенности фронтэнд-архитектуры

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

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

Особенности архитектуры фронтенда

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

Библиотека Angular-Translation помогла в реализации мультиязычности. Язык приложения определяется по языку браузера пользователя или по языку операционной системы. Язык загружается всего раз и сохраняется локально в браузере, а затем обновляется при обновлении версии приложения.