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

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

Комментарии (9)
Дима Сайт
04.04.2022 13:01

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

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

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

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

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

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

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

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

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

Дима Сайт
04.04.2022 13: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 13:30

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

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

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

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

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

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

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

ЕвгенийК
08.04.2022 21:57

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

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

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

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

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

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

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

ЕвгенийК
09.04.2022 03:35
Это хорошо, что такая возможность есть и может быть использована. А то тенденция, мания, что-то в по...
begoodco1
07.04.2022 05:49
Зарегистрировался чтобы выразить благодарность за доступное и подробное описание процесса. Была возм...
bezumkin
Василий Наумкин
18.03.2022 12:35
Авторизация есть из коробки, для входа в базовую админку. Можно установить через composer и собрать ...
bezumkin
Василий Наумкин
10.03.2022 12:08
Ну, я имел в виду, что по закону можно =) А в реальности с валютой очевидные проблемы.
Сергей Лелеко
04.03.2022 06:12
О как! не знал! спасибо
bezumkin
Василий Наумкин
01.03.2022 15:32
Я делал одного бота на botman/botman, но из-за своей универсальности конкретно с Телеграм на нём раб...
bezumkin
Василий Наумкин
25.02.2022 09:22
P.S. Кажется цитаты у тебя никак не стилизуются в комментариях... Спасибо, поправил!
Electrica
Михаил
08.02.2022 11:19
Работает!
Алексей
09.01.2019 10:55
Насыщенный год ) От души поздравляю с ДР! Счастья, успехов и семейного благополучия! Жаль лимит заме...
septa rose
28.05.2018 22:16
hmmm, keren abis