Разработать кроссплатформенное мобильное приложение для партнёров корпорации, сделать интеграцию с шахматкой на Laravel, сайтом на Битриксе и CRM Битрикс24.
Huawei AppGalleryОпыт подсказывает, что самые смелые, хорошие и нужные проекты получаются только лишь спустя некоторое время спокойной работы и доверительных отношений между клиентом и исполнителем. Как правило, быть партнёрами в долгосрочной перспективе в разы приятнее и выгоднее, чем следовать классической модели «заказчик-подрядчик».
Проект, о котором мы расскажем в этом кейсе, стал возможен только в результате приятной многолетней совместной работы и взаимного доверия.
Клиент
Строительно-инвестиционная корпорация «Девелопмент-Юг», работает в семи городах России. Если вы не в курсе, что это за компания, заходите на develug.ru, знакомьтесь.
Проекты корпорации однозначно рекомендуем, причём не только мы, но и федеральная премия Urban Awards 2021 ;-)
Рекогносцировка
Пандемия, безусловно, принесла много бед отечественному бизнесу. Однако некоторым, хоть и немногим, вирусный форс-мажор сыграл на руку: в «плюсе» оказались производители масок, аптеки, сервисы доставки еды и продуктов, айтишники и, конечно же, застройщики.
Льготная ипотека и туманные перспективы экономики подогрели спрос на недвижимость. Средняя цена квадратного метра продолжает подниматься прямо сейчас (150 000 руб. за квадрат, Карл!).
В такие моменты, как говорил Шеф, нужно «ковать железо, не отходя от кассы», то есть продавать здесь и сейчас.
Проблемы
Основная причина запуска проекта — необходимость вовлечь в продажи недвижимости корпорации максимальное большое количество партнёров, и обеспечить их удобным инструментом для эффективной работы.
На сайте уже был кабинет для агентов, однако он плохо подготовлен для работы на смартфонах и планшетах.
Были и другие проблемы:
1) в полевых условиях часто недоступен интернет, что мешает агенту получить доступ к информации, сформировать предложение или отправить заявку на сделку
2) общение между куратором и партнёром происходит вне инструментов компании, что замедляет получение обратной связи по заявке на бронирование или продажу
3) менеджер отдела продаж может работать с заявками партнёров только в Битрикс24, использование мобильных устройств затруднительно
4) для уточнения статуса заявки на сделку/бронирование риелтор вынужден сам писать или звонить куратору
5) риелтору недоступна история его заявок, статистика работы с компанией в различных разрезах
Мобильное приложение было признано наиболее подходящим решением, и мы начали готовиться к проекту сразу после встречи.
Задача
Разработать кроссплатформенное мобильное приложение для партнёров корпорации, сделать интеграцию с шахматкой на Laravel, сайтом на Битриксе и CRM Битрикс24.
Провести релиз приложения в AppStore, Play Market и Huawei AppGallery. После пилотного внедрения и обкатки запустить приложение в семи городах России.
Аналитика
Сперва подробно погрузились в процесс работы «Девелопмент-Юг» с партнёрами.
В процессе две интересные нам роли: собственно партнёр (агент по недвижимости) и его куратор — менеджер отдела продаж застройщика, который бронирует квартиру и сопровождает сделку. Мы побеседовали и с теми, и с другими.
Выяснили, что сначала агент по недвижимости отправляет заявку на сделку, после её проверяет колл-центр, и только после этого она попадает к куратору на обработку и сопровождение. Заявку нельзя оформить без прикрепления определённых документов.
Общение в основном идёт либо по заявкам, либо в разрезе предстоящих или прошедших мероприятий для партнёров. Думали сделать внутри приложения чат, но быстро отказались от этой идеи — WhatsApp и риелторы неразделимы. Остановились на комментариях в заявке на продажу/бронирование.
К финишу аналитики у нас созрела структура экранов, понимание, как, что и с чем интегрировать, и список действий пользователей, которые будут выполняться в мобильном приложении:
- просмотр всегда актуальных данных о проектах застройщика и шахматки литеров
- подбор недвижимости по параметрам, отправка избранного в виде коммерческого предложения в pdf с контактами партнёра
- получение презентаций и других промо-материалов
- уведомление партнёров об изменениях в заявке на сделку/бронирование и других событиях
- самостоятельная регистрация и подтверждение новых партнёров сотрудниками колл-центра
- получение контактов куратора, звонок или переход к чату с куратором в WhatsApp
- отправка заявки на продажу, бронирование объекта и отмена заявки в приложении от роли куратора, контроль лида сотрудником колл-центра
- работа с заявкой: комментирование заявки, смена статусов заявки в зависимости от событий в других системах
- квартира дня: показ квартиры с особыми условиями вознаграждения для агентов - последние заявки
- вход в приложение и восстановление пароля
- обращение в тех.поддержку
- смена пароля и контактных данных, указание отдельных контактов для коммерческого предложения
Требования ясны, время спроектировать перечисленное выше с помощью графического редактора Figma.
Прототип, дизайн, ТЗ
Всё прошло так здорово, что особо нечего и рассказать :-)
Прототип, как и всегда, содержит максимум реальных данных (благо их было с избытком), с возможностью полностью пройти перечисленные выше действия, для обеих ролей, чтобы понимать разницу.
Вот пара скриншотов в стиле «было-стало».
Отметим несколько решений в одном из самых важных и сложных экранов — в шахматке квартир. Обилие информации и интерактива усложняет работу с шахматкой на мобильных устройствах. Пытаться адаптировать такой интерфейс «по накатанной» может свести на нет возможность пользоваться им в принципе.
Как сделали мы:
- переключение литеров происходит в одно-два касания, срок сдачи объекта выведен на кнопки, чтобы эта информация считывалась моментально
- на квадраты объектов можно вывести площадь, общую стоимость, цену квадратного метра или номер квартиры
- легенда статусов позволяет отключить подсветку ненужных, достаточно тапнуть на статус
- подъезды переключаются с помощью нижней закреплённой области. Обратите внимание: наверху экрана выодится общее количество свободных объектов во всём литере, а внизу — в выбранном подъезде.
- постоянно переходить с шахматки на экран квартиры и обратно очень неудобно, поэтому при касании конкретного объекта сперва появляется его превью с планировкой и основной информацией
- остальное по классике — этажи закреплены, скроллить выбранную секцию можно в любую сторону.
Прототип показали будущим пользователям и причастным со стороны клиента, собрали обратную связь, и за неполную неделю сделали дизайн-макеты. После разработки и подписи ТЗ началось самое интересное и сложное — код.
Flutter SDK
Приложение разработано с помощью кроссплатформенного фреймворка Flutter. Это относительно молодая технология от Google, стремительно набирающая популярность среди разработчиков и пользователей мобильных приложений.
Преимущества Flutter:
- кроссплатформенность — проект делаем один, а приложения получаем два, и для Android, и для iOs. Также можно скомпилировать приложение для браузера или настольного компьютера.
- быстрая разработка — интерфейс не нужно создавать с нуля, в составе фреймворка уже есть собранные компоненты, готовые к стилизации
- очень простая интеграция с другими сервисами Google (например, Firebase или Google AdMob)
- пытливый ум и опыт растущего и активного сообщества, большое количество достаточно качественных библиотек с уже реализованным функционалом
- высокая скорость работы и производительность, гибкость при развитии проекта.
Из недостатков можем отметить только «проблемы молодости«: сырость некоторых компонентов и функций (например, при тёмной теме в ОС на белом фоне документов появляются чёрные квадраты), и малое количество обучающих материалов, особенно на русском языке.
В общем, ложечка дёгтя имеется, но горечи совсем не даёт. Мы довольны результатом, оценили Flutter по достоинству, и определённо будем продолжать разрабатывать мобильные приложения с применением этого фреймворка.
Серверная часть
Основной источник данных и логики их обработки для приложения — шахматка квартир от NUTS Digital. Если честно, без этого продукта этот проект даже не стоило обсуждать.
Подробнее о разработке и возможностях шахматки квартир СИК «Девелопмент-Юг» вы можете прочитать в отдельном кейсе.
К общей радости, часть партнёрской логики уже была реализована при разработке веб-кабинета, и вместо полноценной разработки бэкенда для приложения нам предстояло лишь расширить API всего на 30-40%, и сделать несколько недостающих функций.
Интеграции
На этом этапе розовые очки потрескались. Нам предстояло сделать много, очень много интеграций. В процесс вовлечены почти все основные ИТ-системы клиента, данные из них идут в аналитику и отчёты, сбой любой из них почти гарантирует остановку продаж.
Итак, вот с чем мы интегрировались:
- шахматка квартир: получение данных о проектах и недвижимости, отправка заявок на сделку, передача финансовых условий сделки, бронирование объекта, передача статуса бронирования и ссылки на оплату на экран заявки
- CRM Битрикс24: создание на основании заявки лида и сделки и их отклонение с указанием причины, их передача комментариев к заявке в лид/сделку, сохранение ссылок на прикреплённые файлы, заполнение источника, данных об агенте и других данных
- учётная база 1С: смена статусов заявки по запросу от 1С, заполнение описаний статуса, подтверждение аккаунтов куратора
- Google Firebase для доставки push-уведомлений
- сервис для отправки SMS и электронная почта для восстановления пароля и уведомлений о регистрации
- сайт корпорации на CMS «1С-Битрикс»: отображение промо-материалов с сайта в приложении, синхронизация заявок и комментариев к ним с веб-кабинетом агента
- разработали сервис авторизации OAuth 2.0 на Laravel для единой авторизации и в приложении, и в веб-кабинете. Все права и связи пользователей настраиваются в специальном инфоблоке в Битрикс24. Вы правильно поняли, авторизация и CRM интегрированы.
- в финале сделали и связали с приложением небольшую админку для регистрации кураторов со стороны отдела продаж и управления новостями для партнёров.
Трудности и откровения
По ходу проекта мы встретили некоторые неожиданные трудности и внезапные откровения. Оставим здесь некоторые из них.
Firebase, например, по умолчанию отправляет уведомление только на устройство, где пользователь авторизовался последний известный раз. Если вы вошли в приложение на планшете, а потом зашли с телефона, то на планшет уведомление не придёт. Решается с помощью хранения токенов устройств и уведомлений в базе данных пользователей.
Ваше приложение на Flutter получает много данных по API, и работает с ними без интернета? Попробуйте Apache Hive вместо SQLite, скорость будет выше в разы. И вообще Hadoop — классная штука.
Если вы запускаете продукт на 6 городов в разных субъектах РФ, помните о часовых поясах в комментариях и уведомлениях.
Предупреждение «Доступна новая версия, пожалуйста, обновите приложение» лучше сделать сразу.
Не устанавливайте приложение, над которым вы активно трудились несколько месяцев, до получения первого баг-листа. Поверьте мне, так жить спокойнее и проще :-)
Тестирование, отладка… и всё?
Разумеется, приложение и все сценарии его использования были несколько раз проверены и исправлены. Основные функции покрыты автотестами (каюсь, не сразу, но всё-таки).
От первой встречи до появления стабильной версии в магазинах приложений прошло 6 месяцев.
После финальной презентации поставили в работу дополнительные задачи к запуску. Чем ближе к релизу, тем больше видно несостыковок и рисков, с ними придётся работать, и предвидеть их заранее в полном объёме не получится. Кто-то в такие моменты расстраивается от несовпадения ожиданий, нам же наоборот, нравится этот период в жизни проекта. Когда общей целью становится скорейший запуск, решения принимаются быстрые, понятные и эффективные.
Вместо заключения
Казалось бы, приложение выпущено, акты подписаны, партнёры регистрируются под внимательным взором кураторов… Думаете, всё, конец? Как бы не так!
Мы добавляем новые функции, собираем обратную связь, помогаем пользователям, наблюдаем за их реальным опытом, и вновь пишем задачи в чек-лист.
Команда и автор уверены — там, где кажется, что всё вот-вот закончится, всё только начинается ;-)
P.S. Благодарности
Огромное спасибо СИК «Девелопмент-Юг», отделу продаж, сотрудникам агентств недвижимости за неподдельный интерес и реальное участие в проекте.
Отдельные благодарности отделу маркетинга и его руководителю Владимиру Кравченко, ИТ-отделу и конкретно Максиму Нелипину.
На сладкое оставил дифирамбы для команды разработки. Парни, вы супер! Спасибо вам за дельные мысли, за неподдельный интерес к своему ремеслу, за каждую строчку кода, за каждый разработанный макет. Снимаю кепку!