МИНИСТЕРСТВО ОБРАЗОВАНИЯ РЕСПУБЛИКИ БЕЛАРУСЬ
УЧРЕЖДЕНИЕ ОБРАЗОВАНИЯ «БЕЛОРУССКИЙ ГОСУДАРСТВЕННЫЙ
УНИВЕРСИТЕТ ИНФОРМАТИКИ И ЭЛЕКСТРОНИКИ»
ФИЛИАЛ «МИНСКИЙ РАДИОТЕХНИЧЕСКИЙ КОЛЛЕДЖ»
ОТЧЁТ
По практике по разработке и сопровождению программного обеспечения
учащегося Горянина Алексея Витальевича_______________________________
Специальность 5-04-0612-02 «Разработка и сопровождение программного____
обеспечения информационных систем»
а
Группа № 3К9311
1
Выполнил учащийся
/А.В.Горянин/
Руководитель практики
/А.И.Назарова/
МИНСК 2024
СОДЕРЖАНИЕ
Введение ..................................................................................................................... 4
1 Постановка задачи .................................................................................................. 7
1.1 Описание предметной области .................................................................... 9
1.2 Обзор существующих аналогов................................................................... 9
1.3 Информационная база задачи .................................................................... 15
1.4 Функциональное назначение ..................................................................... 15
2 Проектирование задачи ....................................................................................... 17
2.1 Алгоритм решения задачи.......................................................................... 17
2.2 Объектно-ориентированное проектирование .......................................... 18
2.3 Проектирование интерфейса ..................................................................... 21
2.4 Выбор и обоснование инструментов разработки .................................... 21
3 Программная реализация..................................................................................... 25
3.1 Физическая структура................................................................................. 25
3.2 Описание разработанных модулей ............................................................ 27
4 Тестирование ........................................................................................................ 28
5 Применение........................................................................................................... 31
5.1 Назначение и условия применения ........................................................... 31
5.2 Руководство пользователя.......................................................................... 35
Заключение ........................................................................................................ 37
Список использованных источников .............................................................. 38
Приложение А (обязательно текст программы) ............................................ 39
Приложение Б (обязательно изображение интерфейса программы) ........... 57
Приложение В (обязательно изображение интерфейса программы) .......... 57
МРК КП 5-04-0612-02 07ПЗ
Изм. Лист
Разраб.
Провер.
Реценз.
Н. Контр.
Утверд.
№ докум.
Горянин
Назарова
Подпись
Дата
Веб-приложение «English
explorer»
Лит.
Лист
2
МРК
Листов
??
2
ВВЕДЕНИЕ
Англоязычное веб-приложение для изучения языка – это онлайнинструмент или программное приложение, предназначенное для улучшения
навыков изучающих английский язык через различные формы контента. Такие вебприложения часто включают интерактивные уроки, аудиофайлы, видеоуроки и
другие материалы для освоения языка. Они предоставляют пользователям удобные
возможности для обучения, независимо от их уровня знаний и целей.
Для тех, кто изучает английский язык, такие приложения являются
незаменимыми инструментами. Они позволяют осваивать новые слова,
грамматические правила, а также улучшать навыки аудирования и произношения.
Веб-приложения могут включать такие функции, как тесты, игры, а также
возможность повторять пройденный материал для более эффективного обучения.
Многие из них поддерживают создание пользовательских учебных планов и
отслеживание прогресса, что помогает лучше организовать процесс изучения
языка.
Использование веб-приложения для изучения английского языка
предоставляет множество преимуществ, которые значительно облегчают и
обогащают учебный процесс. Веб-приложения позволяют получать широкий
спектр материалов для обучения. Пользователь может слушать подкасты на
английском, просматривать видеоуроки, читать адаптированные тексты и
выполнять упражнения для тренировки словарного запаса, грамматики и
произношения. Благодаря таким приложениям можно настроить обучение под свой
уровень и интересы, что делает процесс обучения увлекательным.
Веб-приложения для изучения английского языка позволяют пользователям
слушать аутентичные материалы на языке, включая диалоги, лекции и аудиокниги.
Пользователь может воспроизводить аудио с разной скоростью, повторять отрывки
и даже видеть субтитры для более точного понимания. Это помогает лучше
осваивать произношение и улучшать навыки аудирования. Пользователи могут
создавать собственные учебные планы, настраивая программу обучения в
зависимости от своих целей и уровня знаний. Веб-приложения часто включают
возможность настраивать плейлисты с уроками, упражнениями или аудиоматериалами, что помогает организовать процесс обучения более эффективно.
Встроенные тесты и интерактивные задания помогают пользователям
проверять свои знания на каждом этапе обучения. Автоматическая проверка
результатов позволяет сразу увидеть ошибки и сфокусироваться на проблемных
зонах, что повышает эффективность обучения. Веб-приложения обеспечивают
удобный доступ к разнообразным материалам и учебным ресурсам. Пользователь
может легко находить и запускать необходимые уроки или упражнения с помощью
простого и интуитивного интерфейса. Возможность работать на различных
устройствах (компьютере, планшете или смартфоне) делает обучение мобильным
и доступным в любое время.
3
Различные типы веб-приложений для изучения английского языка
предоставляют уникальные возможности для развития различных аспектов языка.
Приложения для аудирования позволяют практиковать навыки восприятия речи на
слух. Они могут включать уроки с диалогами, подкасты, аудиокниги и другие
аудио-материалы, которые помогают пользователям улучшать понимание речи и
освоить произношение. Приложения для изучения грамматики предлагают
упражнения для освоения правил грамматики и синтаксиса. Пользователи могут
выполнять задания по различным темам, следить за своим прогрессом и повторять
сложные темы. Приложения для разговорной практики помогают улучшить навыки
общения на английском. Некоторые из них предоставляют возможность общения с
носителями языка или искусственными помощниками, что помогает развить
уверенность в разговорной речи. Приложения для словарного запаса предлагают
интерактивные задания, которые помогают расширять словарный запас с
использованием флеш-карт, игр и тестов.
Тенденции и перспективы в разработке веб-приложений для изучения
английского языка включают создание интерактивных платформ и
мультимедийного контента. Веб-приложения становятся более интерактивными,
предлагая пользователям возможность взаимодействовать с контентом через
видео, аудио и игры, что помогает удерживать внимание и повышает интерес к
обучению. Оптимизация приложений для мобильных платформ, таких как iOS и
Android, позволяет изучать язык в любом месте и в любое время, делая процесс
обучения еще более гибким. Персонализация обучения становится важным
аспектом благодаря использованию искусственного интеллекта и аналитики. Это
позволяет отслеживать прогресс и создавать учебные планы, адаптированные под
индивидуальные нужды пользователей. Приложения могут интегрироваться с
облачными сервисами, что обеспечивает удобство сохранения прогресса и доступа
к материалам с любого устройства. Искусственный интеллект может
анализировать успехи пользователей и предлагать подходящие уроки или
упражнения на основе их прогресса, делая обучение более эффективным и
направленным на конкретные потребности.
Таким образом, разработка веб-приложений для изучения английского
языка предлагает множество возможностей для инноваций и совершенствования,
следуя потребностям пользователей и технологическим трендам.
4
1 ПОСТАНОВКА ЗАДАЧИ
1.1
Описание предметной области
Изучение английского языка включает в себя овладение навыками чтения,
письма, аудирования и говорения, а также освоение грамматики и лексики. Оно
охватывает широкий спектр тем: от базовых выражений и грамматических
структур до сложных текстов и разговорных навыков. Веб-приложения для
изучения языков – это специализированные программные продукты,
разработанные для веб-платформ, которые помогают пользователям изучать язык
в интерактивной и увлекательной форме. Веб-приложение для изучения
английского языка может быть полезным по нескольким причинам. Оно позволяет
пользователям учить язык в интерактивной форме, что способствует лучшему
пониманию тематики. Платформа помогает пользователям улучшать навыки
чтения и понимания текстов, а также изучать грамматику и словарный запас. Часто
включаются функции уведомлений о новых материалах и достижениях, что
позволяет не упускать важные моменты. Дополнительно могут быть доступны
виртуальные экскурсии и интерактивные задания, делающие изучение языка более
наглядным и интересным, а образовательные материалы доступны в любое время
и в любом месте, что позволяет пользователям учиться в удобном для них темпе.
Веб-приложение для изучения английского языка должно включать
ключевые функции, делающие обучение увлекательным и познавательным. Вопервых, оно должно наглядно представлять грамматические правила и лексические
единицы, позволяя пользователям легко их изучать. Во-вторых, приложение
должно предоставлять базовые знания о языке, включая важные правила и
термины, что помогает пользователям лучше понять язык. Также важно включить
историческую информацию о языке и его развитии. Дополнительно приложение
может предлагать интерактивные викторины и тесты для проверки знаний.
1.2 Обзор существующих аналогов
Первым рассматриваемым аналогом является Duolingo - Популярное
приложение с игровым подходом к обучению, охватывающее основные аспекты
языка.. Он является одним из самых популярных и широко используемых
приложений, доступных для изучения английского. Пример продемонстрирован на
рисунке 1.1.
5
Рисунок 1.1 – Главное окно программы
Рисунок 1.2 – Окно выбора темы
Вторым рассматриваемым аналогом является Babbel – это платформа для
изучения языков, которая фокусируется на практическом применении языка в
реальных ситуациях. Babbel выделяется своим акцентом на разговорной речи.
6
Уроки построены таким образом, чтобы вы могли сразу начать применять новые
слова и фразы в диалогах. Благодаря качественным аудиозаписям носителей языка,
вы сможете освоить правильное произношение и интонацию. Пример
продемонстрирован на рисунке 3.
Рисунок 1.3 – Главное меню приложения
Рисунок 1.4 – Меню выбора тем
7
Вторым рассматриваемым аналогом является Memrise – это платформа для
изучения языков, которая использует уникальный подход, основанный на
мнемотехнике и повторении. Она помогает эффективно запоминать новые слова и
фразы, связывая их с яркими образами, ассоциациями или даже забавными мемами.
Пример продемонстрирован на рисунке 5 .
Рисунок 1.5 – Главное меню прилоежния
8
Рисунок 1.6 – Профиль пользователя
Таблица 1. – Сравнение программ
Характеристика
Основной фокус
Персонализация
Грамматика
Разговорная речь
Лексика
Методы обучения
Duolingo
Игровой
подход,
базовые
конструкции,
лексика
Средняя
(адаптация к
уровню)
Базовая
Средняя
Широкий
охват
Игры,
упражнения,
повторение
Babbel
Разговорная речь,
реальные
ситуации
Memrise
Запоминание
слов,
мнемотехника
Высокая
(индивидуальные
планы)
Средняя
Высокая
Средняя
(выбор
курсов)
Слабая
Низкая
Огромный
Целенаправленное
выбор слов и
изучение
фраз
Диалоги,
Карточки,
упражнения,
ассоциации,
аудио
повторение
9
1.3
Информационная база задачи
(Входные данные с листа задания и выходные данные – результат
выполнения: результат данной сессии, задания, статистика). В ходе разработки
программы производились обращения к различным информационным источникам,
предоставляющим необходимые данные, методы и инструменты.
Информационная база «» включает следующие ресурсы:
Данный набор информационных ресурсов обеспечил необходимую основу
для разработки программы и написания курсовой работы, а также позволил сделать
проект информированным и научно обоснованным.
1.4
Функциональное назначение
Разрабатываемое веб-приложение "English Explorer" должно реализовывать
следующие функции:
Ведение базы данных: Хранение и организация образовательных
материалов, тестов и информации о пользователях. Это включает в себя
управление данными, доступными для пользователей и администраторов.
Обеспечение безопасности данных: Установка прав доступа для защиты
информации и обеспечения конфиденциальности. Включает в себя авторизацию
пользователей и защиту от несанкционированного доступа.
Авторизация: Контроль допуска к информации. Пользователи должны
проходить аутентификацию для получения доступа к персонализированным
материалам и функциям.
Получение достижений: Пользователи получают достижения за
выполнение тестов и выполнение других образовательных задач, что мотивирует
их продолжать обучение.
Прохождение тестов: Возможность пользователям проходить тесты и
получать обратную связь по результатам, что позволяет оценивать их знания и
прогресс.
Создание заметок: Пользователи могут создавать, редактировать и
просматривать заметки в любое время, что позволяет им сохранять важную
информацию и мысли по ходу обучения.
10
2 ПРОЕКТИРОВАНИЕ ЗАДАЧИ
2.1
Алгоритм решения задачи
Алгоритм – это конечный набор правил, который определяет
последовательность операций для решения конкретного множества задач и
обладает пятью важными чертами: конечность, определённость, ввод, вывод,
эффективность. [6]
Существует несколько видов алгоритмов:
 Последовательный алгоритм – это тип алгоритма, при котором задача
решается последовательным выполнением действий. Используется для простых
задач, которые могут быть решены поэтапно.
 Ветвящийся алгоритм – это тип алгоритма, при котором задача может
иметь несколько возможных решений, в зависимости от условий. Используется для
сложных задач, которые требуют принятия решений в зависимости от
определенных факторов.
 Циклический алгоритм – это тип алгоритма, при котором определенные
действия выполняются несколько раз до достижения определенного условия.
Используется, когда необходимо выполнить определенное действие несколько раз,
например, для обработки больших объемов данных.
Разработка алгоритма включает в себя выбор метода проектирования
алгоритма, выбор формы записи алгоритма (блок-схемы и др.), выбор тестов и
метода тестирования, проектирование самого алгоритма.
Блок-схема – это графическое представление алгоритма, процесса или
системы в виде последовательности блоков, связанных между собой стрелками.
Блоки представляют собой определенные операции, шаги или решения, а стрелки
показывают направление потока управления или передачу данных между блоками.
Основные элементы блок-схем включают в себя:
 Прямоугольник – используется для представления операций, задач или
действий, которые должны быть выполнены.
 Ромб – используется для условий или принятия решений. Обычно в ромбе
записывается вопрос или условие.
 Овал – используется для представления начала или конца процесса.
 Параллелограмм – используется для представления ввода или вывода
данных в процессе.
 Стрелки – используются для соединения элементов блок-схем и
указывают направление выполнения процесса или логики алгоритма.
Словесное описание алгоритма:
Пользователь заходит в программное средство "Медиапроигрыватель" и
перед ним появляется главное окно программы. После, перед пользователем
раскрывается весь функционал программного средства – а именно: добавление
11
песен, постановка аудио на паузу, включение предыдущего трека, включение
следующего трека, выключение проигрывания.
Перед началом использования программы пользователь должен добавить их
в специально окно. Пользователю открывается окно которое позволяет выбрать
ему аудио из существующих на его компьютере.
После добавления песен, пользователь может приступить к прослушиванию
аудио.
Также, пользователь может просмотреть сохраненные песни в окне с его
названиями.
Графически алгоритм работы разрабатываемого программного средства
представлен с помощью блок-схемы на рисунке 2.1
Рисунок 2.1 – Блок-схема алгоритма работы программного средства
Блок-схема алгоритма работы разрабатываемого средства «English explorer»
представлена на рисунке 2.1, а также в графической части МРКК. 508890.007
2.2 Объектно-ориентированное проектирование
Объектно-ориентированное проектирование (ООП) в проекте телеграммбота «Попутка» основывается на концепции классов и объектов, каждый из
которых представляет определённый компонент системы.
12
К диаграммам объектно-ориентированного проектирования относятся:
 диаграмма вариантов использования;
 диаграмма деятельности;
 диаграмма классов;
 диаграмма состояний;
 диаграммы взаимодействия: диаграмма последовательности и диаграмма
кооперации;
 диаграмма компонентов.
Основными компонентами диаграммы вариантов использования являются:
варианты использования, актеры, интерфейсы, примечания, отношения.
Диаграмма вариантов использования
Диаграмма вариантов использования описывает функциональные
требования к системе с точки зрения различных ролей пользователей. В центре
диаграммы находится единственный актер «Пользователь», который
взаимодействует с системой через следующие основные варианты использования:
«Авторизоваться» — пользователь вводит свои данные для доступа к
системе.
«Пройти тест» — пользователь выбирает тест для выполнения и отвечает на
вопросы.
«Посмотреть статистику» — пользователь просматривает свои результаты
тестов и достижения.
Каждый из этих вариантов использования включает дополнительные шаги.
Например, при прохождении теста пользователь отвечает на вопросы по
грамматике, лексике или аудированию. Просмотр статистики включает
отображение результатов за определённый период, сравнение достижений и
рекомендации по улучшению.
Диаграмма деятельности
Эта диаграмма визуализирует процесс выполнения основных операций в
системе. Процесс начинается с авторизации, после чего пользователь может
выбрать одно из действий: «Пройти тест» или «Посмотреть статистику». Если
пользователь выбирает тест, система отображает вопросы, которые он
последовательно выполняет. После завершения теста система записывает и
сохраняет результаты. Если пользователь выбирает просмотр статистики, система
выводит историю выполненных тестов и оценок.
Диаграмма классов
Центральные классы системы:
Класс User — представляет пользователя и содержит атрибуты id, username,
password. Методы: login(), take_test(), view_statistics().
Класс Test — содержит атрибуты, такие как id, название теста, список
вопросов, и метод get_questions().
13
Класс Question — представляет отдельный вопрос в тесте, включает текст
вопроса, варианты ответов, правильный ответ и метод check_answer().
Класс Statistics — управляет записью и отображением данных о результатах
пользователя.
Диаграмма состояний
Диаграмма состояний отображает возможные состояния системы. Процесс
начинается с авторизации пользователя. Затем пользователь может перейти в
состояние «Прохождение теста» или «Просмотр статистики». В состоянии
«Прохождение теста» пользователь отвечает на вопросы, после чего происходит
завершение теста и фиксация результатов. В состоянии «Просмотр статистики»
система отображает подробные данные о результатах пользователя.
Диаграммы взаимодействия (последовательности и кооперации)
Диаграмма последовательности иллюстрирует взаимодействие между
пользователем и системой. Процесс начинается с авторизации, затем пользователь
выбирает тест, система загружает вопросы, пользователь отвечает на них, а после
завершения система сохраняет результаты. Диаграмма кооперации показывает
взаимосвязь между основными компонентами системы, такими как User, Test,
Statistics, и базой данных.
Диаграмма компонентов
Диаграмма компонентов отображает структуру веб-приложения, включая
основные файлы и их взаимодействие:
Python (.py) ‒ для обработки логики приложения;
HTML (.html) ‒ для отображения страниц интерфейса;
CSS (.css) ‒ для стилизации страниц;
База данных (.db) ˗ для хранения данных пользователей и результатов
тестов;
JavaScript (.js) ˗ для динамики интерфейса;
.env файлы конфигурации для хранения параметров окружения.Диаграмма
компонентов во всех нотациях изображены в приложении А на рисунке А.14.
2.3
Проектироавние интерфейса
Проектирование интерфейса пользователя является важным этапом
разработки веб-приложения «English explorer», обеспечивающим удобство и
простоту использования системы. Интерфейс должен быть интуитивно понятным,
позволяя пользователям легко регистрироваться, изучать материал, проходить
тест, смотреть статистику.
Основные элементы интерфейса включают:
 главное меню, макет которого представ на рисунке 2.1 – основное
пространство взаимодействия, где пользователь видит доступные функции. Оно
должно содержать кнопки для прохождения теста, просмотра статистики,
просмотра статистики;
14
Рисунок 2.1 – Макет главного меню программы
 форма
регистрации – серия сообщений для ввода необходимой
информации при регистрации нового пользователя. Здесь пользователь указывает
свое имя и почту. Представлено на рисунке 2.2;
Рисунок 2.2 – Форма регистрации и входа в аккаунт
15
 Прохождение
теста, макет которого представ на рисунке 2.2 –
интерактивное меню выбора вопросов, где пользователь может выбрать
правильный ответ. Меню должно предлагать варианты вопросов;
Рисунок 2.3 – Макет прохождения теста
 Меню статистики, макет которого представ на рисунке 2.4 – страница со
статистикой, включая количество верных и неверных ответов.;
16
Рисунок 2.4 – Макет вкладки стататистика
2.4
Выбор и обоснование инструментов разработки
1. Python
Python — это высокоуровневый язык программирования с
интерпретируемой динамической типизацией, широко используемый благодаря
своей простоте и выразительности. Веб-приложения, построенные на Python, легко
поддерживать, и они могут масштабироваться по мере необходимости.
Характеристика и использование в проекте:
Простота и читаемость кода: Python известен своей минималистичной и
интуитивно понятной синтаксисом, что делает его идеальным для быстрой
разработки веб-приложений.
Широкий набор библиотек: Python поддерживает множество библиотек,
которые помогают с обработкой данных, взаимодействием с базами данных,
обработкой запросов HTTP и многим другим. Это существенно ускоряет
разработку.
Поддержка веб-фреймворков: Python поддерживает множество вебфреймворков, включая Django, который является основным фреймворком в вашем
проекте.
Применение в проекте:
17
Python используется для серверной логики приложения: обработки запросов
пользователей, управления данными, взаимодействия с базой данных и бизнеслогики (например, управление уроками, аудио и пользовательскими настройками).
2. Django
Django — это фреймворк для создания полноценных веб-приложений на
Python. Он построен с учётом принципов "не повторяй себя" (DRY) и "конвенция
вместо конфигурации", что помогает разработчикам сосредоточиться на бизнеслогике приложения, а не на рутинных задачах.
Характеристика и использование в проекте:
Структурированность и организация: Django обеспечивает четкую
организацию проекта, разделяя код на модули: модели (работа с базой данных),
представления (обработка логики) и шаблоны (HTML для отображения данных).
Автоматизация рутинных задач: В Django встроены системы для
управления пользователями, формами, валидацией данных и безопасностью.
Например, встроенная система аутентификации позволяет легко создать
регистрацию и вход в систему для пользователей.
ORM (Object-Relational Mapping): Django имеет встроенную систему ORM,
которая позволяет работать с базами данных как с объектами Python. Это делает
взаимодействие с данными более удобным и безопасным.
Шаблоны Django: Django поддерживает собственную систему шаблонов для
генерации HTML на основе данных, полученных с сервера.
Применение в проекте:
Django используется для управления всеми аспектами серверной части
приложения: от маршрутизации запросов и взаимодействия с базой данных до
управления пользователями и безопасностью. Также фреймворк помогает строить
API для взаимодействия с фронтендом.
3. HTML
HTML (HyperText Markup Language) — это язык разметки, который
используется для создания структуры веб-страниц. Он является основой фронтенда
веб-приложения, отвечая за отображение контента в браузере.
Характеристика и использование в проекте:
Создание структуры страниц: HTML используется для разметки и
структурирования веб-страниц. Каждый элемент интерфейса, будь то текст,
изображения или формы, описывается с помощью тегов HTML.
Взаимодействие с Django: Django использует HTML-шаблоны для
динамической генерации страниц. Это значит, что сервер отправляет
сгенерированные на основе данных страницы на клиентскую часть.
Интеграция с CSS и JavaScript: HTML работает в связке с CSS (для
стилизации) и JavaScript (для взаимодействия с пользователем).
Применение в проекте:
Веб-страницы, которые видит пользователь, создаются на основе HTMLшаблонов, сгенерированных Django. Эти страницы могут содержать упражнения,
текстовые блоки, кнопки для взаимодействия с уроками и аудио.
18
4. CSS
CSS (Cascading Style Sheets) — это язык таблиц стилей, который
используется для стилизации и оформления веб-страниц. Он управляет тем, как
элементы HTML отображаются в браузере, задавая их внешний вид.
Характеристика и использование в проекте:
Определение стиля элементов: CSS позволяет задавать цвет, шрифт, размер
и расположение элементов на веб-странице. Это придаёт приложению аккуратный
и профессиональный внешний вид.
Адаптивный дизайн: CSS можно использовать для создания адаптивных
страниц, которые корректно отображаются на разных устройствах и экранах
(например, мобильные телефоны, планшеты, компьютеры).
Использование библиотек и фреймворков: Для ускорения разработки
можно использовать CSS-фреймворки, такие как Bootstrap, для стандартных
стилей, сеток и компонентов.
Применение в проекте:
CSS используется для оформления страниц, созданных с помощью HTMLшаблонов. Он придаёт им стиль, цветовые схемы, шрифты и отвечает за
расположение элементов на странице.
5. Visual Studio Code (VS Code)
Visual Studio Code — это лёгкий, но мощный редактор кода,
поддерживающий множество языков программирования, включая Python, HTML и
CSS. Это основной инструмент для написания кода и разработки веб-приложения.
Характеристика и использование в проекте:
Поддержка различных языков: VS Code поддерживает работу с Python,
HTML, CSS и JavaScript, предоставляя инструменты для эффективной разработки.
В нём есть возможность интеграции с терминалом, системами контроля версий и
многими расширениями.
Расширяемость: С помощью множества расширений можно интегрировать
поддержку отладчиков, подсветку синтаксиса, автодополнение и другие
инструменты для ускорения разработки.
Встроенный терминал: Это позволяет запускать команды для управления
сервером, миграции базы данных, запуск тестов и мониторинга работы сервера
прямо из редактора.
Отладка и тестирование: Встроенные инструменты VS Code позволяют
запускать отладку кода, быстро находить и исправлять ошибки.
Применение в проекте:
Вся разработка кода, как серверной, так и клиентской части, ведётся в Visual
Studio Code. Использование расширений, например, для Python, помогает быстро
писать и проверять код, интегрируя с Git для управления версиями проекта.
Как эти инструменты взаимодействуют в проекте:
Python и Django отвечают за серверную часть веб-приложения. Они
обрабатывают запросы, взаимодействуют с базой данных и генерируют
динамический контент, который затем отправляется на клиентскую часть.
19
HTML и CSS используются для построения клиентской части (Frontend)
веб-приложения, отвечая за визуальное отображение страниц и пользовательский
интерфейс.
Visual Studio Code используется для написания, тестирования и отладки
кода как клиентской, так и серверной части.
Этот набор технологий позволяет создать полнофункциональное вебприложение, которое будет удобным в разработке, расширяемым и
поддерживаемым.
1. Python
Преимущества:
Простота синтаксиса и читаемость: Python имеет очень чистый и простой
синтаксис, что делает его доступным даже для начинающих разработчиков. Это
особенно важно для быстрого прототипирования и разработки.
Богатая экосистема библиотек: Python обладает огромным количеством
библиотек для решения различных задач, включая обработку данных, вебразработку, научные вычисления и автоматизацию.
Универсальность: Python можно использовать для разработки вебприложений, работы с искусственным интеллектом, анализа данных и даже
автоматизации бизнес-процессов.
Широкая поддержка сообщества: У Python большое сообщество
разработчиков, что гарантирует доступ к хорошей документации, форумам и
готовым решениям для большинства задач.
Совместимость с фреймворками: Python хорошо сочетается с такими
мощными веб-фреймворками, как Django и Flask, что упрощает создание серверной
части.
Недостатки:
Скорость выполнения: Python — это интерпретируемый язык, и его
скорость работы ниже по сравнению с компилируемыми языками, такими как C++
или Java. Это может стать проблемой в высоконагруженных системах.
Ограниченные возможности для многопоточности: Python использует
глобальную блокировку интерпретатора (GIL), что ограничивает эффективное
выполнение многопоточных задач, хотя есть обходные пути.
Высокое потребление памяти: Приложения на Python, как правило,
потребляют больше памяти, что может стать проблемой при разработке
ресурсоёмких приложений.
2. Django
Преимущества:
Полный фреймворк "все в одном": Django включает в себя все необходимые
инструменты для создания веб-приложений: ORM для работы с базами данных,
маршрутизацию запросов, системы аутентификации и авторизации, шаблонизатор
для генерации HTML-страниц.
20
Принцип DRY (Don’t Repeat Yourself): Django поощряет повторное
использование кода, что сокращает объем работы и уменьшает количество ошибок.
Высокая безопасность: В Django встроены механизмы для предотвращения
таких угроз, как SQL-инъекции, межсайтовый скриптинг (XSS), подделка запросов
на межсайтовый сценарий (CSRF), что делает приложения более защищёнными.
Быстрое прототипирование: Благодаря готовым к использованию
компонентам, можно очень быстро разрабатывать прототипы и выводить их в
рабочую среду.
Гибкость и масштабируемость: Django может быть использован как для
маленьких, так и для больших проектов. Он хорошо справляется с
масштабируемостью, когда необходимо поддерживать увеличивающуюся
нагрузку.
Недостатки:
Сложность для новичков: Несмотря на свою полноту, Django может быть
трудным для освоения новичками, особенно если они не знакомы с концепциями
MVC (Model-View-Controller) или ORM.
Избыточность:
В
некоторых
проектах,
особенно
небольших,
функциональность Django может показаться избыточной. Если приложение не
использует всех возможностей фреймворка, его мощь может оказаться
невостребованной.
Монолитная структура: Django накладывает строгие рамки на структуру
проекта, что делает его менее гибким по сравнению с более лёгкими
фреймворками, такими как Flask.
Ограниченные возможности для асинхронной обработки: Django был
разработан как синхронный фреймворк, хотя последние версии поддерживают
асинхронные задачи, но они не так хорошо интегрированы, как в некоторых других
фреймворках.
3. HTML
Преимущества:
Простой и универсальный язык разметки: HTML — это основа любой вебстраницы, и его простота делает его идеальным для создания структурированных
документов. HTML является стандартом и поддерживается всеми браузерами.
Совместимость с CSS и JavaScript: HTML тесно интегрируется с CSS для
стилизации страниц и с JavaScript для добавления интерактивных элементов.
Кроссплатформенность: HTML-код отображается одинаково в разных
браузерах и операционных системах, что делает его универсальным.
Широкая поддержка инструментов и библиотек: Существует множество
инструментов и библиотек, которые упрощают создание и отладку HTML-кода
(например, Bootstrap, Grid, Flexbox для создания адаптивных интерфейсов).
Недостатки:
21
Ограниченность функционала: HTML сам по себе не обладает логикой и
интерактивностью. Для динамических функций ему требуется поддержка
JavaScript и CSS.
Разные стандарты для разных браузеров: Несмотря на стандарты HTML,
некоторые браузеры могут по-разному отображать одни и те же элементы, что
требует дополнительного тестирования и настройки.
Неэффективность без поддержки других технологий: HTML, хотя и важен
для структуры страницы, не может обеспечить весь функционал современного вебприложения без взаимодействия с другими технологиями, такими как серверная
логика (Python/Django) и стили (CSS).
4. CSS
Преимущества:
Полный контроль над стилизацией: CSS позволяет гибко изменять внешний
вид веб-страниц — от цвета и шрифта до адаптивного размещения элементов на
странице.
Отделение контента от презентации: CSS отделяет стилизацию от HTMLразметки, что упрощает поддержку и обновление веб-страниц. Разработчик может
легко изменить внешний вид сайта, не изменяя сам HTML.
Адаптивный дизайн: С помощью CSS можно создавать адаптивные
страницы, которые корректно отображаются на различных устройствах (ПК,
планшеты, смартфоны). Это важная функция в современных веб-приложениях.
Мощные возможности анимации и трансформации: CSS позволяет
добавлять к страницам плавные анимации и трансформации без использования
JavaScript.
Недостатки:
Кроссбраузерная
совместимость:
Некоторые
CSS-стили
могут
отображаться по-разному в разных браузерах, что требует дополнительных усилий
для обеспечения их одинаковой работы.
Переопределение стилей: CSS использует каскадный подход, и порядок
применения стилей может вызывать сложности, если стили переопределяются. Это
может привести к путанице в том, какой стиль будет применен в конечном итоге.
Медленная работа с большими проектами: В крупных проектах файлы CSS
могут стать очень большими и сложными, что замедляет процесс разработки и
обновления. Здесь могут помочь препроцессоры, такие как SASS или LESS.
5. Visual Studio Code (VS Code)
Преимущества:
Лёгкий и быстрый редактор: VS Code загружается и работает быстрее, чем
многие другие IDE (интегрированные среды разработки), такие как PyCharm или
WebStorm, что делает его идеальным для быстрого редактирования и тестирования
кода.
22
Расширяемость через плагины: VS Code поддерживает множество
расширений, которые добавляют поддержку для различных языков
программирования, инструментов отладки, автодополнение кода и другие
полезные функции.
Встроенный Git: VS Code имеет встроенную поддержку Git, что упрощает
работу с системами контроля версий прямо из редактора.
Многоязыковая поддержка: VS Code поддерживает не только Python, но и
множество других языков программирования, что делает его универсальным
инструментом для разработки.
Недостатки:
Нехватка встроенных функций: По умолчанию VS Code поставляется с
минимальным набором функций, и для полноценной работы часто требуется
установка множества расширений.
Может быть сложным для новичков: Несмотря на простоту интерфейса, для
новичков может быть сложным освоить все функции VS Code и его интеграции с
различными инструментами.
Сложности с производительностью при работе с большими проектами: В
очень больших проектах с большим количеством файлов и зависимостей VS Code
может немного замедляться и требовать больше ресурсов.
Заключение:
Каждый из выбранных инструментов имеет свои преимущества и
недостатки, которые влияют на разработку веб-приложения для изучения
английского языка.
23
3 ПРОГРАММНАЯ РЕАЛИЗАЦИЯ
3.4 Физическая структура
Физическая структура программного обеспечения – это совокупность
компонентов программного обеспечения и их взаимодействие на физическом
уровне. Она описывает, как компоненты программного обеспечения связаны друг
с другом и как они взаимодействуют.
Физическая структура программного обеспечения представляет собой
систему каталогов, расположенную на локальном компьютере или на сервере.
Весь проект разработанного программного средства содержится в папке с
именем «English explorer» и содержит в себе следующие папки:
 _pyrache_;
 English_meanings_learning_app;
 static
 templates
 gitnore
 app.py
 db_code.py
 email_validation.py
 generate_options.py
 guess_data.db
Описанные папки и файлы представлены на рисунке 3.1.
Рисунок 3.1 –– Содержимое English explorer
Папка temapltes содержит файлы программы «English explorer». Данные
файлы представлены на рисунке 3.2.
24
Рисунок 3.2 –– Содержимое папки KURSA4
Папка KURSA4 включает в себя следующие файлы:
 base.html, который хранит в себе шапку сайта;
 home.html, который является вспомогательным файлом app,py, и отвечает
за разметку главной страницы;
 index.html, который хранит в себе основную информацию.
 Question.htm, который является вспомогательным файлом app,py, и
отвечает за гипертекстовую разметку вопросов
 score_card.html,который является вспомогательным файлом app,py, и
отвечает за гипертекстовую разметку очков
 sign_up.html, который является вспомогательным файлом app,py, и
отвечает за гипертекстовую разметку авторизации
Папка resources содержит изображения для программы «img». Изображения
представлены на рисунке 3.4.
25
Рисунок 3.4 –– Содержимое папки img
Папка resources хранит изображения, используемые для создания
программного средства.
3.5 Описание разработанных модулей
Программа программного средства состоит из нескольких функций:
 Def is_valid_email (), функция, которая проверяет правильность ввода
почты;
 Def sign_up функия авторизации;
 Def question функия работы с вопросами;
 Def submit_contact функция которая позволяет отправить сообщение в тех
-поддержку;
 Def logout_session, функция которая позволяет выйти из профиля;
 Def generate_meanings функция создает варианты ответов ;
Полный листинг кода представлен в Приложении А.
Таким образом в данной главе была описана физическая структура,
функции и методы разрабатываемой программы.
26
4 ТЕСТИРОВАНИЕ
Тестирование – это процесс проверки программного обеспечения или
системы на соответствие требованиям и ожиданиям пользователей. В общем
случае, цель тестирования – выявить ошибки, дефекты и недочеты в программе или
системе, чтобы их можно было исправить и улучшить качество продукта.
Тестирование может проводиться на разных этапах жизненного цикла
программного обеспечения, таких как функциональное тестирование,
интеграционное тестирование, системное тестирование, приемочное тестирование
и другие. Тестирование может также включать различные виды тестов, такие как
тесты на соответствие требованиям, тесты на надежность, тесты на
производительность, тесты на безопасность и т.д.
При тестировании программного средства «English explorer» применялся
ручной метод тестирования.
Ручной метод тестирования – это процесс проверки программного продукта
с использованием ручного выполнения тестовых сценариев и проверки их
результатов.
Основные этапы и характеристики ручного метода тестирования:
‒ планирование тестирования: определение целей и задач тестирования,
разработка тестовых сценариев и планов тестирования;
‒ выполнение тестовых сценариев: ручное выполнение предварительно
разработанных тестовых сценариев в соответствии с планом тестирования;
‒ регистрация результатов: фиксирование результатов выполнения
тестовых сценариев, включая обнаруженные ошибки и непредвиденное поведение
системы;
‒ отладка и повторное тестирование: исправление обнаруженных ошибок,
повторное выполнение тестовых сценариев для проверки исправлений и убеждение
в их правильности;
‒ оценка покрытия тестирования: анализ достигнутого покрытия
тестирования, выявление пробелов и неиспользованных тестовых сценариев;
‒ отчетность: подготовка отчетов о выполненном тестировании,
обнаруженных ошибках и рекомендациях по улучшению системы.
Особенности ручного метода тестирования:
 требует активного участия тестировщика в процессе выполнения тестов;
 позволяет обнаружить не только технические ошибки, но и
пользовательские проблемы и непредвиденные ситуации;
 гибкость и адаптивность к изменениям в требованиях и системе;
 возможность оценки интерфейса и удобства использования продукта.
Плюсы ручного метода тестирования:
 не требует сложной автоматизации и настройки инструментов;
 гибкость и возможность реагировать на изменения в требованиях и
функциональности;
27
 возможность использовать человеческий интуитивный подход и опыт
тестировщика.
Минусы ручного метода тестирования:
 зависимость от квалификации и опыта тестировщика;
 требует большего времени и ресурсов в сравнении с автоматизированным
тестированием;
 возможность пропуска ошибок или непредвиденного поведения системы
при ручном выполнении тестовых сценариев.
Проверка качества разработанного программного средства «English
explorer» выполнена в соответствии с ГОСТ 28195- 99 «Оценка качества
программных средств».
Тестирование проводилось по следующим оценочным факторам:

оценка языка программирования. Разработанное программное
приложение написано на языке высокого уровня Python;

надежность. Была протестирована корректная работа программы при
обработке ввода ошибочных данных и создание позитивных и негативных тестов
(таблица 4.1 и таблица 4.2). При вводе ошибочных значений, программа выводит
сообщение о неверном вводе. Также в программе имеется валидация логина и
пароля, которые должны содержать определенные символы и длину. У
пользователя нет возможности ввести недопустимые символы или оставить поле
ввода пустым;

удобство применения. Протестирована легкость и быстрота загрузки
программы, а также легкость и быстрота завершения программы: программа
запускается по двойному нажатию на ярлык и закрывается по нажатию кнопки
закрытия. В программе имеется возможность приостановления и повторного
запуска работы программы без потери информации.

функциональность:
1) было проведено тестирование интерфейса программы. Интерфейс
программы является интуитивно-понятным, присутствуют дополнительные
уведомления и сообщения пользователю, представленные на рисунке 4.1 и 4.2.
Рисунок 4.1 – Исключение авторизации почты
28
Рисунок 4.2 – Исключение выбора пароля
2) было проведено тестирование работы с вопросами. Изображено на
рисунке 4.3
Рисунок 4.3 – Работа теста
3) было проведено тестирование
Изображено на рисунке 4.4.
работы
со
статистикой
ответов.
Риуснок 4.4 – Статистика ответов
29
Тест-кейс для тестирования телеграмм–бота «Попутка» представляет собой
эффективный инструмент, помогающий систематизировать процесс проверки. Он
включает в себя список критериев, вопросов и шагов, которые должны быть
пройдены для удостоверения в соответствии бота требованиям и стандартам
качества. В таблице 4.1 представлен тест–кейс для веб-приложения «English
explorer».
Таблица 4.1 – Оформление тест-кейса о результатах тестирования
ID
Название
Предуслов Шаги
Ожи Фактический
тест тест-кейса
ия
даем результат
ый
кей
резу
са
льтат
TC0 Регистрация Приложен Открыть
TC0 Регистрация
01
нового
ие
страницу
01
нового
пользователя открыто
регистрац
пользователя
на
ии.
странице
регистрац
ии
TC0 Регистрация Приложен Открыть
TC0 Регистрация
02
с
ие
страницу
02
с
некорректны открыто
регистрац
некорректны
ми данными на
ии.
ми данными
странице
регистрац
ии
TC0 Вход
Пользоват Открыть
TC0 Вход
03
зарегистриро ель
страницу
03
зарегистриро
ванного
зарегистри входа.
ванного
пользователя рован
пользователя
TC0 Ошибочный Пользоват Открыть
TC0 Ошибочный
04
вход
ель
страницу
04
вход
пользователя зарегистри входа.
пользователя
рован
TC0 Прохождение Пользоват Открыть
TC0 Прохождение
05
упражнения
ель
упражнени 05
упражнения
на вокабуляр авторизов е на
на
ан
увелечени
увелечение
е
словарного
словарног
запаса
о запаса.
Статус
Приложен
ие
открыто
на
странице
регистрац
ии
Приложен
ие
открыто
на
странице
регистрац
ии
Пользоват
ель
зарегистри
рован
Пользоват
ель
зарегистри
рован
Пользоват
ель
авторизов
ан
30
Продолжение таблицы 4.1.
TC00 Прогрес Пользователь
6
с
прошел
обучени несколько
я
уроков
TC00 Сброс
Пользователь
7
пароля зарегистрирова
н, но забыл
пароль
Открыть
страницу
"Прогресс
".
Открыть
страницу
"Забыли
пароль?".
TC00 Прогрес Пользователь
6
с
прошел
обучени несколько
я
уроков
TC00 Сброс
Пользователь
7
пароля зарегистрирова
н, но забыл
пароль
˗
ID тест-кейса: уникальный идентификатор каждого тест-кейса
(например, TC001, TC002).
˗
Название тест-кейса: краткое описание действия, которое проверяется
(например, "Регистрация нового пользователя").
˗
Предусловия: начальные условия, которые должны быть выполнены
перед началом тестирования (например, приложение должно быть открыто на
странице регистрации).
˗
Шаги: описание шагов, которые нужно выполнить для проведения
теста (например, "Открыть страницу регистрации").
˗
Ожидаемый результат: результат, который должен быть получен, если
функциональность работает корректно (например, успешная регистрация
пользователя).
˗
Фактический результат: результат, полученный в ходе выполнения
теста (например, успешная регистрация пользователя).
˗
Статус: указывает, соответствует ли фактический результат
ожидаемому ("Приложение открыто на странице регистрации").
Выводы по тест-кейсу
Все тест-кейсы вашего веб-приложения для изучения английского
соответствуют ожидаемым результатам. Это свидетельствует о правильной работе
системы в рамках протестированных сценариев.
31
5 ПРИМЕНЕНИЕ
5.4 Назначение и условия применения
Веб-приложение «Платформа для изучения английского языка»
предоставляет обширные возможности для эффективного освоения английского
языка с любого уровня подготовки. В этом разделе описаны основные применения
веб-приложения и преимущества, которые оно предлагает:
– Личное использование. Веб-приложение позволяет пользователю легко и
эффективно изучать английский язык через интерактивные уроки, упражнения и
тесты. Пользователи могут развивать навыки чтения, письма, аудирования и
произношения благодаря интуитивно понятному интерфейсу и разнообразным
методикам обучения.
– Обучение с нуля. Веб-приложение идеально подходит для пользователей,
не имеющих начальных знаний английского языка. Оно предоставляет пошаговые
инструкции по каждому этапу обучения, включая советы и рекомендации, которые
помогут пользователю быстро освоиться. Приложение ориентировано на
пользователей любого уровня подготовки, что позволяет даже начинающим легко
начать обучение.
– Доступность и простота. Веб-приложение имеет интуитивно понятный
интерфейс, который не требует от пользователя глубоких технических знаний или
долгого изучения. Это даёт возможность пользователям сразу приступить к
обучению, не теряя времени на изучение функционала платформы.
Основное назначение веб-приложения заключается в упрощении процесса
изучения английского языка и предоставлении пользователям доступа к
эффективным методам обучения. Использование платформы помогает
пользователям улучшить свои языковые навыки в удобном темпе, что повышает
эффективность и удовольствие от обучения. Кроме того, платформа может быть
полезна для организации обучения на разных уровнях, предоставляя инструменты
для тестирования, отслеживания прогресса и создания индивидуальных учебных
планов.
С технической точки зрения, веб-приложение «Платформа для изучения
английского языка» разработано для использования через интернет-браузер и не
требует установки дополнительных программ.
Минимальные системные требования:
˗
Браузер с поддержкой HTML5 (Google Chrome, Firefox, Safari,
Microsoft Edge);
˗
Операционная система Microsoft Windows 10/11, macOS 10.13+, или
Linux;
˗
Подключение к интернету со скоростью не менее 1 Мбит/с;
˗
Оперативная память от 1GB;
˗
Свободное дисковое пространство для хранения учебных материалов
(если необходимо).
32
Рекомендуемые системные требования:
˗
Браузер с последними обновлениями (Google Chrome, Firefox, Safari,
Microsoft Edge);
˗
Операционная система Microsoft Windows 10/11, macOS 10.15+;
˗
Оперативная память от 4GB;
˗
Подключение к интернету со скоростью от 5 Мбит/с для более
плавного взаимодействия с мультимедийным контентом.
Для использования веб-приложения пользователю необходимо иметь
доступ к интернету и актуальный веб-браузер. Приложение не требует установки,
оно доступно через сыылку.
5.5 Описание интерфейса
Для начала работы с программным средством необходимо запустить сайт и
авторизоваться. После авторизации откроется главное окно сайта. Главное окно
сайта «English explorer» представлено на рисунке 5.1.
Рисунок 5.1 ‒ Главное окно программного средства
При запуске данного программного средства на компьютере необходимо
нажать на кнопку quiz. После этого пользователь перейдет в окно с прохождением
теста, представленном на рисунке 5.2.
33
Рисунок 5.2 — Выбор тестов в программе “Тип личности”
В главном меню пользователь встречает кнопку со статистикой. Он может
просмотреть громкость результат своего теста который представлен на рисунке 5.3.
Рисунок 5.3 — Микшер громкости
В процессе проверки разрабатываемого средства «English explorer» были
выполнены операции прохождения теста и просмотра результата. Все операции
были успешно завершены, что подтверждает надежную работу программы.
34
ЗАКЛЮЧЕНИЕ
В ходе выполнения курсового проектирования была достигнута
поставленная цель: разработано веб-приложение «English Explorer», которое
позволяет пользователям эффективно изучать английский язык через
интерактивные уроки и упражнения. Все задачи, поставленные в процессе
разработки, были успешно решены, а конечные результаты полностью
соответствуют требованиям проекта.
В рамках работы были изучены существующие аналоги, разработаны
необходимые алгоритмы для обеспечения функциональности приложения, создан
удобный пользовательский интерфейс, а также оформлен итоговый отчет.
Для дальнейшего улучшения веб-приложения возможны следующие
направления:
˗
создать более привлекательный и интуитивно понятный интерфейс для
пользователей;
˗
добавить большее количество упражнений и тестов, улучшить
качество учебного материала и подходы к его подаче;
˗
создать отдельный раздел с подробной информацией о методиках
обучения и результатах тестирования.
Данный проект способствовал приобретению важных практических
навыков, охватывающих все этапы разработки веб-приложения: от постановки
требований до создания интерфейсов и написания алгоритмов. В процессе
курсового проектирования были значительно усовершенствованы навыки работы с
языками программирования, такими как Python и JavaScript, а также освоены
технологии веб-разработки. Для улучшения функциональной части приложения и
создания комфортного интерфейса были детально изучены технологии для работы
с базами данных, а также современные фреймворки и библиотеки.
Пояснительная записка выполнена в соответствии с ГОСТами и
требованиями, предъявляемыми к технической документации.
Итогом работы стало закрепление теоретических знаний и развитие
практических навыков в области разработки веб-приложений. Разработанное вебприложение «English Explorer» прошло тестирование и продемонстрировало
стабильную работу при выполнении интерактивных уроков и тестов.
Для повышения удобства и функциональности в дальнейшем планируется
добавить новые возможности: управление учебными планами, расширенные
критерии поиска учебных материалов, а также интеграция с облачными сервисами
для хранения и синхронизации прогресса пользователей.
35
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
[1] Логическое моделирование [Электронный ресурс]. – Режим доступа:
https://translated.turbopages.org/proxy_u/en– ru.ru.a691a183– 62ac361b– 97ed014a–
74722d776562/https/en.wikipedia.org/wiki/Logic_simulation – Дата доступа: 13.06.
2023
[2] Логическое моделирование [Электронный ресурс]. – Режим доступа:
https://intuit.ru/studies/courses/3440/682/lecture/14036 – Дата доступа: 13.06.2023.
[3] Логическая модель предметной области [Электронный ресурс]. – Режим
доступа: http://analyst.by/diagrams/logicheskaya– model– predmetnoy– oblasti – Дата
доступа: 11.06.2023.
[4] Описание среды разработки Visual Studio code. Общие сведения
[Электронный
ресурс].
–
Режим
доступа:
https://studbooks.net/2258619/informatika/opisanie_sredy_razrabotki_microsoft_visual
_studio – Дата доступа: 13.06. 2023.
[5] Крутые фичи Visual Studio 2022 [Электронный ресурс]. – Режим
доступа: https://habr.com/ru/company/microsoft/blog/447124/ – Дата доступа:
13.06.2023.
[6] Уроки django для начинающих [Электронный ресурс]. – Режим доступа:
https://ravesli.com/uroki-po-qt5/ – Дата доступа: 05.06.2023.
[7] Изучение HTML – YouTube [Электронный ресурс]. – Режим доступа:
https://www.youtube.com/watch?v=g6fw5n9GtE&list=PL0lO_mIqDDFUaZe7H9kY6v
WbSVrtwFv4M – Дата доступа: 11.06.2023.
[8] Фундаментальная теория тестирования [Электронный ресурс]. – Режим
доступа: https://habr.com/ru/post/549054/ – Дата доступа: 13.06.2023.
[9] Программные средства [Электронный ресурс]. – Режим доступа:
https://studbooks.net/2427865/informatika/vvedenie – Дата доступа: 10.06.2023.
[10] Руководство по языку программирования C++ [Электронный ресурс]. –
Режим доступа: https://metanit.com/cpp/tutorial/. – Дата доступа: 05.06.2023.
[11] Довбуш, Галина Visual python на примерах / Галина Довбуш, Анатолий
Хомоненко. – М.: БХВ– Петербург, 2012. – 528 c. – Дата доступа: 05.06.2023.
[12] Прата Стивен Язык программирования C++. Лекции и упражнения /
Прата Стивен, Корниенко Ю. И., Моргунова А. А. – М.: Диалектика– Вильямс –
1244 с. – Дата доступа: 05.06.2023.
36
ПРИЛОЖЕНИЕ А
(справочное)
Разработанные диаграммы
Рисунок А.1 – Функциональная модель
37
Рисунок А.2 – Декомпозиция функциональная модель
Рисунок А.3 – Декомпозиция первого блока
38
Рисунок А.4 – Модель IDEF3
Рисунок А.5 – Модель BPMN
39
Рисунок А.6 – Диаграмма «сущность-связь»
40
Рисунок А.8 – Диаграмма вариантов использования
41
Рисунок А.9 – Диаграмма деятельности
42
Рисунок А.10 – Диаграмма классов
43
Рисунок А.11 – Диаграмма состояний
Рисунок А.12 – Диаграммы последовательности
44
Рисунок А.13 – Диаграмма кооперации
Рисунок А.14 – Диаграмма компонентов
45
ПРИЛОЖЕНИЕ Б
(справочное)
Техническое задание
Министерство образования Республики Беларусь
Учреждение образования «Белорусский государственный университет
информатики и радиоэлектроники»
Филиал «Минский радиотехнический колледж»
ВЕБ-ПРИЛОЖЕНИЯ «English explorer»
Версия 1.01
ТЕХНИЧЕСКОЕ ЗАДАНИЕ
Руководитель
/ А.И Назарова /
Разработчик
/А.В. Горянин/
46
Рисунок Б.3 – Окно статистики
ПРИЛОЖЕНИЕ В
(обязательное)
Текст программы:
{% extends 'base.html' %}
{% block title %}Home{% endblock title %}
{% block body %}
<!-- Header Start -->
<h1 class="position-absolute text-uppercase textdark">My Skills</h1>
</div>
<div class="row align-items-center">
<div class="col-md-6">
<div class="container-fluid my_page d-flex align-items-center
mb-5 py-5" id="home" style="min-height: 100vh;">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 px-5 pl-lg-0 pb-2 pb-lg-0 mt-4">
<img class="img-fluid w-100 rounded-circle shadowsm" src="../static/img/aboba.jpg" alt="">
</div>
<div class="col-lg-7 text-center text-lg-left">
<h1 class="display-3 text-uppercase text-primary
mb-2" style="-webkit-text-stroke: 2px #ffffff;">English
explorer</h1>
<h1 class="typed-text-output d-inline font-weightlighter text-white"></h1>
<div class="typed-text d-none">Vocabulary ,
Grammar rules, reading, listening</div>
</div>
</div>
</div>
</div>
<!-- Header End -->
<!-- Skill Start -->
<div class="container-fluid py-5" id="skill">
<div class="container">
<div class="position-relative d-flex align-items-center
justify-content-center">
<h1 class="display-1 text-uppercase text-white"
style="-webkit-text-stroke: 1px #dee2e6;">Skills</h1>
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">Writing</h6>
<h6 class="font-weight-bold">95%</h6>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped
bg-primary" role="progressbar" style="width: 95%" ariavaluenow="95" aria-valuemin="0" ariavaluemax="100"></div>
</div>
</div>
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">Speaking</h6>
<h6 class="font-weight-bold">85%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-warning"
style="width: 85%;" role="progressbar" aria-valuenow="85"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">Listening</h6>
<h6 class="font-weight-bold">90%</h6>
47
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width:
85%;" role="progressbar" aria-valuenow="85" ariavaluemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success"
style="width: 90%;" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">Intermidiate
</h6>
</div>
<!-- Skill End -->
<!-- Contact Start -->
<div class="container-fluid py-5" id="contact">
<div class="container">
<h6 class="font-weight-bold">30%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-danger"
style="width: 30%;" role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">Reading</h6>
<h6 class="font-weight-bold">45%</h6>
</div>
<div class="progress">
<div class="position-relative d-flex align-items-center
justify-content-center">
<h1 class="display-1 text-uppercase text-white"
style="-webkit-text-stroke: 1px #dee2e6;">Contact</h1>
<h1 class="position-absolute text-uppercase textdark">Contact Me</h1>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="contact-form text-center">
<div id="success"></div>
<form name="sentMessage" action="/contact"
id="contactForm" novalidate="novalidate" method="post">
<div class="form-row">
<div class="control-group col-sm-6">
<div class="progress-bar bg-dark" style="width:
45%;" role="progressbar" aria-valuenow="45" ariavaluemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">Words</h6>
<h6 class="font-weight-bold">85%</h6>
</div>
<div class="progress">
<input type="text" class="form-control p4" name="cont_name" id="name" placeholder="Your Name"
required="required" data-validationrequired-message="Please enter your name" />
<p class="help-block text-danger"></p>
</div>
<div class="control-group col-sm-6">
<input type="email" class="form-control p4" name="contact_email" id="email" placeholder="Your
Email"
required="required" data-validationrequired-message="Please enter your email" />
<p class="help-block text-danger"></p>
48
</div>
</div>
<div class="control-group">
<script src="../static/js/main.js"></script>
<script>
// show the loader
<input type="text" class="form-control p-4"
name="comp_name" id="company" placeholder="Company
Name"
document.getElementById("loader").style.display = "block";
required="required" data-validationrequired-message="Please enter company name" />
// hide the loader after the page has loaded
<p class="help-block text-danger"></p>
</div>
window.addEventListener("load", function() {
document.getElementById("loader").style.display =
"none";
<div class="control-group">
});
<textarea class="form-control py-3 px-4"
name="message" rows="5" id="message"
placeholder="Message"
</script>
required="required"
data-validation-required-message="Please
enter your message"></textarea>
<p class="help-block text-danger"></p>
</div>
<div>
<script
src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<script>
{% with messages =
get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
Swal.fire({
<button class="btn login-button"
type="submit" id="sendMessageButton">Send
Message</button>
title: "Dear User",
text: "{{ message }}",
</div>
type: "{{ category }}",
</form>
confirmButtonColor: '#5a5562',
</div>
</div>
</div>
</div>
</div>
confirmButtonText: 'OK'
})
{% endfor %}
{% endif %}
{% endwith %}
<!-- Contact End -->
</script>
<script src="../static/js/typed.min.js"></script>
{% endblock body %}
49