Как делать сложные проекты на low-code: сайт европейской инвестиционной строительной компании от AFFINAGE
Гибкая админка на стеке Nuxt+Strapi, прототипы в Miro и ценный опыт международного сотрудничества.
Рассказываем, как команда AFFINAGE разработала гибко настраиваемый сайт с административной панелью на low-code для DKG Development и почему выбрала именно связь Nuxt+Strapi. Делимся особенностями греческого менталитета и опытом международного сотрудничества.
DKG Development — европейская инвестиционная строительная компания, штаб которой располагается в Афинах, Греция. Специализируются на реализации строительных проектов. Сотрудничают с международными компаниями, фондами и частными партнерами: расширяют базы объектов и оформляют частные инвестиции.
Команде AFFINAGE нужно было разработать гибко настраиваемый репутационный сайт и запустить его к важной отраслевой конференции, в которой участвовал заказчик.
Основные задачи:
1. Спроектировать и разработать стильный и современный сайт с нуля.
2. Настроить административную панель на low-code технологиях:
- дать возможность редактировать текстовый и визуальный контент;
- размещать модели объектов в высоком разрешении;
- модерировать и редактировать все три языковые версии, представленные на сайте;
3. Сделать сайт адаптивным.
Проектирование
Мы нестандартно подошли к проектированию и сделали прототип сайта в Miro. Заказчику было привычнее наблюдать за процессом и оставлять к нему комментарии именно в этой программе. Так в Miro оказались старая и новая архитектуры сайта, а также майнд-карта — в ней мы собрали системные связи между целым и его частями, так как процедуры и информация от клиента были в хаотичном состоянии.
За основу взяли структуру старого сайта компании, доработали логику и добавили необходимые блоки. Также расписали компоненты и структурную вложенность, определили, где какие разделы должны быть, и как они между собой взаимодействуют.
Дизайн
Разработка дизайна шла в два этапа: текстовый и визуальный. На первом этапе макеты для сайта разрабатывались на основе текстового контента с ориентацией на проектируемые элементы дизайна. Специальные фоны и видеоролики рендерились отдельно по проекту нашего арт-директора. На втором этапе дизайн доработали с учетом требований к визуальному контенту.
Мы подготовили специальный макет для визуализации, который позволил заказчику разместить на сайте свои рендеры в высоком разрешении.
Разработка административной панели на low-code
Мы внедрили административную панель, с которой может работать любой пользователь, даже без навыков программирования. При этом риск ошибки при редактировании контента практически нулевой благодаря понятной системе: для каждого шага мы придумали понятные описания, подсказки и настроили систему ограничений, которая не пропускает ничего «лишнего» и не ломает верстку.
В административной панели есть локали — это региональные настройки, которые влияют на язык интерфейса. Из них выводятся данные в зависимости от выбранной языковой версии. При переключении языка на фронтенд-части Nuxt отправляет запрос в базу данных и сам определяет, из какой именно локали нужно выводить данные.
Любой объект на сайте можно не только перевести, но и активировать, то есть выбрать выводимые объекты для разных языковых зон. Это сделано для того, чтобы управлять всеми типами локалей. Например, если не опубликовать английскую версию какого-либо объекта, то для клиента, который выбрал на сайте английский язык, этот объект просто не будет существовать. При этом на русской и греческой версии сайта объект будет отображаться.
Основные страницы сайта и их особенности
Главная страница
Главная включает в себя все необходимые для арендаторов и покупателей недвижимости функции. На первом экране есть фильтр с возможностью быстрого поиска подходящего объекта по его цели (аренда или покупка), типу и расположению. Ниже есть информация о DKG Development, услуги, которые предоставляет компания, и блок с лучшими проектами.
Чтобы разместить всю необходимую информацию и не перегрузить пользователя, мы решили сделать большой поэкранный скролл. Все наполнение страницы и сайта в целом загружено в самом высоком разрешении, что требовало особого подхода к верстке.
О компании
На страницу «О компании» добавили сложный элемент и расположили несколько вертикальных скроллов внутри одного вертикального скролла.
Основной скролл включает в себя пункты с миссиями, доводами и целями компании, и последние два реализованы дополнительными вертикальными скроллами по списку утверждений.
Объекты недвижимости
В этом блоке собраны все объекты, которые представляет компания для покупки и аренды: апартаменты, студии, офисы и многое другое. Все объекты можно отфильтровать по расположению, ценам и другим параметрам.
Наша команда разместила карточки объектов недвижимости и сделала их смещение по отношению друг к другу. Это разработано на модуле CSS Flexbox, который предназначен для создания гибких макетов. С помощью такой технологии можно очень просто и гибко расставить элементы, распределить доступное пространство между ними и выровнять любым способом.
Справа от карточек объектов расположено меню по типу недвижимости с актуальной информацией по количеству объектов определенного типа. Слева — дополнительная сортировка объектов по цене, площади, отношению цены к площади.
Карточка объекта
В карточке каждого объекта находится индивидуальный набор фотографий, прокруткой которых также можно управлять клавиатурой. В описании объекта можно найти подробную информацию о расположении и дизайне, а также об инвестиционных возможностях и доходе от сдачи помещения в аренду. Помимо этого, в карточке каждого объекта есть следующие данные:
- список удобств;
- список расстояний до ключевых заведений, например, аэропорт, школа, университет, автобусная остановка, аптека;
- виды, например, на город, на горы;
- расположение.
Можно скачать презентацию объекта и план этажей, посмотреть видео об объекте или ознакомиться с похожими предложениями.
Весь текст на сайте переведен на три языка: русский, английский и греческий.
Итоги
Новый сайт компании DKG Development получился очень технологичным. Заказчик может менять любой текст, вносить любые изображения, включая фоновые, и выкладывать их в высоком разрешении, не волнуясь, что в какой-то момент сайт «ляжет»и откажется работать.