Размещено на http://www.allbest.ru/

Оглавление

Введение

1. Анализ предметной области

1.1 Сравнительный анализ аналогов

1.1.1 Обзор десктопных видео редакторов

1.1.2 Сравнительный анализ функциональных возможностей десктопных видео редакторов

1.1.3 Обзор онлайн видео-редакторов

1.1.4 Сравнительный анализ функциональных возможностей онлайн видео редакторов

1.2 Функциональные возможности разрабатываемого Web-приложения

1.3 Выводы

2. Проектирование Web-приложения

2.1 Структура сайта

2.2 Описание процессов взаимодействия пользователя и системы

2.2.1 Описание групп пользователей

2.2.2 Описание процесса регистрации

2.2.3 Описание процесса создания проекта

2.2.4 Описание процесса редактирования видео

2.2.5 Процесс сохранения проекта

2.3 Макеты разрабатываемого онлайн видео редактора

2.4 Выводы

3. Выбор инструментов разработки

3.1 Пользовательская часть

3.2 Серверная часть

3.3 База данных

3.4 Выбор библиотек для обработки видео

3.5 Выводы

4. Разработка Web-приложения

4.1 Установка необходимых фреймворков и модулей

4.2 Создание локального сервера

4.3 Обработка POST и GET запросов

4.4 Работа с Mongodb

4.5 Вёрстка страниц

4.6 Разработка пользовательского интерфейса видео редактора

4.7 Структура проекта

4.8 Запуск и отладка сервера

4.9 Итоги

4.10 Тестирование приложения

4.11 Оценка экономической эффективности

4.12 Выводы

Заключение

Список использованной литературы

Приложение 1. Код «app.js»

Приложение 2. Код «routes.js»

Приложение 3. Код «home.ejs»

Приложение 4. Код «home.js»

Приложение 5. Код «package.json»

Приложение 6. Код «videdit.ejs»

Приложение 7. Код «editer.js»



Введение

В настоящее время, интернет входит в самые удаленные уголки нашей планеты. Развитие и широкое распространение интернета меняет расстановку сил между десктопными и Web-приложениями.

Такие недостатки, возникающие при использовании Web-приложений как: недоступность интернета, дорогой трафик и низкая скорость передачи данных уходят в прошлое. А достоинства: отсутствие необходимости установки на компьютере пользователя программного обеспечения, его настройки и обновления, отсутствие требований к ресурсам компьютера и к аппаратной платформе, возможность удаленного доступа к данным, хранящимся на серверах из любой точки мира, становятся все более очевидными.

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

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

В ходе реализации данной работы решались следующие задачи:

? анализ функциональных возможностей существующих приложений по обработке видео;

? проектирование Web-приложения;

? выбор инструментов разработки;

? разработка и тестирование Web-приложения;

? оценка экономической эффективности проекта.

1 

1. Анализ предметной области

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

1.1 Сравнительный анализ аналогов

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

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

1.1.1 Обзор десктопных видео редакторов

За последние 20 лет появилось достаточно большое количество десктопных видео редакторов и рассмотреть их все не представляется возможным. Поэтому в данном разделе будут рассмотрены только те, которые являются наиболее удачными и широко используемыми:

? Adobe Premiere;

? Pinnacle Studio;

? Corel VideoStudio;

? Sony Vegas Movie.

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

Данная программа позволяет импортировать и обрабатывать самые разные видеозаписи. На сайте производителя дано следующее описание: «С помощью ведущего в отрасли набора инструментов для видеомонтажа вы сможете редактировать любые типы мультимедийного контента в исходном формате на настольных ПК и мобильных устройствах. Создавайте профессиональные видеоматериалы с насыщенной цветовой гаммой для киноэкранов, телевидения и Интернета» [3].

Основные преимущества, отмечаемые производителем: интуитивная рабочая среда, поддержка различных форматов, что позволяет работать практически с любыми типами мультимедийного контента, возможность корректировки цвета и использования сложных цветовых стилей, поддержка касаний и жестов, что делает редактирование на устройствах Microsoft Surface Pro, планшетах Windows или трекпадах Apple простым и удобным [3].

Существенным преимуществом Adobe Premiere является интеграция с другими продуктами Adobe, а так же справка и руководство на русском языке. Adobe Studio предлагает пробную бесплатную версию и различные варианты подписки.

Pinnacle Studio. Программа для нелинейного видеомонтажа, разработанная компанией Pinnacle Systems (Avid Technology) на данный момент принадлежит компании Corel. Основные преимущества согласно сайту производителя: высокая производительность, профессиональные возможности редактирования видеофайлов, видеосъемка с экрана, простое удаление шумов, доступ к облачным службам и бесплатному хранилищу, новейшие технологии и форматы [4]. Программа позволяет использовать свыше 2 000 двух- и трехмерных эффектов, работать с шестью дорожками, импортировать VFR-видео из iPhone. Особенно удобна эта программа, при монтаже клипа с двух камер, т.к. реализована возможность просмотра двух импортированных видеозаписей параллельно и выбора кадров из любой. Среди интересных опций - стабилизация и цветовая коррекция, позволяющая исправить ошибки, возникшие при записи видеоматериала. Программа обычно имеет 3 версии: Базовую (Studio или HD), Расширенную (Plus), и Максимальную (Ultimate).

Sony Vegas. Данный программный продукт является представителем семейства профессиональных видео редакторов, разработчиком которого является компания Sony. Большое количество профессиональных возможностей и удобный интерфейс сделали видео редактор достаточно популярным среди профессиональных пользователей. Основные достоинства: мощные эффекты, возможность импорта многослойных файлов Photoshop, превосходное управление звуком, широкий выбор функций захвата и экспорта, большие возможности работы с временной шкалой, позволяющие упростить процесс монтажа [5].

Программа имеет подсказки при нарезке и склеивании фрагментов, позволяет создавать видео с выбором ракурса съемки, многоязычным звуковым сопровождением, субтитрами и комментариями, поддерживает любой из существующих видео форматов. Доступна бесплатная, пробная версия SONY Vegas Pro, на 30-ти дневный срок.

Corel VideoStudio. Программное обеспечение для редактирования видео от компании Corel, позволяющее достичь превосходных результатов при работе с проектами любого уровня сложности -- от базового до профессионального. Основные достоинства, декларируемые производителем: подходит для всех уровней подготовки, обеспечивает инструментами мульти камерного редактирования, позволяющими работать с несколькими ракурсами съемки одновременно, профессиональные аудио инструменты, более 1500 настраиваемых фильтров, эффектов, переходов и титров, 11 приложений премиум-класса для работы с эффектами [6].

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

1.1.2 Сравнительный анализ функциональных возможностей десктопных видео редакторов

Возможности и функции описанных выше программ отличаются в зависимости от версии и комплектации (платная или бесплатная версия). Рассмотрим наиболее поздние и полные версии данных продуктов.

? Adobe Premiere Pro;

? Pinnacle Studio 12 Ultimate;

? Corel VideoStudio Pro X2;

? Sony Vegas Movie Studio 9.

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



Таблица 1.

Сравнение десктопных видео редакторов

Программы Возможности	Pinnacle Studio	Corel VideoStudio	Adobe Premiere	Sony Vegas Movie
Пакетный захват	-	+	-	+
Дорожки	7	11	99	99
Переходы и эффекты	266	312	204	211
Стабилизация изображения	+	+	-	+
Smart Render	+	+	-	+
DivX	+	-	-	-
MOV/WMV/RM/FLV	+/+/+/+	+/+/-/+	+/+/-/+	+/+/+/-

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

пользователь редактор приложение сервер

1.1.3 Обзор онлайн видео-редакторов

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

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

? обрезка видео;

? склейка нескольких роликов;

? возможность вставки субтитров;

? функция, позволяющая сделать зацикливание воспроизведения;

? экспорт во всех виде\аудио форматах;

? наложение эффектов;

? наложение изображений.

Рассмотрим ряд наиболее популярных Web-приложений, позволяющих обрабатывать видео.

Youtube. После загрузки видео на Youtube, возможно повысить его качество с помощью видео редактора Youtube. Он позволяет провести ряд элементарных операций с видео:

? объединить несколько видео и изображений (в одном проекте можно использовать не больше 50 роликов и 500 картинок);

? обрезать или удлинить видео до нужной продолжительности, вырезать фрагменты;

? вставить звуковое сопровождение и настроить громкость;

? добавить эффекты с помощью специальных инструментов:

_ наложить текст;

_ изменить скорость воспроизведения;

_ откорректировать цвет, стабилизировать изображение, применить фильтры и эффекты;

_ развернуть видео на 90 градусов.

Moviemasher. Бесплатный онлайн видео редактор, обладающий интуитивно понятным интерфейсом, достаточной скоростью обработки видео и стандартным функционалом. Основные возможности:

? добавление музыки;

? добавление титров;

? добавление базовых эффектов и переходов;

? поддержка нескольких дорожек.

Cellsea. Бесплатный и крайне простой видео редактор с удобным интерфейсом и стандартным набором функций:

? изменение размера и оптимизация видео для использования на мобильных устройствах;

? добавление эффектов;

? добавление звука;

? наложение видео;

? обрезка и склеивание нескольких роликов;

? конвертация видео во все распространенные форматы.

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

Функционала приложения достаточно чтоб из любительского видео, снятого на мобильный телефон сделать красивое видео [7]. Позволяет:

? разбить видео на сцены;

? вставить титры и надписи;

? добавить видео эффекты;

? добавить звуковое сопровождение;

? использовать встроенные темы и шаблоны для редактирования видео.

К сожалению, при использовании бесплатной версии, созданное видео возможно загрузить только на сервис WeVideo. На другие сайты загрузить видео проект возможно только в платных аккаунтах. Так же при бесплатном использовании приложения, размер для хранения данных ограничен 5 Гб.

1.1.4 Сравнительный анализ функциональных возможностей онлайн видео редакторов

По результатам рассмотрения были выделены функции характерные большинства из рассмотренных редакторов:

? обрезка видео;

? склейка роликов;

? наложение эффектов;

? наложение титров;

? наличие звуковой дорожки.

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

Таблица 2.

Сравнение онлайн видео редакторов

Приложения Возможности	Youtube	Moviemasher	Cellsea	Wevideo
Форматы экспорта	нет экспорта	экспорт в бесплатной версии недоступен	3GP, AVI, MOV, MP4, FLV	mp4
Язык	Ru/Eng	Eng	Eng	Eng
Склейка роликов	+	+	есть, но не работает	+
Обрезка изображения	-	-	+	-
Наложение эффектов\фильтров	+	-	-	+
Пакетный захват	+	-	-	+
Несколько дорожек	-	+	-	-
Наложение звука	+	+	-	+
Работа со звуком	+	+	-	-
Хранение проектов	+	-	-	+
Интерфейс	+	-	-	-
Удобство управления	-	-	+	+

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

1.2 Функциональные возможности разрабатываемого Web-приложения

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

? возможность обрезки видео;

? возможность склейки нескольких видеороликов;

? возможность изменения параметров видео:

_ кодировки;

_ формата видео;

_ разрешения;

_ частоты кадров;

? возможность наложения:

_ изображений;

_ текста;

_ аудио.

? возможность наложения эффектов\фильтров.

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

? наличие нескольких аудио\ видео дорожек;

? возможность наложения одного видео на другое;

? зависимость размера видео на тайм-лайне от длительности видео;

? масштабирование тайм-лайна;

? быстрый предварительный просмотр в окне редактирования;

? возможность хранить проекты;

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

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

1.3 Выводы

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

На основании анализа функциональных возможностей рассмотренных видео редакторов, определены необходимые функциональные возможности разрабатываемого Web-приложения.

2 

2. Проектирование Web-приложения

В данной главе будет рассмотрена структура сайта, позволяющая реализовать функционал, описанный в предыдущей главе.

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

2.1 Структура сайта

Создание структуры сайта является важным элементом при разработке Web-приложения. Структура должна обеспечивать удобную и логичную навигацию по сайту.

Исходя из функций, которые должно выполнять разрабатываемое Web-приложение, сайт должен содержать следующие страницы:

1) главную страницу;

2) страницу проектов пользователя;

3) страницу видео-редактора;

4) страницу с информацией.

На рисунках 1, 2 изображена структура разрабатываемого сайта для разных видов пользователей: зарегистрированного и незарегистрированного.

Рис. 1. Структура сайта для зарегистрированного пользователя



Рис. 2 Структура сайта для незарегистрированного пользователя

2.2 Описание процессов взаимодействия пользователя и системы

Для полноценного проектирования системы необходимо описать виды пользователей, взаимодействие пользователя с системой и ответ системы на действия пользователя.

2.2.1 Описание групп пользователей

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

Таким образом, пользователей можно поделить на 2-е группы: зарегистрированный и не зарегистрированный. Возможности пользователя должны зависеть от того к какой группе он принадлежит.

Незарегистрированный пользователь (Гость) должен иметь возможность:

? читать информацию;

? редактировать видео (склеивать, обрезать, накладывать эффекты и т.д.);

? экспортировать готовое видео;

? создать учётную запись.

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

2.2.2 Описание процесса регистрации

Процесс регистрации позволяет Гостю сайта перейти из группы гостей в группу зарегистрированных пользователей, и в полной мере пользоваться всеми возможностями Web-приложения.

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

Регистрационная форма будет совмещена с формой входа в учётную запись и будет содержать следующие поля:

? поле ввода логина;

? поле ввода пароля;

? поле ввода почты.

А так же “чек бокс” - «У меня уже есть аккаунт», переключающий форму регистрации, в режим входа в существующую учётную запись, который в свою очередь будет содержать только 2 поля:

? поле ввода логина;

? поле ввода пароля.

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



Рис. 3. Макет регистрационной формы и формы входа в учетную запись

2.2.3 Описание процесса создания проекта

Для зарегистрированного пользователя существует два способа создать проект:

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

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

Если пользователь не зарегистрирован, то он может воспользоваться только вторым вариантом, т.к. его меню не имеет пункта «Проекты». При выборе пункта меню «Редактирование» появляется предупреждение: «Вы не являетесь зарегистрированным пользователем и не сможете сохранить проект. Хотите зарегистрироваться?» и предлагается выбор: «Да»/«Нет». При выборе «Да» - отрывается окно регистрации. После регистрации Пользователь может работать с проектом и сохранять его. При выборе «Нет» - Гость может работать с проектом, без возможности сохранения.

При этом реализована так же функция авто сохранения, более подробно описанная в п.2.2.5 .

2.2.4 Описание процесса редактирования видео

Процесс редактирования видео одинаков и для Гостя и для Пользователя. Для начала работы пользователь в соответствующей вкладке загружает с компьютера видео, аудио, картинки которые собирается редактировать, после чего располагает их на тайм-лайне в нужной последовательности. После этого, пользователь может работать с загруженным контентом:

? обрезать видео/аудио;

? накладывать изображение;

? накладывать эффекты;

? накладывать титры;

? накладывать звук;

? накладывать видео;

? менять характеристики итогового видео: разрешение, частоту кадров, кодировку и т.д.

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

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

? формат видео;

? частота кадров;

? бит рейд.

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

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

Рис. 4. Диаграмма активности

2.2.5 Процесс сохранения проекта

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

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

2.3 Макеты разрабатываемого онлайн видео редактора

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

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

В данном проекте использовалось два инструмента для разработки макетов страниц:

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

2) Photoshop - один из наиболее популярных продуктов для разработки PSD макетов web - сайтов. Позволяет разработать наглядные макеты страниц сайта. В данном проекте Photoshop использовался для разработки дизайна сайта и генерирования ряда графических psd элементов, использованных при верстке сайта. Разработанные с помощью Photoshop макеты приведены в разделе 4.5 .

Рассмотрим макеты, созданные с помощью Wireframe.

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

Основное меню должно содержать следующие пункты:

? Главная;

? Редактор;

? Проекты (для зарегистрированных пользователей);

? Информация;

? Вход/Имя пользователя (в случае входа на сайт).

На рисунках 5 и 6 представлен макет главной страницы разрабатываемого приложения.

Рис. 5. Макет главной страницы для Гостя

После регистрации или входа зарегистрированного пользователя содержание основного меню главной страницы меняется: появляется пункт меню «Проекты» и пункт «Вход» меняется на имя пользователя.



Рис. 6. Макет главной страницы зарегистрированного пользователя

При нажатии не кнопку «Вход» в учётную запись появляется окно регистрации, содержащие элементы, описанные ранее в разделе 2.2.2 .

Рис. 7. Макет главной страницы с всплывающим окном регистрации

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



Рис. 8. Макет страницы проектов

Окно содержит: заголовок с именем и логотипом, кнопку выпадающего меню, имя Пользователя, окно с существующими проектами Пользователя и кнопку для создания нового проекта.

Из данного окна Пользователь может перейти в окно редактирования видео (см. рисунок 10), открыв один из существующих проектов, или во всплывающем окне создания нового проекта (см. рисунок 9), нажав на кнопку «Новый проект».

Рис. 9. Макет всплывающего окна создания нового проекта

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

Основными элементами страницы редактирования видео являются:

? окно проигрывания видео;

? окно загрузки файлов, с закладками по типу контента;

? панель инструментов (tool bar), содержащая:

_ кнопка воспроизведения с текущего момента;

_ кнопка воспроизведения с начала;

_ кнопка пауза;

_ кнопка масштабирования элементов на дорожке;

_ кнопка экспорта;

_ кнопка сохранения проекта.

? видео\аудио дорожки.

Рис. 10. Макет страницы редактирования видео

С целью экономии пространства, основное меню для перехода на другие страницы сайта сделано выпадающим.

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

Рис. 11. Макет страницы справочной информации

При разработке макетов Web-приложения, необходимо учитывать виды устройств, на которых данное приложение будет использоваться.
Web-приложение должно быть адаптивным и удобным в использовании на любом из видов устройств вне зависимости от размера устройства. Очевидно, что страницы на мобильных устройствах будут отличаться от страниц на ноутбуках и планшетах набором элементов и местом их расположения. Рассмотрим возможные варианты макетов страниц при использовании приложения на мобильных устройствах.

Так, например, целесообразно чтоб на мобильных устройствах главная страница содержала вместо обычного меню (см. рисунок 12, a)).

Для ускорения перехода к редактированию на экран может быть вынесена кнопка “Начать редактирование” (см. рисунок 12, б).

Окно регистрации может быть оставлено без изменений (см. рисунок 12, в).

На рисунке 12 представлены макеты главной страницы для мобильных устройств.



а)б)в)

Рис. 12. Макеты главной страницы для мобильных устройств

Макет страницы редактирования видео для мобильного устройства представлен на рисунке 13.

Рис. 13. Макет страницы редактирования видео для мобильного устройства

2.4 Выводы

С учетом требований к необходимому функционалу приложения, были спроектированы структура сайта, макеты страниц, описаны процессы взаимодействия пользователя и системы, а так же взаимодействие клиентской и серверной части приложения. Данная работа является неотъемлемой частью создания Web-приложения и обеспечивает корректную разработку с учетом всех требований.

3. Выбор инструментов разработки

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

3.1 Пользовательская часть

Для написания пользовательского интерфейса использовались стандартные языки web программирования. Такие как: HTML, CSS, JavaScript. Кроме того были использованы библиотеки Jquery, набор инструментов Bootstrap, а так же ряд библиотек, перечисленных ниже.

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

Использование Bootstrap позволило без особых усилий сделать сайт адаптивным и удобным в использовании на разнообразных устройствах.

Помимо этого, при разработке web-приложения были использованы такие библиотеки как:

? Owl.carousel- адаптивный слайдер позволяющий быстро и легко добавить в свой сайт красочную презентацию.

? Socket.io- JavaScript библиотека для web-приложений и обмена данными в реальном времени. Состоит из двух частей: клиентской, которая запускается в браузере и серверной для node.js.

? LocalStorage- локальное хранилище данных на стороне пользователя, которое позволяет хранить данные не ограничено по времени, т.к. они не удаляются после закрытия браузера.

3.1.1 Серверная часть

Серверная часть была написана с помощью фреймворка Node.js, что позволило написать сервер на JavaScript, а так же дало свободу в разработке. Данный фреймворк обладает достаточно большим количеством преимуществ: хорошо работает с большим потоком трафика, дает возможность одновременной обработки большого количества запросов с низким временем отклика, использует движок V8. Механизмы запросов построены на событиях, что делает невозможным заблокировать работающий движок - это огромное преимущество для операций ввода-вывода, подключения к базам данных, чтения дисков и др., обеспечивается высокая производительность, т.к. используется модель event-driven non-blocking IO, в которой есть только один поток обслуживающий клиентские запросы.

Помимо этого, Node.js обладает большим количеством модулей различного назначения, что позволяет использовать готовые решения, но при этом дает свободу при разработке. В проекте были использованы следующие Node.js модули:

? nodemon - модуль, применяемый для отслеживания изменений файлов в каталоге, в котором Node был запущен. В случае их изменений, он автоматически перезапускает Node приложение;

? express - минималистичный и гибкий web-фреймворк для приложений Node.js, предоставляющий обширный набор функций для web-приложений.[8]. Express является базовым пакетом, для создания http-серверов, позволяющий быстро и удобно создать сервер, содержит огромное количество утилит, упрощающих работу по созданию web-приложения.

? ejs - удобный JavaScript шаблонизатор, движок рендеринга, который поддерживает наследование шаблонов [9]. Для использования данного шаблонизатора файлы разметки страницы html или xml необходимо создавать с разрешением .ejs, в данном файле могут присутствовать фрагменты кода на языке JavaScript внутри тегов <% и >%. В результате обработки JavaScript-кода библиотекой ejs, код исполняется и заменяется кодом на языке HTML/XML.

? MongoDB - документо-ориентированная система управления базами данных (СУБД) с открытым исходным кодом, не требующая описания схемы таблиц. Написана на языке C++;

? mongoose - фреймворк, для удобной работы с MongoDB;

? Multer- модуль загрузки данных для загрузки файлов.

? fluent-ffmpeg - библиотека абстрагирующая комплексное использование командной строки FFmpeg в простой в использовании модуль Node.js.

3.2 База данных

Базы данных являются неотъемлемой частью большинства современных web- приложений. В данный момент существуют разнообразные базы данных, различные по структуре и прочим характеристикам. Выбор базы должен обеспечивать быструю и корректную работу приложения.

В качестве базы данных для разрабатываемого Web-приложения была выбрана документо-ориентированная система управления базами данных MongoDB. Данная система обладает рядом преимуществ перед обычными SQL базами данных, прежде всего благодаря тому, что MongoDB является NoSQL базой данных, что означает, что она не требует описания схемы таблиц. В NoSQL отсутствуют такие ограничения свойственные реляционной модели как недостаточная производительность, обеспечены более легкие средства доступа к данным и их хранения. Основное отличие от MySQL заключается в том, что в MongoDB запросы пишутся на BSON (бинарный JSON), а не на языке SQL, что означает, что работа с этой системой может осуществляться через JavaScript выражения. Помимо этого, MongoDB может работать практически на всех системах - Linux, Windows, OSX. MongoDB активно развивается: постоянно появляются обновления. Разработчики так же предоставляют хорошую документацию для начинающих.

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

Так же не маловажным аргументом является факт, что для Node.js существует модуль mongodb, позволяющий достаточно быстро добавлять базу данных в проект, а так же и модуль mongoose, позволяющий удобно и без особых сложностей управлять базой данных в проекте.

3.3 Выбор библиотек для обработки видео

Для обработки видео можно использовать различные библиотеки, такие как: мультимедийный фреймворк FFmpeg, библиотеку для кодирования и декодирования Libav, кроссплатформенный мультимедийный фреймворк GStreamer и др. Все они обладают незначительными отличиями при обработке аудио и видео.

В рамках данного проекта для обработки видео была выбрана кроссплатформенная open-source библиотека FFmpeg.

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

В состав FFmpeg входят такие библиотеки как:

? libavcodec - библиотека, содержащая множество аудио и видео кодеков;

? libavformat - библиотека мультиплексирования/ демультиплексирования;

? libswscale - библиотека для масштабирования видео;

? libpostproc - библиотека стандартных подпрограмм по обработке видео.

Таким образом, возможности FFmpeg достаточно обширны и хорошо подходят для разработки данного приложения. Библиотеку легко добавить в проект благодаря модулю Fluent-ffmpeg.

3.4 Выводы

В данной главе рассмотрены инструменты, методы, фреймворки и библиотеки необходимые для разработки Web- приложения.

Для разработки пользовательского интерфейса было решено использовать: Jquery, Ajax, Bootstrap, CSS3. Для разработке серверной части приложения использовать: Node.js, Socket.io, MongoDB, Ffmpeg.

Данные инструменты позволяют в полной мере реализовать необходимую функциональность разрабатываемого Web-приложения.

4. Разработка Web-приложения

В данной главе будет рассмотрена последовательность разработки приложения. Для удобства, а так же с целью экономии средств на этапе разработки, разработка будет осуществляться на локальном сервере.

4.1 Установка необходимых фреймворков и модулей

Прежде всего, необходимо установить Node.js. Сделать это можно скачав дистрибутив для своей операционной системы с официального сайта [10]. После скачивания запустить установку и следовать инструкциям по установке. Вместе с Node будет установлен стандартный пакетный менеджер npm, с помощью которого можно будет легко и быстро устанавливать Node модули.

После установки необходимо создать рабочий каталог, далее с помощью команды npm init создать в этом каталоге файл package.json. В процессе создания будет предложен ряд вопросов, в зависимости от ответов на которые, будет сформирован файл.

После этого можно будет приступить к установке модулей. Первым модулем необходимо установить express, который позволит нам создать http сервер без особых сложностей. Сделать это можно с помощью команды:

npm install express --save.

Ключ --save означает, что нужно добавить данный модуль в раздел dependencies файла package.json. Таким же образом необходимо установить другие необходимые модули, такие как: body-parser, ejs, mongodb, fluent-ffmpeg, multer, socket.io. Данные модули по умолчанию будут устанавливаться в папку под названием node_modules и именно там Node будет их искать при использовании в проекте.

Так же для удобства разработки и отладки, необходимо установить модуль nodemon, который позволит не перезапускать разрабатываемое приложение при каждом изменении. Данный модуль следит за файлами в директории проекта и перезапускает Node приложения, если произошли какие-то изменения. Для работы с данным модулем необходимо установить его глобально (npm дает возможность установить модуль глобально, т.е. данный модуль будет доступен из любого места.). Для установки модуля глобально необходимо использовать ключ -g в команде установки:

npm install -g nodemon

Далее в папке с проектом создадим папки public и views, в которых будут храниться статические файлы и файлы с разметкой страниц соответственно.

4.2 Создание локального сервера

Действия, описанные в предыдущей главе, являлись подготовкой к началу разработки. Теперь необходимо создать сам сервер. Для этого, в корне папки с проектом необходимо создать файл app.js, который в дальнейшем будет запускаться для включения сервера. В данном файле необходимо подключит модули express и body-parser. Сделаем это с помощью функции require, указав необходимые модули в качестве аргумента:

далее создадим сервер следующим способом:



В данном случае будет создан локальный сервер, прослушивающий локальный порт 3000.

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

Сделать это можно следующим образом:

Затем в app.js подключим файл routes.js, в котором укажем правила, по которым будут обрабатываться Post и Get запросы. В качестве аргументов необходимо указать переменные app и server.

В итоге получим код, приведенный в Приложении 1.

4.3 Обработка POST и GET запросов

В предыдущей главе было описано создание “статического” сервера. Далее, в рамках разработки приложения, необходимо описать правила обработки Post и Get запросов.

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

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

Для удобства, обработка запросов будет описана в отдельном файле/модуле routes.js. Для того чтобы данный файл являлся модулем и мог быть подключен в app.js, необходимо написать в routes.js функцию module.exports = function(app){*} и весь код писать внутри данной функции.

Для обработки определённого Get запроса необходимо написать следующие выражение:

Функция get принимает в качестве параметров имя запроса и функцию с параметрами request, response. Данная конструкция означает, что код внутри функции будет выполнен, когда на сервер придёт Get запрос с заголовком /home. Далее необходимо сделать так, что бы при запросе /home пользователь получал страницу home.html для этого внутри функции с параметрами res и req необходимо написать:

В итоге при Get запросе /home сервер обработает страницу согласно разметке в home.ejs и пользователю будет отправлен html разметка данной страницы.

Аналогично необходимо написать обработчики остальных Get запросов: /videdit - страницы видео редактора, /about - информационная страница и /projwin - страницы проектов. Обработка данных запросов будет реализована аналогично описанному выше, кроме страницы проектов.

Так как вид страницы проектов зависит от того, какие проекты уже были созданы, то есть от базы данных, то необходимо воспользоваться возможностями ejs шаблонизатора. В этом случае функция render будет выглядеть следующим образом:

Где projects переменная, содержащая массив названий проектов, projscr переменная, содержащая массив ссылок на проекты, а projprev переменная, содержащая массив ссылок на изображения.

Обработка Post запросов осуществляется аналогично обработке Get запросов и выглядит следующим образом:

Функция app.post так же принимает заголовок и функцию в качестве параметров. В данном проекте была реализованная обработка следующих Post запросов: /newprojcreate - запрос на создание нового проекта (добавление его в базу данных), /login - запрос на авторизацию/регистрацию, /registr - запрос на регистрацию нового пользователя, /upload - запрос на загрузку файла на сервер.

Функция redirect перенаправляет указанный запрос, что позволяет не повторять один и тот же код несколько раз:

В итоге получим код, приведенный в Приложении 2.

4.4 Работа с Mongodb

Как было описано ранее MongoDB является NoSQL базой данный и не требует описания схемы таблиц, а данные хранятся в качестве документов, представляющих собой JSON-подобную структуры, которые объединяются в коллекции. Поэтому сначала необходимо определиться какие данные необходимо хранить, и какие коллекции эти данные будут образовывать. Так как база данных нам необходима исключительно для хранения списка пользователей и их проектов, нам будет достаточно одной коллекции users.

Экземпляр коллекции users должен обладать следующими атрибутами:

? имя пользователя (name);

? пароль (password);

? электронный адрес (e-mail);

? состояние подтверждения (accept);

? проекты (projects).

В свою очередь, массив объектов “проекты” содержит объекты со следующими атрибутами:

? имя проекта;

? дата создания/изменения;

? ссылка на обложку;

? содержание (xml код страницы).

На рисунке 14 представлена структура базы данных.



Рис. 14. Структура базы данных

Для начала использования необходимо установить MongoDB.

После чего создать директорию data для данных.

Теперь можно запустить базу данных, для этого необходимо запустить mongod, который обычно находится в папке: C:\Program Files\MongoDB\Server\3.2\bin.

Далее, не закрывая консоль с mongod, в новой командной строке запустить mongo и создать коллекцию users с помощью команды:

db.createCollection("users")

и сделать её используемой:

use users.

Посмотреть уже созданные коллекции можно с помощью команды:

show dbs

и вывести содержимое коллекции:

db.collecton.find()

где collecton - имя коллекции (в нашем случае users).

Внутри функции find() можно задавать параметры поиска (фильтры).

Например, в результате выполнения команды:

db.users.find({name: “Alex”})

будет выведен только пользователь с именем Alex.

Для использования базы данных в проекте, необходимо подключить модули mongodb и mongosed, как было показано ранее с другими модулями. Работа с базой данных осуществляется при поступлении определённых Post запросов, поэтому данные модули понадобятся в routeres.js.

После подключения модулей создадим переменные MongoClient и url:

При запросе на регистрацию необходимо создать новый экземпляр коллекции. Для этого, внутри функции обрабатывающей Post запрос /registration напишем:

Сначала объявим переменные: имя пользователя, пароль, е-мейл и присвоим им данные, которые возьмём из формы (строка 1-3). Далее, создадим соединение с базой данных (строка 4). Функция connect в качестве параметров принимает url, и функцию с параметрами err и db внутри которой можно работать с базой данных. Далее с помощью функции find будем искать пользователя с указанным именем (строка 6), выполним проверку успешности поиска (строка 7). Если объект найден, то это означает, что пользователь с таким именем уже существует, о чем отправим сообщение (строка 8). В случае неуспеха при поиске, добавляем в базу данных пользователя с заданными параметрами (строка 11) и перезапускаем страницу (регистрация завершена).

Добавим новый проект текущему пользователю в базу данных следующем образом:

Сначала объявляются переменные: имя проекта, текущая дата (строка 1-2). Далее создается соединение с базой данных (строка 3). Функция connect в качестве параметров принимает url, и функцию с параметрами err и db внутри которой можно работать с базой данных. Далее с помощью функции find находим пользователя с указанным именем (строка 5), далее добавляем в массив проектов данного пользователя новый проект (строка 6) после чего переходим на странице редактирования (строка 9).

a. 

4.5 Вёрстка страниц

Прежде чем приступить к вёрстке страниц, необходимо сделать полноценные макеты. В рамках данного проекта с помощью Adobe Photoshop были созданы psd макеты, на основе которых была осуществлена вёрстка страниц. На рисунке 15 приведен макет главной страницы, разрабатываемого приложения.

Рис. 15 PSD макет главной страницы

Страницы Web- приложения были созданы с помощью стандартных языков разметки страниц HTML и CSS.

При вёрстке страниц использовался шаблонизатор ejs, который дал некоторые возможности при вставке информации из базы данных. Тем не менее, разметка страниц (файлы разметки) почти не отличается от стандартных файлов разметки на языке HTML. Стили так же были описаны на стандартном языке CSS.

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

С помощью вставок JavaScript кода необходимо создать список объектов в зависимости от количество созданных проектов.

Для простоты разработки использовались различные Bootstrap значки и элементы, такие как выпадающие меню. В соответствии с описанием на сайте Bootstrap: для использования Bootstrap значков необходимо создать тег span с классом, соответствующим названию иконки (названия можно увидеть на сайте Bootstrap [11]).

Пример вставки значка “плюс”:

Пример вставки выпадающего меню:

В результате вёрстки были получены шаблоны страниц (папка views):

? home.ejs;

? projwin.ejs;

? videdit.ejs;

? info.ejs.

А так же файлы стилей(public/css):

? home.css;

? projwin.css;

? videdit.css;

? info.css;

? main.css;

? font.css;

? media.css.

4.6 Разработка пользовательского интерфейса видео редактора

При реализации пользовательского функционала видео редактора был создан ряд скриптов, написанных на JavaScript с использованием следующих библиотек:

? JQuery;

? Ajax;

? Iutil;

? Socket.io.

В соответствии с разработанными ранее требованиями, к функциональным возможностям, макетам интерфейса и свёрстанным страницам были реализованы следующие функции:

? перетаскивания видео\аудио на тайм-лайн;

? масштабирования элементов на тайм-лайне;

? удаления элементов и тайм-лайнов;

? загрузки файлов;

? воспроизведения\остановки видео;

При этом были использованы разнообразные функции вышеперечисленных библиотек.

4.7 Структура проекта

Готовый проект представляет собой наборы:

? серверных и пользовательских скриптов;

? файлов разметки и стилей страниц сайта;

? использованных модулей и библиотек;

? файлов базы данных.

В результате разработки был получен проект, имеющий следующую структуру:

? node_modules - содержит модули, используемые в проекте;

? public - содержит публичные файлы;

_ css - содержит файлы стилей;

_ js - пользовательские скрипты;

_ img - содержит изображения;

_ fonts - содержит шрифты;

? views - содержат шаблоны с разметкой страниц;

_ home.ejs - шаблон главной страницы;

_ projwin.ejs - шаблон страницы проектов;

_ videdit.ejs - шаблон страницы редактора;

_ info.ejs - шаблон информационной страницы;

? upload - папка с файлами загружаемые пользователя;

? data - папка с файлами базы данных;

? app.js - файл сервера;

? package.json - конфигурационный файл;

? routes.js - модуль обработки Post\Get запросов.



4.8 Запуск и отладка сервера

Запускать сервер необходимо через консоль (командную строку) следующей командой:

node app.js

После чего можно увидеть как приложение работает, введя в строку поиска браузера http://localhost:3000/.

Для удобной отладки рекомендуется запускать приложение с помощью nodemon (интерфейса\модуля):

nodemon app.

4.9 Итоги