- PVSM.RU - https://www.pvsm.ru -

Background Dating — в поисках людей, с которыми интересно говорить

Итак, я давно хотел написать сайт знакомств, но при этом совершенно не хотелось, чтобы он был таким же, как и сотни других. В итоге стало ясно, что это должен быть не совсем сайт знакомтсв, а скорее некое место, где можно находить интересных людей. С другой стороны, не хотелось ограничиваться какой-то конкретной категорией людей, поэтому вариант создания тематического сайта не рассматривался. В итоге получилось то, что вы можете видеть по ссылке [1]. Сразу можно обратить внимание на то, что не предлагается заполнять какие-либо анкетные данные. Не потому, что их нужно заполнить после регистрации, а потому что анкет на сайте нет.

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

Под хабракатом я расскажу о том, что есть на этом сайте вместо анкет, а также, конечно, напишу о некоторых технических деталях (куда же без этого).

А вот, кстати, и описание в «рекламном» стиле:

Вы давно хотели найти себе девушку, которая умеет программировать на Brainfuck? Или вам важно, чтобы она была сторонницей адаптивной и семантической вёрстки? А может, вы хотите познакомиться с той, кто может легко рассказать об отличиях микроядра от монолитного, но при этом ещё является танцовщицей?

Теперь у вас появилась такая возможность — если, конечно, она уже зарегистрировалась на Background Dating. :)

Вместо анкет на сайте есть ключевые фразы. Каждая ключевая фраза — это короткое утверждение от первого лица.

Вот несколько примеров:

  • Программирую на Lisp
  • Играю в Dungeons and Dragons
  • Хожу в клуб Place
  • Пишу на Хабрахабр
  • Занимаюсь сетевой безопасностью

У каждого пользователя может быть сколько угодно ключевых фраз, и любую ключевую фразу можно использовать при поиске. Также у пользователей есть возможность искать сразу по нескольким интересующим ключевым фразам — в этом случае в результатах выдаются только те люди, которые добавили у себя все указанные ключевые фразы (соответственно, если результат поиска оказывается пустым, значит, можно попробовать убрать часть заданных ключевых фраз из запроса).

При вводе ключевых фраз работает автоподстановка, соответственно, если что-то похожее кто-то из пользователей уже добавлял, то предлагается выбрать одну из ключевых фраз в списке.

Поскольку ключевые фразы могут быть о чём угодно, находить можно, соответственно, самых разных людей. Если вдруг интересен человек, который, например, чётко знает, зачем используется декантер, то можно попробовать найти и таких.

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

Работает сайт, кстати, на Django (язык Python). Для передачи данных о личных сообщениях используются Web Sockets [2] (RFC 6455 [3]). При свёрнутых вкладках (исключение — чат) соединение с сервером временно закрывается, чтобы не нагружать интернет-канал — это реализовано через HTML5 Visibility API [4], а именно с помощью Visibility.js [5] небезызвестного iskin [6].

С серверной стороны поддержка веб-сокетов реализована с помощью асинхронного неблокирующего сервера Tornado. Если кто-то захочет, готов поделиться исходниками и информацией о том, как это деплоить — там, в принципе, ничего сложного. Для того, чтобы передавать сообщения между Django и Tornado (а также хранить некоторые данные) используется Redis, в котором есть отличная поддержка pub/sub [7]. В Django используется стандартный клиент redis-py, а в Tornado асинхронный клиент brükva [8].

Для валидации файла (фотографии) на клиентской стороне используется File API [9]. Разрешение фотографии, правда, не проверяется — это можно сделать [10], но я пока что решил не усложнять, тем более, что на сервере всё перепроверяется. Зато проверяются тип и размер файла, что тоже неплохо. Однако меня удивил один интересный факт — дело в том, что по спецификации File API атрибут type объекта, представляющего файл, должен содержать MIME-тип файла, согласно RFC 2046 [11], но браузеры при этом используют не фактический тип файла, а генерируют его на основе имеющегося расширения.

Иными словами, возьмём MP3-файл, скажем, file.mp3. Посмотрим MIME с помощью команды file:

$ file --mime-type file.mp3
file.mp3: audio/mpeg

Теперь уберём расширение, и попробуем ещё раз:

$ file --mime-type file
file: audio/mpeg

То же самое. Попробуем другое расширение.

$ file --mime-type file.jpg
file.jpg: audio/mpeg

Аналогично.

А вот у веб-браузеров другое мнение — в первом случае files[0].type содержит строку audio/mpeg (что и ожидается), во втором пустую строку, а в третьем случае уже image/jpeg. Опять же, это не критично, потому что перепроверяется на сервере, но всё равно немного удивляет. Кстати, если очень хочется сделать, чтобы тип файла проверялся «по-настоящему», то это можно [12] сделать вручную, через FileReader. Возможно, потом ещё сделаю.

Ещё одна отличная технология, которую я решил здесь использовать — это Web Storage [13]. Сначала технология Web Storage была частью спецификации HTML5, но потом была описана в отдельной спецификации. С помощью неё на сайте происходит сохранение данных формы регистрации в локальном хранилище браузера (localStorage) — прямо при заполнении пользователем. То есть если пользователь, например, уже указал какие-то ключевые фразы, и собирался регистрироваться, а потом вдруг случайно закрыл вкладку (или браузер, или у него вообще выключился компьютер), то когда он снова зайдёт на сайт, ему не придётся снова добавлять эти ключевые фразы — они автоматически будут загружены из локального хранилища и появятся в форме.

Также на сайте используется адаптивная вёрстка, и поэтому им можно пользоваться с мобильников, планшетов и нетбуков — главное, чтобы там был современный браузер (кстати, браузер по умолчанию в Android 4.2, к сожалению, пока не всё поддерживает, но с другой стороны под Android есть Firefox, Opera Mobile и Chrome, где всё отлично).

Если кому-то будут интересны какие-либо ещё технические подробности (например, серверная валидация и crop фотографий, или хочется обсудить авторизацию по email в Django и изменения в версии 1.5), могу рассказать о них, например, в личной переписке.

И, конечно, если есть какие-то идеи о том, как можно сделать использование сайта лучше/проще/удобнее, буду очень рад услышать их в комментариях. У меня, кстати, есть некоторые идеи того, что, скорее всего, будет довольно интересно добавить, и, если кто-то хочет, могу о них заранее рассказать. Опять же, если у кого-то есть желание присоединиться к разработке (на данный момент над этим сайтом работаю только я) — пишите.

Всем приятного дня и интересных знакомств. :)

Автор: MaGIc2laNTern

Источник [14]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/django-2/20717

Ссылки в тексте:

[1] по ссылке: http://backgrounddating.com/

[2] Web Sockets: https://developer.mozilla.org/en-US/docs/WebSockets

[3] RFC 6455: http://tools.ietf.org/html/rfc6455

[4] HTML5 Visibility API: http://www.w3.org/TR/page-visibility/

[5] Visibility.js: http://thechangelog.com/post/29416591924/visibility-js-a-wrapper-for-the-page-visibility-api

[6] iskin: http://habrahabr.ru/users/iskin/

[7] pub/sub: http://redis.io/topics/pubsub

[8] brükva: https://github.com/evilkost/brukva

[9] File API: http://www.w3.org/TR/FileAPI/

[10] можно сделать: http://benno.id.au/blog/2009/12/30/html5-fileapi-jpegmeta

[11] RFC 2046: http://tools.ietf.org/html/rfc2046

[12] можно: http://www.htmlgoodies.com/html5/tutorials/determine-an-images-type-using-the-javascript-filereader.html

[13] Web Storage: http://www.w3.org/TR/webstorage/

[14] Источник: http://habrahabr.ru/post/159693/