Гора Белая

"Гора Белая" — первый на Урале туристический кластер, который объединяет различные форматы отдыха: от экстремальных спусков с горы до спокойных прогулок.

Баннер Гора Белая
  • #туры
  • #как добраться
  • #контакты
  • #консалтинг
  • #куда поехать
  • #о туристическом кластере
  • #чем заняться

Задача

Перенос сайта с самописной CMS на Laravel

Причины переноса:

Back-End - неудобная админ панель, многие данные не редактируются

Front-End - убрать SPA, чтобы сделать сайт SEO‑Friendly

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

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

Laravel vs WordPress
1 часть 20 различий WordPress и Laravel
Laravel vs WordPress
2 часть 20 различий WordPress и Laravel

Развитие сайта по Agile

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

8+итераций
245 час.
143 час.
116 час.
117 час.
125 час.
112 час.
165 час.
245 час.
143 час.
116 час.
117 час.
125 час.
112 час.
165 час.

Привлекательный Front-End

React React => Vue Vue.js

Фронтовую часть сайта мы переносили с фреймворка React на Vue.js, так как именно Vue.js является самым подходящим и популярным решением для Laravel

Фильтрация на сайте

  1. Применяются без перезагрузки страницы
  2. Значения фильтров передаются как параметры в url
  3. Слаги фильтров преобразуются в латиницу
  4. Для десктопа и адаптива реализована разная верстка
Скриншот фильтрации списка статей

Страница с тропами

Функциональная страница для туристов, где можно выбрать понравившийся маршрут, сразу ознакомиться с ним и увидеть на карте

На странице реализовано:
  1. Смена карты при выборе тура - смена производится сразу, без перезагрузки страницы
  2. Вычисление позиции на экране для вывода подсказок - сайт проверяет, в какой части сайта находится пользователь и выводит подсказку вверх или вниз
  3. Разная верстка на десктопе и адаптиве
Изображение троп
Back-End

Увлекательный Back-End

Laravel Nova

В качестве системы управления контентом выбрана CMS Laravel Nova. На ней мы реализовали:

  1. Редактируемые поля для контента на сайте
  2. Удобная группировка связанных данных
  3. Ошибки валидации при сохранении неверных значений
  4. Оптимизация изображений
  5. Конструктор страниц
Изображение троп

Оптимизация изображений

Проблема:
Фотографии большого размера
Решение:

При загрузке производится автоматическая оптимизация веса изображения. Так, изображения весом 10 МБайт после оптимизация весят максимум 500КБайт

Проблема:
Фотографии большого разрешения
Решение:

Для вывода на фронтенд мы рассматриваем каждый случай, каждое место на сайте, где встречается данное фото. И выводим туда не изначальный вариант, а уменьшаем фото до нужных размеров.

Проблема:
.WEBP Фотографии формата .webp
Решение:

Фотограф предоставляет фото контент менеджеру в формате .webp. Но есть с этим форматом одна проблема, он не поддерживается некоторыми браузерами (в частности, Safari не отображает такие фотографии). Поэтому, при загрузке на сервер мы переводим такие фотографии в обычный jpg и оптимизируем их размер.

Конструктор страниц

Позволяет собирать уникальные страницы из доступных элементов:

Icon

Видео

Icon

Галерея

Icon

Текстовый блок с фактоидом

Icon

Документы

Icon

Карта

Icon

Существующие модели на сайте: знаковые места, туры, мероприятия, объекты

Конструктор формы заявки

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

  • Поля для ввода
  • Единичный выбор
  • Множественный выбор
  • Большое поле для ввода
  • Датапикер

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

Пример конструктора форм

Система личных кабинетов

На сайте реализовано несколько ролей пользователей:

  1. Администратор
  2. Контент менеджер
  3. Редактор

отличаются различным уровнем доступа к редактированию данных в админ панели

  1. Резидент

Ответственный за объект на Горе белой

  • Личный кабинет на отдельном домене
  • Есть возможность закрепить резидента за отдельным объектом на основном сайте
  • Заявки, сделанные со страницы объекта резидента, отображаются в его Личном Кабинете
  • Резидент может просматривать личную информацию, заявки из закрепленного объекта и загружать необходимые документы
  1. Зарегистрированный пользователь
  • Может редактировать личную информацию
  • Может просматривать оставленные заявки. Заявки связываются с пользователем по номеру телефона
Пример личного кабинета

API сайта

Данные, необходимые для оценки эффективности работы сайта по сбору заявок, передаются в CRM-систему по разработанному нами API. Данные для синхронизации:

Зарегистрированные пользователи
Заявки с сайта

Для документирования и тестирования API настроен пользовательский интерфейс Swagger. Интерфейс доступен для для авторизованного пользователя с правами администратора.

Преимущества использования Swagger:

  1. Документация по работе API находится в одном месте и всегда доступна разработчикам
  2. Позволяет отправлять запросы по необходимым данным на сайте и получать реальные ответы
  3. Тестировщику и менеджеру проекта удобно проверять правильность отправляемых данных в CRM систему и оперативно отлавливать ошибки
Retail rocket

Для персонализации предложений по турам используются возможности платформы RetailRocket. Для оперативного обновления информации о турах мы реализовали генерацию xml файла со списком туров. Генерация производится:

Автоматически, каждые 2 часа
При запросе администратора сайта

Надежный флаг

  1. Настроен Docker, чтобы проект быстро разворачивался и для контроля настроек сервера
  2. Бэкапы базы данных каждую ночь
  3. Хранение бэкапов на S3
  4. Установлен Sentry для мониторинга ошибок на Back-End и на Front-End
  5. Подключен мониторинг доступности сайта в Интернет (HTTP-мониторинг)
  6. Подключен мониторинг свободного места на диске

Видео обзор

Отзыв клиента

Отзыв клиента

Мой стенд

Мы сотрудничали с командой Студии Флаг по разработке двух проектов.

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

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