Разработка WEB-приложения для тестирования программного обеспечения

Рис. 4.10 - Внешний вид карточки задачи

В данной форме, помимо полного описания задачи, имеются теги, которые привязаны к задаче. Это позволяет получить краткую характеристику задачи без подробного изучения ее сути. Пользователь может перейти обратно на список задач при нажатии на ссылку “Список задач”.

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

Рис. 4.11 - Внешний вид интерфейса создания задачи.

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

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

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

В данной дипломной работе в качестве клиентской библиотеки был выбран фреймворк 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, которая описана выше.

Заключение

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

1. Создание проекта и просмотр списка доступных для данного пользователя проектов.

2. Создание и просмотр списка задач, привязанных к определенному проекту.

3. Создание тегов, необходимых для отмечания определенных свойств той или иной задачи.

4. Авторизация пользователей.

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

• Изучены возможности языка JS;

• Рассмотрен принцип взаимодействия при использовании технологии RestFull API;

• Разработано web-приложение для тестирования ПО;

• Проведен анализ выполненной работы.

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

Литература

1. Дмитриева, М. Самоучитель JavaScript [Текст]/ Дмитриева М. - СПб.: "БХВ-Петербург", 2012. - 506с.

2. Машнин, Т. Web-сервисы Java [Текст]/ Машнин Т. - СПб.: "БХВ-Петербург", 2012. - 560 с.

3. Ханссон, Д.Х. Гибкая разработка веб-приложений в среде Rails [Текст]/ Ханссон Д.Х. - СПб.: " Питер ", 2012. - 464 с.

4. Шелдон, Р. MySQL. Базовый курс [Текст]/ Шелдон Р., Мойе Д. - М.: "Вильямс", 2007. - 880 с.

5. Камер, Д.Э. Сети TCP/IP. Разработка приложений типа клиент/сервер для Linux/POSIX [Текст]/ Дуглас Э. Камер, Дэвид Л. Стивенс. - М.: " Вильямс", 2002. - 592 с.

6. Козловский, П. Разработка веб-приложений с использованием AngularJS [Текст]/ Козловский П. - М.: " ДМК-Пресс", 2014. - 394 с.

7. Тейт, Б. Ruby on Rails. Быстрая веб-разработка [Текст]/ Тейт Б., Ниббс К. - СПб.: "БХВ-Петербург", 2008. - 224 с.

Приложение А

Программный код

projects_controller.rb

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

# PATCH/PUT /projects/1

# PATCH/PUT /projects/1.json

def update

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

if @project.update(project_params)

head :no_content

else

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

end

end

# DELETE /projects/1

# DELETE /projects/1.json

def destroy

@project.destroy

head :no_content

end

private

def set_project

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

end

def project_params

Продолжение приложения А

params.permit(:name)

end

end

tags_controller.rb

class Api::TagsController < ApplicationController

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

# GET /tags

# GET /tags.json

def index

@tags = Tag.all

render json: @tags

end

# GET /tags/1

# GET /tags/1.json

def show

render json: @tag

end

# POST /tags

# POST /tags.json

def create

@tag = Tag.new(tag_params)

if @tag.save

render json: @tag, status: :created

Продолжение приложения А

else

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

end

end

# PATCH/PUT /tags/1

# PATCH/PUT /tags/1.json

def update

@tag = Tag.find(params[:id])

if @tag.update(tag_params)

head :no_content

else

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

end

end

# DELETE /tags/1

# DELETE /tags/1.json

def destroy

@tag.destroy

head :no_content

end

def findByName

tags = Tag.where("name like ?", "%#{params[:query]}%")

render json: tags

end

Продолжение приложения А

private

def set_tag

@tag = Tag.find(params[:id])

end

def tag_params

params.permit(:name, :query)

end

end

tasks_controller.rb

class Api::TasksController < ApplicationController

before_action :set_project

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

# GET /tasks

# GET /tasks.json

def index

@tasks = @project.tasks

render json: @tasks

end

# GET /tasks/1

# GET /tasks/1.json

def show

render json: @task

end

# POST /tasks

# POST /tasks.json

Продолжение приложения А

def create

@task = Task.new(task_params)

p task_params

p @task

if @task.save

#task_params[:tags].each do |el|

#@task.create_tag(tag_id: el)

#end

render json: @task, status: :created

else

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

end

end

# PATCH/PUT /tasks/1

# PATCH/PUT /tasks/1.json

def update

if @task.update(task_params)

head :no_content

else

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

end

end

# DELETE /tasks/1

# DELETE /tasks/1.json

def destroy

@task.destroy

head :no_content

end

private

def set_project

@project = Project.find params[:project_id]

end

def set_task

@task = Task.find(params[:id])

end

def task_params

params.permit(:name, :desc, :project_id, task_tags_attributes: [:tag_id])

end

end

routes.rb

Rails.application.routes.draw do

mount_devise_token_auth_for 'User', at: 'auth'

namespace :api do

resources :tags, except: [:new, :edit]

get "findTag/:query" => 'tags#findByName'

resources :projects do

resources :tasks, except: [:new, :edit]

end

end

# The priority is based upon order of creation: first created -> highest priority.

# See how all your routes lay out with "rake routes".

# You can have the root of your site routed with "root"

# root 'welcome#index'

# Example of regular route:

# get 'products/:id' => 'catalog#view'

# Example of named route that can be invoked with purchase_url(id: product.id)

# get 'products/:id/purchase' => 'catalog#purchase', as: :purchase

# Example resource route (maps HTTP verbs to controller actions automatically):

# resources :products

# Example resource route with options:

# resources :products do

# member do

# get 'short'

# post 'toggle'

# end

#

# collection do

# get 'sold'

# end

# end

# Example resource route with sub-resources:

Продолжение приложения А

# resources :products do

# resources :comments, :sales

# resource :seller

# end

# Example resource route with more complex sub-resources:

# resources :products do

# resources :comments

# resources :sales do

# get 'recent', on: :collection

# end

# end

# Example resource route with concerns:

# concern :toggleable do

# post 'toggle'

# end

# resources :posts, concerns: :toggleable

# resources :photos, concerns: :toggleable

# Example resource route within a namespace:

# namespace :admin do

# # Directs /admin/products/* to Admin::ProductsController

# # (app/controllers/admin/products_controller.rb)

# resources :products

# end

end

projectcreate.coffee

'use strict'

###*

# @ngdoc function

# @name bagtrackerFrontApp.controller:ProjectcreateCtrl

# @description

# # ProjectcreateCtrl

# Controller of the bagtrackerFrontApp

###

angular.module 'bagtrackerFrontApp'

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

$scope.name = ''

$scope.submit = ->

$http.post( '/api/projects', {name: $scope.name} ).then ->

$location.path '#/projects'

project.coffee

'use strict'

###*

# @ngdoc function

# @name bagtrackerFrontApp.controller:ProjectsCtrl

# @description

# # ProjectsCtrl

# Controller of the bagtrackerFrontApp

###

angular.module 'bagtrackerFrontApp'

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

$scope.projects = []

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

$scope.projects = data.data

tags.coffee

'use strict'

###*

# @ngdoc function

# @name bagtrackerFrontApp.controller:TagsCtrl

# @description

# # TagsCtrl

# Controller of the bagtrackerFrontApp

###

angular.module 'bagtrackerFrontApp'

.controller 'TagsCtrl', ( $scope, $http )->

$scope.tags = []

$scope.tags = $http.get( '/api/tags' ).then ( data )->

$scope.tags = data.data

tagscreate.coffee

'use strict'

###*

# @ngdoc function

# @name bagtrackerFrontApp.controller:TagscreateCtrl

# @description

# # TagscreateCtrl

# Controller of the bagtrackerFrontApp

###

angular.module 'bagtrackerFrontApp'

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

$scope.name = ''

Продолжение приложения А

$scope.submit = ->

$http.post( "/api/tags", {name: $scope.name}).then ->

$location.path '#/tags'

task.coffee

'use strict'

###*

# @ngdoc function

# @name bagtrackerFrontApp.controller:TaskCtrl

# @description

# # TaskCtrl

# Controller of the bagtrackerFrontApp

###

angular.module 'bagtrackerFrontApp'

.controller 'TaskCtrl', ( $scope, $http, $routeParams )->

$scope.project_id = $routeParams.project_id

$scope.name = ''

$scope.description = ''

$http.get("/api/projects/#{$routeParams.project_id}/tasks/#{$routeParams.id}").then ( data ) ->

[$scope.name, $scope.description] = [data.data.name, data.data.desc]

taskcreate.coffee

'use strict'

###*

# @ngdoc function

Продолжение приложения А

# @name bagtrackerFrontApp.controller:TaskcreateCtrl

# @description

# # TaskcreateCtrl

# Controller of the bagtrackerFrontApp

###

angular.module 'bagtrackerFrontApp'

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

$scope.name = ''

$scope.description = ''

$scope.submit = ->

$http.post( "/api/projects/#{$routeParams.id}/tasks",

name: $scope.name

desc: $scope.description

task_tags_attributes: $scope.tags.map (el) -> tag_id: el.id

).then ->

$location.path "#/projects/#{$routeParams.id}/tasks"

$scope.loadTags = (query) ->

$http.get "/api/findTag/#{query}"

tasks.coffee

'use strict'

###*

# @ngdoc function

# @name bagtrackerFrontApp.controller:TasksCtrl

# @description

# # TasksCtrl

# Controller of the bagtrackerFrontApp

###

angular.module 'bagtrackerFrontApp'

Продолжение приложения А

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

$scope.tasks = []

$scope.project_id = $routeParams.id

$http.get("/api/projects/#{$routeParams.id}/tasks").then ( data )->

$scope.tasks = data.data

Приложение Б

Презентационный материал

Рис. 1

Рис. 2

Рис. 3



Рис. 4

Рис. 5

Рис. 6



Рис. 7

Рис. 8

Рис. 9

Размещено на Allbest.ru

...