Запущен holztour.ch

Всем привет, сегодня небольшой отчёт о только что запущенном проекте holztour.ch.

Это небольшой швейцарский сервис для туристов, чтобы они знали, какие места можно посетить. Туристы смотрят где вкусно кормят, где можно полазить по горам, поспать и всё такое. А владельцы этих заведений выставляют про них информацию по подписке. Этакий туристический 2GIS.

Проект разработан на Vesp, собственно для работы с ним меня и позвали в Pixmill изначально, в конце 2020. Но, в связи с пандемией, интерес к туризму сильно просел, и проект забуксовал.

Тем не менее, 1 апреля 2022 мы его запустили, хоть и не в окончательном варианте. Планируется еще много доработок по функционалу.

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

Общие свойства локации выглядят вот так:

А галерея вот так:

Картинки можно закидывать пачкой, сортировать перетаскиванием, отключать и удалять ненужные.

Сервис работает не для всей Швейцарии, а только для трёх регионов в самом центре страны: Obwalden, Nidwalden и Haslital.Все активные локации привязываются к одному из регионов и выводятся на общей карте через API сервиса MapBox.

При клике на маркер выводится карточка локации с описанием и галереей.

Отдельной особенностью является вывод соседних точек, расположенных в радиусе 20 километров.

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

earth = 6371; // радиус планеты в километрах
if ($this->lng && $this->lat) {
    $c->where('id', '!=', $this->id); // исключаем текущую модель
    // И преминяем формулу, которую написал кто-то поумнее меня
    $c->havingRaw("
        $earth * acos(cos(radians($this->lat)) * cos(radians(lat)) * cos(radians(lng)
        - radians($this->lng)) + sin(radians($this->lat)) * sin(radians(lat))) <= $distance
    ");
}

Сайт является типичным SPA, все страницы выводятся без перезагрузки. Но как видно по картинкам, карточки локаций показываются модальными окнами, поэтому при перемещении по ним позиция на карте никак не меняется.

Есть сохранение локаций в избранное. Авторизацию и личный кабинет пока не делали, поэтому избранное хранится в LocalStorage браузера.

В наличии и мощный фильтр, который позволяет искать места по названию и характеристикам. Фильтруется всё на стороне клиента, через Vuex, никаких дополнительных запросов на сервер.

В локациях могут проходить разные мероприятия, поэтому есть и фильтр по датам.

На данный момент реализовано примерно 75% планируемого функционала, дальнейшие работы планируются по мере роста туристической активности. Например, должно быть прокладывание маршрута на карте из одной точки в другую.

Но уже сейчас можно зайти на holztour.ch, покликать по ссылкам и повздыхать по прекрасным видам.

Если есть вопросы - задавайте, с удовольствием расскажу подробности.

Следующая заметка →
Фреймворк против CMS
Комментарии (9)
Дима Сайт
04.04.2022 16:01

Привет! Симпатичный получился сайт, но есть нюансы юзабилити под виндой. И вопросы есть, раз просил :)

1. Fontend: Всё чаще начинаю замечать что верстают под тачпад mac-девайсов, с горизонтальной прокруткой и без прикручивания JS-галерей «всегда делали»

Действительно ли такой низкий % win-пользователей что можно забивать теперь на внешний вид scrollbar-а и никто не озадачивается поиском (или созданием) решений JS-галереи (с кнопочками, autoplay и infinity таким, чтобы работало и по классике (например, крутилось мышкой без зажатого shift) и на тачпадах ноутбуков тоже двумя пальцами крутилось?

У нас вот дилемма с коллегами, мы прикручиваем галереи типа таких: https://getuikit.com/docs/slider#gap но они не крутятся «пальцами на ноутбуке», а кто-то делает как на скриншоте выше (вот ссылка на оригинал), но они выглядят на windowds не очень как видишь, и не крутятся мышкой...

Между тем, на главной под картой список карточек объектов сделан тоже каруселью с горизонтальным скроллом, и там скроллбар кастомизован (под некий прогрессбар):

bezumkinВасилий Наумкин
04.04.2022 16:28

Честно говоря даже не задумывался, как оно там на Windows выглядит. Мне вообще непонятно, почему отображение скролла зависит аж от операционной системы, а не браузера.

По дизайну сролла быть не должно вообще, так это я еще, наверное, как-то буду исправлять.

Список локаций выводится типа страницами. Он так в дизайне нарисован, с ним пришлось заморочиться.

Дима Сайт
04.04.2022 16:09

2. Backend: Заголовочки ответа сервера (который к стати очень шустрый) alt-svc: h3=":443";... порадовали!

Знаем-помним что Василий любит серверные плюшки) Вот с выходом MODX3 хотим и HTTP/3 тоже завести, и как это сделать в nginx более менее есть материал в сети, а вот почему на половине браузеров не работает это (вот у меня например, хотя совсем недавно я видел тыщу раз как в консоли разработчика google analytics скрипты грузились по h3-29), расписано не очень.

Не сталкивался? У тебя «зеленый» тест https://quic.nginx.org/quic.html ? Работает HTTP/3 ?

bezumkinВасилий Наумкин
04.04.2022 16:30

Здесь сервер не мой, а Cyon, они же его и настраивают. Я пока с HTTP/3 не работал, просто не довелось еще.

Тест у меня вот такой, видимо всё хорошо:

Дима Сайт
04.04.2022 16:59

Так ведь нет, судя по скрину у тебя в тесте запросы тоже не идут по HTTP/3, они должны быть помечены как QUIC, зеленые (см. легенду в левой части), и ответ типа: Total requests: 3000 Success with QUIC: 3000 Ну и apple-экосистема сейчас чуток отстает в поддержке https://caniuse.com/http3 Если у тебя есть dev-версия safari там это должно работать, но основной профит насколько я понимаю, будет при первом коннекте только...

bezumkinВасилий Наумкин
04.04.2022 17:19

А, понял. Спасибо за инфу.

На Windows 11 у меня тоже зелёным не загорается, ни в Firefox, ни в Edge.

ЕвгенийК
09.04.2022 00:57

Приветствую!

Достаточно интересно. На сайте bezumkin, рендеринг вроде есть, а holztour больше как приложение выполнено. Интересно, щас VESP глянуть надо...

bezumkinВасилий Наумкин
09.04.2022 06:13

Они сделаны абсолютно одинаково, просто на bezumkin.ru включен серверный рендеринг, а на holztour - нет. Там страницы сгенерированы статически и рендерятся только в браузере.

Когда будет нужно, запустим SSR и на holztour.

ЕвгенийК
09.04.2022 06:35

Это хорошо, что такая возможность есть и может быть использована. А то тенденция, мания, что-то в последнее время. Даже в крупных проектах. Мол хотим сделать сайт, хотим людей и т.д. а делают приложение. И с удивлением обнаруживают, что тот же Google на все свои скромные попытки заявить, что мы мол уже можем почти, индексим и js, на деле показывает не только значительное понижение в выдачи, но и полное отсутствие индексации. Лишая владельца сайта первоначальной заявленной цели, трафика. Дальше начал смотреть, интересно, спасибо.

bezumkin
Василий Наумкин
13.08.2022 11:41
неужели, все глобальное, так просто можно взять и сделать Да, именно так. Мелкие затыки, конечно ж...
bezumkin
Василий Наумкин
13.08.2022 08:18
Killed говорит, что сервер прибивает задачу, скорее всего у провайдера есть какие-то лимиты по нагру...
bezumkin
Василий Наумкин
11.08.2022 15:46
Класс!! Рад, что тебе нравится! нужно добавить @click=&quot;showCart = true&quot; в: Спасибо, попра...
bezumkin
Василий Наумкин
09.08.2022 11:27
На здоровье!
inetlover
Александр Наумов
30.07.2022 19:58
Василий, спасибо большое! Первый вариант помог, не было вот этой настройки: php_value[sys_temp_dir].
bezumkin
Василий Наумкин
12.07.2022 20:40
Всё как обычно, в самом начале файла конфига import axios from &#x27;axios&#x27;
bezumkin
Василий Наумкин
06.07.2022 14:06
Базовый Vue, базовый ES 6: импорт-экспорт модулей, вот это всё. Если что-то будет непонятно - просто...
bezumkin
Василий Наумкин
06.07.2022 11:19
Спасибо, что читаешь!
bezumkin
Василий Наумкин
05.07.2022 11:40
На здоровье!
inetlover
Александр Наумов
03.07.2022 23:36
Василий, спасибо! Все понятно!