Разработка Web- и android- приложений для создания и прохождения тестов и опросов

Размещено на http://www.allbest.ru/

СОДЕРЖАНИЕ

ВВЕДЕНИЕ

• 1. АНАЛИТИЧЕСКАЯ ЧАСТЬ
• 1.1 Анализ предметной области
• 1.2 Необходимость разработки приложений
• 1.3 Определение функций приложений
• 2. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ
• 2.1 Web-приложение
• 2.2.1 Архитектура приложений
• 2.3 Разработка приложений
• 2.4 Выбор средств разработки
• 3. ПРОЕКТНАЯ ЧАСТЬ
• 3.1 Проектирование интерфейсов
• 3.1.1 Проектирование интерфейса web-приложения
• 3.1.2 Проектирование интерфейса android-приложения
• 3.2 Проектирование базы данных
• 3.3 Реализация серверной части
• 3.4 Реализация интерфейса web - приложения
• 3.5 Реализация интерфейса android - приложения
• 4. ТЕСТИРОВАНИЕ
• 4.1 Введение в тестирование и выбор инструмента
• 4.2 Настройка тестирования
• ЗАКЛЮЧЕНИЕ
• СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
• ПРИЛОЖЕНИЕ 1
• ПРИЛОЖЕНИЕ 2


ВВЕДЕНИЕ

В данной выпускной квалификационной работе будут разобраны основные положения разработки Web- и android- приложений для создания и прохождения тестов и опросов.

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

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

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

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

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

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



1. АНАЛИТИЧЕСКАЯ ЧАСТЬ

1.1 Анализ предметной области

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

Начнем анализ с области тестов.

Что такое тест и тестирование? Сегодня эти термины можно встретить довольно часто.

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

Тест - стандартизированная процедура для определения степени выраженности какого-либо свойства, признака, а также его оценка.

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

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

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

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

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

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

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

Психологические тесты делятся на: тесты личности, тест интеллекта, тест достижений, тест на профессиональную пригодность

Виды тестовых заданий.

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

тестовые задания закрытого типа (каждый вопрос сопровождается готовыми вариантами ответов, из которых необходимо выбрать один или несколько правильных);

тестовые задания открытого типа (на каждый вопрос испытуемый должен предложить свой ответ: дописать предложение, слово, словосочетание, знак, формулу и т.д.).

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

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

Задания отрытого типа: свободное изложение и дополнение

Поясним каждый тип.

Альтернативный выбор - это когда испытуемому надо ответить “да” или “нет”

Множественный выбор - это когда испытуемому надо выбрать один или несколько правильных ответов из приведенного списка

Установление соответствия - это когда испытуемому предлагается установить соответствие элементов двух списков

Установление последовательности - это когда испытуемому надо расположить элементы списка в определенной последовательности

Свободное изложение - это когда испытуемому надо самостоятельно сформулировать ответ без всяких ограничений в задании

Дополнение - это когда испытуемому надо сформулировать ответы с учетом предусмотренных в задании ограничений (например, дополнить предложение)

Рассмотрим область опросов.

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

Опрос можно разделить на анкетирование и интервьюирование.

Интервьюирование - это способ проведения социологических опросов как целенаправленной беседы интервьюера и опрашиваемого.

Анкетирование - это письменный опрос. Анкетирование является одним из самых распространенных видов опроса, во время которого, общение исследователя и респондента определено текстом анкеты. Анкета - это перечень вопросов, объединенных одним исследовательским замыслом, направленных на выявление количественно-качественных характеристик объекта и предмета исследования. Чаще всего анкетирование происходит в присутствии анкетера или без него, когда опрашиваемый сам заполняет вопросник, реже со слов опрашиваемого его заполняет анкетер. Анкетирование может проводиться индивидуально или в группе, когда значительное число людей можно опросить за относительно короткое время. Кроме того анкетирование может проводиться либо очно, либо заочно - в виде почтового опроса; опроса через газету или журнал, компьютерную сеть.

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

Закрытые вопросы бывают альтернативными и не альтернативными. Альтернативные вопросы подразумевают возможность выбора респондентом только один вариант ответа, в следствие чего сумма ответов на все варианты, перечисленные в таком вопросе, всегда составляет 100 %. Не альтернативные вопросы разрешается выбрать несколько вариантов ответов, поэтому их сумма может превышать 100 %.

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

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

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

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

Прямым называется такой вопрос, формулировка которого предполагает ответ, одинаково понимаемый и исследователем, и респондентом. Если же расшифровка ответа предусмотрена в ином, скрытом от опрашиваемого смысле, то это косвенный вопрос.

1.2 Необходимость разработки приложений

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

С развитыми информационными технологиями очень эффективно использование приложений, как на компьютере, так и на смартфонах. В области тестов и опросов использование современных технологий весьма эффективно. Для этого можно рассмотреть и проанализировать существующие примеры реализованных сервисов и приложений. Для примера рассмотрим 3 инструмента: Google Формы, сервис It's quiz и Survio.

Google Формы -- часть офисного инструментария Google Drive. Google формы позволяют создавать тесты и опросы.

Рисунок1.2.1 Скриншот “Google формы”

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

It's quiz - сервис для создания и проведения тестов.

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

Рисунок1.2.2 Скриншот “itsquiz”

Survio - сервис для создания и проведения опросов

Рисунок1.2.3 Скриншот “Survio”

К основным плюсам можно отнести: современный дизайн, готовые шаблоны, большой набор различных видов вопросов.

Если брать android-приложения, то нельзя найти какого-либо конструктора тестов/опросов или их свободного прохождения без привязки к какой-либо тематике.

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

1.3 Определение функций приложений

Основной функцией приложения является создание тестов и опросов, а также их прохождение. Одним из удачных решений было представлено в “Google формы”. Но в “Google формы” нет функционала, который реализован в подходе создания тестов предложенный в “itsquiz”. Этот подход заключается в создании тестов на основе существующий вопросов. Существующие вопросы создаются пользователем и могут быть включены в любой тест. Этот подход будет также использоваться в разрабатываемых приложениях.

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

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

Для создания вопросов будет создана специальная вкладка. В ней будет представления форма составления вопросов различных видов: одиночный выбор, вопрос “Да/Нет”, множественный выбор, текстовый ответ, выбор изображений/изображений, шкала разделения баллов, ранжирование, одновариантная матрица, многовариантная матрица, собственный ответ (развернутый).

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

Особенностью android- приложения будет являться оффлайн режим создания, а также прохождения тестов и опросов.



2. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ

2.1 Web-приложение

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

2.2.1 Архитектура приложений

Клиент-серверное - это приложение, в котором клиент взаимодействует с сервером при помощи браузера, а за сервер отвечает - web-сервер. Исходя из определения, можно понять, что web-приложение состоит из 2-ух частей: серверной и клиентской. Эти части реализуют технологию клиент-сервер.

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

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

2.3 Разработка приложений

Разобьем процесс разработки приложения на ряд стандартных этапов: системный анализ и анализ требований, проектирование, кодирование и тестирование.

Первый этап. Системный анализ и анализ требований.

Данный этап работ был разобран в предыдущей части выпускной квалификационной работы.

Второй этап. Проектирование.

Этап проектирования также можно разбить на несколько частей: проектирование интерфейсов web- и android- приложений, проектирование структуры проекта серверной части, frontend части и android части, проектирование базы данных. Также во время этапа проектирования можно рассмотреть вопрос подбора инструментов для реализации поставленных задач.

Третий этап. Кодирование.

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

Четвертый этап. Тестирование.

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

2.4 Выбор средств разработки

Среда разработки.

При выборе среды разработки обычно стоит выбор между текстовыми редакторами и IDE(Integrated Development Environment/ Интегрированная среда разработки). Я сразу отказался от IDE в виду ряда ненужных функций, а также требовательности к ресурсам и скорости. Мой выбор пал на текстовый редактор SublimeText3. Он был выбран по ряду причин: высокая степень кастомизации, минималистичность и скорость. Для разработки SublimeText3 был дополнен плагинами: EstLint, Babel, Emmet, JavaScriptNext -ES6 Syntax и некоторыми другими.

Браузер и расширения.

Для разработки были выбраны современные, быстрые браузеры, ориентированные на разработку сайтов и web-приложений, а именно Goggle Chrome и Firefox Developer Edition. Они были дополнены следующими расширениями: React Developers Tools и ReduxDevTools.

HTML

Поскольку речь идет о разработке web-приложения то нельзя обойтись без HTML. HTML- (от англ. HyperText Markup Language - “язык гипертекстовой разметки”) - стандартизированный язык разметки документов во Всемирной паутине. На момент написания выпускной квалификационной работы актуальным стандартом является HTML5.

CSS

Также как и о HTML нельзя забывать при разработке web-приложений, нельзя забывать и о CSS. CSS - (от англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. На момент написания выпускной квалификационной работы актуальной версией является CSS3.

JavaScript

JavaScript - мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Данный язык будет заложен в основу разработки приложений. Обычно JavaScript применяется к HTML для обеспечения интерактивности и динамики сайтов, но также имеет ряд иных применений.

Node.js

Node.js - программная платформа, написанная на движке V8. Для того чтобы JavaScript выполнялся на сервере Node.js интерпретирует его в машинный код. К плюсам этой платформы можно отнести: неблокирующий ввод-ввывод, что удобно для API, к которому будет обращаться множество клиентов, гибкость платформы, обилие собственных возможностей и множество дополнительных модулей.

Express.js

Для реализации обмена данными по шаблону REST API и более удобной работы с Node.js, будет использован фреймворк Express.js. Express - развитый легковесный фреймфорк позволяющий быстро создать все необходимые пути, которые будут обрабатываться. К основным его плюсам можно отнести: высокую скорость обработки запросов, простота и популярность.

MongoDB и Mongoose.

В данной выпускной квалификационной работе необходимо использования базы данных. Для хранения данных была выбрана база данных MongoDB. MongoDB - документооринтированная система управления базами данных с открытым исходным кодом. Классифицируется как NoSQL, использует JSON - подобные документы и схему базы данных. К плюсам можно отнести: скорость разработки, отсутствие необходимости синхронизировать схему в базе данных и приложения, гибкий JSON -формат документов. Но также стоит отметить, что при реализации REST API необходимо взаимодействовать с базой данных и для этих целей будет использован Mongoose. Mongoose - это ODM (Object Document Mapper - объектно-документный отобразитель). Это означает, что Mongoose позволяет определить объекты со строго типизированной схемой соответствующей документу MongoDB.

React.js

Для разработки клиентской части приложения был выбран React.js. React.js - библиотека JavaScript для создания пользовательских интерфейсов. Одной из её отличительных особенностей является возможность использовать JSX. JSX - это язык программирования, с близким к HTML синтаксисом, который компилируется в JavaScript. Также достоинством является работы с виртуальным DOM деревом, которое строится из компонентов React.

В связке с React будет использован Redux. Redux - это инструмент управления состоянием данных и интерфейса в JavaScript приложениях.

React Native

Для разработки android-приложения планируется использовать React Native. React Native - это фреймворк для разработки кроссплатформенных приложений для iOS и Android.

Webpack

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



3. ПРОЕКТНАЯ ЧАСТЬ

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

3.1 Проектирование интерфейсов

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

3.1.1 Проектирование интерфейса web-приложения

Приложение будет состоять из ряда основных разделов как:

· главная страница

· страница тестов и опросов

· страница авторизации

· страница профиля

· страница создания тестов/опросов

· страница создания вопросов

· страница прохождения теста/опроса

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

Страница “Главная”.

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

Рисунок 3.1.1.1 - Макет главной страницы.

Страница тестов и опросов.

Страница тестов и опросов включает в себя блок с фильтрами и блок с отображением тестов, опросов и вопросов. Блок фильтров должен включать в себя фильтры:

· настройки отображения тестов, опросов и вопросов,

· настройки отображения только своих или всех тестов, опросов,

· поиск и фильтрации по введенной категории,

· список популярных категорий или собственных,

· поле добавления новой категории

· поле сброса всех фильтра.

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

Страница тестов и опросов будет разрабатываться в соответствии с схематичным макетом изображенным на рисунке 3.1.1.2.



Рисунок 3.1.1.2 - Макет страницы тестов и опросов.

Страница авторизации.

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

Страница авторизации будет разрабатываться в соответствии с схематичными макетами изображенным на рисунке 3.1.1.3(а) и 3.1.1.3(б).

Рисунок 3.1.1.3(а) - Макет страницы авторизации вкладка “Войти”.



Рисунок 3.1.1.2 - Макет страницы авторизации вкладка “Зарегистрироваться”.

Страница профиля

Страница профиля состоит из карточки, включающей в себя: аватар пользователя, поле “никнейм”, поле “имя”, поле “фамилия”, поле “email”, поле “зарегистрирован с”, поля отображающие количество тестов опросов и вопросов.

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

Рисунок 3.1.1.4 - Макет страницы профиля

Страница создания тестов/опросов

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

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

· настройки отображения только своих или только избранных вопросов,

· поиск и фильтрации по введенной категории,

· список собственных категорий,

· поле сброса всех фильтров.

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

Страница создания тестов/опросов будет разрабатываться в соответствии с схематичными макетами изображенным на рисунке 3.1.1.5.

Рисунок 3.1.1.5 - Макет страницы создания тестов/опросов

Страница создания вопросов

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

Страница создания вопросов будет разрабатываться в соответствии с схематичными макетами изображенным на рисунке 3.1.1.6.

Страница прохождения теста/опроса.

Страница прохождения теста/опроса включает в себя 2 блока: блок просмотра вопроса и блок статистики прохождения.

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

Рисунок 3.1.1.6 - Макет страницы создания вопросов

Страница прохождения теста/опроса будет разрабатываться в соответствии с схематичными макетами изображенным на рисунке 3.1.1.7.



Рисунок 3.1.1.7 - Макет страницы прохождения теста/опроса

3.1.2 Проектирование интерфейса android-приложения

Страница “Главная”.

На главной странице расположены блок с последними новостями разработки и нововведениями в приложении. Главная страница будет разрабатываться в соответствии с схематичным макетом изображенным на рисунке 3.1.2.1.

Рисунок 3.1.2.1 - Макет главной страницы.

приложение пользовательский интерфейс браузер

Страница тестов и опросов.

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

· настройки отображения тестов, опросов и вопросов,

· настройки отображения только своих или всех тестов, опросов,

· поиск и фильтрации по введенной категории,

· список популярных категорий или собственных,

· поле добавления новой категории

· поле сброса всех фильтра.

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

Просмотр тестов и опросов будет разрабатываться в соответствии с схематичными макетами изображенным на рисунке 3.1.2.2.

Рисунок 3.1.2.2 - Макеты страниц тестов и опросов.



Страница авторизации.

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

Страница авторизации будет разрабатываться в соответствии с схематичными макетами изображенным на рисунке 3.1.2.3.

Рисунок 3.1.2.3 - Макет страницы авторизации вкладки “Войти” и “Зарегистрироваться”.

Страница профиля

Страница профиля состоит из карточки, включающей в себя: аватар пользователя, поле “никнейм”, поле “имя”, поле “фамилия”, поле “email”, и карточки включающей в себя: поле “зарегистрирован с”, поля отображающие количество тестов опросов и вопросов, а также кнопки перейти к опросам, кнопки перейти к тестам, кнопки редактировать профиль, кнопки изменить пароль.

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

Рисунок 3.1.2.4 - Макет страницы профиля

Страница создания тестов/опросов

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

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

· настройки отображения только своих или только избранных вопросов,

· поиск и фильтрации по введенной категории,

· список собственных категорий,

· поле сброса всех фильтров.

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

Страница создания тестов/опросов будет разрабатываться в соответствии с схематичными макетами изображенным на рисунке 3.1.2.5.

Рисунок 3.1.2.5 - Макет страницы создания тестов/опросов

Страница создания вопросов

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

Страница создания вопросов будет разрабатываться в соответствии с схематичными макетами изображенным на рисунке 3.1.2.6.



Рисунок 3.1.1.6 - Макет страницы создания вопросов

Страница прохождения теста/опроса.

Страница прохождения теста/опроса включает в себя 2 блока: блок просмотра вопроса и блок статистики прохождения.

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

Страница прохождения теста/опроса будет разрабатываться в соответствии с схематичными макетами изображенным на рисунке 3.1.2.7.



Рисунок 3.1.2.7 - Макет страницы прохождения теста/опроса

3.2 Проектирование базы данных

В MongoDB база данных состоит из коллекций. Как правило, коллекция отражает сущность предметной области. Коллекция состоит из “документов” (далее запись). Запись представляет собой JSON-объект с обязательным наличием идентификатора ObjectId, который MongoDB задает автоматически и контролирует его уникальность, вплоть до уникальности во всем мире. ObjectId является типом данных. В сравнении с реляционными СУБД, коллекция является таблицей, а запись является строкой в таблице. Тип хранимых в записи данных - произвольный, из перечисленных ниже: String, Number, Date, Buffer, Boolean, Mixed, ObjectId, Array, Decimal128, Map.

Целостность связей в MongoDB не поддерживается. Эта задача решается на уровне кода сервера приложений, что и будет реализовано позже с помощью ODM - Mongoose. Итак, определим коллекции в базе данных и структуру хранимых данных.

Начнем с первой и главной коллекции - пользователи (Users).



Таблица 3.2.1 - Коллекция “пользователи”

Имя поля	Тип
idUser	ObjectId
firstname	String
lastName	String
email	String
password	String
nickname	String
question	Array
tests	Array
questionFavorites	Array
complitedTest	Object
statistic	Object
categories	Array
createAt	Date
update	Date

Поле question хранит массив с ID вопросов, которые создал пользователь.

Поле Tests хранит массив с ID тестов и опроов, которые создал пользователь.

Поле questionFavorites хранит массив с ID вопросов, которые пользователь добавил в избранное.

Поле categories хранит массив строк с категориями, которые создал пользователь.

Поле complitedTest хранит объект с ключом в виде ID тестов, которые пользователь завершил, и результатами по каждому пройденному тесту.

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

Разберем коллекцию вопросов.



Таблица 3.2.2 - Коллекция “вопросы”

Имя поля	Тип
idQuestion	ObjectId
idCreator	ObjectId
categories	Array
type	String
questions	Object
responses	Array
answers	Array
statistic	Object
createdAt	Date

Поле responses хранит массив с вариантами ответов.

Поле answers хранит массив с правильными вариантами ответов.

Поле statistic хранит объект со статистикой ответов пользователей.

Поле type хранит строку с названием типа вопроса для теста или для опроса.

Поле categories хранит массив строк с категориями, которые относятся к данному вопросу.

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

Таблица 3.2.3 - Коллекция “тесты и опросы”

Имя поля	Тип
idTest	ObjectId
idCreator	ObjectId
categories	Array
type	String
questions	Array
accessType	String
statistic	Object
сreate	Date

Поле question хранит массив с ID вопросов, которые используются в тесте. Разберем коллекцию общих категорий



Таблица 3.2.4 - Коллекция “категории”

Имя поля	Тип
idCategories	ObjectId
idCreator	ObjectId
categories	Array
questions	Array
createdAt	Date

Поле categories хранит массив объектов с полями названия категории и таким же массивом, если присутствует вложенность.

Поле question хранит массив с ID вопросов, которые добавлены от лица администратора.

3.3 Реализация серверной части.

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

Для серверной части получилась следующая структура, которая изображена на рисунке 3.3.1.



Рисунок 3.3.1 - Структура серверной части.

Итак поясним содержимое.

README.md - файл с описанием того, что находится в директории.

package.json - файл хранящий в себе информацию о приложении, его наличие говорит о том, что директория с его наличием интерпретируется как Node.js пакет. Листинг файла package.json приведен на рисунке 3.3.2. Также на рисунке 3.2.2 можно увидеть все пакеты которые были установлены для запуску сервера.

node_modules - папка с установленными npm пакетами и их зависимостями.

Server - папка хранящая в себе файлы настройки серверной части.

app.js - файл который запускается при старте сервера. В нем указаны все зависимости, а также написано API для приложения. Части кода из этого фала приведены на рисунках 3.3.3 и 3.3.4.



Рисунок 3.3.2 - Листинг файла package.json

Рисунок 3.3.3 - Листинг части кода файла app.js



Рисунок 3.3.4 - Листинг части кода файла app.js

utils - папка хранящая в себе файл dbUtils.js в котором содержатся функции подключения к базе данных, а также работа с ней. Листинги из файла dbUtils.js приведены на рисунках 3.3.5 и 3.3.6.

Рисунок 3.3.5 - Листинг файла dbUtils.js



Рисунок 3.3.6 - Листинг файла dbUtils.js

moduls - папка содержит в себе файлы с схемами для оправки данных в базу данных. На рисунке 3.3.7 приведен листинг с примером такого файла.

Рисунок 3.3.7 - Листинг файла dbUtils.js

сonfig - папка которая содержит в себе файл config.json с основными параметрами запуска сервера и подключения к базе данных.

Пояснение.

На сервере через NodeJS запускается файл app.js. В этом файле выполняется подключение к базе данных и прописывается REST API. В каждой функции с написанным api, вызывается функция, подключенная из файла dbUtils.js. Функции в файле dbUtils.js выполняют запросы к базе данных. Для запросов создания новых записей в коллекциях в базе данных в файле dbUtils.js подключаются схемы. Весь код который не приведен на рисунках 3.3.3 - 3.3.7 написан по аналогии.

3.4 Реализация frontend части web - приложения

Аналогично пункту с реализацией backend части представим получившуюся структуру для frontend части приложения на рисунке 3.4.1.

Рисунок 3.4.1 - Структура каталога frontend

Итак, поясним содержимое.

package.json - файл хранящий в себе информацию о приложении, отличается от файла package.json, в каталоге с настройкой серверной части, только установленными пакетами и скриптами запуска проекта. Для старта проекта локально осуществляется ввод команды npm run start, в этом случае проект собирается в режиме development и запустится webpack dev server. В случае ввода команды npm run build будет выполнена сборка проекта в режиме production.

public - папка содержащая в себе файл index.html, в который и встраивается разрабатываемое приложение, и папка build, в которой webpack собирает все файлы.

node_modules - папка с установленными npm пакетами и их зависимостями. Появляется после набора команды npm install - которая устанавливает все пакеты указанные в файле package. json

.gitignor - файл который содержащий список файлов и папок которые не должны хранится в репозитории.

webpack.config.js - файл с настройками конфигурации webpack. Содержит в себе настройки сборки проекта. Также в папке присутствуют файлы “.babelrc”, “postcs.config.js”, которые являются вынесенными настройками webpack. Листинг файла webpack.config.js представлен на рисунке 3.4.2.

Рисунок 3.4.2 - Листинг файла webpack.config.js

сlient - папка со всеми модулями разрабатываемого приложения.

main.js - главный модуль и точка входа в приложение. Листинг файла main.js приведен на рисунке 3.4.3



Рисунок 3.4.3 - Листинг файла main.js

routes.js - модуль, содержащий в себе массив констант, для настройки роутинга в приложении.

store.js - модуль с конфигурацией состояния приложения. Листинг файла store.js приведен на рисунке 3.4.4.

Рисунок 3.4.4 - Листинг файла store.js

src - папка, содержащая в себе различные статические файлы, такие как картинки.

action - папка, которая содержит в себе модули, создающие события для состояния приложения. Листинг одного из модуля изображен на рисунке 3.4.5.



Рисунок 3.4.5 - Листинг session.js

api - папка, содержащая в себе модули, для работы с API.

reducer - папка, которая содержит в себе модули с обработчиками событий в приложении. Пример модуля изображен на рисунке 3.4.6.

Рисунок 3.4.6 - Листинг session.js

components и containers - папки содержащие в себе “глупые” и “умные” компоненты из которых состоит приложения. Стоит пояснить что “умные” компоненты должны включать в себя логику приложения и другие компоненты. “Глупые” же компоненты не должны знать ни чего о состоянии приложения или о других компонентах выше или рядом с собой по иерархии, они принимают передаваемые им значения и отвечают только за отображение 1 компонента. Примеры “глупого” и “умного” компонента приведены в приложении А и в приложении Б.

3.5 Реализация frontend части android - приложения

Структура получается такая же, как и у веб приложения. Но установка и пакеты отличаются. Для реализации воспользуемся готовым шаблоном и установим Create React Native App и набор утилит библиотек и сервисов Expo.



4. ТЕСТИРОВАНИЕ

4.1 Введение в тестирование и выбор инструмента

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

Существует ряд методик тестирования программного продукта, такие как: модульное тестирование, интеграционное тестирование, приемочное тестирование и другие.

В данной работе для проведения тестирования web-приложения и серверной части будут проводиться тесты с помощью инструмента CodeceptJS. К плюсам CodeceptJS можно отнести: асинхронность, расширяемость, полная поддержка html5, никаких конфликтов с сайтами, поддержка разных браузеров.

CodeceptJS позволяет проводить тесты, разбитые на сценарии. Каждое действие в каждом сценарии выполняется так, как если бы эти действия совершал пользователь на сайте. Также можно тестировать backend часть за счет проверки API, с помощью отправки запросов.

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

4.2 Настройка тестирования

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

После установки необходимых npm -пакетов и инициализации codeceptjs, директория дополниться папкой testing, в которой содержится папки tests, helpers, includes и файлы codecept.json, steps_file.js. Поясним для чего каждый из них.

codecept.json - это конфигурационный файл с настройкой тестирования. Его листинг представлен на рисунке 4.2.1.

Рисунок 4.2.1 - Листинг codecept.json

steps_file.js - файл конфигурируем при инициализации codeceptjs. Он возвращает объект I, который является актером от лица которого идет тестирование.

includes - папка хранит вспомогательные файлы для написания тестов, такие как аутентификация и дополнительные функции. В этих файлах можно использовать I и соответственно функции хелперов.

helpers - папка хранит в себе хелперы для написания тестов, расширяющие объект I.

tests - папка в которой хранится сам набор тестов.

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

Рисунок 4.2.1 - Листинг mainPage_test.js



ЗАКЛЮЧЕНИЕ

В ходе выполнения ВКР было разработано web - приложение для создания и проведения тестов и опросов. Благодаря модульной системе разработки web - приложения написанного с помощью связки React/Redux и серверной части с использованием базы данных Mongodb, получилось легко модернизируемое приложение. Это позволит дальше, не затрачивая много усилий, дорабатывать приложение, вводить новые особенности или же изменить его для выполнения каких-либо более узких целей.

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

Для обоих приложений используется одна серверная архитектура.



СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Тест [Электронный ресурс]: электронная энциклопедия. - Режим доступа: https://ru.wikipedia.org/wiki/Тест

2. Использование тестов в учебном процессе [Электронный ресурс]: сайт. - Режим доступа: http://testobr.narod.ru/1.htm

3. Метод опроса [Электронный ресурс]: электронная энциклопедия. - Режим доступа: https://ru.wikipedia.org/wiki/Метод_опроса

4. Веб-приложение [Электронный ресурс]: электронная энциклопедия. - Режим доступа: https://ru.wikipedia.org/wiki/ Веб-приложение

5. RESTful API на Node.js + MongoDB [Электронный ресурс]: сайт - Режим доступа: https://habr.com/post/193458/

6. Введение в Mongoose для MongoDB и Node.js [Электронный ресурс]: сайт - Режим доступа: https://code.tutsplus.com/ru/articles/an-introduction-to-mongoose-for-mongodb-and-nodejs--cms-29527

7. Mongoose [Электронный ресурс]: электронная документация - Режим доступа: http://mongoosejs.com/docs/guide.html

8. React A JavaScript library for building user interface [Электронный ресурс]: официальная документация - Режим доступа: https://reactjs.org/

9. Redux [Электронный ресурс]: официальная документация - Режим доступа: https://redux.js.org/

10. React Redux [RU tutorial] [Электронный ресурс]: электронный учебник - Режим доступа: https://maxfarseer.gitbooks.io/redux-course-ru/content/

11. React Redux [RU tutorial] [Электронный ресурс]: электронный учебник - Режим доступа: https://maxfarseer.gitbooks.io/redux-course-ru/content/

12. Роутинг в react-приложениях [Электронный ресурс]: электронный учебник - Режим доступа: https://maxfarseer.gitbooks.io/react-router-course-ru/content/

13. Большая подборка материалов для изучения React [Электронный ресурс]: сайт - Режим доступа: https://proglib.io/p/react-digest/

14. MATERIAL-UI React components that implement Google's Material Design. [Электронный ресурс]: сайт - Режим доступа: https://material-ui.com/

15. React Native -- одного JS мало [Электронный ресурс]: сайт - Режим доступа: https://habr.com/post/323214/

16. CodeceptJS modern era acceptance testing for NodeJS [Электронный ресурс]: официальная документация - Режим доступа: https://codecept.io/

ПРИЛОЖЕНИЕ 1

(Обязательное)

//CreateQuestionContainer.jsx

import React from 'react';

import { connect } from 'react-redux';

import CreateQuestion from "../components/CreateQuestion.jsx";

import DisplayQuestion from "../components/DisplayQuestion.jsx";

class CreateQuestionContainer extends React.Component {

state = {

question: {},

};

onChange = (value) => {

this.setState({question: value})

}

render() {

let categories = ["name1","name2","name3","name4"];

const {user} = this.props;

const {question} = this.state;

return (

<div className="row">

<div className="col-sm-6">

<CreateQuestion onChange={this.onChange} categories={categories}/>

</div>

<div className="col-sm-6">

<DisplayQuestion question={this.state.question}/>

</div>

</div>

)

}

}

const mapStateToProps = state => {

return {

user: state.session.user,

}

};

export default connect(mapStateToProps)(CreateQuestionContainer);



ПРИЛОЖЕНИЕ 2

(Обязательное)

//Home.jsx

import React from 'react';

import { Button } from 'react-bootstrap';

import Slider from "react-slick";

import {whyUs} from "../src/whyUs.js"

import {news} from "../src/news.js"

import logo from "../src/logo.png";

import "slick-carousel/slick/slick.css" ;

import "slick-carousel/slick/slick-theme.css";

import styles from "./Home.scss";

class Home extends React.Component {

render() {

const settingsWhyUs = {

accessibility: false,

autoplay: true,

dots: true,

infinite: true,

speed: 2000,

autoplaySpeed: 5000,

slidesToShow: 1,

slidesToScroll: 1

};

const settingsNews = {

accessibility: false,

dots: true,

infinite: true,

speed: 2000,

slidesToShow: 1,

slidesToScroll: 1

};

return (

<div className={`${styles.root}`}>

<div className="col-sm-5">

<img className="logo2" src={logo} />

</div>

<div className="col-sm-7 whyUs">

<h2 className="preveiw">Почему Free Quiz?</h2>

<Slider {...settingsWhyUs}>

{

whyUs.map((elem, index)=>{

return(

<div className="row" key={elem.title+index}>

<div className="col-sm-12">

<h3>{elem.title}</h3>

</div>

<div className="col-sm-12 row">

<div className="col-sm-4">

<img className="imgSlider" src={elem.img} />

</div>

<div className="col-sm-8">

<p>{elem.description}</p>

</div>

</div>

</div>

)

})

}

</Slider>

</div>

<div className="col-sm-12">

<h2 className="preveiw">Новоости проекта:</h2>

<Slider {...settingsNews}>

{

news.map((elem, index)=>{

return(

<div className="row" key={elem.title+index}>

<div className="col-sm-12">

<h3>{elem.title}</h3>

</div>

<div className="col-sm-12 row">

<div className="col-sm-4">

<img className="imgSlider" src={elem.img} />

</div>

<div className="col-sm-8">

<p>{elem.text}</p>

</div>

</div>

</div>

)})}

</Slider>

</div>

</div>

);}}

export default Home;

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

...