Все кейсы
#React
#Python
#TypeScript
#FastAPI

Сервис мониторинга состояния зарядных станций для автомобилей

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

Задача

Разработать фронтенд и бэкенд локального сервис-сбора, обработки данных и управления устройствами в локальной сети до 500 устройств. Для решения этой задачи в кратчайшие сроки командой Spectr было оперативно изучено техническое задания от заказчика и подготовлены макеты будущей системы. Вся проработка велась в плотном взаимодействии с клиентом.
Технологии и архитектура

Backend

— Фреймворк для разработки web-интерфейса FastAPI / CSS / Client JS / Bootstrapx;
— База данных MongoDB, асинхронная ORM Beanie;
— Библиотека для сериализации и валидации данных Pydantic;
— Poetry для управления зависимостями;
— Динамические данные Redis DB. ПО комплекса выгружает все необходимые для веб-интерфейса данные в базу Redis, для работы с Redis используется библиотека Redis OM;
— Управление ПО комплекса осуществляется через REST API;
— Протокол общения клиента с веб-сервером HTTPS и Secure Web Sockets;
— Для работы приложения используется сервис клиента (ocpp-server), при его помощи в Redis загружаются данные от комплекса.
Технологии и архитектура

Frontend

— Библиотека для разработки пользовательского интерфейса React;
— Управление состоянием Zustand;
— Компоненты пользовательского интерфейса Radix UI;
— Выполнение HTTP-запросов, кеширование данных TanStack Query, Axios;
— Маршрутизация TanStack Router;
— Таблицы и виртуализация TanStack Table, TanStack Virtual;                
— Библиотеки для работы с формами в React React Hook Form, Yup, Hookform Resolvers;
— CSS и стилизация clsx;
— Визуализация данных в виде графиков Recharts;
— Работа с датами date-fns;
— Уведомления React Toastify;
— Интернационализация i18n;                                                                                              
— Дополнительные утилиты ahooks, Lodash, Immer, qs.
Технологии и архитектура

Архитектура проекта

ПО комплекса выгружает все необходимые для веб-интерфейса данные в базу Redis
Управление ПО комплекса осуществляется через REST API
Протокол общения клиента с веб-сервером HTTPS и Secure Web Sockets
Для работы приложения используется сервис клиента (ocpp-server), при его помощи как раз в Redis загружаются данные от комплекса

Этапы работы

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

1-й этап

В рамках первого этапа были реализованы приоритетные функциональные части системы.
Авторизация
Перечень всех узлов зарядного комплекса
Состояние станций на странице мониторинга
Общее состояние комплекса на странице мониторинга
Этапы работы

2-й этап

В рамках второго этапа был реализован базовый функционал.
Балансировка конфигурации
Работа со списком пользователей зарядных станций
Иерархическая загрузка узлов на странице мониторинга
Функционал добавления новых узлов и редактирование
Раздел со списком транзакций
Этапы работы

3-й этап

Графики потребления на странице мониторинга
Отчет по потреблению электроэнергии пользователями

Функционал

Для авторизации в системе необходимо ввести почту и пароль. Учетные данные для авторизации создаются администратором и направляются пользователю.

После авторизации пользователь попадает в главное меню системы. В соответствии с настроенными правами учетной записи может видеть разделы, разрешенные для просмотра и настроек. Можно посмотреть общее состояние и загрузку узлов, состояние станций и графики потребления.
Работа с пользователями потребляющие электроэнергию. Каждому пользователю присваивается ключ RF ID, по которому фиксируется количество потребляемой электроэнергии.
Функционал

Состояние станций и график потребления

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

Работа с узлами зарядного комплекса

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

Управление станциями

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

Управление пользователями

Реализована работа с пользователями потребляющими электроэнергию. Каждому пользователю присваивается ключ RF ID, по которому фиксируется количество потребляемой электроэнергии.
Функционал

Отчеты

В разделе «Отчеты» можно посмотреть, сколько электроэнергии потребляет пользователь за период. Присутствует фильтрация по пользователям, RF ID и  периоду. Также можно просуммировать потребление по RF ID И ФИО. Есть возможность скачать отчет в csv-формате.
Функционал

Транзакции

Ведется полный учет транзакций в системе. 

Результаты

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

На текущий момент осуществляется дальнейшее развитие и улучшение сервиса.

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

Анастасия Аристова
Руководитель проектного офиса
Даниил Хайбуллин
Руководитель проекта
Кирилл Епишин
DevOps
Анастасия Паршакова
Системный аналитик
Олег Казаков
Архитектор
Илья Бутаков, Никита Ильин, Евгений Голубаев
Backend-разработчики
Дмитрий Богданов, Дарья Кимсас, Алмаз Калиев, Елена Чингаева
Frontend-разработчики

Связаться с нами

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