Интерактивный видеоконтент позволяет своим зрителям взаимодействовать с контентом и влиять на дальнейшее его повествование. Это уникальное направление видеоконтента, которое активно развивается в последнее время в различных сферах.
В данной статье мы хотим познакомить с вас платформой INTERСHOICE.
INTERСHOICE - это платформа для создания интерактивного видео-контента, созданная студентами магистратуры УрФУ, ИРИТ-РтФ.
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 класса (объекта):
- User - пользователь;
Класс user содержит атрибуты:
- Уникальный идентификатор пользователя (id)
- Имя и фамилию (firstName, lastName)
- Контактную информацию (email)
- Данные о пользователе (bitrhDate)
- Пароль (password)
- Файл аватара (avatar)
- Дату создания профиля (createdAt)
- Информацию о последнем входе (lastLoginedAt)
- Проекты пользователя (projects)
И следующий набор операций:
- Удаление пользователя (remove)
- Обновление данных пользователя (update)
- Обновление аватара (updateAvatar)
Диаграмма классов допускает различные виды отношений. В нашей диаграмме мы использовали отношение между классами — включение, в объектно-ориентированном программировании различают два вида этого отношения — композицию и агрегацию. Мы использовали композицию - это разновидность включения, когда объекты неразрывно связаны друг с другом (время их жизни совпадает). Отношение композиции обозначается закрашенным ромбом, который рисуется со стороны включающего класса — так, класс Projects включает в себя класс User, т.к. проект всегда имеет одного автора (то есть User-a).
- Projects - проект;
Класс projects содержит атрибуты:
- Уникальный идентификатор пользователя (id)
- Дату создания проекта (createdAt)
- Дату обновления проекта (updatedAt)
- Название проекта (name)
- Краткое описание проекта (shortDescription)
- Полное описание проекта (fullDescription)
- Превью проекта (overview)
- Сцены (scenes)
- Пользователя (author)
И следующий набор операций:
- Удаление проекта (remove)
- Обновление проекта (update)
Класс Projects включает в себя класс Scene, проект может иметь множество сцен.
- 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 и под него создается директория на диске, создавая проекты также создаются соответствующие записи в БД и директории. Затем пользователь создавая сцена в проекте создает граф, который хранится в бд как сцена, у которой есть массив дочерних сцен и массив родительских сцен. Тем самым она содержит полную информацию о том какими путями в нее можно попасть и какими путями можно выйти. Загружаемые видео хранятся в директории проекта.
Сотрудничество
Подробнее с нашим проектом вы можете ознакомиться на сайте https://interchoice.ru
Если ты хочешь создать интерактивный-видео контент, то переходи по ссылке и начинай творить. По вопросам сотрудничества пишите на почту phanfisahardina@gmail.com. Спасибо, что дочитали до конца!
