четверг, 7 июля 2016 г.

Сайт с конфигом в стиле Quake III Arena и компьютерных клубов из нулевых

Сегодня мы сделаем сайт с панорамами в 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 несравнимо удобнее.

Достигли я поставленной цели? Определенно да. Все одновременно выглядит сложно и просто, налет загадочности, закрытого клуба и магия консоли.