Интерактивный видеоконтент позволяет своим зрителям взаимодействовать с контентом и влиять на дальнейшее его повествование. Это уникальное направление видеоконтента, которое активно развивается в последнее время в различных сферах.

В данной статье мы хотим поделиться опытом создания платформы для проектирования интерактивного видеоконтента.

Use-case

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

Прецеденты нашего пользователя:

• Основные для любой системы (регистрация, авторизация, выход из системы)

• Особые (создание проекта и просмотр интерактивного видео)

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

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

Добавленную сцены пользователь может отредактировать или удалить.

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

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

Добавим ещё две сцены с разными котиками и свяжем с родительской сценой “Первый котик”.

На графе можно легко понять сценарий видео. Если пользователь нажмет на кнопку “Пылесос”, то в конце видео он увидит котика на пылесосе. Или котика на диване, если нажмет на кнопку “диван”. Ниже пример готов

Стек технологий

Для реализации проекта нам понадобился следующий стек-технологий:

Front-end: React

Back-end: Docker, mssql, C#, postman, swagger

FRONTEND часть

Клиентская часть сервиса реализована на языке TypeScript (типизированная версия языка JavaScript, разработанная компанией Microsoft), который позволяет писать типизированный код, что делает его проще в обслуживании и доработке, так как на каждом этапе разработки и в каждой строчке кода компилятор (соответственно, и разработчик) знает, какой тип данных содержится в определённой переменной или возвращается функцией.  В качестве фреймворка был выбран React.

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

Для автоматизации рутинных процессов разработки и для упрощения написания кода, был установлен и настроен ESLint, а для стилевого однообразия кода был настроен Prettier. В связке Prettier и ESLint позволяют увидеть стилистические отклонения или ошибки ещё на этапе написания кода, в IDE (кстати, для разработки использовался VS Code, так как имеет множество полезных расширений, включая ESLint).

Клиентская часть приложения спроектирована в соответствии с принципом KISS (Keep it simple, stupid), что проявляется в простоте конкретного компонента и структуры проекта в целом. Этот принцип позволяет сделать создание и доработку функционала новоприбывшими разработчиками быстрее и эффективнее, а также снижает порог для разработчиков, делающих небольшие доработки в конкретные функции или компоненты приложения.

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

В качестве стартового UI-kit был выбран Material-UI от компании Google, так как отвечает требованиям приложения и содержит большинство базовых компонентов, используемых в проекте.

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

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

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

Итого. В рамках разработки MVP был полностью реализован основной пользовательский путь создания интерактивного кино, включающий регистрацию; авторизацию; создание проекта с загрузкой превью; создание, изменение, удаление и связку сцен, а также просмотр фильма. Также в целях ознакомления пользователей с сервисом была создана Landing-page с удобочитаемой информацией о сервисе.

Диаграммы классов UML

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

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

На нашей диаграмме изображены 3 класса (объекта):

1. User - пользователь;

Класс user содержит атрибуты:

• Уникальный идентификатор пользователя (id)

• Имя и фамилию (firstName, lastName)

• Контактную информацию (email)

• Данные о пользователе (bitrhDate)

• Пароль (password)

• Файл аватара (avatar)

• Дату создания профиля (createdAt)

• Информацию о последнем входе (lastLoginedAt)

• Проекты пользователя (projects)

И следующий набор операций:

• Удаление пользователя (remove)

• Обновление данных пользователя (update)

• Обновление аватара (updateAvatar)

Диаграмма классов допускает различные виды отношений. В нашей диаграмме мы использовали отношение между классами — включение, в объектно-ориентированном программировании различают два вида этого отношения — композицию и агрегацию. Мы использовали композицию - это разновидность включения, когда объекты неразрывно связаны друг с другом (время их жизни совпадает). Отношение композиции обозначается закрашенным ромбом, который рисуется со стороны включающего класса — так, класс Projects включает в себя класс User, т.к. проект всегда имеет одного автора (то есть User-a).

2. Projects - проект;

Класс projects содержит атрибуты:

• Уникальный идентификатор пользователя (id)

• Дату создания проекта (createdAt)

• Дату обновления проекта (updatedAt)

• Название проекта (name)

• Краткое описание проекта (shortDescription)

• Полное описание проекта (fullDescription)

• Превью проекта (overview)

• Сцены (scenes)

• Пользователя (author)

И следующий набор операций:

• Удаление проекта (remove)

• Обновление проекта (update)

 Класс Projects включает в себя класс Scene, проект может иметь множество сцен.

3. Scene - сцена;

Класс scene содержит атрибуты:

• Уникальный идентификатор пользователя (id)

• Дату создания сцены (createdAt)

• Дату обновления сцены (updatedAt)

• Название сцены (name)

• Название кнопки выбора (buttonName)

• Видео для сцены (video)

• Координаты сцены в графе (x, y)

• Проект (project)

• Родительскую сцену (parent)

• Дочернюю сцену (children)

И следующий набор операций:

• Удаление сцены (remove)

• Обновление сцены (update)

• Присвоение родителя (setParent)

• Добавление дочерней сцены (addChild)

• Удаление дочерней сцены (removeChild)

• Изменение видео сцены (updateVideo)

• Перемещение сцены в графе (move)

 Класс Scene включает в себя класс Projects, т.к. сцена всегда имеет один проект.

BACKEND часть

Back-end: Docker, mssql, C#

Бек часть реализована на языке C# на платформе asp.net core 3.1 так как она является LTS версией. LTS расшифровывается как Long-Term Support или длительный срок поддержки. Это значит, что приложение или операционная система будет получать обновления безопасности и иногда даже обновления функциональности в течение более длительного периода времени, чем обычно.

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

Преимущества LTS релизов:

• Программы получают обновления безопасности на протяжении длительного времени (например, для Ubuntu это пять лет);

• Тщательное тестирование;

• Нет серьёзных изменений, ломающих совместимость в обновлениях;

• У вас будет достаточно времени чтобы подготовиться к переходу на следующий LTS релиз.

Недостатки LTS релизов:

• Не содержат самых новых функций и возможностей;

• Нет самой поддержки самого нового оборудования;

• Нет самых последних версий программ.

Для налаживания контрактов между back и front частями был прикручен swagger. Swagger – это фреймворк для спецификации RESTful API. Его прелесть заключается в том, что он дает возможность не только интерактивно просматривать спецификацию, но и отправлять запросы – так называемый Swagger UI, вот так выглядит список реализованных методов, который генерируется автоматически swaggero-ом: 

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

В контракте видно, что был реализован стандартный набор ручек (контроллеров) для авторизации и регистрации, БД была выбрана сразу хостируемая в облаке что позволило не беспокоиться о ней в будущем. Используется БД mssql. Подключение к бд через NuGet пакеты Microsoft.EntityFrameworkCore.SqlServer и Microsoft.AspNetCore.Identity.EntityFrameworkCore. NuGet пакет представляет собой отдельный ZIP-файл с расширением .nupkg , который содержит скомпилированный код (DLL), другие файлы, связанные с этим кодом, и описательный манифест, включающий такие сведения, как номер версии пакета.

Для тестирования запросов использовался postman. Postman - это платформа API, позволяющая разработчикам проектировать, создавать, тестировать и повторять свои API. Запросы через Postman проходили успешно, а в БД появлялись новые записи, однако с фронта запросы отклонялись, пока не была настроена CORS политика. CORS политика - механизм, использующий дополнительные HTTP-заголовки, чтобы дать возможность агенту пользователя получать разрешения на доступ к выбранным ресурсам с сервера на источнике (домене), отличном от того, что сайт использует в данный момент.

Проблема больших данных

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

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

Также проблемой было хранений в бд массива сцен, вернее их GUID.  GUID - статистически уникальный 128-битный идентификатор. Решением стало хранения одной конкатинированной строки с guid'ами сцен. Редактирование осуществлялось путем редактирования этой самой строки.

Хостинг

Хостинг бек части реализован с помощью reg.ru. REG.RU -  крупнейший регистратор в России, входит в ТОП-10 регистраторов Европы и в ТОП-10 хостинг-компаний России. В целом этот сервис по большей части известен как качественный регистратор доменных имен, имеющий лицензию и предлагающий выгодные условия. Линейка тарифов как для виртуального хостинга, так и для серверов достаточно разнообразна. На всех тарифах виртуального хостинга доступно хранение 30 резервных копий, выбор панели управления — ISPmanager, cPanel, Plesk, PHP 5.1–7.1, Perl 5.10, Python 2.6, MySQL без ограничений по числу БД (кроме начального тарифа), двойная антивирусная проверка и автоматическая защита от DDoS. Сами тарифы хостинга делятся на эконом, скоростные:

VIP хостинг:

Для виртуального хостинга доступен тестовый период — 14 дней. Кроме того, за подтверждение номера телефона начисляется 200 бонусных баллов, которые можно потратить на что угодно. 1 балл = 1 рубль.

Виртуальные серверы есть на Linux OpenVZ, KVM и Windows XEN.

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

Плюсы Reg:

• Большой комплекс услуг. В одном месте можно зарегистрировать домен и получить хостинг.

• Круглосуточная адекватная техподдержка. Ответа на звонок не придется ждать долго.

• Нормальный уровень цен.

• Качественный контент на ресурсе — в том числе и обучающий.

• Возможность автоматической установки CMS на выбор.

Минус reg:

• Услуги регистрации доменов превалируют над услугами хостинга.

Деплой 

Деплой - это процесс выкладки новой версии сайта на сервер (или сервера). Этот процесс может быть довольно сложным и сильно зависит от используемых технологий. Для деплоя мы использовали web deploy через visual studio.

Web Deploy (инструмент веб-развертывания) - это инструмент от компании Microsoft, который значительно упрощает миграцию, управление и развертывание веб-серверов IIS, веб-приложений и сайтов.

Вот две причины, по которым стоит установить Web Deploy на своем сервере:

• Простая публикация приложений. Веб-разработчики, пишущие код в Visual Studio (интегрированная среда разработки) и WebMatrix (инструмент для разработки) могут использовать Web Deploy для публикации своих приложений на рабочий сервер. Если вы хотели бы предоставить своим клиентам возможность использовать этот эффективный и простой способ публикации, установите Web Deploy на свой сервер. 

• Новый рынок для ваших услуг хостинга. WebMatrix помогает пользователям найти подходящий хостинг-план в коллекции услуг хостинга на сайте Microsoft (каталог, в котором хостинг-провайдеры рекламируют свои предложения). Если вы хотите видеть свои хостинг-планы в этой коллекции, одним из требований является наличие у вас инструмента Web Deploy.

Итого

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