Разработка листинга недвижимости

Подготовка

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

Дизайн

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

В процессе проектирования UX мы постоянно брали фидбек у клиента и пользователей. Это помогало оперативно корректировать ход проектирования и в итоге получить понятный и при этом привычный старым пользователям UX приложения. Отдельно стоит отметить работу над таблицами, пользователям важно количество строк на экране, поэтому мы его не уменьшали, но на сколько возможно облегчили восприятие таблиц. Следующим этапом был разработка UI. Старое предложение имело дизайн 00-х годов, он был тяжелым, с большим количеством обводок, лишних элементов. Мы избавились от всего лишнего, сосредоточив акцентные цвета на главной и добавили воздуха там, где это было необходимо. Количество функционала и соответственно экранов получилось достаточно большим, но блягодаря опыту работы с большими проектами больших трудностей это не сосздало.

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

Разработка

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

Мы выделили и оценили ключевые этапы:

• Проектирование БД
• Интеграция ФИАС
• Разработка панели управления (React)
• Разработка API для панели управления (koa.js + objection.js)
• Разработка десктопного приложения (Electron.js)
• Разработка API для десктопного приложения (koa.js + objection.js)
• Экспорт объектов недвижимости в формате: docx, xlsx, Яндекс.Недвижимость, ЦИАН, ДомКлик
• Синхронизация локальной базы приложения и центральной базы

Проектирование БД

Разработку физической модели БД провели в MySQL Workbench. В общей сложности было спроектировано более 100 таблиц. Было решено, что локальная база данных будет реализована на базе SQLite.

Адресные справочники

Наличие локальной базы данных подразумевало, что необходимо выбрать ORM, которая будет использоваться как в десктопном приложении, так и в API. При этом ORM должна без проблем работать с SQLite и MySQL, поддерживать композитные первичные ключи и иметь систему связей (relationships).

Наш выбор пал на objection.js. Мы разработали приватный npm пакет, в котором реализовали все модели необходимые для работы с базой данных. Благодаря возможностям ORM мы смогли реализовать модификаторы, которые позволили работать с типами, которые не поддерживаются в SQLite. К примеру: даты в SQLite базе данных мы храним в виде числа, а модель сама преобразовывает его к классу Date.

Интеграция ФИАС

Ранее мы решали подобные задачи используя самописные решения, но в этот раз мы решили поискать и нашли отличный компонент для PHP liquetsoft/fias-component. Компонент позволил нам сэкономить время на автоматических обновлениях базы данных ФИАС. Затем мы реализовали синронизацию между базой данных ФИАС и нашими адресными справочниками. Алгоритм следующий:

1. Получаем последнее обновление ФИАС
2. Определяем новые, изменившиеся и удаленные адресные объекты
3. Производим автоматическое обновление адресных справочников

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

Разработка панели управления и десктопного приложения (React + Electron.js)

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

• Разработку фронэнтда и приложения мы вели в монорепозитории.
• Был разработан единый UI-kit.
• Разработали алгоритм генерации пользовательских форм на основе JSON. Такой подход позволяет обновлять пользовательский интерфейс без обновления десктопного приложения.

Разработка API для панели управления

API реализовали на koa.js. Особое внимание пришлось уделить системе прав доступа. В системе есть операторы и администраторы, которым должны быть доступны разные разделы системы. Мы определили основные разделы системы и выбрали классический CRUD подход для организации типов полномочий. В качестве фреймворка для авторизации действий пользователей мы выбрали CASL

Права доступа

Разработка API для десктопного приложения и синхронизация баз данных

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

1. При полной синхронизации по запросу пользователя на сервере создается SQLite база данных, которая затем скачивается и заменяет предыдущую.
2. При синхронизации через дельты приложение отправляет HTTP запросы на сервер с определенными параметрами, которые позволяют определить какие данные необходимо передать клиенту.

Экспорт объектов недвижимости

Модуль экспорта был разработан в качестве отдельного npm пакета, который можно установить как в десктопное приложение, так и в API.

Дальнейшая разработка

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

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

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