Мобильный менеджмент проектов

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

Задача

Клиент хотел внедрить приложение на базе Android с необходимым набором функций: вход в систему - как в ZeroDark web, список задач - изменение рабочего статуса, обратная связь с менеджером проектов и push-уведомления.

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

Особенности

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

Все действия в приложении синхронизируются с веб-приложением ZeroDark и канбан-доской.

Решение

Чтобы реализовать управление задачами, нам пришлось обновить backend, для поддержки отдельного мобильного приложения. Веб-версия и приложение имеют одну общую серверную часть. Frontend - графическая часть реализована с использованием React Native, Redux-Saga и TypeScript.

Дизайн экранов

Здесь показаны основные экраны приложения:

Список задач

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

Чат

Чат появляется в какой-либо задаче, когда менеджер или работник впервые прокомментировали ее. Для реализации мы использовали пользовательский интерфейс response-native-gifted-chat.

Уведомления

Уведомления - здесь отображаются все события, которые рабочие получают в виде push-уведомлений. Если они что-то пропустили, они могут посмотреть историю полученных уведомлений. Мы использовали OneSignal API для парсинга задач, событий, комментариев и отображения связанных с ними push-уведомлений

из сервера.

Реальный макет и тестирование на реальных регрессиях

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

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

• Состояние задачи между клиентами. Если запустить задачу в вебе, пока в приложении уже выполняется другая, кнопка запуска могла зависать неактивной — нашли гонку состояний при синхронизации задач между клиентами и исправили именно её, а не симптом.
• Локализация дат. Даты в карточке задачи отображались в неверном порядке день/месяц для локали верфи — поймали это, тестируя с реальной сменой региона на устройстве, а не полагаясь на один формат даты для всех.
• QA по регионам. Прогнали полное тестирование с локалью устройства, переключённой на каждый рынок, где работает приложение — именно так нашли и проблему с форматом даты, и баг вёрстки на экране входа, который проявлялся только в немецкой локали.
• Статус уведомлений. Цвета прочитанных и непрочитанных push-уведомлений в истории были перепутаны местами — мелочь, но именно такая, которая подрывает доверие к индикатору “менеджер это увидел”.

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

Результат

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