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

Angular использует простые Объекты JavaScript для синхронизации Модели и Вида, в результате чего обновлять любой из них легко и приятно. Angular преобразовывает данные в JSON и лучше всего общается методом REST. При помощи такого подхода проще строить фронтенд-приложения, потому что всё состояние приложения хранится в браузере, а не передаётся с сервера по кусочкам, и нет опасения, что состояние будет испорчено или потеряно.

Связываем мы эти значения через выражения Angular, которые доступны в виде управляющих шаблонов. Также мы можем связывать Модели через атрибут под названием ng-model. Angular использует свои атрибуты для разных API, которые обращаются к ядру Angular.

DI – шаблон разработки программ, который определяет, как компоненты связываются со своими зависимостями. Инъекция — это передача зависимости к зависимому Объекту, и эти зависимости часто называют Сервисами. В AngularJS мы хитрым образом используем аргументы функции для объявления нужных зависимостей, а Angular передаёт их нам. Если мы забудем передать зависимость, но сошлёмся на неё там, где она нужна нам, Сервис будет не определен и в результате произойдёт ошибка компиляции внутри Angular. Но не волнуйтесь, angular выбрасывает свои ошибки и они очень просты в отладке.

В приложении на одну страницу (SPA) либо весь необходимый код (HTML, CSS and JavaScript) вызывается за одну загрузку страницы, либо нужные ресурсы подключаются динамически и добавляются к странице по необходимости, обычно в ответ на действия пользователя. Страница не перезагружается во время работы, не передаёт управление другой странице, хотя современные технологии из HTML5 позволяют одному приложению работать на нескольких логических страницах. Взаимодействие с SPA часто происходит при помощи фонового общения с сервером.

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

Времена изменились, браузер хранит состояние приложение, сложная логика и фреймворки приобрели популярность. AngularJS хранит состояние в браузере и передаёт изменения при необходимости через Ajax (HTTP) с использованием методом GET, POST, PUT и DELETE. Красота в том, что сервер может быть независим от фротенда, а фронтенд – от сервера. Те же самые сервера могут работать с мобильными приложениями с совершенно другим фронтендом. Это даёт нам гибкость, так как на бэкенде мы работаем с JSON-данными любым удобным нам способом на любом серверном ЯП.

У Angular есть разные API, но структура приложения обычно одна и та же, поэтому почти все приложения строятся сходным образом и разработчики могут включаться в проект без усилий. Также это даёт предсказуемые API и процессы отладки, что уменьшает время разработки и быстрое прототипирование. Angular построен вокруг возможности тестирования («testability»), чтобы быть наиболее простым как в разработке, так и в тестировании.

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

У приложения есть один модуль app.

angular. module('app', []);

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

Для создания Controllers, Directives, Services и других возможностей нам надо сослаться на существующий модуль. В синтаксисе есть незаметное различие – мы не используем второй аргумент.

angular. module('app');

Модули могут храниться и вызываться и через переменную. Вот пример хранения модуля в переменной.

var app = angular. module('app', []);

Теперь мы можем использовать переменную app для построения приложения.

Для описания того, где приложение находится в DOM, а обычно это элемент <html>, нам надо связать атрибут ng-app с модулем. Так мы сообщаем Angular, куда подгрузить наше приложение.

<html ng-app="app">

  <head></head>

  <body></body>

</html>

Если мы грузим файлы с JavaScript асинхронно, нам надо подгрузить приложение вручную через angular. bootstrap(document. documentElement, ['app']);.

Одно из основных понятий в программировании – область видимости. В Angular область видимости – это один из главных объектов, который делает возможным циклы двусторонней связи данных и сохраняет состояние приложения. $scope – довольно хитрый объект, который не только имеет доступ к данным и значениям, но и предоставляет эти данные в DOM, когда Angular рендерит наше приложение. Представьте, что $scope – это автоматический мост между JavaScript и DOM, хранящий синхронизированные данные.

Это позволяет проще работать с шаблонами, когда мы используем при этом синтакс HTML, а Angular рендерит соответствующие значения $scope. Это создаёт связь между JavaScript и DOM. В общем, $scope играет роль ViewModel. $scope используется только внутри Контроллеров. Там мы привязываем данные Контроллера к Виду. Вот пример того, как мы объявляем данные в Контроллере:

$scope. someValue = 'Hello';

Чтобы это отобразилось в DOM, мы должны присоединить Контроллер к HTML и сообщить Angular, куда вставлять значение.

<div ng-controller="AppCtrl">

  {{ someValue }}

</div>

Перед вами концепция области видимости Angular, подчиняющаяся некоторым правилам JavaScript в плане лексических областей видимости. Снаружи элемента, к которому присоединён Контроллер, данные находятся вне области видимости – так же, как переменная вышла бы за область видимости, если б мы сослались на неё снаружи её области видимости. Мы можем привязать любые типы JavaScript $scope. Таким образом мы берём данные от сервиса, общающегося с сервером, и передаём их во View, слой презентации. Чем больше мы создадим Контроллеров и связей с данными, тем больше появляется областей видимости. Разобраться в их иерархии ничего не стоит – здесь нам поможет переменная $rootScope

4 Практическая часть

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

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

Данное приложение имеет клиент-серверную архитектуру. Физически клиент и сервер написаны отдельно с использованием отличных языков и технологий. В частности, клиент данного приложения написан с использованием платформы Angularjs, тогда как сервер написан с использованием фреймфорка Ruby on Rails. Данный подход имеет несколько преимуществ

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

Последний пункт возможен благодаря, так называемому, RESTfull API. REST (сокр. от англ. Representational State Transfer — «передача репрезентативного состояния») — метод взаимодействия компонентов распределённого приложения в сети Интернет, при котором вызов удаленной процедуры представляет собой обычный HTTP-запрос (обычно GET или POST; такой запрос называют REST-запрос), а необходимые данные передаются в качестве параметров запроса. Этот способ является альтернативой более сложным методам, таким как SOAP, CORBA и RPC.

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

При использовании RESTfull API удобно оперировать данными как ресурсами, к которым можно применять операции чтения, добавления, удаления и редактирования. В англоязычной литературе набор таких операция описывается термином CRUD (create, read, update, destroy). Каждое действие стандартизировано в рамках интерефейса. На примере нашего приложения рассмотрим, как организован API.

В качестве примера возьмем ресурс Проекты (projects). Т. к. общение клиента и сервера происходят по протоколу http, то для отправки команд можно использовать различные методы передачи (GET, POST, PUT, DELETE). Вот как выглядит API для управления ресурсом projects

Управление ресурсом projects посредством RESTfull API

Метод	URL	Действие
GET	/projects	Возвращает список проектов
POST	/photos	Создает новый проект
GET	/photos/:id	Возвращает проект с ID = :id
PUT	/photos/:id	Обновляет проект с ID = :id
DELETE	/photos/:id	Удаляет проект с ID = :id

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

Общий вид архитектуры приложения с использованием RESTfull API отражен на рисунке 4.1