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

СОДЕРЖАНИЕ

Введение

1. Аналитический обзор

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

1.2 Анализ аналогичных сайтов в сети интернет

1.2.1 Сайт с интерактивным справочником(http://www.learnjavaonline.org/)

1.2.2 Современный учебник JavaScript (https://learn.javascript.ru/)

1.2.3 Web-учебник w3schools (https://www.w3schools.com/)

1.3 Анализ функций сайта

2. Техническое предложение

2.1 Расположение сайта

2.2 Написание кода web-сайта вручную

2.3 Используемые web-технологии

2.3.1 Язык разметки HTML5

2.3.2 Каскадные таблицы стилей CSS

2.3.3 Язык программирования JavaScript

2.3.4 Фреймворк jQuery

2.3.5 Технология Ajax

2.4 Выбор framework на Python

2.4.1 Фреймворк Flask

2.4.2 Фреймворк Django

2.4.3 Фреймворк Pyramid

2.4.4 Заключение по выбору фреймворка

3. Разработка сайта

3.1 Разработка архитектуры сайта

3.2 Разработка структуры сайта

3.3 Разработка дизайна сайта

3.4 Разработка функционала и алгоритмов сайта

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

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

4.1.1. Методика black-box

4.1.2. Методика white-box

4.1.3. Методика grey-box

4.2 Описание тестирования

4.3 Оценка результатов тестирования

Заключение

Список использованных источников

Приложение 1. Листинг файла Python

Приложение 2. Листинг файла Html

Приложение 3. Листинг файла Css

Приложение 4. Листинг файла JavaScript



ВВЕДЕНИЕ

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

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

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

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

Чтобы достигнуть поставленной цели требуется выполнить ряд задач:

1) изучить средства разработки web?сайтов;

2) проанализировать требования заказчика;

3) проанализировать аналоги и похожие сайты;

4) разработать дружелюбный, простой и максимально понятный дизайн;

5) протестировать готовый программный продукт.

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



1. АНАЛИТИЧЕСКИЙ ОБЗОР

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

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

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

На данный момент кафедры готовят бакалавров, которые учатся всего 4 года. Благодаря этому, было сильно уменьшено количество учебных часов, отведенное на изучение необходимых дисциплин [1].

Поэтому время нужно использовать максимально продуктивно и эффективно.

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

Интерактивность - это организация системы по определенным принципам и правилам, при которой цель достигается благодаря взаимному обмену информацией между элементами этой системы [2].

Справочник - издание практического назначения, с кратким изложением сведений в систематической форме, в расчёте на выборочное чтение, на то, чтобы можно было быстро и легко навести по нему справку [3].

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

1.2 Анализ аналогичных сайтов в сети Интернет

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

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

1.2.1 Сайт с интерактивным справочником (http://www.learnjavaonline.org/)

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

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

Мы не имеем возможности сравнить одну и ту же задачу (тему), решенную на разных языках, в одном окне, не совершая лишних кликов, действий, переходов и так далее. Пример страницы сайта приведен на рисунке 1.1. [4]

Рисунок 1.1 - Главная страница сайта «Изучение Java онлайн».

1.2.2 Современный учебник JavaScript (https://learn.javascript.ru/)

На данном ресурсе расположен учебник по JavaScript. Из плюсов: хорошо структурированный материал с примерами, в конце теории находятся задачи для закрепления материала, также имеются комментарии под каждой темой, что позволяет взаимодействовать с пользователями. Пример одной из тем в онлайн учебнике приведён на рисунке 1.2.

Они задают вопросы, если возникают трудности, ошибки и т.д.. Из минусов можно выделить то, что учебник разработан только для одного языка, возможность писать код имеется, но функционал открывается только в новом окне в песочнице Plunker. Пример приведён на рисунке 1.3. [5]

Это одна из самых популярных сред веб-разработки (работающая в веб-браузере), позволяющая редактировать и запускать код, написанный на HTML, JavaScript и CSS. Имеется меню файлов и возможность сохранения кода. Встроена функция структурирования кода, которая делает код читаемым и красивым. Удобное подключение сторонних библиотек и фреймворков, также есть в наличии общедоступные шаблоны, написанные другими программистами, для которых в том числе сделан онлайн чат.

Рисунок 1.2 - Пример страницы сайта «Javascript.ru».

Рисунок 1.3 - Пример песочницы Plunker.

1.2.3 Web-учебник w3schools (https://www.w3schools.com)

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

Из минусов можно выделить реализацию интерактивной части в новой вкладке и ограниченность только веб-технологиями. На рисунке 1.4 можно видеть раздел учебника по HTML5. Сверху меню навигации по выбору нужного языка или технологии, слева сайд-бар, который содержит навигацию по темам учебника, в центральной части непосредственно сама информация (контент). [6]

Рисунок 1.4 - Пример страницы справочника (учебник) на сайте «w3schools.com».

На рисунке 1.5 представлена веб среда для написания, редактирования и запуска кода. Открывается в новой вкладке, имеет небольшой, но самый необходимый набор функционала:

1. Окно для написания и редактирования кода и окно для результата выполнения;

2. Ссылка на домашнюю страницу;

3. Сохранить или открыть файл;

4. Запуск написанного кода.

Рисунок 1.5 - Страница интерактивного окна на сайте «w3schools.com».

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

1.3 Анализ функций сайта

Проанализировав функционал сайтов можно выделить задачи, который должен выполнять web-сайт:

1) web-ресурс является отличным методом предоставления каждому студенту наиболее полной и продуманной информации о программировании;

2) web-ресурс позволит реализовать интерактивность, благодаря этому студенты смогут программировать прямо на сайте;

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

Таблица 1.3 - Сравнение рассмотренных сайтов-аналогов по критериям.

критерии / аналоги	learnjava	learn.javascript	w3schools
Наличие информации по нескольким языкам, технологиям	+	-	+
Возможность использования онлайн редактора, не покидая страницы с контентом	+	-	-
Поддержка русского языка	-	+	+
Наличие примеров прямо в теории	+	+	+
Наличие комментариев/форума	-	+ (комментарии)	+ (форум)
Возможность сравнить одно решение на разных языках в одном окне	-	-	-
Подсчет времени выполнения программы	-	-	-



2. ТЕХНИЧЕСКОЕ ПРЕДЛОЖЕНИЕ

Проектирование и разработка Web-сайтов включает:

1. Утверждение первичного технического задания разработки сайта;

2. Определение структурной схемы Web-cайта, расположение разделов, контента и навигации;

3. Web-дизайн - создание графических элементов макета с Web-cайта, стилей и элементов навигации;

4. Разработка программного кода, модулей, базы данных и других элементов Web-сайта необходимых в проекте;

5. Тестирование и размещение Web-сайта в сети Internet.

2.1 Расположение сайта

Сайт расположен на платном облачном хостинге ArubaCloud. На сервере настроена операционная система Debian 9 GNU/Linux. Она достаточно проста в настройке, является, пожалуй, одной из наиболее популярных и важных дистрибутивов. Имеет самое крупное по размерам среди всех дистрибутивов хранилище пакетов - готовых к использованию библиотек и программ, также поддерживает огромное множество архитектур.

Хранилище имеет 1ГБ оперативной памяти, 20 ГБ ПЗУ, 2 ТБ трафика в месяц. Что вполне достаточно для начального этапа нашего веб-справочника.

Управление и администрирование нашего удаленного сервера будет осуществляться через терминал MobaXterm.

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

MobaXterm оснащён удобным вкладочным интерфейсом, в котором можно открыть одновременно несколько терминалов, есть менеджер сессий и настройка большого числа параметров внешнего вида. При подключении к серверам и компьютерным сетям используются такие протоколы как FTP, SSH, SFTP, Telnet и многие другие. Используем для доступа к серверу, чтобы произвести настройки, установки и исполнение определенных функций.

2.2 Написание кода web-сайта вручную

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

Выбранный способ может показаться трудным и, он действительно требует опыта в программировании, но для данной задачи будет достаточно уровня выше базового. Нужны хорошие знания HTML, CSS, JavaScript, Python и других языков программирования.

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

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



2.3 Используемые web-технологии

2.3.1 Язык разметки HTML5

Язык гипертекстовой разметки - именно так переводится аббревиатура HTML (от англ. HyperText Markup Language). Интернет состоит из бесчисленного множества web-страниц (web-pages), все они связаны друг с другом при помощи различных гиперссылок.

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

На данный момент актуальной версией является HTML5. Официально рекомендован с 2014 года для широкого применения. Но HTML лишь формирует каркас и смысловую нагрузку элементов, расположенных на сайте, а для того, чтобы сделать страницу стильной и красивой, были разработаны каскадные таблицы стилей (CSS). Далее их и рассмотрим. [10]

2.3.2 Каскадные таблицы стилей CSS

Дли изменения внешнего вида элемента, на странице используют каскадные таблицы стилей (от англ. Cascading Style Sheets). Эти таблицы имеют определенный набор параметров форматирования. Преимущества использования CSS заключаются в том, что все параметры, например, размеры и цвет текста, кнопки, определенного блока, хранятся в отдельном файле, который в последствие мы можем подсоединить к любому html файлу и придать ему уже готовые стили.

Также таблицы стилей дают нам гораздо больше возможностей, нежели просто форматирование в HTML. Разделение описания логической структуры гипертекстовой разметки (которое выполняется на HTML и других языках разметки) от описания дизайна (стиля) этой web-страницы, которое выполняется с помощью CSS, являлось основной целью разработки. [11] программирование листинг контент сайт

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

2.3.3 Язык программирования Javascript

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

JavaScript крайне универсальный язык, включает в себя широкий набор возможностей: от простых анимаций и функций, меняющих отображение, до создания целых 2D или 3D игр и полномасштабных приложений. Язык очень быстрый, так как имеет хорошую оптимизацию на этапах преобразования и выполнения, но в тоже время гибкий.

На основе JavaScript написано огромное множество различных инструментов, библиотек, программных интерфейсов приложений. Язык имеет спецификацию ECMAScript. Подход, который применяется в браузерах при запуске JS, называется интерпретация. Особенности безопасности наложили на язык определённые ограничения, например, он не имеет доступа к операционной системе и ее файлам, не может взаимодействовать со сторонними вкладками и окнами. [5]



2.3.4 Фреймворк jQuery

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

Также автоматизирует многие повседневные и однообразные задачи web-программистов и имеет поддержку всеми современными браузерами.

С помощью библиотеки jQuery нам предоставляется возможность простого обращения к любому элементу DOM (объектной модели документа) и совершения действия с ним. [7]

Назовем еще несколько преимуществ:

1) возможность обрабатывать события

2) легкая реализация различных анимаций и визуальных эффектов

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

4) большое количество JavaScript плагинов.

2.3.5 Технология AJAX

Ajax (от англ. Asynchronous Javascript and XML -- «асинхронный JavaScript и XML»). Данная технология была разработана Джесси Джеймсом Гарретом и послужила новым рывком в возможностях, доступных web-приложениям. Благодаря Ajax нам стала доступна возможность обмена данными браузера и сервера в фоновом режиме, т.е. асинхронно.

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

Принцип работы Ajax следующий (рисунок 2.1):

1. Пользователь взаимодействует с каким-то элементом сайта, например, кнопка или ссылка, к которому привязан ajax;

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

3. Далее сервер получает ответ от БД и пересылает информацию обратно в браузер;

4. При помощи JavaScript мы получаем ответ в определенном формате, преобразуем его и делаем вывод пользователю.

Рисунок 2.1 - Принцип работы Ajax.

Доступны как GET, так и POST запросы. В качестве ответа может быть json, XML или текст. [7]

Перечислим преимущества:

1. Снижение потребления трафика. Нам не нужно заново загружать всю страницу целиком, заменяем только часть, которая подверглась изменениям;

2. Разгрузка сервера. Мы можем в разы уменьшить нагрузку на сервер, так как при запросе не требуется обновления всей страницы. Также использование готовых шаблонов постоянных элементов web-страницы;

3. Увеличение скорости отклика системы сайта на пользовательские действия и более быстрое получение ответа.

2.4 Выбор framework на python

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

Это своего рода веб-приложение, которое нам будет гораздо проще реализовать с помощью одного из фреймворков, написанного на python, так как они упрощают многие действия, облегчают работу с запросами, предоставляют некоторые готовые решения, шаблоны и многое другое. Рассмотрим несколько популярных фреймворков, таких как Django, Flask и Pyramid.

2.4.1 Фреймворк Flask

Framework Flask - это мини-фреймворк для создания web-приложений на языке Python, который построен на инструментах Werkzeug и шаблонизаторе Jinja2. Это своеобразный минималистичный каркас для веб-приложения, который предоставляет лишь минимальный базовый набор функциональных возможностей, позволяя пользователю самому решать, как реализовать поставленные задачи.

Несмотря на это, flask можно расширять до необходимого проекту уровня, т.к. framework имеет множество расширений, способных справится практически с любым заданием. Он очень удобный, гибкий и простой в работе. Для начинающих лучшее решение, потому что можно быстро начать создание своего проекта, расширяясь уже в процессе надобности. [9]

2.4.2 Фреймворк Django

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

Они предлагают множество готовых и удобных решений, которые облегчают разработку сайта. Работа с базой данных в django является объектно-ориентированной благодаря уровню абстракции. Нет необходимости писать sql-запросы для получения или добавления данных в базу. Все таблицы представлены в виде классов, методами которых осуществляется манипулирование содержанием таблиц. [9]

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

2.4.3 Фреймворк Pyramid

Рассмотрим один из последних фреймворков для web проектов - Pyramid. Поняв основные ошибки цельных, полнофункциональных и тяжелых фреймворков типа Django, разработчики отошли от развития каркаса с жестко заданной структурой и сделали очень гибкий, но легко расширяемый framework.

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

Для решения небольших задач не нужно подключать ненужные зависимости и функционал. Программист сам выбирает используемые инструменты и архитектуру проекта. [9]



2.4.4 Заключение по выбору фреймворка

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



3. РАЗРАБОТКА САЙТА.

3.1 Разработка архитектуры сайта

В нашем интерактивном справочнике по языкам программирования веб приложением будет являться онлайн компилятор. Он будет реализован на модели взаимодействия под названием «Клиент-Сервер». На рисунке 3.1 мы можем видеть схему данной архитектуры.

Рисунок 3.1 - Упрощенная схема модели «клиент-сервер».

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

Существуют такие понятия как «тонкий» клиент и «толстый» клиент. Под тонким клиентом подразумевают клиента, который на предоставленных ему ресурсах способен лишь запустить необходимое сетевое приложение через web-интерфейс. Оно реализовано с помощью html страниц, без каких либо скриптов. Все функции и операции исполняются уже непосредственно на самом сервере.

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

Таким образом, у нас объединяются прикладной модуль и модуль представления данных. Также появилось вследствие развития новое понятие - rich client. Оно объединяет в себе свойства толстого и тонкого клиентов.

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

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

3.2 Разработка структуры сайта

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

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

Рисунок 3.2 - Внешняя структура сайта.

Далее представим файловую структуру проекта. Корневая папка project хранит в себе все файлы нашего проекта.

Рисунок 3.3 - Скриншот папки с проектом.

Рисунок 3.4 - Скриншот папки templates

Рисунок 3.5 - Скриншот папки static



В папке проекта, изображённой на рисунке 3.3, находится непосредственно исполняемый Python файл с названием compiler.py, который рендерит (отображает) html страницы. Они лежат в папке templates (шаблоны), скриншот которой изображён на рисунке 3.4. В папке static лежит css файл и картинки для сайта, скриншот изображён на рисунке 3.5.

3.3 Разработка дизайна сайта

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

На рисунке 3.6 представлен дизайн сайта. В нашем случае преобладает белый фон, так как на нем лучше всего будет видно любой текст на сайте. Разделение блоков выполнено серыми линиями, чтобы не «бросалось» в глаза, но в тоже время визуально понятно делило страницу на части. «Список тем» и «Меню» выделены оранжевым цветом, так как они выполняют основную навигационную функцию сайта и обязаны выделяться на фоне всего сайта, при этом не отвлекать пользователя, когда он читает контент из блока с информацией.

На рисунке 3.7 представлен скриншот дизайна сайта, когда выбрана одна из предоставленных тем. Сначала идет теоретический материал по теме, шрифт был выбран удобный для длительного чтения. Затем идет блок компиляторов с футером, изображенные на рисунке 3.8. Стандартные элементы формы, через которую на сервер отсылаются запросы на компиляцию, гармонично вписались в дизайн сайта. Футер выполнен в светло-сером цвете фона и оранжевым текстом, что отлично сочетается.

Рисунок 3.6 - Скриншот «Главная» страница сайта.

Рисунок 3.7 - Скриншот блока с темами и информацией по ним.

Рисунок 3.8 - Скриншот блока с онлайн компиляторами и футером.

3.4 Разработка функционала и алгоритмов

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

Следует описать последовательность действий, которые будут воспроизводиться на внешнее воздействие пользователей (actor). Составленная диаграмма также помогает облегчить тестирование, так как мы четко представляем какой результат стоит ожидать, ведь описано поведение компонентов системы. Значок человечка обозначает актера, овалы обозначают доступные для него действия. Представим пример такой диаграммы на рисунке 3.9.

Рисунок 3.9 - Use Case диаграмма пользователя сайта.

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

1) возможность просмотра пунктов меню, например, «Главная», «О нас»;

2) просмотр списка с темами и выбор интересующей темы;

3) просмотр информации по выбранной теме;

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

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

Разберем реализацию онлайн компилятора. Формальное описание алгоритма выполнения компиляции приведено на рисунке 3.10. Выбранный фреймворк Flask для языка Python позволил нам удобно собрать проект. Все начинается с заполнения пользователем формы, предоставленной на сайте. В ней доступен список языков, на данный момент небольшой, но его можно расширять со временем. На выбор представлены следующие языки: C++, СИ и Java. Ниже располагается поле для написания непосредственно самого кода программы и поле для выведения результата ее работы.

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

Помимо вывода результатов выполнения программы реализован подсчет времени ее исполнения. Он происходит следующим образом. Подключаем модуль time, чтобы стала доступна функция возврата текущего времени, которая называется time.clock(). Перед выполнением функции компиляции программы запоминаем в переменную текущее время, затем после ее выполнения еще раз записываем текущее время, вызвав функцию time.clock(). Чтобы узнать время исполнения программы, берем разность полученных значений. Пример алгоритма для языка С++ приведен на рисунке 3.11.

Рисунок 3.10 - Формальное описание алгоритма выполнения компиляции.

Рисунок 3.11 - Алгоритм подсчета времени выполнения компилируемой программы.



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

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

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

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

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

· Орфографические

· Пунктуационные

· Грамматические

· Лексические

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

Основными методами тестирования любого программного продукта являются методы black-box, white-box, grey-box. Такие подходы в тестировании самодостаточны и способны найти хороший процент ошибок всей системы. Визуальное представление методов дано на рисунке 4.1.

Рисунок 4.1 - Классификация методов тестирования.

Рассмотрим данные методы подробнее.

4.1.1 Метод black-box

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

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

Главными преимуществами можно отметить то, что метод позволяет рано писать тесты (когда будет доступна спецификация), тестировщику не обязательно обладать знаниями в области программирования и тест с позиции пользователя, взгляд на продукт по-другому. [14]

4.1.2 Метод white-box

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

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

4.1.3 Метод grey-box

Как видно по рисунку 4.1, этот способ объединяет в себе две предыдущих стратегии. В данном случае нам известна лишь часть особенностей внутренней реализации тестируемого программного продукта. Например, алгоритмы и архитектура ПО, но само тестирование проводится как в черном ящике. Называется серым или полупрозрачным потому, что у нас только частичная видимость. В основном применяется для тестирования работоспособности взаимодействия разных программных модулей. [14]

4.2 Описание тестирования

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

Далее проведем тестирование стратегией black-box. Для этого нам нужно работать только с внешним интерфейсом программного продукта. Будем имитировать различную работу пользователя на нашем интерактивном справочнике и выявлять тем самым ошибки. Занесем данные в таблицу 4.1 о тестировании нашей информационной системы по стратегии черного ящика.



Таблица 4.1 - Тестирование методом черного ящика

Номер теста	Описание теста	Исходные данные	Полученный результат
1	Проверка реакции сайта на взаимодействие с элементами заголовочного блока, где расположены меню и логотип.	Событие нажатия на логотип, на ссылку «Главная», на «Темы», на «О нас», на «Контакты».	Тест прошел успешно, все ссылки рабочие и ведут на нужную страницу.
2	Проверка реакции сайта на взаимодействие с блоком «список тем»	События при нажатии на тему из списка	Тест прошел успешно, все ссылки кликабельны и ведут на нужную страницу
3	Проверка отправки формы с незаполненными полями	Не заполнено окно ввода на любом выбранном языке	Данные не отправлены на сервер, выводится диалоговое окно, которое просит заполнить нужное поле, на нем появляется фокус.
4	Проверка отправки формы на языке Java с неуказанным названием класса.	Не заполнено окно ввода названия написанного класса при выбранном языке java	Данные с формы не отправлены на сервер, выводится диалоговое окно, которое просит заполнить необходимое поле, фокусируется на нем.
5	Проверка работоспособности компилятора, отправка корректной программы (для всех языков)	Заполнение окна ввода формы корректной программой и ее отправка на компиляцию	Тест прошел успешно, мы получили в окне вывода ожидаемый результат от программы и время ее выполнения.
6	Проверка работоспособности компилятора, отправка некорректной программы (для всех языков)	Заполнение окна ввода формы некорректной программой и ее отправка на компиляцию	Тест прошел успешно, мы получили в окне вывода сообщение об ошибке
7	Проверка работоспособности компилятора, отправка программ на компиляцию одновременно на обеих формах	Заполнение окон ввода форм программами и запуск обеих	Тест прошел успешно, обе формы выдали ожидаемые результаты и работают независимо.
8	Проверка работы технологии Ajax на сайте.	Отправка формы с программой	Тест пройден успешно. Данные с сервера приходят и выводятся без перезагрузки и мерцания страницы.

4.3 Оценка результатов тестирования

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

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

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

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



ЗАКЛЮЧЕНИЕ

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

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

Далее выбрали техническое предложение для данной системы. Были рассмотрены языки и технологии веб-программирования. Для реализации интерактивного справочника использовали следующие инструментальные средства: HTML, CSS, JavaScript, framework jQuery.

Для создания проекта и реализации back-end логики были рассмотрены популярные каркасы для языка Python, такие как, Django, Pyramid и Flask. Выбор был сделан в пользу последнего, так как он в наиболее полной мере отвечал нашим требованиям.

Сайт располагается на облачном сервере ArubaCloud с операционной системой Debian 9 GNU/Linux и управляется удаленно, через терминал MobaXterm.

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

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

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



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

1. Комарцов, О.М. ПРОБЛЕМЫ ПРЕПОДАВАНИЯ В ТЕХНИЧЕСКОМ ВУЗЕ [Электронный ресурс] / Комарцов О.М., Коротков В.В., Сахаров В.В. // Современные проблемы науки и образования: электрон. журн. - 2014. - № 6. - Режим доступа: http://www.science-education.ru/ru/article/view?id=16252.

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

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

4. LearnJava [Электронный ресурс] - URL: http://www.learnjavaonline.org/.

5. Современный учебник JavaScript [Электронный ресурс] - Режим доступа: https://learn.javascript.ru/.

6. W3schools Online Web Tutorials [Электронный ресурс] - Режим доступа: https://www.w3schools.com/.

7. Ajax JQuery Учебник. [Электронный ресурс] - Режим доступа: https://jqbook.net.ru/ajax/jquery.

8. Лафоре Р. Объектно-ориентированное программирование в С++ (Object-Oriented Programming in C++, 4/e). -- 4-е изд. -- СПб.: Питер, 2016. - 36 с.

9. Статья о выборе Python Framework [Электронный ресурс] // airpair: сайт. - Режим доступа: https://www.airpair.com/python/posts/django-flask-pyramid.

10. Основы HTML [Электронный ресурс] // developer.mozilla.org: сайт-справочник. - Режим доступа: https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics.

11. Справочник CSS [Электронный ресурс] // htmlbook: сайт-справочник. - Режим доступа: http://htmlbook.ru/css.

12. Python 3 для начинающих [Электронный ресурс] // pythonworld: сайт-самоучитель на python. - Режим доступа: https://pythonworld.ru/samouchitel-python.

13. Статья о компонентах сетевого приложения клиент-сервер. [Электронный ресурс] // 4stud: офиц. сайт. - Режим доступа: http://www.4stud.info/networking/lecture5.html.

14. Статья о White/Black/Grey Box-тестировании [Электронный ресурс] // qalight: офиц. сайт центра подготовки IT специалистов . - Режим доступа: https://qalight.com.ua/baza-znaniy/white-black-grey-box-testirovanie/



ПРИЛОЖЕНИЕ 1

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

Листинг файла Python (главный исполняемый файл проекта)

from flask import Flask, request, render_template, json

from subprocess import Popen, PIPE, call

import time

app= Flask(__name__)

@app.route('/')

def main_page():

return render_template('./main.html')

@app.route('/helloworld')

def helloworld_page():

return render_template('./helloworld.html')

@app.route('/inout')

def inout_page():

return render_template('./inout.html')

@app.route('/variables')

def variables_page():

return render_template('./variables.html')

@app.route('/types')

def types_page():

return render_template('./types.html')

@app.route('/cycle')

def cycle_page():

return render_template('./cycle.html')

@app.route('/function')

def function_page():

return render_template('./function.html')

@app.route('/oop')

def oop_page():

return render_template('./oop.html')

@app.route('/funcprog')

def funcprog_page():

return render_template('./funcprog.html')

#========================ПЕРВЫЙ КОМПИЛЯТОР===============================

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

def get_test_data1():

code = request.form.get('code')

lang = request.form.get('lang')

classJava = request.form.get('classJava')

if lang=="c++":

fc = open('/root/project/test1.cc', 'w')

fc.write(code)

fc.close()

start_t=time.clock()

suc1, error11 = Popen("g++ /root/project/test1.cc", shell=True, stdout=PIPE, stderr=PIPE).communicate()

tact_proc= time.clock() - start_t

out1, error12 = Popen("./a.out", shell=True, stdout=PIPE).communicate()

deletefile=Popen("rm ./a.out", shell=True, stdout=PIPE).communicate()

return 'suc1: {} error11: {} out1: {} error12: {} Время выполнения программы: {} seconds'.format(suc1, error11, out1, error12, round(tact_proc,5))

elif lang=="C":

fci = open('/root/project/test2.c', 'w')

fci.write(code)

fci.close()

start_c=time.clock()

suc5, error15 = Popen("g++ /root/project/test2.c", shell=True, stdout=PIPE, stderr=PIPE).communicate()

tact_proc_c= time.clock() - start_c

out5, error25 = Popen("./a.out", shell=True, stdout=PIPE).communicate()

deletefile=Popen("rm ./a.out", shell=True, stdout=PIPE).communicate()

return 'suc5: {} error15: {} out5: {} error25: {} Время выполнения программы: {} seconds'.format(suc5, error15, out5, error25, round(tact_proc_c,5))

else:

fj = open('/root/project/'+classJava+'.java', 'w')

fj.write(code)

fj.close()

start_j=time.clock()

comp, error21 = Popen("javac /root/project/"+classJava+".java", shell=True, stdout=PIPE, stderr=PIPE).communicate()

tact_proc_j= time.clock() - start_j

stderr=PIPE).communicate()

execjava, error22 = Popen("java -classpath ./project "+classJava+"", shell=True, stdout=PIPE, stderr=PIPE).communicate()

deletefile=Popen("rm ./project/"+classJava+".java", shell=True, stdout=PIPE).communicate()

deletefile=Popen("rm ./project/"+classJava+".class", shell=True, stdout=PIPE).communicate()

return 'comp: {} error21: {} execjava: {} error22: {} Время выполнения программы: {} seconds'.format(comp, error21, execjava, error22, round(tact_proc_j,5))

#=======================ВТОРОЙ КОМПИЛЯТОР============================

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

def get_test_data2():

code2 = request.form.get('code2')

lang2 = request.form.get('lang2')

classJava2 = request.form.get('classJavaa')

if lang2=="c++":

fc2 = open('/root/project/test1.cc', 'w')

fc2.write(code2)

fc2.close()

start_t2=time.clock()

perem1, eror1 = Popen("g++ /root/project/test1.cc", shell=True, stdout=PIPE, stderr=PIPE).communicate()

tact_proc2= time.clock() - start_t2

perem2, eror2 = Popen("./a.out", shell=True, stdout=PIPE).communicate()

deletefile =Popen("rm ./a.out", shell=True, stdout=PIPE).communicate()

return 'perem1: {} eror1: {} perem2: {} eror2: {} Время выполнения программы: {} seconds'.format(perem1, eror1, perem2, eror2, round(tact_proc2,5))

elif lang2=="C":

fci2 = open('/root/project/test2.c', 'w')

fci2.write(code2)

fci2.close()

start_c2=time.clock()

perem3, eror3 = Popen("g++ /root/project/test2.c", shell=True, stdout=PIPE, stderr=PIPE).communicate()

tact_proc_c2= time.clock() - start_c2

perem4, eror4 = Popen("./a.out", shell=True, stdout=PIPE).communicate()

deletefile =Popen("rm ./a.out", shell=True, stdout=PIPE).communicate()

return 'perem3: {} eror3: {} perem4: {} eror4: {} Время выполнения программы: {} seconds'.format(perem3, eror3, perem4, eror4, round(tact_proc_c2,5))

else:

fj2 = open('/root/project/'+classJava2+'.java', 'w')

fj2.write(code2)

fj2.close()

start_j2=time.clock()

perem5, eror5 = Popen("javac /root/project/"+classJava2+".java", shell=True, stdout=PIPE, stderr=PIPE).communicate()

tact_proc_j2= time.clock() - start_j2

perem6, eror6 = Popen("java -classpath ./project "+classJava2+"", shell=True, stdout=PIPE, stderr=PIPE).communicate()

deletefile=Popen("rm ./project/"+classJava2+".java", shell=True, stdout=PIPE).communicate()

deletefile=Popen("rm ./project/"+classJava2+".class", shell=True, stdout=PIPE).communicate()

return 'perem5: {} eror5: {} perem6: {} eror6: {} Время выполнения программы: {} seconds'.format(perem5, eror5, perem6, eror6, round(tact_proc_j2,5))

if __name__=='__main__':

app.run(host='0.0.0.0', port=8000, debug=True)



ПРИЛОЖЕНИЕ 2

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

Листинг файла html (шаблон страницы первой темы «hello world»)

<!DOCTYPE html>

<html>

<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<meta charset="utf-8">

<title>Интерактивный справочник по языкам программирования</title>

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">

<script src="{{ url_for('static', filename='main.js') }}"></script>

<link href="{{ url_for('static', filename='img/logo.png') }}" rel="shortcut icon" type="image/x-icon">

</head>

<body>

<nav class="top-menu">

<a class="navbar-logo" href="/"><img src="{{ url_for('static', filename='img/logo.png') }}"></a>

<ul class="menu-main">

<li><a href="/">Главная</a></li>

<li><a href="">Темы</a></li>

<li><a href="">О нас</a></li>

<li><a href="">Контакты</a></li>

</ul>

</nav>

<div class="wrapper">

<div class="left-menu">

<ul class="list">

<p class="title-themes">СПИСОК ТЕМ:</p><hr><br>

<li style="background: lightgray; margin-left: 10px; padding-left: 10px"><a href="/helloworld">Hello, World!</a></li>

<li><a href="/inout">Ввод/вывод</a></li>

<li><a href="/variables">Переменные</a></li>

<li><a href="/types">Типы</a></li>

<li><a href="/cycle">Циклы</a></li>

<li><a href="/function">Функции (процедуры)</a></li>

<li><a href="/oop"> ООП </a></li>

<li><a href="/funcprog">Функциональное программирование</a></li>

</ul>

</div>

<div class="content">

<big><b>«Hello, world!»</b></big> -- программа, результатом работы которой является вывод на экран или иное устройство фразы «Hello, world!» (в дословном переводе с английского -- «Привет, мир!»;<br> представляет собой распространённое неформальное приветствие, близкое к русскому «всем привет!»). Также используются вариации с другой пунктуацией или регистром -- например, «Hello World». <br>Обычно это первый пример программы в учебниках по программированию, и для многих студентов такая программа является первым опытом при<br> изучении нового языка.

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

<br>

Хотя небольшие проверочные примеры использовались с тех самых пор, как появились компьютеры, традиция использования фразы «Hello, world!» в качестве тестового сообщения была введена в книге «Язык программирования Си» Брайана Кернигана и Денниса Ритчи, опубликованной в 1978 году.

<br><br>

ПРИМЕР ПРОГРАММЫ НА ЯЗЫКЕ С++:<br>

<code>

#include <iostream><br>

#include <cstdlib> // для system<br>

using namespace std;<br>

<br>

int main() <br>

{ <br>

cout << "Hello, world!" << endl;<br>

system("pause"); // Только для тех, у кого MS Visual Studio<br>

return 0; <br>

}

</code>

<br><br>.<hr><br>

</div>

</div>

<div class='comp_block'>

<div class='formin'>

<form action="/compiler1" method="POST" name="compiler1" id="comp_form">

<select size="1" required name="lang" onChange="return changeRequestOne(this.value)">

<option disabled>Выберите язык</option>

<option value="c++">С++</option>

<option value="C">СИ</option>

<option value="java">Java</option>

</select>

<input type="submit" value="Скомпилировать" name="comm1">

...