ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/6192| Title: | Веб-додаток для навчання англійської мови |
| Authors: | Колеснікова , Катерина Вікторівна Пилипенко, Денис Сергійович |
| Keywords: | ПРЕДМЕТНА ОБЛАСТЬ;ВЕБ-ДОДАТОК;ЛОГІСТИКА;ПРОЄКТУВАННЯ;БАЗА ДАНИХ;ТЕСТУВАННЯ. |
| Issue Date: | 12-Jun-2024 |
| Abstract: | Тема створення web-додатків для навчання англійської мови залишається актуальною в сучасному світі, де знання англійської мови є ключем до успіху в багатьох сферах життя. Із зростанням популярності онлайн-навчання та зручного доступу до інтернету, веб-додатки стають ефективним інструментом для студентів будь-якого рівня, щоб покращити свої навички англійської мови у зручний для них час і місце. Такі додатки можуть включати різноманітні інтерактивні вправи, тести, онлайн-уроки та інші інструменти, які стимулюють активне навчання та сприяють швидкому й ефективному засвоєнню мови. Об’єкт дослідження: веб-додаток для навчання англійської мови. Предмет дослідження: інструменти розробки web-додатку для навчання англійської мови. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6192 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Пилипенко Денис_КН-2001_2023-2024.pdf Restricted Access | 1.95 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Розробка web-додатку для навчання англійської мови»
Виконав: студент 4 курсу, групи КН-2001
спеціальності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування
Пилипенко Денис Сергійович
Керівник __________ Колеснікова К.В.
(прізвище та ініціали)
Рецензент __________ Стась С.В.
(прізвище та ініціали)
Черкаси 2024 рік
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2024 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Пилипенко Денис Сергійович
(прізвище, ім’я, по батькові)
1. Тема роботи «Розробка web-додатку для навчання англійської мови»
Керівник роботи Колеснікова К.В., д.т.н., професор
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «26» лютого 2024 р. №60/04.
2. Строк подання студентом роботи до 10 червня 2024 року
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з переддипломної практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ.
4.2. ПРОЄКТУВАННЯ WEB-ДОДАТКУ ДЛЯ НАВЧАННЯ АНГЛІЙСЬКОЇ МОВИ.
4.3. ПРОГРАМНА РЕАЛІЗАЦІЯ.
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 42034-01.
5 .2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.
5.4. Додаток Г. Структура бази даних.
5. .5. Презентація у вигляді 23 слайдів.
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
консультанта завдання видав завдання прийняв
7. Дата видачі завдання 11.01.2024
КАЛЕНДАРНИЙ ПЛАН
Строк
№ з/п Назва етапів кваліфікаційної роботи бакалавра виконання Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу
15.01.2024 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та
до 12.02.2024 Виконано
предмету дослідження.
3 Написання теоретичного розділу
до 18.03.2024 Виконано
кваліфікаційної роботи бакалавра.
4 Написання аналітичного розділу
до 01.04.2024 Виконано
кваліфікаційної роботи бакалавра.
5 Написання практичних розділів й висновків до
до 01.05.2024 Виконано
кваліфікаційної роботи бакалавра.
6 Передзахист кваліфікаційної роботи бакалавра
03.06.2024 Виконано
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА. до 10.06.2024 Виконано
8 Захист кваліфікаційної роботи бакалавра. 12.06.2024 Виконано
Студент _____________________________ Денис ПИЛИПЕНКО
(підпис)
Керівник роботи ____________________________ Катерина КОЛЕСНІКОВА
(підпис)
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 63 с., 14 рис., 1 таблицю, 14
використаних джерел, 4 додатки.
Актуальність теми. Тема створення web-додатків для навчання англійської
мови залишається актуальною в сучасному світі, де знання англійської мови є ключем
до успіху в багатьох сферах життя. Із зростанням популярності онлайн-навчання та
зручного доступу до інтернету, вебдодатки стають ефективним інструментом для
студентів будь-якого рівня, щоб покращити свої навички англійської мови у зручний
для них час. Такі додатки можуть включати різноманітні інтерактивні вправи, тести,
онлайн-уроки та інші інструменти, які стимулюють активне навчання та сприяють
швидкому й ефективному засвоєнню мови.
Мета роботи і задачі дослідження. Розробка вебдодатку для ефективного
навчання англійської мови.
Для досягнення поставленої мети були поставлені такі завдання:
аналіз потреб цільової аудиторії та їхніх вимог до навчального середовища;
розробка методів інтерактивного навчання, які включають адаптивність та
ігрові елементи;
визначення оптимальної архітектури вебдодатку для забезпечення зручного та
ефективного використання;
реалізація і тестування прототипу з метою оцінки його ефективності та
користувацького досвіду;
вдосконалення додатку на основі отриманих результатів та фідбеку від
користувачів.
Об’єкт дослідження: вебдодаток для навчання англійської мови.
Предмет дослідження: інструменти розробки web-додатку для навчання
англійської мови.
Методи дослідження. Для вирішення поставлених задач були використані такі
методи дослідження: теоретичний (аналіз літератури з проблеми дослідження); аналіз
прогресу користувачів – полягав у слідкування за прогресом користувачів у вивченні
мови через вебдодаток; експериментальний аналіз – для порівняння ефективності
різних методів навчання.
Перелік ключових слів: ПРЕДМЕТНА ОБЛАСТЬ, ВЕБДОДАТОК,
ЛОГІСТИКА, ПРОЄКТУВАННЯ, БАЗА ДАНИХ, ТЕСТУВАННЯ.
ABSTRACT
Master’s work contains. 63 pages, 14 figures, 1 table, 14 sources used, 4
attachments.
Actuality of theme. The topic of creating web applications for learning english
remains relevant in today's world, where knowledge of the English language is the key to
success in many areas of life. With the increasing popularity of online learning and
convenient access to the Internet, web applications are becoming an effective tool for
students of all levels to improve their English skills at a time and place convenient for them.
Such applications may include a variety of interactive exercises, tests, online lessons and
other tools that stimulate active learning and promote rapid and effective language
acquisition.
Purpose and tasks of the research. Development of a web application for effective
alearning of the English language.
To achieve the goal, the following tasks were set:
– analysis of the needs of the target audience and their requirements for the educational
environment;
– development of interactive learning methods that include adaptability and game
elements;
– determining the optimal architecture of the web application to ensure convenient and
efficient use;
– implementation and testing of the prototype in order to evaluate its effectiveness and
user experience;
– improving the application based on the results and feedback from users.
The object of research: development and effectiveness of a web application for
learning English.
The subject of research: a web-based English language learning application and its
effectiveness in improving users' language skills.
Research methods: The following research methods were used to solve the
problems: theoretical (analysis of the literature on the research problem); user progress
analysis – consisted in following the progress of users in language learning through the web
application; experimental analysis - to compare the effectiveness of different teaching
methods.
The list of keywords: SUBJECT AREA, WEB APPLICATION, LOGISTICS,
DESIGN, DATABASE, TESTING.
7
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ ........ 9
ВСТУП ................................................................................................................................ 10
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ ............................................................... 12
1.1 АНАЛІЗ WEB-ДОДАТКІВ ДЛЯ НАВЧАННЯ АНГЛІЙСЬКОЇ МОВИ В СУЧАСНОСТІ ............ 12
1.2 ОГЛЯД ІСНУЮЧИХ АНАЛОГІВ WEB-ДОДАТКІВ ДЛЯ НАВЧАННЯ АНГЛІЙСЬКОЇ МОВИ .. 13
1.2.1 Аналіз web-додатку «Duolingo» ...................................................................... 13
1.2.2 Аналіз web-додатку «Babbel».......................................................................... 14
1.2.3 Аналіз web-додатку «EnglishDom» ................................................................. 15
1.2.4 Аналіз web-додатку «Grammarly» .................................................................. 17
1.3 АНАЛІЗ ПОРІВНЯНЬ ІСНУЮЧИХ РІШЕНЬ РОЗГЛЯНУТИХ РЕАЛІЗАЦІЙ ТА ПОСТАНОВА
ЗАВДАННЯ ........................................................................................................................ 18
ВИСНОВКИ ДО РОЗДІЛУ 1 ................................................................................................. 20
2 ПРОЄКТУВАННЯ WEB-ДОДАТКУ ДЛЯ НАВЧАННЯ АНГЛІЙСЬКОЇ МОВИ . 22
2.1 ОПИС ФУНКЦІОНАЛЬНОГО ПРОГРАМНОГО СЕРЕДОВИЩА ДЛЯ РОЗРОБКИ ........ 22
2.2 ОСНОВНІ ПРИНЦИПИ РОЗРОБКИ ВЕБДОДАТКІВ ................................................... 26
2.3 РОЗРОБКА ДІАГРАМИ ВАРІАНТІВ ВИКОРИСТАННЯ ...................................................... 27
2.4 ПРОЄКТУВАННЯ СТРУКТУРИ БАЗИ ДАНИХ ................................................................. 28
2.5 ОПИС ПРОЦЕСУ ПРОЄКТУВАННЯ СТРУКТУРИ ВЕБДОДАТКУ ДЛЯ НАВЧАННЯ
АНГЛІЙСЬКОЇ МОВИ .......................................................................................................... 29
ВИСНОВКИ ДО РОЗДІЛУ 2 ................................................................................................. 31
3 ПРОГРАМНА РЕАЛІЗАЦІЯ ......................................................................................... 32
3.1 ПОСТАНОВКА ЗАВДАННЯ ........................................................................................... 32
3.2 ІНТЕРФЕЙС WEB-ДОДАТКУ ДЛЯ ВИВЧЕННЯ АНГЛІЙСЬКОЇ МОВИ ............................... 33
3.3 ПРОГРАМНА РЕАЛІЗАЦІЯ WEB-ДОДАТКУ ДЛЯ НАВЧАННЯ АНГЛІЙСЬКОЇ МОВИ .......... 35
3.4 ОСОБЛИВОСТІ ТЕСТУВАННЯ ВЕБДОДАТКІВ ............................................................... 39
ВИСНОВКИ ДО РОЗДІЛУ 3 ................................................................................................. 43
ВИСНОВКИ ....................................................................................................................... 44
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................................... 45
Додаток А Специфікація 482.ЧДТУ. 42034-01. ............................................................. 47
8
Додаток Б Текст Програми ............................................................................................... 49
Додаток В Інструкція Користувача ................................................................................. 62
Додаток Г Структура Бази Даних .................................................................................... 66
9
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
БД – база даних;
СУБД – система управління базами даних;
–
ПЗ програмне забезпечення;
–
VS Code Visual Studio Code
–
HTML – Hypertext Markup Language
JS – JavaScript
CSS – Cascading Style Sheets
URL – Uniform Resource Locator
–
IDE Integrated Drive Electronics
–
API Application Programming Interface
–
SQL – Structured Query Language
DOM – Document Object Model
10
ВСТУП
Впровадження інформаційних технологій в навчальний процес, зокрема
розробка вебдодатків для вивчення мов стає все більш актуальним завданням у
сучасному світі. З поширенням доступу до Інтернету та зростанням популярності
онлайн-навчання зростає і попит на інноваційні технології в цій галузі. Одним із
найпоширеніших мов для вивчення є англійська, яка відіграє ключову роль у сферах
бізнесу, науки та культури.
Ціллю даного дослідження є розробка вебдодатку для навчання англійської
мови з метою створення ефективного та зручного інструменту для користувачів будь-
якого рівня знань. Робота спрямована на з'ясування оптимальних підходів до
навчання мови в онлайн-середовищі, розробку інтерактивних інструментів для
полегшення процесу вивчення та перевірки прогресу користувачів.
Дослідження включатиме аналіз потреб цільової аудиторії, огляд наукових
досліджень у галузі навчання мов та розвитку вебдодатків, проєктування та розробку
функціональності додатка, тестування його ефективності та відгуків користувачів.
Актуальність кваліфікаційної роботи бакалавра. Оскільки вона спрямована на
навчання та розробку вебдодатку для навчання англійської мови, що відповідає
потребам сучасного суспільства у підвищенні навичок мови. Зростання популярності
онлайн-навчання та збільшення доступу до Інтернету роблять цю тему досить
актуальною. Розробка ефективного та зручного вебдодатку може стати важливим
інструментом для тих, хто прагне покращити свої знання англійської мови.
Мета кваліфікаційної роботи бакалавра розробка вебдодатку для навчання
англійської мови з метою створення ефективного та зручного інструменту для
користувачів різних рівнів володіння мовою, який забезпечить користувачам
найкращий досвід у вивченні англійської мови.
Для досягнення поставленої мети в дослідженні необхідно вирішити такі задачі:
провести дослідження для визначення потреб та очікувань цільової аудиторії
щодо навчання англійської мови в онлайн-середовищі;
створити інтерактивні вправи, тести, функції відстеження прогресу та інші
інструменти, які сприятимуть ефективному вивченню мови;
11
розробити інтуїтивно зрозумілий та привабливий інтерфейс, який стане
комфортним для користувачів будь-якого рівня;
провести тестування додатка з метою виявлення недоліків та збору зворотного
зв'язку для подальшого вдосконалення;
здійснити оцінку ефективності додатка через збір та аналіз даних про прогрес
користувачів у вивченні мови.
Об’єкт і предмет дослідження.
Об'єктом дослідження є вебдодаток для навчання англійської мови.
Предметом дослідження є інструменти, які використовуються для створення
ефективного вебдодатку для навчання англійської мови, а також сам процес
вивчення мови за допомогою цього додатку.
Для вирішення поставлених завдань були застосовані наступні методи
дослідження:
теоретичні;
методи проєктування;
методи тестування.
У процесі розробки застосовувалися: найпопулярніші мови програмування та
фреймворки, такі як: HTML, CSS, JavaScript, React.
12
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Аналіз web-додатків для навчання англійської мови в сучасності
У сучасному світі володіння іноземними мовами є не лише перевагою, але й
необхідністю. Зростаюча глобалізація та міжнародні зв'язки роблять знання мов
ключовим фактором для успішної кар'єри, навчання за кордоном, подорожей та
особистого розвитку. Традиційні методи навчання мов, такі як уроки в школі чи
університеті, часто не дають бажаного результату. Це пов'язано з низкою причин,
таких як:
недостатня індивідуалізація: традиційні методи навчання не враховують
індивідуальні особливості та потреби кожного учня;
відсутність мотивації: учні часто втрачають мотивацію до вивчення мови через
монотонність та нудність уроків;
нестача часу: у сучасному світі люди мають обмежений час, який вони можуть
витрачати на навчання.
Все більше людей обирають онлайн-навчання як більш зручний та доступний
спосіб отримання знань.
Аналіз сучасних web-додатків для навчання англійської мови в сучасності
потребує огляду різноманітних аспектів, щоб зрозуміти його сильні та слабкі сторони,
а також визначити можливості для подальшого вдосконалення. Розглянемо такі
аспекти як: функціональніст, інтерфейс користувача, методи навчання, доступність
та вартість, ефективність та результати.
1. Функціональність:
потрібно оцінити різноманітність функцій, доступних у додатку;
перевірити наявність додаткових функцій, таких як відстеження прогресу,
персоналізовані рекомендації та можливість збереження власного словника або
нотаток.
2. Інтерфейс користувача:
оцінити зручність та естетику інтерфейсу.
3. Методи навчання:
13
проаналізувати різноманітні методи навчання, використані у додатку;
оцінити якість матеріалів, які використовуються для навчання, таких як
відеоуроки, тексти та аудіофайли.
4. Доступність та вартість:
проаналізувати доступність додатка для різних користувачів.
5. Ефективність та результати:
дослідить результативність додатка, шляхом оцінки прогресу користувачів у
вивченні мови;
провести аналіз відгуків користувачів та рецензій на додаток у різних джерелах.
1.2 Огляд існуючих аналогів web-додатків для навчання англійської мови
В кваліфікаційній роботі бакалавра проведено огляд існуючих аналогів web-
додаткі для навчання англійської мови, таких як: «Duolingo», «Babbel»,
«EnglishDom», «Grammarly».
1.2.1 Аналіз web-додатку «Duolingo». Web-додаток «Duolingo» повністю
безкоштовний (з опцією преміумверсії) і доступний через веббраузер рисунок 1.1 або
мобільний додаток на різних платформах. Це робить його легкодоступним практично
для будь-кого з підключенням до Інтернету [1].
Рисунок 1.1 – Головна сторінка сайту «Duolingo» [1]
14
Використовує гейміфікацію, перетворюючи навчання мови на веселу та
захопливу гру. Користувачі нагороджуються балами, віртуальними валютами та
досягненнями за виконання вправ та уроків, що підвищує їх мотивацію та залученість.
Адаптує навчальний досвід до індивідуальних потреб користувача. Програма оцінює
сильні та слабкі сторони користувача і відповідно коригує складність вправ та тем.
Це гарантує, що користувачі завжди навчаються на відповідному рівні та постійно
роблять прогрес. Пропонує понад 40 мов на вибір, що робить його одним з найбільш
різноманітних мовних додатків на ринку. Курси охоплюють різні рівні, від
початкового до просунутого, і розроблені таким чином, щоб допомогти користувачам
розвинути основні навички читання, письма, аудіювання та розмови.
Має велику та активну спільноту користувачів, що дозволяє людям
спілкуватися та підтримувати один одного під час навчання. Програма також
пропонує соціальні функції, такі як лідери таблиць та друзі, які можуть підвищити
мотивацію та зробити навчання більш цікавим.
1.2.2 Аналіз web-додатку «Babbel». «Babbel» – це вебдодаток рисунок 1.2 та
платформа для вивчення мов, що фокусується на розвитку практичних навичок
спілкування [2]. Він пропонує широкий спектр курсів для вивчення 10 мов,
включаючи англійську, французьку, німецьку, іспанську, італійську, португальську,
польську, турецьку, шведську, данську та індонезійську.
Рисунок 1.2 – Головна сторінка сайту «Babbel» [2]
15
Переваги «Babbel» [2]:
Практичний підхід: «Babbel» зосереджується на розвитку розмовних навичок
та розумінні мови на слух. Курси включають: діалоги з реального життя, аудіозаписи
та інтерактивні вправи, які допомагають користувачам навчитися, спілкуватися
впевнено та вільно.
Якість контенту: курси «Babbel» розроблені експертами з вивчення мов та
оновлюються на основі останніх досліджень та методик. Матеріали курсів цікаві,
актуальні та відповідають потребам користувачів.
Індивідуалізація: «Babbel» використовує адаптивне навчання, щоб
підлаштовувати курси під індивідуальні потреби та темп навчання користувачів.
Програма оцінює знання користувача та рекомендує відповідні вправи та завдання.
Різноманіття форматів: «Babbel» пропонує різні формати уроків, включаючи
текстові, аудіо та відеоматеріали, а також інтерактивні вправи. Це робить навчання
більш цікавим та різноманітним.
Додаткові функції: «Babbel» пропонує додаткові функції, такі як граматичні
довідники, словники та форуми для спілкування з іншими користувачами.
Недоліки «Babbel» [2]:
Вартість: являється платний додаток, його ціна може бути вищою за деякі інші
вебдодатки для вивчення мов.
Немає офлайн-доступу: «Babbel» не пропонує офлайн-доступу до курсів, тому
користувачі потребують підключення до Інтернету для навчання.
Обмежена кількість мов: «Babbel» пропонує меншу кількість мов, порівняно з
деякими іншими платформами.
В цілому, «Babbel» якісний вебдодаток для вивчення мов, який фокусується на
розвитку практичних навичок спілкування. Він підходить для людей, які хочуть
навчитися вільно спілкуватися іноземною мовою, і мають доступ до інтернету та
готові платити за підписку.
1.2.3 Аналіз web-додатку «EnglishDom». «EnglishDom» – це онлайн-
платформа рисунок 1.3 та мобільний додаток для вивчення англійської мови, який
відрізняється від інших варіантів своїм комплексним підходом. Він пропонує
16
різноманітні функції та фокусується на поєднанні індивідуального навчання з
інтерактивністю та можливостями практики розмовної англійської [3].
Рисунок 1.3 – Головна сторінка сайту «EnglishDom» [3]
Переваги «EnglishDom» [3]:
Індивідуальні заняття: «EnglishDom» пропонує персональні уроки англійської
мови з кваліфікованими професійними викладачами. Ці уроки можуть бути
налаштовані за рівнем, цілями та стилем навчання кожного студента.
Інтерактивні курси: окрім індивідуальних уроків, платформа пропонує
широкий спектр інтерактивних курсів, які охоплюють граматику, словник, читання,
письмо, аудіювання та розмову. Ці курси використовують різні методи навчання,
включаючи ігрові елементи та віртуальні сценарії, для підвищення мотивації та
залученості.
Розмовні клуби: «EnglishDom» надає можливість приєднатися до онлайн-
розмовних клубів, де можна практикувати англійську з іншими студентами та
носіями мови. Це створює природне мовне середовище, яке допомагає покращити
упевненість та плинність розмови.
Додаткові матеріали: окрім занять та курсів, платформа пропонує низку
додаткових матеріалів, таких як: словники, флешкартки, граматичні довідники та
блоги. Ці матеріали можуть бути використані для додаткового навчання та практики.
17
Адаптивне навчання: «EnglishDom» використовує технології адаптивного
навчання, щоб коригувати курси та вправи на основі прогресу та слабких місць
кожного студента.
Недоліки «EnglishDom» [3]:
Вартість: «EnglishDom» може бути дорожчим, ніж деякі інші платформи для
вивчення англійської мови.
Технічні проблеми: як і будь-яка онлайн-платформа, «EnglishDom» може іноді
стикатися з технічними проблемами, які можуть вплинути на навчання.
Загалом, «EnglishDom» є потужною та багатофункціональною платформою для
вивчення англійської мови. Він добре підходить для студентів, які шукають
комплексний підхід до навчання, включаючи індивідуальні уроки, інтерактивні
курси, розмовні клуби та додаткові матеріали. Однак необхідно враховувати вартість
та можливі технічні проблеми перед підпискою.
1.2.4 Аналіз web-додатку «Grammarly». «Grammarly» – це універсальний
навчальний інструмент [4] для студентів, який спрямований на вдосконалення їхніх
навичок письма, не вимагаючи багато практики. Його можна використовувати як для
формального, так і для неформального навчання, наприклад, для підготовки до
іспитів або підготовки до життєвих подій рисунок 1.4.
Рисунок 1.4 – Головна сторінка сайту «Grammarly» [4]
18
Основою функціоналу «Grammarly» (рисунок 1.4) є потужний алгоритм, що
базується на штучному інтелекті та нейронних мережах. Він аналізує текст з
урахуванням контексту, структури речення та специфіки вживання мови.
Додаток пропонує різні варіанти підписок, включаючи безкоштовну версію з
базовими функціями та преміумплани з розширеним функціоналом, таким як
персоналізовані рекомендації щодо стилю письма, можливість встановлення власних
мовних правил та підтримка більш широкого спектра мов.
Користувачі «Grammarly» можуть використовувати додаток у різних сценаріях:
від написання електронних листів та повідомлень до створення професійних
документів, наукових статей та контенту для вебсайтів.
Завдяки інтеграції з різними платформами, такими як веббраузери, мобільні
пристрої та текстові редактори, «Grammarly» забезпечує зручний доступ до своїх
функцій у будь-який момент і з будь-якого пристрою.
Окрім коригування тексту, Grammarly також пропонує корисні матеріали для
самоосвіти з питань граматики, стилю та ефективного письма. Користувачі можуть
скористатися бібліотекою рекомендованих ресурсів, а також персоналізованими
навчальними матеріалами для покращення своїх мовних навичок.
В цілому, «Grammarly» стає невід'ємним помічником для всіх, хто цінує якість
свого письма та прагне досягти високого рівня мовної грамотності в будь-яких сферах
життя та професійній діяльності.
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та постанова
завдання
У таблиці 1.1 представлено порівняльний аналіз розглянутих додатків, а саме:
«Duolingo», «Babbel», «EnglishDom», «Grammarly». У якості критеріїв для порівняння
було обрано такі критерії: функціональність, інтерфейс користувача, методи
навчання, персоналізація та адаптивність, доступність та ціна.
Переглянувши та оцінивши приведені вище web-додатки, варто зазначити, що
кожному з них притаманні такі характеристики:
зрозумілий інтерфейс;
19
велика база для навчання;
доступність для користування в різних країнах.
Таблиця 1.1 – Аналіз порівнянь існуючих рішень розглянутих реалізацій
Аспекти Duolingo Babbel EnglishDom Grammarly
Функціональніс Велика Великий вибір Широкий Спрямовани
ть кількість вправ, спектр вправ, й на
інтерактивних тематичні аудіо- та покращення
вправ, ігор, курси, аудіо- відеоуроки, письмових
тестів та відеоуроки заняття з навичок
викладачем користувачі
в
Інтерфейс Кольоровий та Простий та Зручний і Інтуїтивний,
користувача привабливий, зрозумілий, естетичний, зрозумілий
але менш менш інтуїтивно
структуровани сучасний зрозуміле
й вигляд меню
Методи Гейміфікація, Різноманітні Різноманітні Вправи з
навчання інтерактивні методи, методи, граматики,
методи акцент на акцент на перевірка
реальних інтерактивнос тексту
ситуаціях ті
Персоналізація Доступність Персоналізова Можливість Надання
та адаптивність персоналізован ні курси, налаштуванн рекомендаці
их курсів, вибір можливість я й щодо
темпу навчання налаштування індивідуальн використанн
навчання их потреб я мови та
стилю
20
Доступність та Безкоштовний Доступний Доступний Безкоштовн
ціна з можливістю для для ий з
платних опцій користувачів з користувачів можливістю
різних країн, з різних покупки
щомісячна країн, платних
підписка можливість опцій
підписки
Провівши аналіз наявних рішення розглянутих реалізацій, в кваліфікаційній
роботі бакалавра при розробці web-додатка для вивчення англійської мови варто
звернути увагу на такі моменти:
web-додаток повинен мати зручний, зрозумілий та приємний інтерфейс;
додаток повинен мати базу даних користвачів для їхнього навчання;
ціна на підписку повинна бути не високою.
Постановка завдання
1. Дослідження та вибір найактуальніших технологій веброзробки для створення
сучасних web-додатків.
2. Розробка web-додатку для навчання англійської мови що задовольняє таким
функціональним вимогам:
автентифікація та реєстрація користувачів;
проходження навчальної частини;
мати можливість переглянути прогрес навчання.
Висновки до розділу 1
У рамках дослідження предметної області було проведено обширний аналіз
сучасних тенденцій у сфері навчання англійської мови через вебдодатки. Під час
дослідження були проаналізовані та оглянуті такі популярні додатки, як «Duolingo»,
«Babbel», «EnglishDom» та «Grammarly».
Проведений аналіз дозволив визначити ключові особливості та функціональні
можливості кожного з додатків, а також виявити їх переваги та недоліки. Було
21
проведено порівняльний аналіз чинних вебдодатків, в якому враховувалися такі
параметри, як доступність, ефективність, рівень користувацького досвіду та зручність
інтерфейсу.
В результаті проведеного аналізу було виявлено, що кожен із розглянутих
додатків має свої переваги та недоліки, а також власні особливості, що визначають
його популярність серед користувачів. Однак, виявлені прогалини та недоліки у
функціоналі додатків створили можливість для розробки нового вебдодатку, який би
поєднував у собі найкращі практики та функціональність, а також враховував
побажання користувачів.
22
2 ПРОЄКТУВАННЯ WEB-ДОДАТКУ ДЛЯ НАВЧАННЯ АНГЛІЙСЬКОЇ
МОВИ
2.1 Опис функціонального програмного середовища для розробки
Розглянемо програмне середовище для розробки вебдодатків для навчання
англійської мови ближче і визначимо його ключові особливості та компоненти, які в
нього входять.
VS Code – це інтегроване середовище розробки (IDE), розроблене компанією
Microsoft, яке широко використовується для розробки вебдодатків, включаючи ті, що
пов'язані з вивченням англійської мови.
VS Code має інтуїтивно зрозумілий інтерфейс користувача та широкий набір
функцій, що дозволяє швидко розпочати роботу. Підтримує розширення для різних
мов програмування, фреймворків та інструментів розробки, що дозволяє адаптувати
його до ваших потреб.
VS Code має вбудовану підтримку для системи керування версіями Git, що
дозволяє легко виконувати команди Git, створювати коміти та керувати гілками
безпосередньо з інтерфейсу редактора. Редактор VS Code пропонує автодоповнення
коду для різних мов програмування, що полегшує написання коду та допомагає
уникнути помилок. Надає інструменти для налагодження коду, такі як точки зупинки,
відстеження змін та перегляд значень змінних, що допомагає вирішувати проблеми у
вашому програмному коді.
Оскільки вебдодатки часто використовують технології HTML, CSS та
JavaScript. VS Code надає широкі можливості для редагування, перегляду та
налагодження коду.
Основою робочого процесу у VS Code є зручний та ефективний інтерфейс
редактора, що надає розробникам можливість швидко та ефективно створювати
вебдодатки для навчання англійської мови. VS Code забезпечує широкий набір
інструментів та функцій, які сприяють продуктивності та зручності розробки. Завдяки
вбудованій підтримці Git, розробники можуть легко керувати версіями свого коду та
спільно працювати з іншими учасниками проєкту. Автодоповнення коду допомагає
23
уникнути помилок та прискорює написання коду, а функціональність налагодження
коду допомагає виявляти та виправляти проблеми в програмному коді. Загалом, VS
Code створений для того, щоб забезпечити розробникам потужний та зручний
інструмент для розробки вебдодатків, який відповідає їхнім потребам та сприяє
досягненню успіху у їхніх проєктах.
VS Code сумісний з різними платформами операційних систем, включаючи
Windows, macOS і Linux, що робить його універсальним інструментом для розробки
на будь-якій платформі. В цілому, VS Code є потужним та універсальним
середовищем розробки, яке забезпечує розробникам зручність та продуктивність у
роботі над вебдодатками для вивчення англійської мови.
Особливості VS Code:
має інтуїтивно зрозумілий інтерфейс, що дозволяє новачкам швидко освоювати
робочий процес розробки;
велика кількість розширень та плагінів дозволяє налаштувати середовище
розробки під конкретні потреби проєкту;
підтримує широкий спектр мов програмування, що дозволяє розробникам
працювати з будь-якими технологіями для створення вебдодатків;
вбудована підтримка Git дозволяє легко керувати версіями коду та спільно
працювати з командою розробників;
автоматичне доповнення коду сприяє швидкому написанню коду та зменшує
кількість помилок;
вбудовані інструменти для налагодження коду допомагають виявляти та
виправляти помилки швидко та ефективно;
VS Code підтримується на різних операційних системах, включаючи Windows,
macOS і Linux, що робить його доступним для широкого кола розробників.
Ці особливості роблять VS Code привабливим вибором для розробки
вебдодатків для навчання англійської мови, забезпечуючи зручність, продуктивність
та ефективність у процесі розробки.
HTML – це широко використовувана мова розмітки для вебсторінок. Ця мова
дозволяє описувати структуру документа і включати у нього елементи, такі як текст,
посилання, зображення та інші мультимедійні ресурси. CSS та JavaScript
24
використовується для створення функціональних та естетично заснованих вебсайтів
HTML.
HTML також має загальну структуру, яка містить декларацію типу документа,
елемент <html>, що містить <head> (заголовок документа) і <body> (тіло документа).
В заголовку зазвичай містяться метатеги, які вказують метадані документа, такі як
кодування символів і метатег <title>, який визначає заголовок вебсторінки, який
відображається у вікні браузера.
В <body> розміщується основний контент вебсторінки, таких як: текст,
зображення, відео, посилання та інші елементи.
HTML також дозволяє створювати різноманітні структури таблиці, форми,
списки та інші. Орім того, вона має спеціальні атрибути для налаштування
відображення та поведінки елементів, таких як class і id для CSS і JavaScript, атрибути
для вбудованих стилів style і мовних атрибутів lang. Також являється важливою
навичкою для будь-якого веброзробника чи дизайнера.
CSS – це мова опису стилів, що використовується для оформлення вебсторінок
і надає можливість встановлювати зовнішній вигляд елементів HTML. Вона є
невід'ємною частиною розробки вебдодатків для вивчення англійської мови,
дозволяючи створювати привабливий та користувацький інтерфейс. Ось кілька
ключових аспектів CSS:
Cелектори. CSS використовує селектори для вибору елементів HTML, які
потрібно стилізувати. Це можуть бути теги, класи, ідентифікатори або інші атрибути.
Властивості та значення. Кожен селектор може мати різні властивості, такі як
колір тексту, розмір шрифту, відступи, фонові зображення тощо. Кожна властивість
має значення, яке встановлюється для відповідного елемента.
Каскадність та спадання значень. CSS використовує принцип каскаду, що
дозволяє встановлювати значення властивостей для елементів і його дочірніх
елементів. Якщо властивість не задана для конкретного елемента, вона може
успадковуватися від його батьківського елемента.
Боксова модель. CSS визначає розміри та розташування блокових елементів на
сторінці, використовуючи боксову модель. Ця модель містить властивості, такі як
ширина, висота, відступи, рамка та внутрішні відступи.
25
Позиціювання. CSS надає різні методи позиціювання елементів на сторінці,
включаючи статичне, абсолютне, відносне та фіксоване позиціювання.
Анімації та переходи. CSS дозволяє створювати анімації та переходи для
елементів, що додає динамічність та привабливість до вебсторінок.
Ці аспекти CSS важливі для ефективної розробки користувацького інтерфейсу
вебдодатків, які спрямовані на вивчення англійської мови.
JavaScript (JS) – це високорівнева, інтерпретована мова програмування, яка
використовується для створення динамічних та інтерактивних вебдодатків. Ось деякі
особливості та характеристики JavaScript:
Легкість вивчення. JavaScript має простий синтаксис, що дозволяє новачкам
швидко освоювати основи програмування.
Кросплатформенніст. JS може виконуватися на будь-якому пристрої або
операційній системі, що підтримує веббраузер.
Широкі можливості. JavaScript використовується для розробки різних типів
вебдодатків, від простих вебсторінок до складних односторінкових додатків (SPA) та
ігор.
Динамічність. За допомогою JS можна легко змінювати вміст сторінки без
перезавантаження, що робить вебдодатки більш інтерактивними та користувацькими.
Широкий вибір бібліотек та фреймворків. JavaScript має велику кількість
сторонніх бібліотек і фреймворків, таких як React.js, Vue.js, Angular, що полегшують
розробку вебдодатків.
Асинхронний JavaScript. JavaScript підтримує асинхронне програмування за
допомогою функцій зворотного виклику (callback functions), механізм (promises) та
асинхроні функції (async/await), що дозволяє ефективно управляти асинхронними
операціями.
Вбудований веб-API. JavaScript має доступ до багатьох вбудованих веб-API,
таких як DOM API (Document Object Model), Fetch API (для здійснення запитів до
сервера), Web Storage API (для зберігання даних на клієнтському боці) та інші.
React є одним з найпопулярніших і потужних JavaScript фреймворків для
розробки вебінтерфейсів. Розроблений компанією Facebook, React відзначається
своєю простотою використання, ефективністю та гнучкістю. Основним принципом
26
React є компонентна архітектура, що дозволяє розбити вебінтерфейс на маленькі
незалежні частини, які легко управляти та перевикористовувати.
Однією з ключових особливостей React є використання віртуального DOM,
який дозволяє ефективно оновлювати лише необхідні частини вебсторінки під час
зміни даних, забезпечуючи високу швидкість та продуктивність додатків.
React також має потужну систему станів (state management), яка дозволяє
ефективно керувати даними та їх станами в простий та зрозумілий спосіб. Завдяки
цьому, React ідеально підходить для розробки складних та великих вебдодатків, де
потрібно ефективно керувати великою кількістю даних.
Ще однією важливою особливістю React є можливість використання JSX
(JavaScript XML), що дозволяє писати код, що схожий на HTML, але з можливістю
використання JavaScript в ньому. Це робить код більш зрозумілим та легким для
розробки та підтримки.
Крім того, велика кількість сторонніх бібліотек та інструментів робить React ще
потужнішим і зручнішим для використання. Наприклад, Redux для управління станом
додатка, React Router для маршрутизації, або Material-UI для швидкої розробки
стильних користувацьких інтерфейсів.
2.2 Основні принципи розробки вебдодатків
Основні принципи розробки вебдодатків містять ряд критичних аспектів, які
важливо враховувати під час проєктування та розробки програмного забезпечення.
Ключові принципи розробки вебдодатків:
Користувацький досвід. Вебдодатки повинні мати зручний та привабливий
інтерфейс, який забезпечує зручну навігацію та позитивний досвід користувача.
Реактивність. Додатки повинні бути адаптивними та швидкими, забезпечуючи
реагування на дії користувачів без зайвої затримки.
Масштабованість. Архітектура додатка повинна бути гнучкою та
масштабованою, щоб забезпечити можливість збільшення обсягу ресурсів при
необхідності.
27
Безпека. Вебдодатки повинні мати вбудовані заходи безпеки для захисту
конфіденційної інформації користувачів та запобігання атакам зловмисників.
Модульність. Код додатка повинен бути розділений на модулі для полегшення
розробки, тестування та підтримки.
Швидкість завантаження. Додатки повинні завантажуватися швидко, щоб
забезпечити зручність користувачів та позитивний перший враження.
Підтримка браузерів. Вебдодатки повинні працювати на різних браузерах без
втрати функціональності та вигляду.
Підтримка мобільних пристроїв. Врахування особливостей мобільних
пристроїв та розробка додатків, які оптимізовані для використання на смартфонах і
планшетах.
2.3 Розробка діаграми варіантів використання
Розробка діаграми варіантів використання (Use Case) є важливим етапом у
процесі аналізу та проєктування вебдодатків. Вона дозволяє ідентифікувати та
описати всі можливі способи, які користувачі можуть використовувати додаток для
досягнення своїх цілей. Акторами можуть бути:
Користувач. Людина, яка використовує вебдодаток для вивчення англійської
мови.
Адміністратор. Людина, яка керує вебдодатком, створює курси, додає вправи
та оцінює результати користувачів.
Варіанти використання вебдодатку наступні:
реєстрація;
вхід;
вибір курсу;
виконання вправ;
проходження тестів;
перегляд результатів;
створення курсів;
додавання вправ;
28
оцінювання результатів;
управління користувачами.
На основі сформованих даних про акторів та всі можливі варіанти використання
вебдодатку, отримали Use Case діаграму (рисунок. 2.1).
Рисунок 2.1 – Розроблена діаграма Use Case для вебдодатку англійської мови
2.4 Проєктування структури бази даних
Бази даних – це пакети даних, змодельовані за допомогою логіки, тоді як
система управління базами даних (СУБД) – це комп’ютерна програма, яка взаємодіє
з цими базами даних. А СУБД використовується для запису даних, виконання запитів,
контролю доступу та обробки інших завдань, пов'язаних з управлінням базами даних.
Хоча терміни бази даних та системи управління базами даних використовуються як
взаємозамінні, вони насправді не означають одне і те ж. База даних – це сукупність
даних, яка може надходити з кількох джерел, а не просто зберігатись локально на
комп’ютері. СУБД – це програмне забезпечення, яке дозволяє взаємодіяти з базою
даних.
Фізична модель бази даних визначає, як саме дані будуть зберігатися та
організовані на рівні конкретної системи управління базами даних (СКБД). У даному
випадку ми використовуємо MySQL як СКБД.
29
Фізична модель бази даних вебдодатку для вивчення англійської мови містить
ряд засобів забезпечення цілісності, таких як: унікальність, цілісність посилань,
обмеження та тригери. Ці елементи гармонійно працюють разом, забезпечуючи
надійність та ефективність управління даними в рамках системи управління базами
даних MySQL.
Для фізичної моделі рисунок 2.2 характерно побудова її діаграми, яка буде
більш деталізованою, ніж на концептуальному рівні, оскільки на даному етапі вже
було визначено всі аспекти обмежень, форм нормалізації, визначення відношень,
сутностей та зв’язків у таблицях.
Рисунок 2.2 – Розроблена фізична модель бази даних
Всі ці засоби допомагають створити надійну та ефективну систему управління
базою даних. Фізична модель не лише деталізована та орієнтована на конкретну
СКБД, але і враховує всі необхідні аспекти для забезпечення цілісності даних.
2.5 Опис процесу проєктування структури вебдодатку для навчання
англійської мови
Проєктування структури вебдодатку для навчання англійської мови є ключовим
етапом у процесі розробки програмного забезпечення, оскільки від цього залежить
ефективність та продуктивність системи
30
Провівши аналіз інших вебдодатків, в кваліфікаційній роботі бакалавра було
обрано структуру вебдодатку для навчання англійської мови, що складається з таких
розділів:
головна сторінка;
реєстрація користувача;
авторизація користувача;
проходження рівнів;
досягнення користувача.
Структура вебдодатку для навчання англійської мови представлена на рисунку
2.3.
Рисунок 2.3 – Структура вебдодатку для навчання англійської мови
31
Висновки до розділу 2
Було проведено детальне проєктування вебдодатку для навчання англійської
мови. В рамках цього розділу було представлено опис функціонального програмного
середовища для розробки додатку, яке включало в себе вибір необхідних технологій
та платформи розробки, а також огляд основних принципів створення вебдодатків та
бази даних.
Основною частиною розділу була розробка діаграми Use Case, яка відобразила
основні функціональні можливості додатку з урахуванням потреб користувачів. Ця
діаграма стала основою для подальшої розробки функціоналу додатку та його
інтерфейсу.
Крім того, була проведена робота з базою даних, де визначалися основні
сутності та зв'язки між ними, що дозволило створити ефективну структуру для
зберігання та обробки даних у додатку.
Проєктування стало важливим для подальшої розробки вебдодатку,
визначивши основні вимоги та принципи, які слід дотримуватися під час розробки
вебдодатку для вивчення англійської мови.
32
3 ПРОГРАМНА РЕАЛІЗАЦІЯ
3.1 Постановка завдання
Сформульовано завдання для програмної реалізації кваліфікаційної
бакалаврської роботи.
Розробка інтерфейсу користувача, який буде інтуїтивно зрозумілим та
привабливим, забезпечуючи комфортне використання додатка для користувача. У
користувача буде можливість вибрати рівень вивчення англійської мови: початковий,
середній або високий.
Функціонал карток буде містить можливість відображення українських слів на
картках, а також можливість користувача позначити, чи знає він переклад слова, що
зображено на картці, чи ні. Крім того, повинна бути забезпечена можливість
перегляду перекладу слів для полегшення вивчення.
Розроблена система досягнень, буде відстежувати та відображати досягнення
користувача у вивченні англійських слів. Також буде можливість перегляду списку
слів, які користувач повинен повторно вивчити.
У процесі розробки використовуватимуться такі технології:
«HTML», «CSS» та «JavaScript» – для створення інтерфейсу користувача та
реалізації логіки додатка;
«React» – фреймворк «JavaScript» для створення користувацьких інтерфейсів.
React забезпечить швидку та ефективну розробку компонентів додатка;
«Vite» – інструмент розробки, який забезпечить швидку розробку та
налагодження коду завдяки вбудованому серверу розробки та швидкому
перезавантаженню сторінок;
«Bootstrap» – бібліотека «CSS», яка надасть готові компоненти та стилі для
швидкої та адаптивної розробки інтерфейсу.
Застосування цих технологій дозволить створити додаток, який буде
ефективним і зручним у використанні для користувачів. Реалізація вищезазначеного
завдання спрямована на створення високоякісного та ефективного засобу для
33
вивчення англійської мови, який буде доступний та зручний у використанні для
широкого кола користувачів.
На рисунку 3.1 наведено спроектовану архітектуру розроблюваного додатку.
Рисунок 3.1 – Архітектура розроблюваного додатку
3.2 Інтерфейс web-додатку для вивчення англійської мови
Інтерфейс web-додатку призначений для ефективного та зручного навчання
англійської мови за допомогою методу карток. Він має бути інтуїтивно зрозумілим та
привабливим для користувача, забезпечуючи зручне навігування та взаємодію з
функціоналом.
Головна сторінка додатка, яка містить основний функціонал додатка,
відображається за допомогою «HTML» та стилізується з використанням «CSS»,
враховуючи принципи мобільного дизайну та адаптивності. На цій сторінці
застосовується фреймворк «React» для динамічного оновлення вмісту.
При вивченні слів здійснюється взаємодія зі сторінкою, яка використовує
«JavaScript» для відображення карток зі словами та їх перекладами. При натисканні
34
на кнопки «Вже знаю» або «Ще не знаю» відбувається динамічна зміна інтерфейсу,
що реалізується за допомогою React.
Система досягнень побудована з використанням «React» для відображення
досягнень користувача у навчанні англійських слів. Користувач може переглянути
свої досягнення після кожної спроби на окремій сторінці, там він бачить результат у
відсотковому співвідношенні, а також слова, які потрібно допрацювати.
Оскільки користувацький інтерфейс створений з використанням «React» та
«React Bootstrap», архітектура додатка розділена на компоненти. Кореневий
компонент відповідає за загальний макет сторінки та включає всі інші компоненти.
Використання контейнерів, рядків та колонок з «Bootstrap» для структурування
компонентів та забезпечення адаптивності. Кнопки використовуються для вибору
рівня вивчення англійської мови, підтвердження дій тощо. Кожна кнопка має власні
властивості, такі як текст та колір. Використання компонентів «Link» з бібліотеки
«react-router-dom» для переходу на сторінки з обраним рівнем вивчення забезпечують
зручну навігацію без перезавантаження сторінки. Використовуються «CSS класи» для
додаткової стилізації компонентів.
Така структура дозволяє створити чистий, організований та привабливий
інтерфейс, який забезпечує зручну навігацію та ефективне вивчення англійської мови.
На рисунку 3.2 наведено синтаксис «CSS класу» розробленої головної сторінки
додатка.
Рисунок 3.2 – CSS клас головної сторінки додатку
35
3.3 Програмна реалізація web-додатку для навчання англійської мови
Компонент «App.jsx» є основним компонентом додатка. Він відповідає за
маршрутизацію та відображення відповідних сторінок на основі шляху URL.
Використання «BrowserRouter» з «react-router-dom» для визначення маршрутів
додатка. Кожен маршрут представлений компонентом «Route», який вказує шлях
URL та компонент, що має бути відображений при співпадінні шляху.
При відкритті кореневого шляху відображається компонент «Home», який
представляє стартову сторінку додатка.
При відкритті шляхів «/beginner», «/intermediate» або «/advanced»,
відображається компонент Level. Цей компонент відображає рівень вивчення
англійської мови залежно від вибраної категорії.
Встановлюється базовий шлях за допомогою «basename». Це дозволяє
налаштувати базовий URL для додатка рисунок 3.3.
Рисунок 3.3 – Компонент App.jsx
36
Компонент «Home» відповідає за відображення стартової сторінки додатка
рисунок 3.4, де користувач може обрати свій рівень навчання англійської мови.
Компонент містить заголовок «Оберіть ваш рівень», який вказує користувачеві
на наступний крок.
Використовуються кнопки для вибору рівня вивчення англійської мови. Кожна
кнопка веде на відповідну сторінку з рівнем вивчення.
Реалізований контейнер «Bootstrap» для організації кнопок на сторінці та
забезпечення адаптивності. Для додаткової стилізації використовуються «CSS»
класи, які описані в файлі «Home.css».
Також використано компонент «Link» з бібліотеки «react-router-dom» для
переходу на сторінки з обраним рівнем вивчення. Це дозволяє забезпечити
безперервну навігацію без перезавантаження сторінки.
Рисунок 3.4 – Компонент Home.jsx
37
Компонент «Level» відповідає за відображення сторінки з навчання слів на
певному рівні складності рисунок 3.5.
Використовується «useState» для ведення стану компонента, такого як анімація
та лічильник. Слова фільтруються за рівнями складності (beginner, intermediate,
advanced) з масиву «all_words».
Функція «showWord» відображає слово в залежності від вибраного рівня та
мови. Функція resultTab додає слово до списку успішно або невдало вивчених слів.
Якщо лічильник досягне 10, то відображається компонент «ResultPanel», який
показує результати вивчення слів на даному рівні.
Рисунок 3.5 – Фрагмент компонента Level.jsx
38
Компонент «ResultPanel» рисунок 3.6 відповідає за відображення результатів
вивчення слів. В ньому реалізована логіка для визначення відсоткового
співвідношення правильних та неправильних відповідей.
Функція «showResult» відображає список слів, які необхідно повторити, у разі
якщо їх кількість не дорівнює нулю.
Посилання для початку нової спроби з вивчення слів на початковій сторінці.
Рисунок 3.6 – Фрагмент компонента ResultPanel.jsx
База даних для словника англійських слів організована у вигляді таблиці
«Words» з наступними полями:
id: Унікальний ідентифікатор кожного слова;
level: Рівень складності слова (beginner, intermediate, advanced);
ukrainian_word: Переклад слова на українську мову;
english_word: Слово англійською мовою.
39
3.4 Особливості тестування вебдодатків
Вебдодатки мають свої особливості, які відрізняють їх від інших видів
програмного забезпечення і вимагають специфічного підходу до тестування. Ці
вимоги включають різні аспекти.
Вебдодатки повинні працювати на різних браузерах, таких як: «Google
Chrome», «Mozilla Firefox», «Safari», «Microsoft Edge» тощо. Тестування повинно
здійснюватися на кожному з них, щоб переконатися, що функціонал додатка працює
коректно на всіх платформах.
З урахуванням різноманітності пристроїв, на яких може відображатися
вебдодаток, важливо переконатися, що він коректно працює на різних розмірах
екрана. Тестування адаптивності вебдодатка на різних пристроях є важливим етапом
процесу тестування.
Багато вебдодатків взаємодіють з сервером для отримання та збереження даних.
Тестування включає перевірку цієї взаємодії, щоб переконатися, що вебдодаток
працює правильно під час обміну даними з сервером.
Для забезпечення якості вебдодатків використовуються різні методики
тестування.
Перевірка функціональності вебдодатка відповідно до вимог, яка включає
тестування кожної функції додатка, його реакції на введення користувача та очікувані
результати.
Оцінка зручності та ефективності взаємодії користувача з вебдодатком може
включати тестування інтерфейсу користувача, навігації та зручності використання.
Перевірка вебдодатка на наявність потенційних вразливостей, таких як атаки на
злам або витік конфіденційної інформації є важливим аспектом, оскільки вебдодатки
можуть бути піддані ризикам кібератак.
Для проведення тестування вебдодатків використовуються різноманітні
інструменти, що допомагають автоматизувати та полегшити процес тестування.
Оскільки в розроблюваному програмному забезпеченні використовується
фреймворк «React», тестування додатків на цій платформі має свої власні особливості
та вимоги.
40
При компонентному тестуванні «React» розбиває інтерфейс користувача на
невеликі, повторно використовувані компоненти. Для забезпечення якості та
надійності додатка важливо протестувати кожен компонент окремо. Для цього
використовуються бібліотеки, такі як «React Testing Library» або «Enzyme», які
дозволяють створювати і запускати тести для окремих компонентів.
Що стосується тестування взаємодії компонентів, у «React» взаємодія між
компонентами грає важливу роль. Під час тестування важливо переконатися, що дані
правильно передаються між компонентами, і вони відображаються на інтерфейсі
користувача так, як очікується. Це повинно бути досягнуто за допомогою тестів, які
симулюють взаємодію користувача з інтерфейсом та перевіряють очікувані
результати.
Якщо використовувати інтеграційне тестування поза тестуванням окремих
компонентів, важливо також випробувати взаємодію між різними частинами додатка.
Це може включати тестування навігації, форм, авторизації тощо. Для цього
використовуються бібліотеки, такі як «Cypress» або «Selenium», які дозволяють
створювати та запускати автоматизовані тести, що моделюють поведінку користувача
в реальному часі.
Особливу увагу слід приділити тестуванню продуктивності додатка. React
дозволяє створювати динамічні інтерфейси, які можуть бути дуже швидкими та
реактивними. Однак, недбале використання може призвести до погіршення
продуктивності додатка. Тому важливо також тестувати продуктивність додатка,
зокрема швидкість відгуку на різні дії користувача та оптимізацію рендерингу
компонентів.
В цілому, ефективне тестування вебдодатків вимагає ретельного підходу та
використання відповідних інструментів та методик. Забезпечення якості та надійності
додатка через тестування сприятиме створенню позитивного досвіду користувачів та
забезпечить успішну реалізацію проєкту.
Тестування вебдодатку для вивчення англійської мови було ретельним і містить
кілька ключових аспектів.
41
Функціональність різних рівнів складності перевірялася шляхом спроби
користувача вибрати рівень та перемикання між ними. Впевненість у відповідності
слів обраному рівню складності перевірялася шляхом вивчення слів та їх перекладу.
Кнопки «Вже знаю» та «Ще не знаю» перевірялися на коректність реакції. Після
завершення вивчення 10 слів, результати вивчення, включаючи відсоткове
співвідношення правильних та неправильних відповідей, а також список слів, які
необхідно повторити, перевірялися на правильність відображення.
Зручність навігації та інтерфейсу користувача перевірялися шляхом оцінки
зручності використання та виявлення можливих проблем з доступністю та зручністю
користування для різних типів користувачів.
Вебдодаток також тестувався на різних пристроях та браузерах для перевірки
сумісності та адаптивності. Він був випробуваний на різних розмірах екранів та
платформах для виявлення можливих проблем з відображенням та функціональністю.
Також були проведені тести на безпеку, спрямовані на виявлення вразливостей,
таких як «XSS» або «SQL» ін'єкції, а також перевірка забезпечення конфіденційності
даних користувачів та захист від несанкціонованого доступу до них.
Крім тестування функціональності та користувацького інтерфейсу,
використовувалося також компонентне тестування. Це дозволило перевірити роботу
окремих компонентів програми на коректність їх функціонування та взаємодію з
іншими компонентами.
Компонентне тестування здійснювалося за допомогою спеціалізованих
бібліотек та інструментів, таких як «Jest», яка надала можливість запуску
автоматизованих тестів для окремих «React-компонентів». Кожен компонент
тестувався на правильність відображення, взаємодії з користувачем та коректності
роботи в різних умовах.
Під час компонентного тестування перевірялися різні сценарії взаємодії з
компонентами, включаючи коректність передачі пропсів, обробку подій та зміну
стану компонентів. Такий підхід дозволив виявити і виправити можливі помилки та
недоліки на ранніх етапах розробки, забезпечивши високу якість коду та
функціональність вебдодатку.
42
Нижче наведено розроблені автоматизовані тести на рисунках 3.7 – 3.8.
Рисунок 3.7 – Фрагмент автоматизованого тесту для первірки коректності
відображення компоненту Home.jsx
Рисунок 3.8 – Фрагмент автоматизованого тесту для первірки наявності кнопок на
головній сторінці
Також було проведено тестування продуктивності вебдодатку.
Для оцінювання цього параметру вимірювався час завантаження домашньої
сторінки, сторінок з рівнями складності та сторінки результатів за допомогою
вбудованих інструментів браузера «Chrome DevTools». Час завантаження кожної
сторінки становив менше ніж 2 секунд.
Також вимірювався час реакції додатка на дії користувача, такі як кліки на
кнопки та перегляд карточок з англійськими словами. Була присутня швидка реакцію
додатка без помітних затримок.
Проаналізовано час, необхідний для виконання запитів до сервера для
отримання словника англійських слів та результатів вивчення користувача. Виявлено,
що середній час відповіді від сервера становив менше 100 мс.
Профілювавши використання пам'яті додатком за допомогою «DevTools»,
забезпечено ефективне використання ресурсів браузера додатком.
43
Також проведено тестування на різних мобільних пристроях з різними
розмірами екранів та характеристиками. Виявилося, що додаток працює ефективно та
має гарний досвід користувача на різних пристроях.
Загалом, результати тестування продуктивності свідчать про те, що вебдодаток
працює швидко та ефективно.
Висновки до розділу 3
В підсумку було розглянуто процес розробки та тестування вебдодатка, який
спрямований на полегшення процесу навчання англійської мови за допомогою
карток.
Охоплено широкий спектр аспектів, від постановки завдання та вибору
технологій до реалізації різних компонентів та тестування продуктивності.
Після цього реалізованого програмного забезпечення, використовувались
технології, такі як HTML, CSS, JS, React та Vite.
Детально описано структуру та функціонал кожного компонента, включаючи
домашню сторінку з вибором рівня вивчення, сторінки для вивчення слів на різних
рівнях та сторінку результатів. Представлено базу даних зі словами англійської мови,
які використовуються в додатку.
Після завершення реалізації додатка було проведено тестування з метою
перевірки його функціональності та продуктивності. Функціональне тестування було
здійснено за допомогою Jest, щоб переконатися у правильному функціонуванні
кожного компонента. Також було проведено тестування продуктивності для оцінки
швидкодії додатка за різних умов.
44
ВИСНОВКИ
В рамках кваліфікаційної роботи бакалавра був спроєктований та розроблений
вебдодаток для покращення процесу навчання англійської мови, всі завдання роботи
виконані в повному обсязі. Основною метою дослідження було створення
функціонального та ефективного інструменту, який повинен допомагати
користувачам ефективно опановувати англійську мову, зокрема за допомогою методу
вивчення карток.
У початкових етапах роботи були визначені вимоги до програмного
забезпечення, що містить вибір функціонала, необхідного для створення інструменту
для навчання.
Починаючи з опису постановки завдання, представлено концепцію вебдодатка,
який має допомогти користувачам вивчати англійську мову за допомогою вправ з
картками.
Перед розробкою програмного забезпечення було проведено проєктування, в
ході якого були визначені основні вимоги та функціональні можливості додатка.
Основні етапи проєктування включали вибір необхідних технологій та
платформи розробки, а також розробку архітектури програмного забезпечення. Під
час цього етапу було ретельно розглянуто потреби користувачів та забезпечено
відповідність функціональності додатка цим вимогам.
Далі була розроблена архітектура програмного забезпечення та реалізовані
відповідні компоненти з використанням HTML, CSS, JS, React та Vite.
Після завершення реалізації було проведено тестування програмного
забезпечення з метою перевірки його функціональності та продуктивності.
Тестування містить функціональні та продуктивні тести, які дозволили виявити та
виправити всі можливі помилки та недоліки додатка.
Виконана робота дозволила створити ефективний та користувацько-
орієнтований вебдодаток, який може служити важливим інструментом для вивчення
англійської мови.
45
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Вебдодаток «Duolingo». URL: https://www.duolingo.com/learn (дата звернення:
13.01.2024).
2. Вебдодаток «Babbel». URL: https://ua.babbel.com (дата звернення: 13.01.2024).
3. Вебдодаток «EnglishDom». URL: https://www.englishdom.com/ua/ (дата
звернення: 13.01.2024).
4. Вебдодаток «Grammarly». URL: https://www.grammarly.com (дата звернення:
14.01.2024).
5. Найкращі додатки для вивчення англійської у 2024. URL:
https://preply.com/ua/blog/dodatky-dlya-vyvchennya-angliyskoyi/ (дата звернення:
13.01.2024).
6. Visual Studio Code. URL: https://uk.wikipedia.org/wiki/Visual_Studio_Code (дата
звернення: 25.01.2024).
7. Проєктування бази даних. URL:
https://stud.com.ua/62415/menedzhment/proektuvannya_bazi_danih (дата
звернення: 25.01.2024).
8. Лінн Бейлі Head First SQL: опубліковано O’Reilly Media, Inc. 199-343 с.
9. Рекомендації щодо налаштувань СУБД Microsoft SQL. URL:
https://ispro.ua/uploads/usermanuals/October2020/qL4CSkxltMpksmMxcR6g.pdf
(дата звернення: 25.01.2024).
10. Як створити базу даних MySQL. URL: https://hostiq.ua/wiki/ukr/create-mysql-
database/ (дата звернення: 10.03.2024).
11. The V8 JavaScript Engine. URL: https://nodejs.org/en/learn/getting-started/the-v8-
javascript-engine (дата звернення: 10.03.2024).
12. Огляд JavaScript Частина 2: Браузер: документ, події, інтерфейси.
https://uk.javascript.info (дата звернення: 13.04.2024).
13. React. URL: https://react.dev (дата звернення: 13.04.2024).
14. Virtual DOM in React. URL: https://drukarnia.com.ua/articles/virtual-dom-in-react-
Au-O- (дата звернення: 14.04.2024).
46
15. Bootstrap. URL: https://getbootstrap.com/docs/5.3/getting-started/introduction/
(дата звернення: 15.04.2024).
16. Використання Vite для швидкого розгортання вебдодатків на основі React.
URL: https://it-rating.ua/vikoristannya-vite-dlya-shvidkogo-rozgortannya-veb-
dodatkiv-na-osnovi-vue-ta-react (дата звернення: 15.04.2024).
17. MySQL. URL: https://uk.wikipedia.org/wiki/MySQL/ (дата звернення:
15.04.2024).
18. Огляд рішень для тестування сайтів, різні види тестів для вебдодатків і вживане.
URL: http://hostinfo.ru/articles/442 (дата звернення: 12.05.2024).
19. Тестування WEB-додатків. URL: http://taac.org.ua/files/a2011/proceedings/UA-1-
Viktoria%20-173.pdf (дата звернення: 15.05.2024).
47
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
______________ Юрій ТРИУС
«____»____________2024 р.
РОЗРОБКА WEB-ДОДАТКУ ДЛЯ НАВЧАННЯ АНГЛІЙСЬКОЇ МОВИ
Специфікація
482.ЧДТУ. 42034-01
Листів 2
Розробник ____________________ Пилипенко Д.С.
Керівник ____________________ Колеснікова К.В.
Черкаси – 2024
48
482.ЧДТУ. 42034-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 42034-01 12 01 Текст програми
482.ЧДТУ. 42034-01 34 01 Інструкція користувача
482.ЧДТУ. 42034-01 90 01 Структура бази даних
49
ДОДАТОК Б
РОЗРОБКА WEB-ДОДАТКУ ДЛЯ НАВЧАННЯ АНГЛІЙСЬКОЇ МОВИ
Текст програми
482.ЧДТУ. 42034-01 12 01
Листів 13
Розробник _____________ Пилипенко Д.С.
Черкаси – 2024
50
Main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
App.jsx
import './App.css'
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './assets/Pages/Home/Home';
import Level from './assets/Pages/Level/Level';
function App() {
return (
<>
<BrowserRouter basename='english_app'>
<Routes>
<Route path='/' element={<Home/>}/>
<Route path='/beginner' element={<Level category='beginner'/>}/>
<Route path='/intermediate' element={<Level category='intermediate'/>}/>
<Route path='/advanced' element={<Level category='advanced'/>}/>
</Routes>
</BrowserRouter>
</>
)
}
export default App
Home.jsx
import React from 'react'
import Button from 'react-bootstrap/Button';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
51
import Container from 'react-bootstrap/Container'
import './Home.css'
import { Link } from 'react-router-dom'
const Home = () => {
return (
<div className='home'>
<h1>Оберіть ваш рівень!</h1>
<div className="home-levels-container">
<Container fluid="md">
<Row className='levels-row'>
<Col xs={12} sm={4}>
<Link to="/beginner">
<Button className="home-level" variant="outline-secondary" >Beginner</Button>
</Link>
</Col>
<Col xs={12} sm={4}>
<Link to="/intermediate">
<Button className="home-level" variant="outline-secondary">Intermediate</Button>
</Link>
</Col>
<Col xs={12} sm={4}>
<Link to="/advanced">
<Button className="home-level" variant="outline-secondary">Advanced</Button>
</Link>
</Col>
</Row>
</Container>
</div>
</div>
)
}
export default Home
Level.jsx
import React, { useEffect, useState } from 'react'
import './Level.css'
import Button from 'react-bootstrap/Button';
import Row from 'react-bootstrap/Row';
52
import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import all_words from '../../all_words'
import ResultPanel from '../ResultPanel/ResultPanel';
const Level = ({category}) => {
const [divAnimation, setDivAnimation] =useState(false);
const [counter, setCounter] = useState(0);
const addStyle = event =>{
setDivAnimation(!divAnimation)
event.currentTarget.classList.toggle('level-change-card');
}
const beginnerWords = all_words.filter(word => word.level === 'beginner')
const intermediateWords = all_words.filter(word => word.level === 'intermediate');
const advancedWords = all_words.filter(word => word.level === 'advanced');
const showWord = (category, counter, language) => {
if(category === 'beginner'){
if(language === 'english'){
let word = beginnerWords[counter].english_word;
return word;
}
else if(language === 'ukrainian'){
let word = beginnerWords[counter].ukrainian_word;
return word;
}
}
if(category === 'intermediate'){
if(language === 'english'){
let word = intermediateWords[counter].english_word;
return word;
}
53
else if(language === 'ukrainian'){
let word = intermediateWords[counter].ukrainian_word;
return word;
}
}
if(category === 'advanced'){
if(language === 'english'){
let word = advancedWords[counter].english_word;
return word;
}
else if(language === 'ukrainian'){
let word = advancedWords[counter].ukrainian_word;
return word;
}
}
}
const [failList, setFailList] = useState([])
const [successList, setSuccessList] = useState([])
const resultTab = (result, category) => {
if(category === 'beginner'){
if(result === 'fail'){
setFailList([...failList, beginnerWords[counter]])
}
if(result === 'success'){
setSuccessList([...successList, beginnerWords[counter]])
}
}
if(category === 'intermediate'){
if(result === 'fail'){
setFailList([...failList, intermediateWords[counter]])
}
if(result === 'success'){
setSuccessList([...successList, intermediateWords[counter]])
}
54
}
if(category === 'advanced'){
if(result === 'fail'){
setFailList([...failList, advancedWords[counter]])
}
if(result === 'success'){
setSuccessList([...successList, advancedWords[counter]])
}
}
setCounter(counter+1)
}
console.log(failList.length, successList)
return (
<div className='level'>
{counter < 10 ?
<h1>Рівень {category}</h1>
: null
}
{counter < 10 ?
<Container className="level-container">
<Row className="level-card" onClick={addStyle}>
<Col className='level-card-word'>
{divAnimation ? showWord(category, counter, 'english') : showWord(category, counter, 'ukrainian')}
</Col>
</Row>
<Row className="button-container">
<Col>
<Button
variant="outline-danger"
size="lg"
className='level-button'
onClick={() => resultTab('fail', category)}
55
>
Ще не знаю {failList.length === 0 ? null : failList.length}
</Button>
</Col>
<Col>
<Button
variant="outline-success"
size="lg"
className='level-button'
onClick={() => resultTab('success', category)}
>Вже знаю {successList.length === 0 ? null : successList.length}
</Button>
</Col>
</Row>
</Container>
: <ResultPanel failList={failList}
successList={successList} failLIstLenght={failList.length} successLIstLenght={successList.length}/> }
</div>
)
}
export default Level
ResultPanel.jsx
import React from 'react'
import './ResultPanel.css'
import Button from 'react-bootstrap/Button';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import ShowResult from '../../Components/ShowResult';
import { Link } from 'react-router-dom'
const ResultPanel = ({failList, successList, failLIstLenght, successLIstLenght}) => {
console.log(failList, successList, failLIstLenght, successLIstLenght)
let successAnswer = (successLIstLenght/(successLIstLenght+failLIstLenght))*100
let failAnswer = (failLIstLenght/(successLIstLenght+failLIstLenght))*100
56
const showResult = () => {
return(
<Row className='resultPanel-reped-words-div'>
{failList.map((item) => (
<Row key={item.id} className='resultPanel-repead-words'>
<Col >{item.ukrainian_word}</Col>
-
<Col >{item.english_word}</Col>
</Row>
)
)}
</Row>
)
}
return (
<div className='resultPanel'>
<h1>{successAnswer > 50 ? 'Гарна робота!' : 'Потрібно ще тренуватися!' }</h1>
<Container>
<Row>
<Col>
<div className=' resultPanel-answer-btn resultPanel-good-answer-btn'> Правильних відповідей
{successAnswer}%</div>
</Col>
<Col>
<div className='resultPanel-answer-btn resultPanel-bad-answer-btn'>Неправильних відповідей
{failAnswer}%</div>
</Col>
</Row>
<Row className='resultPanel-repeat-words-cotainer'>
{failLIstLenght != 0 ?
<h4>Слова, які необхідно повторити:</h4>:
<h4>Ви знаєте всі слова!</h4>}
{showResult()}
</Row>
<Row className='resultPanel-start-again-btn-container'>
<Col>
<Link to="/">
57
<Button size='lg'>Почати нову спробу!</Button>
</Link>
</Col>
</Row>
</Container>
</div>
)
}
export default ResultPanel
Home.css
.home{
background: rgb(54, 54, 54);
height: 100vh;
min-height: 600px;
}
.home h1{
text-align: center;
padding: 50px 0;
color: #6c757d;
font-weight: 550;
}
.home-level{
height: 250px;
width: 250px;
font-size: 25px;
}
.levels-row{
text-align: center;
}
.home-levels-container{
margin-top: 100px;
}
@media screen and (max-width: 992px) {
.home-level{
58
height: 200px;
width: 200px;
font-size: 22px;
}
}
@media screen and (max-width: 635px) and (min-width: 576px ) {
.home-level{
height: 180px;
width: 180px;
font-size: 22px;
}
}
@media screen and (max-width: 576px) and (max-height: 750px) {
.home{
height: auto;
}
}
@media screen and (max-width: 576px) {
.home-level{
margin: 10px 0;
}
.home-levels-container{
padding-bottom: 50px;
margin-top: 0;
}
}
Level.css
.level{
background: rgb(54, 54, 54);
width: 100%;
height: 100vh;
min-height: 700px;
color: #6c757d;
text-align: center;
}
59
.level h1{
padding: 50px 0;
font-weight: 550;
}
.level-button{
min-height: 80px;
}
.level-card{
display: flex;
align-items: center;
height: 50vh;
max-width: 700px;
margin: auto;
border: 1px solid #6c757d;
color: rgb(183, 180, 180);
color: #6c757d;
border-radius: 10px;
font-size: 35px;
box-shadow: 8px 24px 0px rgb(43, 43, 43);
transition: .7s;
}
.level-card:hover{
cursor: pointer;
}
.level-change-card{
background: #6c757d;
color: white;
}
.button-container{
padding-top: 50px;
max-width: 700px;
margin: auto;
60
}
@media screen and (max-width: 576px) {
.level-card{
height: 50vh;
}
.button-container{
margin-top: 20px;
}
}
ResultPanel.css
.resultPanel{
min-height: 700px;
background: rgb(54, 54, 54);
}
.resultPanel h1{
font-weight: 550;
}
.resultPanel-answer-btn{
display: flex;
align-items: center;
justify-content: center;
margin: auto;
font-size: 21px;
width: 200px;
height: 60px;
border-radius: 6px;
}
.resultPanel-bad-answer-btn{
border: 1px solid rgb(200, 53, 58);
color: rgb(200, 53, 58);
}
.resultPanel-good-answer-btn{
border: 1px solid rgb(30, 137, 75);
color: rgb(30, 137, 75);
61
}
.resultPanel-repeat-words-cotainer h4{
margin: 40px 0;
}
.resultPanel-repead-words{
display: flex;
align-items: center;
border: 1px solid #6c757d;
border-radius: 5px;
height: 40px;
margin: 5px 0;
/* color: rebeccapurple; */
}
.resultPanel-reped-words-div{
max-width: 800px;
height: auto;
margin: auto;
}
.resultPanel-start-again-btn-container{
display: flex;
align-items: center;
margin: auto;
background: rgb(54, 54, 54);
width: 100%;
height: 100px;
padding: 10px 0;
}
62
ДОДАТОК В
РОЗРОБКА WEB-ДОДАТКУ ДЛЯ НАВЧАННЯАНГЛІЙСЬКОЇ МОВИ
ІНСТРУКЦІЯ КОРИСТУВАЧА
482. ЧДТУ. 42034-01 34 01
Листів 4
Розробник _____________ Пилипенко Д.С.
Черкаси – 2024
63
На головній сторінці додатку користувач може бачити 3 картки з назвами рівнів
знання англійської мови (рис. В.1)
Рисунок В.1 – Головна сторінка вебдодатку
Для початку роботи, користувач повинен обрати свій рівень знання англійської
мови. Після того як користувач обрав рівень, він бачить картку зі словом (рис В.2).
Рисунок В.2 – Процес «Авторизація»
64
Якщо користувач знає слово, він повинен натиснути на кнопку «Вже знаю».
Якщо у користувача є проблеми з перекладом, він натискає «Ще не знаю» відповідно
(рис. В.3). Також у користувача є можливість переглянути переклад слова,
натиснувши на картку (рис. В.4).
Рисунок В.3 – Обрання відповіді
Рисунок В.4 – Перегляд перекладу слова
65
При закінченні карток зі словами, користувач бачить сторінку з результатами.
Якщо користувач знав всі слова, він бачить відповідне повідомлення. Якщо деякі
слова користувачеві виявилися не зрозумілими з’являється таблиця зі списком слів,
які потрібно повторити (рис.В.5).
Рисунок В.4 – Перегляд досягнень у вивченні слів
66
ДОДАТОК Г
РОЗРОБКА WEB-ДОДАТКУ ДЛЯ НАВЧАННЯ АНГЛІЙСЬКОЇ МОВИ
Структура бази даних
482. ЧДТУ. 42034-01 90 01
Листів 2
Розробник _____________ Пилипенко Д.С.
Черкаси – 2024
67
База даних містить таблицю Words, наведено на рисунку Г.1.
Рисунок Г.1 – Таблиця Words