Кейс: разработка веб-сайта по автоматизированной загрузке диагностических карт ТО

Клиент: Компания-организатор информационных баз данных для сервисов и станций, проводящих технические осмотры автомобилей по системе ЕАИСТО (Единая автоматизированная информационная система технического осмотра).

Задача: Разработать веб-сайт.

Цели:

• Адаптация сайта под различные мобильные устройства;
• Веб-сайт должен быть специализирован под работников индустрии;

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

Наша команда обсудила детали проекта вместе с заказчиком и разработала техническое задание, которое было утверждено.

Структура и дизайн

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

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

Опираясь на эти данные, мы заложили макет веб-сайта:

• Страница входа в личный кабинет, где клиент проходит верификацию;
• Главная страница с данными о профиле и счетах;
• Раздел создания карт, где будет использоваться основная функция веб-сайта;
• Список карт — в этом разделе будут собраны все зарегистрированные за определенный период карты;
• Отчетный раздел, в котором будет вестись учет по статусу каждой заявки;
• «Агенты и партнеры» — раздел для сотрудников одной компании, где они будут следить за общей статистикой и активностью;
• Раздел «Дополнительно» с множеством подразделов, отвечающих за другую информацию (финансы, счета, техподдержка и прочее).

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

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

В разделе создания карт происходит главный процесс — верификация результатов техосмотра и регистрация диагностических карт. Сюда сотрудники сервисов и станций вносят необходимые данные для оформления документа:

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

«Отчет по картам» — раздел, созданный для удобства администраторов и пользователей. Здесь описано количество зарегистрированных диагностических карт и статус их подтверждения. Благодаря этому разделу очень просто следить за процессами верификации в случаях большого количества технических осмотров:

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

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

Верстка и дополнительные функции веб-сайта

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

Например, мы добавили блок обратной связи для агентов (пользователей), чтобы они могли решить вопросы, возникающие в процессе использования ресурса:

На тот случай, если возникла потребность в проверке карты в официальном реестре, мы добавили для пользователей подраздел «Поиск», который ссылает нас на специальную форму поиска необходимой информации:

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

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

От подписания актов до утверждения финальной версии веб-сайта прошло 3 месяца. Проект был передан заказчику в полноправное пользование.

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