1 часть
20 различий WordPress и Laravel
Гора Белая
"Гора Белая" — первый на Урале туристический кластер, который объединяет различные форматы отдыха: от экстремальных спусков с горы до спокойных прогулок.
Задача
Перенос сайта с самописной CMS на Laravel
Причины переноса:
Back-End - неудобная админ панель, многие данные не редактируются
Front-End - убрать SPA, чтобы сделать сайт SEO‑Friendly
Изначально планировалось перенести сайт на Wordpress, но после обсуждения задачи с клиентом мы узнали, что сайт, следом за самим туристическим кластером Гора белая, будет активно развиваться и масштабироваться. Если реализовывать такую базу данных на WordPress, то в итоге это было бы похоже на страшный сон программиста со множеством костылей.
Поэтому, мы приняли совместное решение переносить проект на фреймворк Laravel. Подробнее про сравнение WordPress и Laravel можно узнать в наших статьях
2 часть
20 различий WordPress и Laravel
Развитие сайта по Agile
После переноса и приемки сайта мы перешли к его развитию. Постепенно, этап за этапом, велась доработка уже реализованных моделей и разработка новых.
8+итераций
245 час.
143 час.
116 час.
117 час.
125 час.
112 час.
165 час.
245 час.
143 час.
116 час.
117 час.
125 час.
112 час.
165 час.
Привлекательный Front-End
React =>
Vue.js
Фронтовую часть сайта мы переносили с фреймворка React на Vue.js, так как именно Vue.js является самым подходящим и популярным решением для Laravel
Фильтрация на сайте
- Применяются без перезагрузки страницы
- Значения фильтров передаются как параметры в url
- Слаги фильтров преобразуются в латиницу
- Для десктопа и адаптива реализована разная верстка
Страница с тропами
Функциональная страница для туристов, где можно выбрать понравившийся маршрут, сразу ознакомиться с ним и увидеть на карте
На странице реализовано:- Смена карты при выборе тура - смена производится сразу, без перезагрузки страницы
- Вычисление позиции на экране для вывода подсказок - сайт проверяет, в какой части сайта находится пользователь и выводит подсказку вверх или вниз
- Разная верстка на десктопе и адаптиве
Увлекательный Back-End
Laravel Nova
В качестве системы управления контентом выбрана CMS Laravel Nova. На ней мы реализовали:
- Редактируемые поля для контента на сайте
- Удобная группировка связанных данных
- Ошибки валидации при сохранении неверных значений
- Оптимизация изображений
- Конструктор страниц
Оптимизация изображений
Фотографии большого размера
При загрузке производится автоматическая оптимизация веса изображения. Так, изображения весом 10 МБайт после оптимизация весят максимум 500КБайт
Фотографии большого разрешения
Для вывода на фронтенд мы рассматриваем каждый случай, каждое место на сайте, где встречается данное фото. И выводим туда не изначальный вариант, а уменьшаем фото до нужных размеров.
.WEBP
Фотографии формата .webp
Фотограф предоставляет фото контент менеджеру в формате .webp. Но есть с этим форматом одна проблема, он не поддерживается некоторыми браузерами (в частности, Safari не отображает такие фотографии). Поэтому, при загрузке на сервер мы переводим такие фотографии в обычный jpg и оптимизируем их размер.
Конструктор страниц
Позволяет собирать уникальные страницы из доступных элементов:
Видео
Галерея
Текстовый блок с фактоидом
Документы
Карта
Существующие модели на сайте: знаковые места, туры, мероприятия, объекты
Конструктор формы заявки
Позволяет собирать индивидуальные формы заявок из доступных полей:
- Поля для ввода
- Единичный выбор
- Множественный выбор
- Большое поле для ввода
- Датапикер
Все заявки с дополнительными полями из конструктора сохраняются в базе данных сайта.
Система личных кабинетов
На сайте реализовано несколько ролей пользователей:
- Администратор
- Контент менеджер
- Редактор
отличаются различным уровнем доступа к редактированию данных в админ панели
- Резидент
Ответственный за объект на Горе белой
- Личный кабинет на отдельном домене
- Есть возможность закрепить резидента за отдельным объектом на основном сайте
- Заявки, сделанные со страницы объекта резидента, отображаются в его Личном Кабинете
- Резидент может просматривать личную информацию, заявки из закрепленного объекта и загружать необходимые документы
- Зарегистрированный пользователь
- Может редактировать личную информацию
- Может просматривать оставленные заявки. Заявки связываются с пользователем по номеру телефона
API сайта
Данные, необходимые для оценки эффективности работы сайта по сбору заявок, передаются в CRM-систему по разработанному нами API. Данные для синхронизации:
Для документирования и тестирования API настроен пользовательский интерфейс Swagger. Интерфейс доступен для авторизованного пользователя с правами администратора.
Преимущества использования Swagger:
- Документация по работе API находится в одном месте и всегда доступна разработчикам
- Позволяет отправлять запросы по необходимым данным на сайте и получать реальные ответы
- Тестировщику и менеджеру проекта удобно проверять правильность отправляемых данных в CRM систему и оперативно отлавливать ошибки
Для персонализации предложений по турам используются возможности платформы RetailRocket. Для оперативного обновления информации о турах мы реализовали генерацию xml файла со списком туров. Генерация производится:
Надежный флаг
- Настроен Docker, чтобы проект быстро разворачивался и для контроля настроек сервера
- Бэкапы базы данных каждую ночь
- Хранение бэкапов на S3
- Установлен Sentry для мониторинга ошибок на Back-End и на Front-End
- Подключен мониторинг доступности сайта в Интернет (HTTP-мониторинг)
- Подключен мониторинг свободного места на диске
Видео обзор
Отзыв клиента
Отзыв клиента
Мой стенд
Мы сотрудничали с командой Студии Флаг по разработке двух проектов.
Команда проявила себя очень ответственно, было заметно, что они неравнодушны к результату. Они всегда отвечали на наши вопросы и звонки, предлагали новые идеи и решения, при возникновении сложных ситуаций всегда шли нам на встречу.
Мы довольны совместной работой. В достаточно сжатые сроки получили качественные результаты. Планируем дальнейшее сотрудничество со студией над новыми проектами.