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

В данной дипломной работе в качестве клиентской библиотеки был выбран фреймворк AngularJS, а в качестве серверной технологии был выбран фреймворк Ruby on Rails.

Рассмотрим подробнее реализацию клиентской и серверной части.

В настоящее время очень популярной становится концепция одностраничных web-приложений (Single page application). При таком подходе все необходимое клиенту для работы подгружается при первом обращении пользователя к странице. В дальнейшем клиент подгружает только данные при помощи технологий Ajax, WebSocket и др.

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

Роутинг Авторизация Аутентификация

Сам фреймворк задает структуру приложения. В нем поддерживаются следующие сущности:

Контроллеры Директивы Сервисы Фабрики Провайдеры

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

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

В качестве сборщика проекта был использован инструмент grunt. Он позволяет настроить параметры сборки проекта. С его помощью javascript файлы уменьшаются, упаковываются в один для уменьшения времени загрузки. Каскадные таблицы стилей, написанные с использованием инструмента SASS, компилируются в CSS. В комплекте с grunt идет базовые web-сервер. Кроме того, концепция данного сборщика позволяет писать собственные скрипты под нестандартные задачи.

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

Для ускорения разработки, вместо языка JavaScript используется язык CoffeeScrpit. Его синтаксис очень близок к синтаксису языка Ruby, что делает его использованием приятным в связке с серверным фреймворком Ruby on Rails. Основной особенность языка CoffeeScript является контроль вложенности посредством отступов. Данная особенность сближает его с языком Python. Так же по умолчанию переменные создаются в локальной области видимости. Ко всему прочему стоит добавить, что исходный код программы на CoffeeScript компилируется в JavaScript, причем итоговый скрипт получается достаточно читабельным, что очень важно при отладке приложения.

Рассмотрим основные программные компоненты системы.

Пользовательский интерфейс списка проектов описан выше. Рассмотрим программную реализацию списка проектов на клиенте.

Для начала надо выделить пользователю определенный URL, по которому будет доступна данная страница. Делается это в файле app. js и выглядит следующим образом (некоторые детали, не относящиеся к данному маршруту были опущены).

'use strict';

angular

  .module('bagtrackerFrontApp', [

  'ngAnimate',

  ......

  ])

  .config(function ($routeProvider) {

  $routeProvider 

  .when('/projects', {

  templateUrl: 'views/projects. html',

  controller: 'ProjectsCtrl',

  controllerAs: 'projects'

  })

  })

  .config(function($authProvider) {

...

  });

Как можно заметить, в главных настройках проекта определен маршрут “/projects”, которому соответствует контроллер ProjectsCtrl и представление “views/projects. html”. Рассмотрим подробнее код контроллера

angular. module 'bagtrackerFrontApp'

  .controller 'ProjectsCtrl', ( $scope, $location, $http )->

  $scope. projects = []

  $http. get( 'api/projects' ).then ( data )->

  $scope. projects = data. data

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

Так же данный пример демонстрирует основные подходы при работе с фреймфорком Angular. В первой строке объявляется название модуля, в рамках которого будет создан данный контроллер. Второй строкой мы в начале непосредственно объявляем контроллер и указываем, какие зависимости ему необходимы. В нашем случае это следующие зависимости:

$scope - локальная область видимости контролера, в рамках которого отслеживаются изменения данных $location - сервис для работы с переходами по URL. $http - сервис ajax-запросов

В данном случае при загрузке контроллера мы делаем запрос к серверу для получения списка проектов. После успешного получения данные сохраняются в модель $scope. projects. Рассмотрим представление, с помощью которого данные о списке проектов отображаются пользователю

<a href="#/project_create">Создать проект</a>

<table class="table" >

  <thead>

  <tr>

  <td>id</td>

  <td>Название проекта</td>

  </tr>

  </thead>

  <tbody ng-repeat="project in projects" >

  <tr>

  <td ><a href="#/project/{{project. id}}" ng-bind="project. id"></a></td>

  <td ng-bind="project. name"></td>

  </tr>

  </tbody>

</table>

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

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

Серверная часть, как уже было сказано, написана с использованием фреймворка Ruby on Rails. На данный момент это одной из самых мощных решений для разработки веб-приложений. Написано большое количество готовых библиотек и компонентов для данного фреймворка. Данная технология достаточно зрелая, однако она до сих пор активно развивается.

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

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

За список проектов отвечает модель Project, выглядит она следующим образом

class Project < ActiveRecord::Base

  has_many :tasks

end

В моделях Ruby on Rails не хранятся в явном виде поля. Основываясь на соглашении об именовании моделей, имя модели, если не сказано иного, используется в качестве имени таблицы. Структура таблицы таким образом берется из БД. В моделях же отражены только связи с другими моделями. В данном примере, проект связан с сущностью Задачи связью один-ко-многим.

Контроллер для работы со списком проектов выглядит следующим образом

class Api::ProjectsController < ApplicationController

  before_action :set_project, only: [:show, :update, :destroy]

  # GET /projects

  # GET /projects. json

  def index

  @projects = Project. all

  render json: @projects

  end

  # GET /projects/1

  # GET /projects/1.json

  def show

  render json: @project

  end

  # POST /projects

  # POST /projects. json

  def create

  @project = Project. new(project_params)

  if @project. save

  render json: @project, status: :created

  else

  render json: @project. errors, status: :unprocessable_entity

  end

  end

  private

  def set_project

  @project = Project. find(params[:id])

  end

  def project_params

  params. permit(:name)

  end

end

В данном контроллере представлено три метода - show, create и index.

Метод index возвращает список проектов Meтод show возвращает информацию о конкретном проекте Метод crete создает новый проект

В данном контроллере используется модель Project, которая описана выше.

Остальные контроллеры основываются на данной архитектуре и представлены в приложении.

Заключение

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

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

Были решены следующие задачи:

Изучены возможности языка JS; Рассмотрен принцип взаимодействия при использовании технологии RestFull API; Разработано web-приложение для тестирования ПО; Проведен анализ выполненной работы.

В процессе работы были получены новые знания о разработке одностраничных приложений с использованием Angular и Ruby on Rails. Данное приложение в дальнейшем можно расширить более сложной системой аутентификации (модератор, адмнинистратор, программист, тестировщик), которая поможет разделить права между участниками процесса разработки программного обеспечения.