Платформа публичных пространств «Делай город»
Площадка для выгула собак
Зелёный уголок
Реконструкция сквера
Онлайн-платформа по микроблагоустройству городских территорий
Омск, 2022-2023
ДИЗАЙН
QA
РАЗРАБОТКА
Задачи
- 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-зависимость в каждом из проектов и позволяет избегать копипасты и поддерживать одинаковое поведение и внешний вид в одинаковых частях приложений.
Разные типы пользователей
Библиотека компонентов
Backend
Серверная часть «Платформы» была написана на Java с использованием нашего собственного фреймворка — SmartActors. В нём применяется акторная модель. Суть её состоит в том, что любая функциональность или фича состоит из небольших блоков — акторов, небольших кусочков Java-кода, которые можно легко переиспользовать. На сервер поступает некоторое сообщение, в нём указывается, что конкретно нам нужно сделать и какие данные нам для этого даются. Затем данное сообщение проходит через каждый актор в цепочке и в ответ приходит готовый результат.
SmartActors
Для аутентификации мы используем JWT-токены. У клиента хранятся два токена: access и refresh. Первый нужен для того, чтобы проверить авторизован ли пользователь и имеет сравнительно небольшой срок жизни. А второй создан для того, чтобы обновить access после того, как он «протух».
Аутентификация
Для хранения данных приложения мы используем PostgreSQL. Мы используем JSONB, поэтому мы можем хранить любой набор полей для любого объекта. У всех важных коллекций есть архивные коллекции, что при необходимости позволит восстановить предыдущей состояние нужного объекта. Также, чтобы работать с географическими объектами мы добавили к PostgreSQL расширение — PostGIS, которое как раз и упрощает всю работу с географическими объектами, позволяя работать с GeoJSON.
Для хранения файлов мы используем MinIO — высокопроизводительное хранилище объектов. С файлами нам надо работать много, в разных форматах и так, чтобы всё это было быстро и надежно. Так как у каждого пользователя может быть фотография, а ещё и резюме. У каждого проекта может быть несколько фотографий и большое количество документов. И поскольку это отдельный сервис, его всегда можно вынести на отдельный сервер в случае, если понадобится ещё больше памяти для его работы.
Хранение данных
Хранение файлов
QA
(Обеспечение качества)
Процесс работы QA специалистом на этом проекте — очень многосторонний процесс: от общения с заказчиком для выяснения требований до тестирования уже готовой части ПО для того чтобы убедиться, что все требования соблюдены.
Мы активно участвовали в процессе прототипирования и макетирования. Мы следили, чтобы прототипы и макеты соответствовали требованиям, и в дальнейшем согласовывали их.
После утверждения мы документировали все требования с помощью написания пользовательских историй и критериев приёмки. По ним в дальнейшем мы создавали тестовую документацию. Процесс тестирования строился на тестировании по функциональным требованиям и нефункциональным. Мы тестировали на различных устройствах, операционных системах и разных версиях браузеров. Также с помощью Postman производилось тестирование запросов на сервер. Если были обнаружены ошибки, мы создавали баг-репорты, где подробно описывали, как повторить баг, указывали его критичность и окружение, в котором тестирование проводилось.
Мы активно участвовали в процессе прототипирования и макетирования. Мы следили, чтобы прототипы и макеты соответствовали требованиям, и в дальнейшем согласовывали их.
После утверждения мы документировали все требования с помощью написания пользовательских историй и критериев приёмки. По ним в дальнейшем мы создавали тестовую документацию. Процесс тестирования строился на тестировании по функциональным требованиям и нефункциональным. Мы тестировали на различных устройствах, операционных системах и разных версиях браузеров. Также с помощью Postman производилось тестирование запросов на сервер. Если были обнаружены ошибки, мы создавали баг-репорты, где подробно описывали, как повторить баг, указывали его критичность и окружение, в котором тестирование проводилось.
Отзыв клиента
Посмотрите на другие наши проекты