Запущен 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, покликать по ссылкам и повздыхать по прекрасным видам.

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

Следующая заметка →
zikla.ru: фреймворк против 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
Василий Наумкин
09.04.2024 01:45
Ошибка 500 Это не похоже на ошибку Nginx, это скорее всего ошибка PHP - надо смотреть его логи. Во...
futuris
Futuris
04.04.2024 05:56
Я просто немного запутался. Когда в абзаце &quot;Vesp/Core&quot; ты пишешь про &quot;новый trait Fil...
bezumkin
Василий Наумкин
20.03.2024 18:21
Volledig!
Андрей
14.03.2024 10:47
Василий! Как всегда очень круто! Моё почтение!
russelgal
russel gal
09.03.2024 17:17
А этот стоило написать хотя бы затем, чтобы получить комментарий от юзера, который ничего не писал ...
inetlover
Александр Наумов
27.01.2024 00:06
Василий, спасибо! Извини, тупанул.
bezumkin
Василий Наумкин
22.01.2024 04:43
Давай-давай!
bezumkin
Василий Наумкин
24.12.2023 11:26
Спасибо!
bezumkin
Василий Наумкин
27.11.2023 02:43
Ура!
bezumkin
Василий Наумкин
25.11.2023 08:30
Vesp тянет 2 зависимости: vesp-frontent для фронта и vesp-core для бэкенда. Их можно обновлять, но э...