CC BY
97
Разработка веб-сервиса системы облачного хранения видеоданных
Гугаев М.В.
Департамент компьютерной инженерии МИЭМНИУВШЭ
[email protected]. сот
Аннотация. Рынок не очень насыщен сервисами, позволяющими привязать к хранилищам информации механизмы резервного копирования и взаимодействия с разными типами данных, а социальные функции имеют лишь единицы. Наш сервис будет предоставлять широкий спектр возможностей по восстановлению и взаимодействию с облачными хранилищами данных, позволит создавать группы пользователей и делиться в них разнообразной информацией. Данная работа описывает ход разработки проекта, технологии и причины их выбора. Проект подразумевает две, тесно взаимодействующие друг с другом, части: web-сайт и клиентское приложение. В процессе ожидается составить список этапов разработки и определиться с ближайшими целями.
Ключевые слова: видеоархив, сервис, информация, приложение, разработка
1 Введение
Основная цель проекта - синтезировать облачные хранилища информации и ряд социальных функций и прибавить к этому систему резервного копирования.
Сервис должен хранить оригиналы и потоковые версии всех допустимых форматов, предоставлять видео в удобном для архивного использования формате. Используя сервис можно будет объединять файлы по событиям и тегам, а развитая система прав обеспечит удобство доступа к информации.
Важным компонентом является работа с оффлайн хранилищами и хранение превью документов в базе данных. Предполагается использование УоиТиЬе и бэкап сервис ОрепОпуе. Именно связь 3-х составляющих: двух сервисов и программной начинки обеспечивает уникальность данной работы. В процессе разработки были рассмотрены похожие ресурсы, что позволило позаимствовать ряд удачных идей и внести правки в уже написанные компоненты. Российский й-рынок не очень развит по сравнению с остальными развитыми странами, исходя из этого было принято решение, реализовать несколько языков с возможностью динамичного переключения между ними.
В последнее время можно заметить тенденцию разработки независимых, от сторонних технологий, продуктов и нежелание компаний сотрудничать друг с другом в конкурирующих областях. Наша работа
берёт лучшее у двух гигантов it-рынка (Google и Microsoft), объединяет и добавляет дополнительный функционал.
Одной из ключевых элементов при начале разработки является деление команды по ролям и описания хода реализации. Автор работает над веб-сайтом и серверной составляющей.
Носители и облачные хранилища информации
You
QB
ш
Бэкап
Сервер
Веб-сайт
t
Компьютер Рис. 1. Схема работы проекта
Приложение
На рисунке 1 изображена схема работы проекта. Каждый сможет скачать приложение и с его помощью загружать информацию в облачные хранилища. На пути к конечной точке информация будет проходить через веб-сайт и оставлять свои параметры на сервере.
2 Конкуренты и перспективы
Рассмотрим несколько вариантов сервисов с похожим функционалом.
Основные [4]:
• Google Drive Очень схож по функционалу с данным проектом. Так же имеет социальную составляющую, но не позволяет давать группам доступ к определённой информации.
• Yandex Disk Поддерживает хранение, загрузку и просмотр информации, но напрочь лишён социальных функций. Бесплатно предоставляет больше дискового пространства, чем Google Drive.
Посредственные:
• MediaValet Имеет взаимосвязь с Windows Azure cloud platform. Подходит для пользователей OS X и Windows.
• YouTube Позволяет загружать и показывать видео (используеться в данной работе). Имеет тесное взаимодействие с социальными сетями.
• Asset Bank Популярен среди крупных компаний, т.к. Unilever, Panasonic и Deloitte. Считается наиболее надёжным продуктом на рынке.
• FileCamp Аналогичен предыдущим. Отсутствует возможность взаимодействия с социальными сетями.
В отличие от рассмотренных вариантов данная работа использует более технологический развитые решения для создания резервных копий и показа видео. Такая структура (использование разных сервисов) даёт неплохую надёжность, так как например если обвалиться основной сервер с информацией, то с резервными копиями на OpenDrive ничего не произойдёт.
3 Исследование и разработка
Создание веб-сайта делиться на две части: вёрстка и внутренняя составляющая (ядро), которые следует разрабатывать одновременно. Для достижения поставленных целей логично будет воспользоваться рядом уже имеющихся технологических решений, что сильно облегчит процесс разработки и избавит от лишних ошибок.
Для написания ядра был выбран Django-фреймворк [1] версии 1.7, написанный на языке python 2.7 [3]. При выборе фреймворка для бекенд-разработки важным параметром являлся функционал и язык, на котором он написан, к тому же предыдущая версия проекта уже базировалась на этой технологии.
При создании web-страницы помимо стандартных методов (т.к. чистого использования: язык гипертекстовой разметки(Мт1), каскадных таблиц cmneft(css) и встраиваемого языка JavaScript) можно использовать ряд уже написанных фреймворков. Рассмотрим несколько наиболее популярных:
• Bootstrap
• Skeleton
• Foundation
Эти CSS фреймворки предоставляют большой набор компонентов, позволяющих с лёгкостью построить web-страницу. Так давайте разберёмся, какой из них нам лучше подойдёт.
Таблица 1. Общая информация [5]
Bootstrap Foundation Skeleton
Популярность Много пользователей Немного пользователей Немного пользователей
Сетки Резиновые и фиксированные Резиновые, хорошо подстраиваются Фиксированные
UI-элементы Большое количество виджетов, хорошо подходит для быстрого прототипирован ия Большое количество виджетов, хорошо подходит для быстрого прототипирован ия, больше разнообразный как Bootstrap Ограниченное количество
Создание Разработан в Twitter для внутреннего использования Разработан в ZURB для использования в проектах клиентов Делался специально максимально минималистичны м
Разработчик Twitter ZURB Dave Gamashe
Поддержка браузерами Chrome (Mac, Windows, iOS, and Android) Safari (Mac and iOS only) Firefox (Mac, Windows) Opera (Mac and Windows) IE8+ Desktop: Chrome, Firefox, Safari, IE9+ Mobile: iOS (iPhone), iOS (iPad), Android 2, 4 (Phone), Android 2, 4 (Tablet), Windows Phone 7+, Surface Desktop: Chrome, Firefox, Safari, IE7+ Mobile: iPhone, Droid, iPad
Лицензия MIT License MIT License MIT License
Таблица 2. Сравнение компонентов [5
Bootstrap 3 Foundation v5 Skeleton
Предупреждения ЕСТЬ ЕСТЬ НЕТ
Байджи ЕСТЬ ECTb(label.roun d) НЕТ
Breadcrumbs ЕСТЬ ЕСТЬ НЕТ
Кнопки ЕСТЬ ЕСТЬ ЕСТЬ
Carousel ЕСТЬ ECTb(Orbit) НЕТ
Выезжающие элементы ЕСТЬ(Рапе1) ECTb(Sections) НЕТ
Выпадающие элементы ЕСТЬ ЕСТЬ НЕТ
Формы ЕСТЬ ЕСТЬ ЕСТЬ
Формы подтверждения НЕТ ECTb(Abide) НЕТ
Сетки ЕСТЬ ЕСТЬ ЕСТЬ
Иконки ЕСТЬ (Glyphicons) ЕСТЬ (with download) НЕТ
Лейблы ЕСТЬ ЕСТЬ НЕТ
Списки ЕСТЬ ЕСТЬ НЕТ
Списки (горизонтальные) ЕСТЬ ЕСТЬ НЕТ
Медиа объекты ЕСТЬ (Media Object) НЕТ НЕТ
Модальные окна ЕСТЬ ЕСТЬ (Reveal) НЕТ
Навигация ЕСТЬ ЕСТЬ НЕТ
Прибитая навигация ЕСТЬ( Affix) ECTb(Magellan) НЕТ
Pagination ЕСТЬ ЕСТЬ НЕТ
Панели ЕСТЬ ЕСТЬ НЕТ
Ценовые таблицы НЕТ ЕСТЬ НЕТ
Стили вывода ЕСТЬ ЕСТЬ НЕТ
Полосы загрузки ЕСТЬ ЕСТЬ НЕТ
Таблицы ЕСТЬ ЕСТЬ НЕТ
Вкладки ЕСТЬ ЕСТЬ НЕТ
Миниатюры ЕСТЬ ЕСТЬ НЕТ
Всплывающие подсказки ЕСТЬ ПРИСУТСТВУ ЕТ НЕТ
Типография ЕСТЬ ЕСТЬ ЕСТЬ
По наличию компонентов Bootstrap и Foundation находится примерно на одном уровне, а вот Skeleton сильно уступает им обоим. В Foundation для использования некоторых базовых элементов чаще
используются плагины. Bootstrap обгоняет Foundation внешней составляющей и наличием поддержки Less.
Был выбран Bootstrap т.к. по внешней составляющей и простоте он более привлекателен чем Foundation,
к тому же этот фреймворк уже использовался при написании предыдущих версий проекта.
4 Структура
Система прав и социальная часть тесно связаны с функциями
•в
Информация
^ В ^
Носители и обл. хранилища
Рис. 2. Схема обмена информации и доступа к ней
Пользователь имеет возможность подключить стороннее облачное хранилище данных, при подключении он получит права владельца на все файлы. Доступ к информации всегда проходит через права. Каждый член группы может давать группе права на просмотр своей информации.
5 Дальнейшие планы и ход разработки
Ход разработки был поделён на несколько этапов: 1) Разработка модели авторизации и личного кабинета
Ц]'а^о предоставляет полезный для решения этой задачи компонент Ц)а^о-5ев5ЮШ в связке с Ц)'а^о^иагсЦап, позволяющий создавать для каждого вошедшего в систему пользователя специальную
хранения и взаимодействия с информацией.
Группа Права
L А
4Ш
Пользователь
сессию и потом проверять принадлежность к ней. Каждый пользователь получает контент в зависимости от сессии в которой он находиться (происходит проверка соответствия идентификатора).
2) Разработка модели прав и гостевого доступа
Задача этого пункта заключается в создании системы прав для каждого файла или группы файлов, которая позволит или запретит разным пользователям совершать действия, такие как перенос в другие директории, удаление, просмотр и другие.
3) Создание интерфейса
Тут важно обратить внимание на адаптивность и удобство для пользователя. Bootstrap сильно упрощает реализацию этой задачи путём предоставления функциональных компонентов.
4) Создание набора интерфейсов для получения метаданных с локального приложения
Данные интерфейсы должны интегрироваться в Django и тесно взаимодействовать с другими элементами.
5) Реализация системы просмотра разных типов информации
Эта задача включает в себя разработку или интеграцию приложений для просмотра разных типов информации, таких как видеофайлы, текстовые файлы и другие.
На момент написания статьи реализованы 1-4 и частично 5 пункты.
Несколько скриншотов:
Мой архив Мои группы Мои сервисы
1 Изменение данных
Информация
Изменить иконку профиля
Логин: super
Имя: super
Фамилия: super
E-mail: leidenit@gmall com
Зарегистрирован: 05.02.15
Последнее вход: 05.02.15 в 22:52
Статистика пользователя
Добавлено видеозаписей: Создано событий: Оставлено комментариев:
Рис. 3. Скриншот сайта №1
i...SOVA Видеозаписи События Demo
Мои настройки
Показа^
Мои группы Тип
Мои сервисы —
Показав
Добавить носитель
Статус:
Полностью заполнен Тип: Диск
Назад 1 Вперёд
Рис. 4. Скриншот сайта №2
6 Заключение
После анализа технологий, обзора похожих ресурсов и составления списка задач ясен чёткий план работы. В ближайшее время ожидается написание интерфейса для взаимодействия с файловой системой и интеграция плагина для получения данных с других носителей в ядро сайта.
Результат должен не только позволить пользователем использовать уникальный функционал проекта, но и поднять умения команды в сфере веб-разработки на новый уровень. В дальнейшем не исключено расширение функционала в зависимости от технических потребностей и появления новых идей.
7 Список источников
[1] Причины выбора Django для разработки сайтов [Электронный ресурс] // Хабрахабр [Офиц. сайт]. 13.11.2009 г. URL: http;//habrahabr.ru/post/75131/ (дата обращения 20.12.2014).
[2] Ещё 10 батареек для джанго [Электронный ресурс] // Хабрахабр [Офиц. сайт]. 13.01.2012 г. URL: http://habrahabr.ru/post/l36168/ (дата обращения 20.12.2014).
[3] Преимущества Python [Электронный ресурс] // Clinuxworld [Офиц. сайт]. 2010 г. URL: http://www.clinuxworld.com/admin/334-benefíts (дата обращения 20.12.2014).
[4] Тор Digital Asset Management Software Productsio [Электронный ресурс] // Capterra [Офиц. сайт]. 2014 г. URL: http://www.capterra.com/digital-asset-management-software/ (дата обращения 20.12.2014).
[5] Comparing Responsive CSS Frameworks - Bootstrap, Foundation, and Skeleton [Электронный ресурс] // Vermilion [Офиц. сайт]. 2012 г. URL: http://vemiiHon.com/news/articles/2012/10/22/comparing-responsive-css-frameworks-bootstrap-foundation-and-skeleton (дата обращения 20.12.2014).
Сервис для online-трансляции презентаций. Front-end разработка
Кудрявцева С., Плетнев М.
Московский институт электроники и математики НИУВШЭ s. kudryavtseva@hotmail. com, mihail160611@gmail. com
Аннотация. В статье описывается ход разработки сервиса для трансляции и просмотра презентаций в режиме реального времени под рабочим названием "Slideshot". Данное приложение делает возможным дублирование и сохранение визуального сопровождения, которое является неотъемлемой частью практически каждого устного доклада. Исключая распространенные факторы, способствующие плохому усвоению визуальной информации, "Slideshot" дает возможность пользователям просматривать с экрана своего мобильного устройства все, что происходит на компьютере лектора. Это возможно как в ои/ше-режиме, так и в записи их архива презентаций. Приложение предназначено для поддержки конференций или иных мероприятий, сопровождаемых презентацией. Оно будет полезно для институтов и университетов, а также для различных выставочных площадок, проводящих семинары и конференции.
Ключевые слова: трансляция, презентация, конференция.
1 Вступление
Цель данного сервиса - помочь людям в организации конференций и иных устных выступлений. Эта цель включает первостепенные задачи: улучшить условия проведения самой конференции/выступления, а также дополнить видеотрансляцию или видеозапись выступления качественной записью визуального сопровождения.
Можно привести множество причин и ситуаций, по которым человек не получит информацию, отображенную на слайде презентации или фотографии даже находясь в зале, где идет выступление. Среди них такие как неудобное расположение экрана, плохое зрение человека или низкое качество видеопередачи при просмотре через Интернет, некачественная работа режиссера, производящего съемку. В подобных ситуациях и будет полезен сервис Slideshot. Он подразумевает веб-сайт и клиентское приложение для рабочего стола. Актуальность проекта заключается в том, что любой человек, у которого есть доступ, может следить за ходом доклада/лекции на экране своего компьютера или любого другого устройства, просматривать уже показанные слайды, ставить презентацию на паузу. Слайды подгружаются на сайт сразу после перелистывания их на экране лектора, что и является основой трансляции в режиме реального времени.
