Сегодня мы сделаем сайт с панорамами в 360 градусов, где вместо админки с классическим CRUD и БД мы будем использовать congif file, вдохновившись атмосферой великого Quake III Arena и компьютерных клубов из начала нулевых.
С чего вообще такая идея?
Читатель, сначала я хотел бы ненадолго вернуть тебя в атмосферу компьютерных клубов начала нулевых, чтобы ты вместе со мной вдохновился тем временем, когда все и всё было ближе, а вместо “вычислю по IP”, подходили сразу к человеку.
Королем клубов был Counter-Strike — факт. Немного разбавляли Warcraftом (еще без доты), Diablo II, Half-Life. Помню, как первый раз увидел парней, пришедших играть “на ночь” в Quake III Arena, они выглядели, как настоящая команда. Достали из рюкзаков свои большие наушники, черные клавиатуры и мышки. Мышки да же выгляди как-то космически. Название я помню до сих пор — Microsoft A4 Mouse.
Они поиграли немного в контру, показав крутой скилл, потом включили Quake III, создали приватную игру и попросили админа “расшарить папку с cfg”. Тут для меня началась магия. Я видел, как они бегают по карте dm6, пробуют rocket jump и plasma walk, потом открывают какое-то окошко и вбивают какие-то строки. Мир перевернулся…
Позже, когда я влился в их тусовку и гонял их ссаной тряпкой по респам, все стало понятно, и про конфиги, и про повышение fps, и про fow. Но в тот день я был поражен. Во всем этом был налет магии, pro-гэйминга, элитарности и чего-то недоступного всем остальным. Хотелось попасть в этот закрытый орден избраных. Меня зацепила простота и элегантность такого решения, богатсво настроек и возможностей. Создание cfg для QIII стало моим хобби и увлечением на несколько лет вперед.
Наши дни
Мой коллега предложил сделать интересный pet проект. Это должен был быть сайт со списком городов, зданий, этажей в каждом из них и панорма 360 каждой комнаты. Зачем? А черт его знает, мы гики такие, он купил камеру 360, значит давай ей юзать, а зачем и для кого разберемся потом.
Так совпало, что именно в этот день я просмотрел 2 минутный ролик с красивыми фрагами из Q III, мне сразу захотелось снова получить тот мистический, трансцендентный опыт, но качать и устанавливать игру было впадлу. И тут же в кабинет ворвался Рома со своей идеей…
Короче, я согласился. С него были фотки и верстка, с меня поднять сервак, написать бэк, но условием было, что мы сделаем все через одно место и работать контентная часть сайта будет на конфиге.
У нас было три пакетика…
Сервер
Классический набор Ubuntu 16.04 LTS + nginx
Площадка и инструменты
Для документации и разработки мы взяли Bitbucket, он в это время активно себя рекламировал в Facebook и на глаза постоянно попадалась их таблица сравнения с GitHub. Там был и репозиторий, и документация по использованию.
Мы любим делать все правильно, да же для маленьких проектов важно описывать инструменты, функционал и прочее. Это хороший фундамент для дальнейшего развития и возможности подключать единомышленников.
Верстка + Дизайн
С дизайном и версткой все было просто, Рома взял Bootstrap III ( я бы написал 3, но мы же про Q III) и запилил годную страницу с выпадающими меню.
Pannellum для просмотра панорам
Я просмотрел и попробовал с десяток готовых библиотек, но не нашел ничего лучше, чем https://pannellum.org/. Во-первых, она гибкая, легко настраивается. Во-вторых, настраивается через конфиг =).
Плюс она поддерживает много фишек, которые мы планировали потом внедрить. Например, возможность походить по кабинетам. На момент запуска, конфиг просмоторщика была прост, библиотека вообще может работать без него, и это скорее фича, а не главная особенность. Но это уже конфиг!
handlebars.js для генерации страниц
Главная идея была в том, что нам будет не нужна БД, какой-то сложный обработчик на бэкэ. Мы хотим просто заливать конфиг с настройками и контентом и заходить на готовый сайт. Концепция такая, есть 1 html шаблон, в который в нужное время и место мы подставляем нужные данные, которые берем из конфига.
В качестве шаблонизатора мы выбрали http://handlebarsjs.com/ , за его простоту, малый вес и хорошую документацию. Брать что-то сложнее не имело смысло. (А еще у них логотип прикольный).
Конфиг
Ну, раз конфиг, то было два варианта — XML или JSON. XML сразу отпал, там слишком много пришлось бы ставить скобочек и обратных косых черт. JSON показался хорошим вариантом.
Здесь, я столкнулся с проблемой, что редактор Atom от GitHub не умеет перекодирвоать файлы. Конфиг отлично работал на локале и не работал на продакшене. Причину проблемы я понял через минут 20. Все это приыело к пониманию, что возможно сама судьба не хочет JSON, а говорит нам еще раз, что чем меньше зоопарк технологий в проекте — тем лучше.
В итоге, вместо JSON я сделал отдельный .js файл с одним Object элементом. Это упрощало работу с кодировкой и убирало необходимость что-то там парсить.
Контроллер
Принцип контроллера прост. Мы анализируем на какую страницу зашел пользователь по URL, и выдаем ему соответствующий контент. Так как варианты URL на которые может зайти пользователь у нас то же берутся из конфига, то обработчик 404 страницы я пока не стал делать.
Основная сложность была вызвана тем, что у нас были два типа городов.
- Город в котором только один офис, соответственно уровень вложенности у нас один.
- Город в котором несколько офисов, каждый со своими этажами и прочее. Вложенность на 1 больше.
Решение в лоб, указывать в конфиге для каждого города его уровень вложенности, но стало понято, что работа с конфигом для того, кто будет его заполнять и так будет адом. Усложнять новыми параметрами, причем не до конца понятными, не хотелось. В итоге обработчик сам анализирует каждый город и в зависимости от вложенности понимает, как его парсить.
В конце своего процесса контроллер использует наш шаблон и генерирует нужную нам страницу.
Еще пришлось постоянно собирать и парсить обратно ссылки. Ссылка генерировалась из названия города\офиса, соответственно пробелы я менял на “+” и обратно. Ну и рекурсивный поиск по всему объекту заданного имени. В этом отношении python попроще был бы, но мы не ищем легких путей.
Итого
Удобно ли управлять контентом сайта через конфиг? Совсем нет. Сложность растет в геометрической прогрессии при увеличении контента. Классический CRUD несравнимо удобнее.
Достигли я поставленной цели? Определенно да. Все одновременно выглядит сложно и просто, налет загадочности, закрытого клуба и магия консоли.