Материал: ПЗ МО-417 Шакиров Айдар 24.06

Приложение а Техническое задание

1. Введение

Разрабатываемый программный веб-компонент (далее компонент) должен упростить работу с событиями системы видеонаблюдения программного продукта «СБИС Видеонаблюдение».

2. Основания для разработки

Основанием для разработки компонента является задание на выпускную квалификационную работу.

3. Назначение программы

Компонент предназначен для упрощения работы с событиями в системе видеонаблюдения программного продукта «СБИС Видеонаблюдение» компании ООО «Компания» Тензор», а также для повышения эффективности этого продукта.

4. Требование к программе

4.1. Требование к функциональным характеристикам

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

- возможность просмотра событий системы видеонаблюдения в виде записей таблицы;

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

4.2. Требования к организации входных данных

Входные данные будут предоставляться:

- компонентом видеоплеера (информация о камере);

- подсистемой событий (информация о событиях по камере).

5. Требования к формированию выходных форм и документов

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

4.4. Требования к надежности программы

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

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

4.5. Требование к составу и параметрам технических средств

Поддерживаемые ОС:

Windows 7+, iOS 13+, iPadOS 13+, MacOS 10.15+, Android 9+, Linux CentOS Stream 8, CentOS 7.5‑7.7, Ubuntu 20.04+, Mint 19.3+, OpenSUSE 15.3+.

Поддерживаемые архитектуры:

• 32-разрядная (x86, arm);

• 64-разрядная (x64, arm64).

Также для обеспечения работоспособности приложения допустимыми являются характеристики:

• наличие устройств ввода (клавиатура, мышь/тачпад)

• Оперативная память объемом не менее 2 ГБ;

• Свободное место на жестком диске не менее 2ГБ;

• Разрешение экрана не менее 1024х768 пикселей;

• Стабильное интернет-соединение с шириной канала не менее 2 Мбит/с;

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

Наличие любого из перечисленных интернет-браузеров последних версий: Google Chrome, Yandex Browser, Mozilla Firefox, Safari, Спутник, Opera, Microsoft Edge.

4.7. Требования к реализуемым методам решения

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

4.8. Требования к исходным кодам и используемым языкам программирования

Программный продукт должен быть реализован на платформе Wasaby на языке программирования TypeScript.

5. Требования к программной документации

В состав программной документации должны входить:

• Техническое задание;

• Руководство программиста;

• Руководство пользователя.

Приложение б Руководство программиста

1. Назначение и условия применения

1.1. Назначение программы

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

1.2. Функции, выполняемые программой

Компонент является частью веб-компонента видеоплеера и обладает следующими характеристиками:

- возможность просмотра событий системы видеонаблюдения в виде записей таблицы;

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

1.3. Условия, необходимые для выполнения программы

Наличие любого из перечисленных интернет-браузеров последних версий: Google Chrome, Yandex Browser, Mozilla Firefox, Safari, Спутник, Opera, Microsoft Edge.

2. Характеристики программы

2.1. Описание программы

Компонент является веб-компонентом Wasaby Framework и является частью веб-компонента видеоплеера.

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

2.2. Место в системе

Место компонента в системе демонстрирует концептуальная схема.

Рисунок А.1 – Концептуальная схема

2.3. Основной принцип работы

2.3.1. Введение

Программа написана в соответствии с паттерном MVVM.

MVVM состоит из трех компонентов: модели (Model), модели представления (ViewModel) и представления (View).

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

View или представление определяет визуальный интерфейс, через который пользователь взаимодействует с приложением. Применительно к Wasaby представление — это код в wml, который определяет интерфейс в виде кнопок, текстовых полей и прочих визуальных элементов. Однако иногда в файле связанного кода все же может находиться некоторая логика, которую трудно реализовать в рамках паттерна MVVM во ViewModel.

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

Философия Wasaby определяет понятие компонента или же контрола, как слоя ViewModel в парадигме MVVM.

2.3.2. Компонент Wasaby

Контрол (компонент) — это изолированная часть функционала, которую можно использовать повторно при разработке интерфейса. В файловой структуре представляет собой минимум два файла: TypeScript-модуль, где описана логика, и WML-шаблон, где описано представление.

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

Разработка контрола начинается с описания класса, который должен наследоваться от базового класса (UI/Base:Control). Описание класса помещается в отдельном TypeScript-модуле.

Неотъемлемой частью любого контрола является его визуальное отображение, которое описывают в шаблонах. В Wasaby для шаблонов создано собственное расширение файла — WML (Wasaby Markup Language). Для импорта шаблона используют директиву import, а импортированный шаблон передают в свойство _template. Для описания визуального отображения контрола применяется декларативный подход. Достаточно указать в каком месте шаблона следует вывести данные, а дальнейшую работу выполнит ядро Wasaby.

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

Рисунок А.2 – Фазы жизненного цикла компонента Wasaby

Опции — это объект, в котором хранятся параметры, переданные при инициализации контрола. Опции доступны только на чтение, и менять их можно только через родительский контрол. Такое ограничение введено для того, чтобы избежать излишнего усложнения кода. Изменение объекта опций подобно изменению аргументов, переданных в функцию. Опции должны меняться только в том случае, если родитель изменил параметры контрола. Wasaby по умолчанию синхронизирует изменения опций в одном направлении — из родительского контрола к дочерним. Для создания двусторонней синхронизации используют директиву bind.

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

2.4. Декомпозиция компонента

Для построения временной шкалы с сегментами используется компонент слайдера (Controls/slider:Base) с одним подвижным ползунком для выбора значения.

На вход компонент может получить следующие опции.

Таблица А.1 – Опции компонента слайдера

Для построения таблицы с записями событий используется компонент таблицы (Controls/grid:View). На вход компонент может получить следующие опции.

Таблица А.2 – Опции компонента таблицы