NodeMap, но не то, что вы подумали

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

У меня в голове роится уйма идей, но на реализацию большинства из них не хватает времени, денег или желания. Это не сильно мешает, так как мне есть чем заняться, но летом я достаточно близко подошел к реализации одной из таких идей.

^[1]

К концу июля, через полтора месяца непрерывной работы и ежедневных коммитов у меня закончилось свободное время и до полноценного запуска я идею не довел. За это время был собран полнофункциональный прототип того, что я хотел сделать. Вчера в комментариях ^[2] к топику с похожей задумкой мне посоветовали опубликовать статью и поделиться наработками, чтобы код не лежал на гитхабе ^[3] мертвым грузом.

Водяные знаки

В начале июня я сидел у своих деда и бабушки в небольшом поселке на самой границе Татарстана и Башкирии, пил чай и смотрел старые фото. Дед в 50-80х годах увлекался фотографией и посмотреть было на что. В основном были «луки», фото людей в помещениях или на отдыхе на природе, подобные фото можно снимать и сейчас, поэтому они меня не очень интересовали.

Тем не менее, я отобрал около пятидесяти штук, показавшихся мне интересными, потому что на них были изображены знакомые всем жителям поселка места, которые сейчас выглядят совершенно по-другому. Я отсканировал их и, довольный, пошел делиться в стандартную для любого города группу вконтакте «Типичный %city%». Я и не подозревал, что группой заправляет малолетний денегерат, который испоганит своими немытыми ручонками мои, без сомнения, редчайшие и гениальные находки.

^[4]

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

План

Идея была простая как три копейки: напринтскринить гугл-карт поселка с нужным разрешением, попросить какого-нибудь фрилансера отрисовать её покрасивее, взять скрипты OpenStreetMap или leaflet.js и получилось бы даже лучше, чем в группе вконтакте — с привязкой к конкретному месту.

К моему огромному удивлению за подобную работу фрилансеры заряжали какие-то конские суммы вроде «30 тыс. рублей за рендер и будешь зумить как захочешь». Предложение заманчивое, но 30 тыс. рублей мне было жалко, и я ограничился заказом обрисовки домов одним слоем и выделением основных зон на текстуре карты. Встало мне это всего в 3 000 рублей, конечно же такая карта была абсолютно непригодна для использования — нужны были как минимум названия улиц. Вспомнилась пословица — если хочешь что-то сделать — сделай это сам. Но история не об этом, поэтому ограничусь двумя картинками:

^[5]

^[6]

Невозможно отказаться

Теперь был файл index.html с подключенным скриптом leaflet.js ^[7] и тайлами карты, сгенерированными с помощью удобной, но платной программы MapTiler ^[8]. Я давно верстаю, а также немного знаю node.js, так что для меня не составило сложности по быстрому накидать простых поп-апов для добавления маркеров ^[9]. Данные гонялись туда-сюда REST-ом, сначала я тренировался на JSON-заглушках, а потом, когда захотелось обратной связи, поменял их на mongo с парой несложных табличек.

^[10]

Все работало, можно было заполнять, но в этот момент мне стало как-то грустно. Такая красивая штуковина, а под капотом полтора скрипта. Это не Web 2.0, это нединамично, надо что-нибудь туда еще прикрутить по быстрому. «По быстрому» продолжалось месяц, за это время было прикручено:

• Авторизация через ^[11] вконтакте ^[12] (passportjs ^[13] / oauth2)
• Функционал «точек» на карте. У точки есть маркер определенного цвета, заголовок, краткое описание ^[14], галерея изображений ^[15] и дополнительные необязательные поля. К точке также можно прикладывать линк на музыкальный трек, и тогда будет доступна кнопка Play/Pause ^[16] (HTML5 Audio Api). Таким образом кроме галереи у каждой точки может быть свой трек. Точки можно комментить ^[17], к комментам можно прикладывать по одному фото.
• Юзеры могут просматривать карту ^[18], переключать доступные для них слои карты, добавлять точки ^[19] на выбранный слой карты. Точка уходит на премодерацию к админу, после премодерации появляется или не появляется на карте.
  Также они могут оставлять на премодерацию в новости, объявления, инициативы и жалобы, в анонимный раздел, анонимность достаточно честная — выяснить кто комментил можно только если залезть в базу.
  Планировалось прикрутить доставку еды из местной пиццерии и просмотр времени до автобуса ^[20], уходящего в ближайший крупный город(самый популярный маршрут), но эти функции остались в виде заглушек.
• Админ, в дополнение к этому, может пропускать или не пропускать сообщения ^[21] или точки и добавлять их самостоятельно. Для графоманов, надоевших своими сообщениями, но в целом безобидных можно выставлять режим trusted ^[22], после которого модерация на добавление новостей, объявлений и прочего снимается. Но всегда можно все вернуть обратно.
• Собственно, новости ^[23], объявления ^[24], инициативы ^[25] или жалобы ^[26], а также анонимный раздел ^[27].

^[28]

Технические детали

Каркас приложения — nodejs/express/mongoose на сервере, leafletjs/backbone+underscore templates/fancybox на клиенте. Маршрутизации на клиенте нет вобще никакой. Сервер шлет json, проверяет авторизацию, жмет заливаемые картинки и собирает-минифицирует css/js grunt-om. Клиент делает все остальное.

Авторизация проверяется не только при входе, а при любых действиях пользователя, связанных со взаимодействием с сервером — далеко не на все у посетителей есть права, а админские вьюшки при большом желании запустить на клиенте(и потыкать разные нехорошие кнопочки) все-таки можно.

Однозначно есть баги, в конце июля я уехал работать и оставил проект в текущем виде.

Как запустить (не для слабых духом):

1. Установить стабильные node.js ^[29] и mongodb ^[30].
2. Установить imagemagick:

   npm i -g imagemagick
   

3. Склонировать себе репозиторий:

   git clone https://github.com/Synopticum/nodemap.git
   

4. Создать папку для базы данных /db в директории проекта и натравить на нее mongodb ^[31]:

   mongod --dbpath ~/nodemap/db
   

5. Можно сделать в корне проекта

   npm install
   

   чтобы обновить модули, но я не проверял, может что-то отвалится.

6. Запустить admincreate.js в корне проекта, чтобы создать в базе запись админа. Когда запись создастся — указать id свежесозданного админа в конфиге ^[32] /config/env.js.
7. На стороне вконтакте тоже все должно быть настроено. Подробно это описано в других статьях и в документации vk api, но в двух словах — надо добавить себе приложение в аккаунт вконтакте и заполнить все необходимые настройки. Этот скрин ^[33] поможет.
8. Запустить app.js ^[34]
9. Зайти на localhost ^[35]:3000/

В реальности все не так страшно, как в этом списке и все процедуры занимают от силы минут 15. Запускать и отлаживать приложение рекомендую уже не в консоли, а в WebStorm.

Felina

Так что же по поводу изначальной идеи? Старые фото с привязкой к местности и все такое? Все в более чем в силе ^[36]. Хотя я устроился на работу и свободное время абсолютно закончилось, клиентская часть проекта зимой будет переписана заново.

А то что вы видите — прототип. Это — писалось для себя. Это — не для продакшена. Я даже не предлагаю вам использовать каким-то образом исходники, там много страшных и нехороших вещей, получившихся по незнанию и из-за отсутствия изначально понятной цели. Не придирайтесь слишком сильно и считайте, что это просто идея или концепт, которым омжет быть кого-то наведет на мысль.

В процессе работы стало понятно почему на подобных сервисах на гугл- или яндекс-картах никто толком и не сидит — потому что они унифицированые и бездушные. А такие штуки как эта — работа ручная. Было бы интересно завершить хотя бы один такой проект, но еще интереснее, если бы их было несколько с каким-то общим API для межсайтового взаимодействия, с возможностью навигации по таким изолированным, но хорошо детализованным кусочкам карт, объединенных в общую сеть, подключенную к межгалактическому роутеру…

Как думаете, роботы захватят мир?)

NodeMap on GitHub ^[3]

Автор: Synoptic

Источник ^[37]