Как Я начал за здравие или об одном конкурсе ВКонтакте

Да, да, да… знаю что мало кто положительно относится к данной соц. сети здесь. Но тем не менее, выдалась свободная минутка и я решил поделиться своим опытом по поводу одного из конкурсов для разработчиков ВКонтакте.

Как-то вечерком, сидел Я дома с гипсом на ноге, занимался безделием и внезапно наткнулся на интересную новость в которой говорилось немного о вышедшем xmpp и предлагалось сразиться за право стать автором официального клиента ВКонтакте. Обещались конечно же золотые горы и прочее…

Подумав «А чего мне ещё делать этим августом, на работу не пойти, на улицу тоже не прогуляться...», Я планомерно начал разбираться с их API и обдумывать чего бы мне самому хотелось видеть в идеальном так сказать клиенте…

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

Предбред

Для начала Я придумал несколько тезисов, которых и придерживался:

• минимализм
• удобство
• простая работа с медиа-информацией пользователя

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

В качестве инструментария был выбран Qt 4.7 и С++, ясное дело лишь из моих личных предпочтений. Кроме того, более чем сотни денег, на реализацию проекта меня мотивировало знакомство с QML из состава Qt 4.7.

Начало

Для начала Я не гнался за чем-то уникальным и стал делать в общем тоже самое что и мои конкуренты — простой как пробка клиент, с базовыми функциями: профили, контакт-лист, смена статуса, окошко диалога с функцией приёма/отправки текстовых сообщений. На первоначальную версию ушло порядка 3-4 дней. Тогда же появились первые снимки экранов…

Медиа

Когда базовый функционал был готов я занялся тем, что считал так сказать фишкой — работой с медиа. В этом мне очень помог хвалёный QtWebKit. Итак, что же такого интересного было реализовано.

Представим себе обычное общение двух человек в IM-клиенте: мы долго разговариваем, периодически кидая друг другу ссылки на какие-то хорошие песни, видео-ролики, картинки. При этом допускаем что оба наших пользователя — постоянно «сидят вконтактике», следовательно большая часть из того что нравится пользователю — хранится на его страничке и всем этим добром он готов поделиться с сотоварищами.

Учитывая предыдущий абзац всё что необходимо сделать — забрать списки медиа-содержимым который есть на страничке пользователя и дать пользователю кнопку с помощью которой он может поделиться содержимым с собеседником. Получение списков — конечно же фигня, главное — показать это красиво =) Для этого окошко чата необходимо сделать центральной частью общения и вписать в него весь обмен медиа-содержимым так чтобы было функционально и не напрягало лишний раз пользователя.

Здесь, как Я и говорил, мне очень помог встроенный QtWebKit модуль. Чем именно? Всего несколькими моментами:

• из моего C++ кода можно изменять любую часть страницы, обращаясь к ним через CSS
• из моего С++ кода можно обрабатывать все события активации ссылок на страничке
• можно разработать свой собственный Qt-виджет и (внимание) вставить его прямо в код страницы, наподобие flash-плеера или других браузерных плагинов

Имея всего три этих возможности, а также при помощи QML мне удалось сделать кое-что действительно интересное с медиа-данными.

Фотографии и альбомы

При помощи одного из готовых QML примеров (да я кое-что украл) идущих вместе с библиотекой Qt, я реализовал загрузку списка альбомов пользователя и просмотр фотографий в этих альбомах с функцией отправки любого изображения собеседнику. Как это выглядит…

Мы нажимаем на кнопку отправки фотографии в окне диалога и видим как загружаются фотки из наших альбомов:



Кликаем по некоторому альбому, видим фотографии из него, а также кнопку возврата к альбюомам:



Теперь кликаем по превьюшке и видим как подгружается и показывается нам полно размерная картинка:



И наконец кликнув по кнопке «Отправить» сверху мы отсылаем нашу фотографию собеседенику.

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

Аудио

С аудио данными всё оказалось ещё интереснее. Именно здесь и был использован тот самый виджет медиа-плеера который я встраивал прямо в окошко чата. Выглядит это так же просто — мы кликаем по кнопке отправки аудио, просматриваем список аудио со своей страницы, выбираем элемент, жмём отправить и вуаля:

Причём, у пользователя которому мы отправили аудио помимо проигрывателя также появляется кнопочка «Добавить аудио на мою страницу», то бишь после прослушивания чувак сможет легко сохранить аудио-запись у себя.

Видео

Как нетрудно догадаться, в моих наполеоновских планах было также как и в случае с аудио-проигрывателем вставлять проигрыватель видео прям в окошко диалога и конечно у меня это получилось… В первоначальной версии, ибо потом пришлось отказаться от данной затеи. Во первых, для получения прямой ссылки на видео-файл необходимо было вручную разбираться страничку с видео и формировать ссылку вручную. Стоит ли говорить, что ручной разбор страниц был запрещён по условиям конкурса. Во вторых, Windows подложила мне маленькую хрюшку в виде невозможности даже отобразить мой видео-виджет, или радовала меня регулярными падениями приложения при проигрывании видео-файла. Хотя опять таки стоит ли упоминать что при разработке под Debian всё было радужно и лазурно.

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

И чего?

В итоге всех этих манипуляций Я получил вот такую работу с медиа:

Аудио и фото:



Аудио и видео:



Результатом остался вполне доволен, с учтом конечно того что код практически не отлаживался. В общем это те возможности на которые я делал упор…

Ну и кое-что по мелочи...

Конечно же список возможностей не оканчивался на этом. Я всеми лапами был за повышение удобства использования, поэтому были добавлены такие дополнительные возможности:

• декларативный контакт-лист с инерционной прокруткой (всем вроде нравилось)
• проверка орфографии
• простая подгрузка истории переписки прям в окошке чата. изщбегая лишних диалоговых окон.
• группировка сообщений одного пользователя идущих подряд
• смайлики (из КДЕшного Oxygen-а ага)
• настройки, прокси, флуд-контроль, напоминания о днях рождений, кросплатформенность, многоязычность, просмотр дополнитеьной информации о человеке из контакт-листа...
• и прочее прочее...

Итого

Как я и сказал, конкурс Я в итоге проиграл, хотя всё же хочется верить в байки о подкупленном жюри и вообще о вселенском зле, но видимо просто не судьба =). Будущее проекта пока туманно и расплывчато, но возможно при появлении некоторого свободного времени он будет продолжен…

Если вдруг кому стало интересно, то вот несколько ссылочек:
Группа клиента ВКонтакте
Полный список возможностей
Процесс разработки
Страничка проекта на Google Code