- PVSM.RU - https://www.pvsm.ru -
Итак, я давно хотел написать сайт знакомств, но при этом совершенно не хотелось, чтобы он был таким же, как и сотни других. В итоге стало ясно, что это должен быть не совсем сайт знакомтсв, а скорее некое место, где можно находить интересных людей. С другой стороны, не хотелось ограничиваться какой-то конкретной категорией людей, поэтому вариант создания тематического сайта не рассматривался. В итоге получилось то, что вы можете видеть по ссылке [1]. Сразу можно обратить внимание на то, что не предлагается заполнять какие-либо анкетные данные. Не потому, что их нужно заполнить после регистрации, а потому что анкет на сайте нет.
Анкет нет потому, что они имеют слишком большие ограничения. Обычно предлагается задать некий стандартизованный набор параметров, с такими же стандартизованными вариантами ответа. Но как только хочется указать что-то ещё или ответить как-то иначе, сталкиваешься с тем, что такую возможность не предусмотрели (или работает это не так, как хотелось бы).
Под хабракатом я расскажу о том, что есть на этом сайте вместо анкет, а также, конечно, напишу о некоторых технических деталях (куда же без этого).
А вот, кстати, и описание в «рекламном» стиле:
Вы давно хотели найти себе девушку, которая умеет программировать на Brainfuck? Или вам важно, чтобы она была сторонницей адаптивной и семантической вёрстки? А может, вы хотите познакомиться с той, кто может легко рассказать об отличиях микроядра от монолитного, но при этом ещё является танцовщицей?
Теперь у вас появилась такая возможность — если, конечно, она уже зарегистрировалась на Background Dating. :)
Вместо анкет на сайте есть ключевые фразы. Каждая ключевая фраза — это короткое утверждение от первого лица.
Вот несколько примеров:
У каждого пользователя может быть сколько угодно ключевых фраз, и любую ключевую фразу можно использовать при поиске. Также у пользователей есть возможность искать сразу по нескольким интересующим ключевым фразам — в этом случае в результатах выдаются только те люди, которые добавили у себя все указанные ключевые фразы (соответственно, если результат поиска оказывается пустым, значит, можно попробовать убрать часть заданных ключевых фраз из запроса).
При вводе ключевых фраз работает автоподстановка, соответственно, если что-то похожее кто-то из пользователей уже добавлял, то предлагается выбрать одну из ключевых фраз в списке.
Поскольку ключевые фразы могут быть о чём угодно, находить можно, соответственно, самых разных людей. Если вдруг интересен человек, который, например, чётко знает, зачем используется декантер, то можно попробовать найти и таких.
Таким образом при достаточном количестве людей у каждого пользователя появляется возможность знакомиться с теми, кто представляет для него наибольший интерес, и чей 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/
Нажмите здесь для печати.