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

Dart – язык программирования общего назначения от компании Google, который предназначен прежде всего для разработки веб-приложений (как на стороне клиента, так и на стороне сервера) и мобильных приложений. Компания Google в 2015 году представила новую стратегию продвижения Dart, который изначально претендовал на роль прогрессивной замены JavaScript. Решено не привязывать Dart к браузеру и отказаться от идеи интеграции виртуальной машины Dart в Chrome. Разработка будет сосредоточена на применении Dart в качестве промежуточного языка, компилируемого в JavaScript.

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

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

Существующая клиентская часть системы видеонаблюдения разработана на платформе Wasaby.

Wasaby — это модульный JavaScript-фреймворк для создания веб-приложений. Его цель — обеспечить продуктивную разработку интерфейса из готовых визуальных компонентов-контролов. Появился в результате разработки одного из крупнейших в России веб-приложений электронного документооборота и отчетности и в данный момент активно развивается.

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

• Инфраструктура представления. Библиотека, позволяющая собрать "каркас" веб-приложения; содержит набор правил, техник и решений, допустимых при разработке прикладных решений. Определяет понятие контрола, как слоя ViewModel в парадигме MVVM (Model-View-ViewModel), а также правила logicless-шаблонизации в рамках слоя View.

• Типы, структуры данных и коллекции. Набор различных типов данных и операций над ними. Определяет понятие модели данных. Данная концепция позволяет выделить вычисления логики в отдельный слой Model, оставляя код шаблонов пользовательского интерфейса чистым.

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

• Маршрутизация. Библиотека, позволяющая описать маршрутизацию приложения в декларативном виде.

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

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

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

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

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

Рисунок 4.2.1 – Схема взаимодействия модулей системы видеонаблюдения

4.3. Описание структур данных

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

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

Рисунок 4.3.1 – Информационная модель

4.4. Описание компонента

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рисунок 4.5.1 – Схема жизненного цикла компонента Wasaby

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

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

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

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

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

Продолжение таблицы 2

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

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

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

Конфигурация колонок columns содержит следующие используемые поля.

Таблица 4 – Поля конфигурации колонок таблицы

Продолжение таблицы 4