Разработка обучающего программного обеспечения с web-интерфейсом

Фреймворк работает с HTML, содержащим дополнительные пользовательские атрибуты, которые описываются директивами, и связывает ввод или вывод области страницы с моделью, представляющей собой обычные переменные JavaScript. Значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных.

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

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

· использование DHTML для динамического изменения содержания страницы.

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

Преимущества использования AJAX:

· при правильной реализации AJAX позволяет снизить нагрузку на сервер в несколько раз;

· использование AJAX позволяет значительно сократить трафик при работе с web-приложением;

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

· почти безграничные возможности для интерактивной обработки.

Так же будет использоваться JQuery [10]. JQuery - это мощный JavaScript API, который упрощает выполнение различных стандартных действий JavaScript на HTML-странице. JQuery решает проблемы с совместимостью между браузерами. JQuery может помочь в небольшом динамическом поведении на web-сайте или в продвинутом web-приложении.

Основные возможности:

· движок кросс-браузерных CSS-селекторов Sizzle, выделившийся в отдельный проект;

· переход по дереву DOM, включая поддержку XPath как плагина;

· события;

· визуальные эффекты;

· AJAX-дополнения;

· JavaScript-плагины.

Также для разработки был взят фреймворк bootstrap 3. Bootstrap - это набор HTML, CSS инструментов и шаблонов для верстки и более эффективного и быстрого создания сайтов и web-приложений [7-8]. Он динамичный и регулярно обновляемый, поэтому не все его функции могут корректно поддерживаться старыми браузерами.

Также, в Bootstrap используется динамический язык стилей LESS, которые расширяет возможности CSS. Основные его преимущества - это экономия времени, адаптивность, дизайн, простота и открытость.

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

Основные инструменты:

· сетки - заранее заданные размеры колонок, которые можно сразу же использовать;

· типографика - описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т. П;

· медиа - представляет некоторое управление изображениями и видео;

· таблицы - средства оформления таблиц, вплоть до добавления функциональности сортировки;

· формы - классы для оформления форм и некоторых событий, происходящих с ними;

· навигация - классы оформления для табов, вкладок, страничности, меню и панели инструментов;

· алерты - оформление диалоговых окон, подсказок и всплывающих окон.

3.3 Описание интерфейса пользователя

Интерфейс пользователя - элементы и компоненты программы, которые способны оказывать влияние на взаимодействие пользователя с программным обеспечением. В том числе:

· средства отображения информации, отображаемая информация, форматы и коды;

· командные режимы, язык пользователь-интерфейс;

· устройства и технологии ввода данных;

· диалоги, взаимодействие и транзакции между пользователем и компьютером;

· обратная связь с пользователем;

· поддержка принятия решений в конкретной предметной области;

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

Алгоритм работы в web-интерфейсом представлен в виде блок-схемы (Приложение В).

При входе в систему пользователь попадает на главную страницу web-сервиса. На рисунке 3.1 представлена главная страница web-сервиса.

Рис.3.1 - Главная страница web-сервиса

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



Рис.3.2 - Форма регистрации

Рис.3.3 - Форма входа в систему

После регистрации или входа в систему пользователь попадает на страницу профиля, где он может продолжить заполнение или изменение своих персональных данных таких, как имя, фамилия и смена пароля. Страница профиля представлена на рисунке 3.4.

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

Также в профиле будут отображаться результаты пройденных курсов. О своих достижениях можно будет рассказать своим друзьям в социальных сетях таких, как в контакте, facebook и google+.



Рис.3.4 - Страница профиля

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

Рис.3.5 - Страница курсов

После выбора курса пользователь попадает на страницу список раздела для данного курса. Страница списка разделов представлена на рисунке 3.6.

Рис.3.6 - Список разделов

В разделе теории представлена информация, которую необходимо усвоить в данном уроке. Страница теории представлена на рисунке 3.7.

Рис.3.7 - Страница теории

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

Рис.3.8 - Страница тестов

3.4 Краткое описание серверной части

Как описывалось ранее в качестве серверной части был выбран flask. В данном проекте будут использоваться следующие расширения для flask:

· flask-classy. Библиотека, предоставляет дополнительную структуру приложениям;

· wtrform. Предназначен для обработки форм.

def edit_profile(request):

user = User.objects.get(pk=request.session['userid'])

form = EditProfileForm(request.POST, obj=user)

if request.POST and form.validate():

form.populate_obj(user)

user.save()

return redirect('/home')

return render_to_response('edit_profile.html', form=form);

Работа с формой регистрации:

from flask_wtf import Form

from wtforms import StringField, PasswordField, TextAreaField, SelectField

from wtforms.validators import Email, DataRequired, EqualTo

class LoginForm(Form):

email = StringField('E-mail', validators=[Email(), DataRequired()])

password = PasswordField('Пароль', validators=[DataRequired()])

class RegistrationForm(LoginForm):

password_repeat = PasswordField('Повторите пароль', validators=[DataRequired(), EqualTo('password')])

· bcypt. Данное расширение разработано специально для хеширования паролей. Хеширование и проверка того, что пароль соответствует предыдущему хешированному паролю:

import bcrypt

password = b"super secret password"

hashed = bcrypt.hashpw(password, bcrypt.gensalt())

if bcrypt.checkpw(password, hashed):

print("It Matches!")

else:

print("It Does not Match :(");

· flask-login. Данное расширение обеспечивает управление сеансом пользователя для Flask. Он обрабатывает общие задачи входа в систему, выхода из системы и запоминания сеансов ваших пользователей в течение длительных периодов времени;

Пример входа в систему. После аутентификации пользователя вход в осуществляется с помощью функции login_user.

@app.route('/login', methods=['GET', 'POST'])

def login():

form = LoginForm()

if form.validate_on_submit():

login_user(user)

flask.flash('Logged in successfully.')

next = flask.request.args.get('next')

if not is_safe_url(next):

return flask.abort(400)

return flask.redirect(next or flask.url_for('index'))

return flask.render_template('login.html', form=form)

· flask-security. Flask-security? предоставляет слой логики, реализующий такие функции для управления безопасностью, как: аутентификацию на основе сессии, Role/Identity Based Access, шифрование паролей, HTTP-аутентификация, токен авторизации, регистрация пользователя, поддержка AJAX/JSON;

· dependency_Injector. Был создан, для удобства разработчиков и помогает внедрять шаблоны проектирования дизайна, инъекций зависимостей, формальным и простым способом.

4. Тестирование

4.1 Внутренняя и внешняя документация

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

Замечание - короткая записка, комментарий о небольшой неточности в реализации продукта.

Баг-репорт - описание выявленного случая несоответствия производимого продукта требованиям, к нему выдвигаемым - ошибки или ее проявления.

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

Отчет о тестировании (тест репорт) - документ, предоставляющий сведения о соответствии/ несоответствии продукта требованиям.

К внутренней документации относится:

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

Чек-лист (лист проверок) - это документ, описывающий что должно быть протестировано.

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

Тест-план (план тестирования) - формализованное и укрупненное описание одной сессии тестирования по одному или нескольким направлениям проверок.

4.2 Виды тестирования

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

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

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

Связанные с изменениями. После проведения необходимых изменений, таких как исправление бага/дефекта, программное обеспечение должно быть пере тестировано для подтверждения того факта, что проблема была действительно решена.

Функциональное тестирование рассматривает заранее указанное поведение и основывается на анализе спецификаций функциональности компонента или системы в целом.

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

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

Задачей тестирования производительности является определение масштабируемости и отказоустойчивости приложения под нагрузкой.

Тестирование установки направлено на проверку успешной инсталляции и настройки, а также обновления или удаления программного обеспечения.

4.3 Тест-кейсы

В данном проекте были написаны тест-кейс для поиска багов в программном продукте. Описание тест-кейсов представлены в табл. 4.1-4.8.

Таблица 4.1 Тест-кейс esob0001

Author: Осинников С.С.	Priority: 1
OVERVIEW: Данный тест-комплект проверяет форму регистрации
TC ID	esob0001
IDEA: Регистрация новых пользователей в системе EASYLEARN ADDITIONAL INFO: Данные для регистрации: Email: Sergey_Osinnikov@mail.ru Password: 1234567utr1
Revision Histiry
Created on: 10/06/2017 by Осинников С.С.	News test case
Execution part
PROCEDURE	EXPECTED RESULT
1. Открыть систему EASYLEARN 2. Зарегистрироваться	Данные регистрированного пользователя будут добавлены

Таблица 4.2 Тест-кейс esob0002

Author: Осинников С.С.	Priority: 1
OVERVIEW: Данный тест-комплект проверяет повторную регистрацию пользователя, который уже есть в базе данных.
TC ID	esob0002
IDEA: Повторная регистрация пользователя, который уже есть в базе данных, в системе EASYLEARN ADDITIONAL INFO: Данные для повторной регистрации: Email: Sergey_Osinnikov@mail.ru Password: 1234567utr1
Revision Histiry
Created on: 10/06/2017 by Осинников С.С.	News test case
Execution part
PROCEDURE	EXPECTED RESULT
1. Открыть систему EASYLEARN 2. Зарегистрироваться повторно	Пользователь не будет зарегистрирован поскольку уже есть в базе данных.

Таблица 4.3 Тест-кейс esob0003

Author: Осинников С.С.	Priority: 1
OVERVIEW: Данный тест-комплект проверяет добавление личных данных пользователя в разделе [Профиль]
TC ID	esob0003
IDEA: Добавление личных данных в раздел [Профиль], в системе EASYLEARN SETUP and ADDITIONAL INFO: Аккаунт: Sergey_Osinnikov@mail.ru /1234567utr1 Личные данные пользователя: Name: Сергей Surname: Aбрамов
Revision Histiry
Created on: 10/06/2017 by Осинников С.С.	News test case
Execution part
PROCEDURE	EXPECTED RESULT
1. Войти в систему EASYLEARN 2. Выбрать раздел профиль 3. Добавить личные данные 4. Сохранить изменения	Личный денные пользователя будут добавлены.

Таблица 4.4 Тест-кейс esob0004

Author: Осинников С.С.	Priority: 1
OVERVIEW: Данный тест-комплект проверяет изменение пароля
TC ID	esob0004
IDEA: Изменение пароля в разделе [Профиль], в системе EASYLEARN SETUP and ADDITIONAL INFO: Аккаунт: Sergey_Osinnikov@mail.ru /1234567utr1 Новые данные пользователя: Password: 2334wefr43ewf/Confirm password: 2334wefr43ewf
Revision Histiry
Created on: 10/06/2017 by Осинников С.С.	News test case
Execution part
PROCEDURE	EXPECTED RESULT
1. Войти в систему EASYLEARN 2. Выбрать раздел профиль 3. Изменить пароль 4. Выйти из системы 5. Зайти в систему EASYLEARN	Пароль будет обновлен

Таблица 4.5 Тест-кейс esob0005

Author: Осинников С.С.	Priority: 1
OVERVIEW: Данный тест-комплект проверяет прохождение курса по обучению языка программирования Python (теория и тесты)
TC ID	esob0005
IDEA: Прохождение курса по обучению языку программирования Python в разделе [Курсы], в системе EASYLEARN SETUP and ADDITIONAL INFO: Аккаунт: Sergey_Osinnikov@mail.ru /1234567utr1
Revision Histiry
Created on: 10/06/2017 by Осинников С.С.	News test case
Execution part
PROCEDURE	EXPECTED RESULT
1. Войти в систему EASYLEARN 2. Выбрать раздел курсы 3. Пройти онлайн курс	Обучение пройдет без багов

Таблица 4.6 Тест-кейс esob0007

Author: Осинников С.С.	Priority: 1
OVERVIEW: Данный тест-комплект проверяет прохождение итогового теста курса по обучению языка программирования Python, проверить что достижения добавлено в профиль.
TC ID	esob0007
IDEA: Прохождение итогового теста курса по обучению языку программирования Python, проверить что достижение добавлено в раздел [Профиль], в системе EASYLEARN SETUP and ADDITIONAL INFO: Аккаунт: Sergey_Osinnikov@mail.ru /1234567utr1 Дополнительная информация: Проходной балл: 80%
Revision Histiry
Created on: 10/06/2017 by Осинников С.С.	News test case
Execution part
PROCEDURE	EXPECTED RESULT
1. Войти в систему EASYLEARN 2. Выбрать раздел курсы 3. Пройти онлайн курс 4. Зайти в раздел профиля	После прохождения курса, в раздел профиля не добавится достижение о прохождении.

Таблица 4.7 Тест-кейс esob0006

Author: Осинников С.С.	Priority: 1
OVERVIEW: Данный тест-комплект проверяет добавление достижения о прохождении курса по обучению языка программирования Python
TC ID	esob0006
IDEA: Проверка добавления достижения о прохождении курса по обучению языка программирования Python в разделе [Профиль], в системе EASYLEARN SETUP and ADDITIONAL INFO: Аккаунт: Sergey_Osinnikov@mail.ru /1234567utr1
Revision Histiry
Created on: 10/06/2017 by Осинников С.С.	News test case
Execution part
PROCEDURE	EXPECTED RESULT
1. Войти в систему EASYLEARN 2. Выбрать раздел профиля 3. Проверить, достижения	После прохождения курсов достижение добавится в раздел профиля

Таблица 4.8 Тест-кейс esob0008

Author: Осинников С.С.	Priority: 1
OVERVIEW: Данный тест-комплект проверяет прохождение итогового теста курса по обучению языка программирования Python, по которому нужно не получить проходной балл, проверить что достижение не добавлено в профиль.
TC ID	esob0008
IDEA: Прохождение итогового теста курса по обучению языку программирования Python, по которому нужно не получить проходной балл, проверить что достижение не добавлено в раздел [Профиль]. SETUP and ADDITIONAL INFO: Аккаунт: Sergey_Osinnikov@mail.ru /1234567utr1
Revision Histiry
Created on: 10/06/2017 by Осинников С.С.	News test case
Execution part
PROCEDURE	EXPECTED RESULT
5. Войти в систему EASYLEARN 6. Выбрать раздел курсы 7. Пройти онлайн курс 8. Зайти в раздел профиля	После прохождения курса, по которому пользователь не набрал проходной балл, в раздел профиля не добавится достижение.

Заключение

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

Разработанный web-сервис полностью отвечает заданию бакалаврской работы. В web-интерфейсе реализован функционал:

· сервис обеспечивает регистрацию новых пользователей;

· сервис обеспечивает авторизацию раннее зарегистрированных пользователей;

· сервис обеспечивает сохранения прогресса сохранения обучения;

· сервис обеспечивает просмотр теоретического материала по выбранному языку программирования;

· возможность редактирования персональных данных пользователя такие как ФИО, пароль и т.д.;

· возможность прохождения пользователем тестов по изученному теоретическому материалу;

· сохранения результатов прохождения тестов в профиле пользователя;

· предоставление пользователю информации об изменениях содержания курсов либо других новшествах в проекте;

В ходе разработки проекта были изучены документации про Python, Flask, Jinga2, Apache Web Server, Ajax, JQuery, Sqlite и bootstrap 3.

Данным web-сервисом может пользоваться каждый желающий пользователь. В дальнейшем web-сервис можно модифицировать, добавив функционал администрирования, перевести данный web-сервис на английский, добавить возможность обсуждения, ввести рейтинговую систему. Размещено на Allbest.ru

...