Площадка для выгула собак
Зелёный уголок
Реконструкция сквера
ДИЗАЙН
QA
РАЗРАБОТКА
Онлайн-платформа по микроблагоустройству городских территорий
Омск, 2022-2023
Платформа публичных пространств «Делай город»
Задачи
- Implement the platform storage using MinIO.
- Implement the work of micro-project diary, news presentation on the front page, likes, comments.
- Implement Admin UI as a separate React application with the ability of comments, specialists and projects moderation.
- Отображение различных слоёв карты: микро-проекты, государственные проекты, данные из ПКК
- Авторизация на платформе с возможностью восстановления пароля
- Работа с микро-проектами на карте
- Реализация списка специалистов и каталога проектов
- Хранение данных на платформе с помощью MinIO
- Реализация функциональности для работы с дневником проекта, новостями на главной странице, лайками и комментариями
- Реализация интерфейса администратора как отдельного React-приложения с возможностью модерации комментариев, специалистов и проектов
О проекте
Реализация проектов городского благоустройства
Платформа публичных пространств создана, чтобы объединять городских активистов, органы власти, спонсоров и непосредственных исполнителей работ для реализации проектов благоустройства городских территорий.
Помимо этого, платформа даёт доступ к актуальной карте состояния благоустройства, оповещает городские сообщества об успешных проектах и привлекает большее количество активистов в процессы улучшения городской среды.
Помимо этого, платформа даёт доступ к актуальной карте состояния благоустройства, оповещает городские сообщества об успешных проектах и привлекает большее количество активистов в процессы улучшения городской среды.
Работа с картой
Карта на платформе отражает состояние проектов благоустройства и предоставляет информацию из публичной кадастровой карты о состоянии тех или иных территорий города.
На балансе города
В процессе реализации
Проект завершён
Проект согласован
Идея оформлена
Принято
на платформу
на платформу
Жизненный цикл проекта
Создание проекта
Любой пользователь может добавить свой проект на платформу. Проект пройдет модерацию и будет показан на общей карте.
В самом начале представлен жизненный цикл проекта благоустройства. Каждый пункт ведёт на страницу с дополнительной информацией.
Шаг 1
Алгоритм создания проекта
Название и описание проекта, которое будет доступно всем пользователям.
Шаг 2
Идея проекта
Нарисовать полигон можно прямо на карте, в информации о территории отобразятся номера кадастровых участков и информация о них из ПКК.
Шаг 3
Выбор территории
На фото важно показать проблему выбранной территории. Концепт-дизайн — это желаемая картинка результата, с которой могут помочь проектировщики Платформы.
Шаг 4
Фотографии и концепт-дизайн
На платформе есть каталог проверенных специалистов из разных областей. Можно собрать команду мечты на проект любой сложности.
Шаг 5
Команда проекта
На этом этапе работа инициатора завершается и начинается модерация проекта. При успешном прохождении модерации проект начинает реализовываться.
Проект успешно создан!
Проект создан
Карточка проекта
В карточке проекта отражена полная информация о проекте: название, описание, дневник, донаты, документация, команда.
Полная информация о составе команды, с возможностью присоединиться
Команда проекта
Отображение прогресса и текущего статуса по жизненному циклу проекта
Таймлайн
Возможность финансово поддержать любой из проектов на платформе
Набор документов проекта, концепт-дизайн, различные письма, запросы и ответы
Система донатов
Документация
Интерфейс модератора
Модераторам платформы приходят уведомления о новых проектах, изменениях в текущих, новых комментариях и заявках в каталог специалистов.
Уведомления об изменениях в проектах на платформе
Уведомления о новых комментариях
Мобильная версия
Платформа адаптирована под мобильные устройства — можно пользоваться, где и как вам удобно.
Frontend
Для клиентской части «Платформы» был выбран React. В разработке мы частично придерживались методологии Feature-Sliced Design, разделяя части проекта на следующие слои:
- app: стили, настройки и провайдеры для всего приложения;
- pages: слой полноценных страниц нашего приложения, состоящих из компонентов и фич;
- features: слой полноценных действий и пользовательских сценариев, например, фича авторизации и фича донатов;
- shared: переиспользуемые компоненты, модели и функции.
Feature-Sliced Design
Для работы с картой города мы используем Leaflet со слоями от Google Maps для карты со спутника и OpenStreetMap для представления карты в виде схемы.
Работа с картой
На самом деле, «Платформа» представляет собой не одно React-приложение, а два, переход между которыми осуществляется при помощи Nginx. Первое приложение основное и доступно всем. Именно его вы используете, заходя на delaigorod.ru. Второе — видит и использует только модератор для обработки пользовательских комментариев и проектов.
Разные типы пользователей
Также мы собрали общие компоненты, стили, хуки и модели в один репозиторий, который является библиотекой компонентов. Она используется как npm-зависимость в каждом из проектов и позволяет избегать копипасты и поддерживать одинаковое поведение и внешний вид в одинаковых частях приложений.
Библиотека компонентов
Для хранения файлов мы используем MinIO — высокопроизводительное хранилище объектов. С файлами нам надо работать много, в разных форматах и так, чтобы всё это было быстро и надежно. Так как у каждого пользователя может быть фотография, а ещё и резюме. У каждого проекта может быть несколько фотографий и большое количество документов. И поскольку это отдельный сервис, его всегда можно вынести на отдельный сервер в случае, если понадобится ещё больше памяти для его работы.
Хранение файлов
Для аутентификации мы используем JWT-токены. У клиента хранятся два токена: access и refresh. Первый нужен для того, чтобы проверить авторизован ли пользователь и имеет сравнительно небольшой срок жизни. А второй создан для того, чтобы обновить access после того, как он «протух».
Аутентификация
Серверная часть «Платформы» была написана на Java с использованием нашего собственного фреймворка — SmartActors. В нём применяется акторная модель. Суть её состоит в том, что любая функциональность или фича состоит из небольших блоков — акторов, небольших кусочков Java-кода, которые можно легко переиспользовать. На сервер поступает некоторое сообщение, в нём указывается, что конкретно нам нужно сделать и какие данные нам для этого даются. Затем данное сообщение проходит через каждый актор в цепочке и в ответ приходит готовый результат.
SmartActors
Для хранения данных приложения мы используем PostgreSQL. Мы используем JSONB, поэтому мы можем хранить любой набор полей для любого объекта. У всех важных коллекций есть архивные коллекции, что при необходимости позволит восстановить предыдущей состояние нужного объекта. Также, чтобы работать с географическими объектами мы добавили к PostgreSQL расширение — PostGIS, которое как раз и упрощает всю работу с географическими объектами, позволяя работать с GeoJSON.
Хранение данных
Backend
QA
(Обеспечение качества)
Процесс работы QA специалистом на этом проекте — очень многосторонний процесс: от общения с заказчиком для выяснения требований до тестирования уже готовой части ПО для того чтобы убедиться, что все требования соблюдены.
Мы активно участвовали в процессе прототипирования и макетирования. Мы следили, чтобы прототипы и макеты соответствовали требованиям, и в дальнейшем согласовывали их.
После утверждения мы документировали все требования с помощью написания пользовательских историй и критериев приёмки. По ним в дальнейшем мы создавали тестовую документацию. Процесс тестирования строился на тестировании по функциональным требованиям и нефункциональным. Мы тестировали на различных устройствах, операционных системах и разных версиях браузеров. Также с помощью Postman производилось тестирование запросов на сервер. Если были обнаружены ошибки, мы создавали баг-репорты, где подробно описывали, как повторить баг, указывали его критичность и окружение, в котором тестирование проводилось.
Мы активно участвовали в процессе прототипирования и макетирования. Мы следили, чтобы прототипы и макеты соответствовали требованиям, и в дальнейшем согласовывали их.
После утверждения мы документировали все требования с помощью написания пользовательских историй и критериев приёмки. По ним в дальнейшем мы создавали тестовую документацию. Процесс тестирования строился на тестировании по функциональным требованиям и нефункциональным. Мы тестировали на различных устройствах, операционных системах и разных версиях браузеров. Также с помощью Postman производилось тестирование запросов на сервер. Если были обнаружены ошибки, мы создавали баг-репорты, где подробно описывали, как повторить баг, указывали его критичность и окружение, в котором тестирование проводилось.
Отзыв клиента
Посмотрите на другие наши проекты