Проекты

Онлайн-кинотеатр Dixiflex

Онлайн-кинотеатр Dixiflex предоставляет возможность просмотра сериалов производства российской телекомпании «DIXI Медиа».

Дата публикации — март 2014 года

Бюджет: уточняйте цену у менеджеров
Команда
Александр Серегин Разработчик мобильных приложений
Ольга Круглова Арт-директор
Александр Асланов Ведущий front-end разработчик
Дмитрий Кукушкин Ведущий программист
Фёдор Воропаев Руководитель отдела разработки
Технологии Python Django Collectd Graphite Dashing Ansible

Задача

Разработать сайт онлайн-кинотеатра, где русскоязычным пользователям со всего мира быстро и доступно предоставлялся бы уникальный телевизионный контент – сериалы производства «DIXI Медиа».

Оказываемые услуги

Компания «ТриЛан» оказывала «DIXI Медиа» широкий спектр услуг. Кроме разработки сайта, куда вошли создание дизайна, вёрстка, программирование, написание и размещение контента, мы осуществляли юридический консалтинг в области авторского права в интернете и консалтинг по интернет-бизнесу вообще. Помимо этого, специалистами «ТриЛан» были проведены работы по неймингу и разработке фирменного стиля (в том числе логотипа) онлайн-кинотеатра. Команда профессионалов нашей компании принимала непосредственное участие в бизнес-планировании развития интернет-проекта, выступила системным интегратором, подобрав необходимое ПО и оборудования для стабильной работы сайта.

Начало сотрудничества

Сотрудничество между «ТриЛан» и «DIXI Медиа» началось в мае 2013 года.

Проблемы и их решения

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

Решение:

Для её выполнения мы задействовали и приложения Collectd (collectd.org), Graphite (graphite.wikidot.com)и Dashing (shopify.github.io/dashing/). Так, Collectd позволил нам собирать данные о нагрузке и отправлять их в Django. Graphite, в свою очередь, обрабатывает эти данные (естественно, обработка проводится на стороннем сервере, чтобы снять нагрузку с основного). Ну а приложение Dashing от команды Shopify позволило достаточно легко на основе обработанных данных строить графики по нагрузке. Результатом этой работы стал онлайн-мониторинг нагрузки сервиса. Кроме того, используя Ansible (www.ansibleworks.com) мы смогли автоматизировать некоторые действия по установке и настройке приведенного ПО и в случае необходимости сможем использовать наработки в будущем.

Мобильные приложения, также разработанные нами для компании «DIXI Медиа», получают данные с сервера с помощью REST API. Нам предстояло его разработать.

Решение:

В выполнении этой задачи нам здорово помог django-rest-framework (django-rest-framework.org). Буквально за пару недель API был написан. Интересным было взаимодействие авторизации через соцсети и REST API: приложение получает авторизацию напрямую, отправляет данные на сервер и получает авторизацию на нашем сервере. Для авторизации через соцсети было использовано приложение django-social-auth (django-social-auth.readthedocs.org/en/latest/).

Нужно было выдержать определенную идентичность в дизайне и в функционале сайта и мобильных приложений для iOS и Android.

Решение:

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

Стороны о проекте

Александр Серегин
Александр Серегин Разработчик мобильных приложений

Это был сложный проект, как по объему, так и по срокам. И мы рады, что смогли его выполнить на должном уровне.

Фёдор Воропаев
Фёдор Воропаев Руководитель отдела разработки

Приятно, что нам дали возможность делать проект таким, каким его видим мы. Это доверие было важно оправдать.

Ход работы

С мая по июнь команда дизайнеров под руководством арт-директора «ТриЛан» Ольги Кругловой трудилась над разработкой дизайна онлайн-кинотеатра для мониторов, планшетов, мобильных версий и приложений. В июне последовал этап вёрстки. В том же месяце началась итерационная работа по программированию, которая была завершена в августе. Команда разработчиков «ТриЛан» была практически наделена правами владельца продукта (product owner). Заказчик («DIXI Медиа») положился на наш профессионализм, позволив работать на достижение конечного результата так, как считаем нужным мы.

Описание страниц

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

Рассмотрим несколько страниц проекта - их прототип и уже отрисованный дизайн.

Главная страница


Прототип главной страницы сайта


Общий вид главной страницы сайта

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

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

Блок «Новые серии» содержит анонсы пяти новых серий, в каждый из которых входит небольшой скриншот (при клике по нему осуществляется переход на внутреннюю страницу серии), название и номер серии, дата выхода, текстовое описание, цена серии, оценка, количество голосов.

Если пользователь авторизован, то при клике на кнопку «купить» открывается форма покупки. Когда серия приобретена, пользователь может скачать её или просмотреть онлайн, воспользовавшись соответствующими кнопками. Если же пользователь не авторизован, то при нажатии на кнопку «купить» перед ним открывается всплывающее окно, где содержится побуждение к регистрации или авторизации.

Блок «мои рекомендации» во многом схож с блоком «Новые серии». Он содержит анонсы рекомендованных для пользователя эпизодов сериала. Список рекомендаций формируется на основании последних просмотров и покупок пользователя.

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

Страница сериала


Прототип страницы сериала


Страница сериала

Страница сериала содержит название сериала, информацию о годе выпуска, о количестве серий и просмотров, а также оценку сериала, количество голосов, общее описание сериала, кнопки «Оплатить весь сериал» и «Подписка на уведомления».

Клик пользователем на кнопку «Оплатить весь сериал» открывает форму покупки. После проведения оплаты вместо «оплатить весь сериал» появляется кнопка «смотреть».

Кнопка «Подписка на уведомления» после клика пользователя меняется на «отписаться от уведомлений». Подписка возможна по e-mail и по sms. При клике на кнопку подписки пользователю предоставляется соответствующий выбор во всплывающем окне.

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

Кроме того, пользователь может ознакомиться с галереей кадров сериала, просмотреть трейлер и оставить комментарии.

Страница серии


Прототип страницы серии


Страница серии

На странице серии размещена следующая информация: номер серии, название сериала, дата выхода серии, текстовое описание, оценка серии и количество голосов, список создателей и участников серии, кнопка «подписаться на уведомления» либо «отписаться от уведомлений», кнопка «скачать», кнопка «форум», блок комментариев и, конечно же, видеоплеер с загруженной серией.

Страница профиля


Прототип страницы профиля


Страница профиля

Раздел «Профиль» содержит три блока: «Личные данные», «Мои покупки» и «Счёт».

В блоке «Личные данные» пользователь может указать информацию о себе: имя, дату рождения, мобильный телефон, e-mail, а также «привязать» к профилю аккаунт социальной сети и загрузить аватарку. Помимо этого, в этом блоке пользователь имеет возможность сменить пароль и редактировать личные данные. Также нами был разработан «Конструктор герба», где пользователь может создать или отредактировать личный герб.


Конструктор герба

Блок «Мои покупки» предоставляет пользователю информацию о приобретённых им сериалах и эпизодах. Данные о купленном сериале включают в себя его обложку и название (при клике по ним происходит переход на страницу сериала), год выпуска, количество просмотров, возможность раскрыть или скрыть список приобретённых серий. Список серий, в свою очередь, содержит скриншот серии, её номер, название, дату выхода, а также кнопки «смотреть» и «скачать».

Щёлкнув по ссылке блока «Счёт», пользователь сможет узнать сумму на счёте, пополнить баланс или просмотреть историю покупок.

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

Продолжение сотрудничества

После завершения работы по созданию, мы не бросаем проект – осуществляем поддержку, производим доработки.

Сегодня активно ведутся переговоры относительно маркетингового сопровождения проекта и его контента.

Результат

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