Сайт SPA-готелю з бронюванням номерів
Про проєкт
«Undersun» — п’ятизірковий спа-готель, розташований на березі чорного моря в селі Грибівка. Це місце відрізняється екологічно чистою п’ятикілометровою зоною з широкими дрібнопіщаними пляжами, пансіонатами та базами відпочинку. Готель надає широкий спектр послуг: ресторан, безплатне паркування, сезонний відкритий басейн, бар, доставку їжі в номер, сауну та багато іншого.
«Undersun» просувався та надавав послуги через системи інтернет-бронювання, такі як «Booking», «HotelsCombined» та безліч українських сервісів. Але робота з ними накладала низку обмежень, тому власники спа-готелю вирішили створити власний сайт для просування бренду.
Наше завдання полягало у створенні привабливого, адаптивного сайту з можливістю бронювання номерів і демонстрацією послуг, що надаються.
Програмінг сайту
Перед початком роботи по сайту ми розгорнули середовище для подальшої розробки та налаштували сервер, враховуючи стек технологій, що використовується. Річ у тому, що Laravel і Nuxt.js — корисні, але досить примхливі інструменти. Тому важливо підібрати для них потрібне середовище та правильно його налаштувати.
Back-end розробка на Laravel
Для розробки «внутрішньої» складової ми вирішили використати
Laravel — популярний та адаптивний фреймворк, який найкраще підходить для вирішення легких та середніх за тяжкістю завдань. При цьому він легко масштабується і доопрацьовується, тому в будь-який момент можна виправити помилки та швидко налаштувати сайт за бажанням клієнта.
Laravel – це фреймворк мови програмування PHP. Завдяки йому верстальникам і дизайнерам не потрібно щоразу винаходити велосипед, аби створити вебдодаток. Натомість вони можуть зосередитися на вирішенні по-справжньому важливих завдань. Laravel дозволяє робити як прості, так і складні сайти, запроваджуючи потрібний функціонал. Не дарма слоган проєкту свідчить, що це інструмент для ремісників.
Адміністративна панель
Nova — це чудово оформлена та максимально зручна адміністративна панель для Laravel. Її основна особливість полягає у можливості створювати, переглядати, редагувати та видаляти ресурси в базі даних. Крім цього, розробник може працювати з об'єктивами, створювати фільтри, вибирати пріоритетність завдань та користуватися SQL-пошуком. Тому слова творців Nova про те, що їхній продукт зробить із вас найпродуктивнішого працівника в галактиці — не порожні слова.
На панелі для адміністратора сайту ми реалізували:
- Додавання контенту з перекладом на три мови;
- Додавання множинних сутностей «кімнат»;
- Збереження зображень та відео;
- Роботу із зображеннями в окремому розділі адмін. панелі;
- Використання конструкторів для редактури за допомогою Flexible Content. Завдяки цьому адміністратор може створювати блоки з будь-яким набором полів і міняти їх місцями.
Крім цього, ми використовували REST API, за допомогою якого можна «віддавати» весь контент у зручному форматі json.
Front-end розробка на Vue.js
Головна мета проєкту – залучення клієнтів з подальшим бронюванням номерів, тому сайт має індексуватись пошуковими системами. Для цього найкраще підходить фреймворк Nuxt.js. Він заснований на більш відомому Vue.js і дозволяє досягти потрібної нам мети через малювання з боку сервера (SSR). Завдяки цьому вже зі старту сайт підтримує необхідний функціонал для SEO просування в пошукових системах.
Туризм — міжнародне захоплення, яким із кожним роком починає цікавити дедалі більше людей із різних частин планети. З цієї причини ми вирішили запровадити мультимовність за допомогою i18n та додати українську, російську та англійську версії сайту.
Зазначимо, що це не стандартний автопереклад — контент заповнюється окремо для кожної мови та має унікальні URL-адреси.
Серед цікавих завдань під час розробки відзначимо додавання великої кількості ефектів та анімацій. Переважну частину ми реалізували за допомогою бібліотеки GSAP.
Ось кілька прикладів анімацій, реалізованих на сайті:
- Scroll Trigger — поява блоків, коли скрол на сторінці досягає певної позиції.
- Split Text — поява тексту символічно.
- Timeline + Scroll Trigger + плавний скрол — ефект паралакса.
Крім того, ми реалізували досить цікаву анімацію зміни між слайдами, яка підтримує відразу кілька ефектів. Для її створення використовувалася бібліотека Hover Effects, заснована на Three.js.
Як випливає з назви, вона працює при наведенні курсора, тому нам довелося доопрацювати та адаптувати її під елемент з автоматичною зміною слайдів через заданий проміжок часу (autoplay).
Підсумок
В результаті ми отримали стильний і повністю адаптивний сайт, що має безліч цікавих ефектів. Окремо хочеться виділити мінімалістичну та зрозумілу для користувача сторінку бронювання, де кожен охочий може ознайомитися з коротким описом, списком послуг та переваг, фотографіями, ціною та можливістю бронювання.
О проекте
«Undersun» — пятизвёздочный спа-отель, расположенный на берегу чёрного моря в селе Грибовка. Это место отличается экологически чистой пятикилометровой зоной с широкими мелкопесчаными пляжами, пансионатами и базами отдыха. Отель предоставляет широкий спектр услуг: ресторан, бесплатную парковку, сезонный открытый бассейн, бар, доставку еды в номер, сауну и многое другое.
«Undersun» продвигался и предоставлял услуги через системы интернет-бронирования, такие как «Booking», «HotelsCombined» и множество украинских сервисов. Но работа с ними накладывала ряд ограничений, поэтому владельцы спа-отеля решили создать собственный сайт для продвижения бренда.
Наша задача заключалась в создании привлекательного, адаптивного сайта с возможностью бронирования номеров и демонстрацией предоставляемых услуг.
Программинг сайта
Перед началом работы по сайту мы развернули среду для последующей разработки и настроили сервер, учитывая используемый стэк технологий. Дело в том, что Laravel и Nuxt.js — полезные, но довольно капризные инструменты. Поэтому важно подобрать для них нужную среду и правильно её настроить.
Back-end разработка на Laravel
Для разработки «внутренней» составляющей мы решили использовать Laravel — популярный и адаптивный фреймворк, который лучше всего подходит для решения лёгких и средних по тяжести задач. При этом он легко масштабируется и дорабатывается, поэтому в любой момент можно исправить существующие ошибки и быстро настроить сайт по желанию клиента.
Laravel – это фреймворк языка программирования PHP. Благодаря ему верстальщикам и дизайнерам не нужно каждый раз изобретать велосипед, чтобы создать веб-приложение. Вместо этого они могут сосредоточиться на решении по-настоящему важных задач. Laravel позволяет делать как простые, так и сложные сайты, внедряя нужный функционал. Не зря слоган проекта гласит, что это инструмент для «ремесленников».
Административная панель
Для административной панели мы выбрали Laravel Nova, которая «с коробки» поддерживает нужные функции и значительно ускоряет разработку для программистов.
Nova — это прекрасно оформленная и максимально удобная административная панель для Laravel. Её основная особенность заключается в возможности создавать, просматривать, редактировать и удалять ресурсы в базе данных. Помимо этого, разработчик может работать с объективами, создавать фильтры, выбирать приоритетность задач и пользоваться SQL-поиском. Поэтому слова создателей Nova о том, что их продукт сделает из вас самого продуктивного работника в галактике — не пустые слова.
В панели для администратора сайта мы реализовали:
- Добавление контента с переводом на три языка;
- Добавление множественных сущностей «комнат»;
- Сохранение изображений и видео;
- Работу с изображениями в отдельном разделе админ. панели;
- Внедрение конструкторов для редактуры при помощи Flexible Content. Благодаря этому администратор может создавать блоки с любым набором полей и менять их местами.
Помимо этого мы использовали REST API, с помощью которого можно «отдавать» весь контент в удобном формате json.
Front-end разработка на Vue.js
Главная цель проекта — привлечение клиентов с последующим бронированием номеров, поэтому сайт должен индексироваться поисковыми системами. Для этого лучше всего подходит фреймворк Nuxt.js. Он основан на более известном Vue.js и позволяет добиться нужной нам цели через отрисовку со стороны сервера (SSR). Благодаря этому уже со старта сайт поддерживает необходимый функционал для SEO-продвижения в поисковых системах.
Туризм — интернациональное увлечение, которым с каждым годом начинает интересовать всё больше людей с разных частей планеты. По этой причине мы решили внедрить мультиязычность с помощью i18n и добавить украинскую, русскую и английскую версии сайта.
Отметим, что это не стандартный автоперевод — контент заполняется отдельно для каждого языка и имеет уникальные URL-адреса.
Среди интересных задач во время разработки отметим добавление большого количества эффектов и анимаций. Подавляющую часть из них мы реализовали с помощью библиотеки GSAP.
Вот несколько примеров анимаций, реализованных на сайте:
- Scroll Trigger — появление блоков, когда скролл на странице доходит до определенной позиции.
- Split Text — появление текста посимвольно.
- Timeline + Scroll Trigger + плавный скролл — эффект параллакса.
Помимо этого, мы реализовали довольно интересную анимацию смены между слайдами, которая поддерживает сразу несколько эффектов. Для её создания использовалась библиотека Hover Effects, основанная на Three.js.
Как следует из названия, она работает при наведении курсора, поэтому нам пришлось доработать и адаптировать её под элемент с автоматической сменой слайдов через заданный промежуток времени (autoplay).
Так же мы интегрировали модуль бронирования, который позволяет просматривать доступность номеров по датам и оставлять заявку на определённое время.
Итог
В результате мы получили стильный и полностью адаптивный сайт, имеющий множество интересных эффектов. Отдельно хочется выделить минималистичную и понятную для пользователя страницу бронирования, где каждый желающий может ознакомиться с кратким описанием, списком услуг и преимуществ, фотографиями, ценой и возможностью бронирования.
Комментарии