МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
НАЦІОНАЛЬНИЙ ТРАНСПОРТНИЙ УНІВЕРСИТЕТ
Кафедра інформаційних систем і технологій
КУРСОВА РОБОТА
з дисципліни
«Крос-платформне програмування»
на тему: «Розробити органайзер»
Виконав студент групи КН-IV-1
__________Плахотнюк М. В._____________
(ініціали та прізвище)
Керівник ________ доц. Сватко. В.В.
(підпис) (ініціали та прізвище)
______________ «___» ____________ 2023 р.
(оцінка)
Київ 2023
ЗМІСТ
ВСТУП 2
Розділ 1: Загальний огляд 3
1.1 Основні поняття та визначення 3
1.2. Вибір технологій 4
1.3. Побудова алгоритму 4
РОЗДІЛ 2: Реалізація органайзера 6
2.1. Структура проекту 6
2.2. Опис і розробка інтерфейсу 6
2.3. Програмна структура коду 10
2.4. Тестовий приклад 19
ВИСНОВКИ 30
СПИСОК ВИКОРИСТАНОЇ ЛІТЕРАТУРИ 31
ВСТУП
У сучасному світі, де темп життя швидко зростає, індивідуальна ефективність та організація часу стають критично важливими аспектами повсякденного життя. З метою полегшення цього процесу та забезпечення зручного інструменту для ведення списку завдань та управління часом, було прийнято рішення розробити власний органайзер.
Актуальність теми - розробки органайзера полягає в пошуку зручних інструментів, які допоможуть людям краще планувати свої дії, підвищуючи тим самим свою продуктивність та покращуючи якість життя.
Мета курсової роботи - створення функціонального та ефективного інструменту для ведення особистого списку завдань, який би відповідав сучасним стандартам веб-розробки. Проект спрямований на полегшення процесу планування та виконання завдань, що, в свою чергу, сприяє підвищенню особистої продуктивності та досягненню поставлених цілей.
У контексті розробки органайзера, ми розглядатимемо вибір оптимальних технологій, створення зручного користувацького інтерфейсу та впровадження функціоналу, що включає в себе можливість додавання завдань, встановлення дедлайнів та локального збереження даних.
Обсяг та структура роботи. Курсова робота складається зі вступу, двох розділів та висновків. Загальний обсяг курсової роботи становить 38 сторінок, 44 рисунки, список використаних джерел містить 10 найменувань.
Розділ 1: Загальний огляд
1.1 Основні поняття та визначення
Органайзер
Органайзер є інструментом для організації та контролю над завданнями та подіями. У контексті нашого дослідження, органайзер представляє веб-додаток, який дозволяє користувачам ефективно планувати та відстежувати їхні завдання. Основною метою органайзера є полегшення управління часом та покращення особистої продуктивності.
Завдання
Завдання представляють собою конкретні справи, які користувач планує виконати. В органайзері завдання можуть бути додані, видалені, редаговані та позначені як виконані. Кожне завдання може мати текстовий опис та дедлайн.
Дедлайн
Дедлайн визначає крайній термін виконання завдання. Це важливий аспект для організації часу та вчасного виконання завдань. Користувач може встановлювати дедлайни для кожного завдання, щоб ефективно керувати своїм графіком.
Ці основні поняття є важливими для розуміння функціональності розробленого органайзера та сприяють його ефективному використанню для кращого планування та управління завданнями.
1.2. Вибір технологій
Мова програмування: JavaScript
Для реалізації органайзера вибрана мова програмування JavaScript. Цей вибір обумовлений широким застосуванням JavaScript у веб-розробці та можливістю використання його як мови, що працює в браузері, для взаємодії з користувачем.
Фреймворк: React
У якості основного фреймворку використовується React. React дозволяє створювати динамічні та ефективні інтерфейси користувача, спрощуючи роботу зі станами додатку та керуванням компонентами.
Стилізація: CSS і Styled Components
Для стилізації використовуються CSS для базового оформлення та Styled Components для більш ефективного та модульного написання стилів. Styled Components дозволяє вбудовувати стилі безпосередньо в компоненти, зробивши код більш читабельним та легкоуправним.
Зберігання даних: localStorage
Для локального зберігання даних використовується механізм localStorage в браузері. Це забезпечує зручне збереження завдань та їх стану між сесіями користувача, навіть після перезавантаження сторінки.
Вибір цих технологій обґрунтований їхньою популярністю, широкою підтримкою у розробці веб-додатків та їхньою ефективністю для досягнення поставлених завдань у розробці органайзера.
1.3. Побудова алгоритму
1. Додавання завдань
Користувач може додати нове завдання, заповнивши форму з описом та встановивши дедлайн. Інформація про нове завдання додається до масиву завдань.
2. Редагування завдань
Користувач може редагувати текстовий опис та дедлайн завдання в режимі реального часу. Зміни автоматично оновлюють відповідне завдання у масиві.
3. Видалення завдань
Користувач може видаляти завдання, і вони будуть автоматично вилучатися з масиву.
4. Позначення завдань як виконані
Користувач може відзначити завдання як виконані, і вони будуть виділені або видалені зі списку, залежно від налаштувань.
5. Сортування завдань
Реалізовано сортування завдань за дедлайнами, що дозволяє користувачу швидко переглядати завдання за часовими рамками.
В наведеному прикладі було наведено загальні структури алгоритмів, іншими словами, вони мають демонструвати концепції роботи, а не бути повністю функціональним кодом. Ці алгоритми можуть використовуватися як основа для реалізації функціоналу вашого органайзера. Тепер давайте розглянемо більш конкретні приклади коду:
РОЗДІЛ 2: Реалізація органайзера
2.1. Структура проекту
«Matrix Calculator» – додаток, створений з метою зручної роботи з матричними операціями. Даний додаток може виконувати такі функції:
Можливість обчислити визначник матриці;
Можливість визначити ранг матриці;
Можливість визначити слід матриці;
Можливість знайти обернену матрицю;
Можливість виконати додавання матриць;
Можливість виконати віднімання матриць;
Можливість виконати добуток матриць;
2.2. Опис і розробка інтерфейсу
Додаток буде мати Головне меню, в якому будуть знаходитися доступні операції над матрицями. Головне меню буде створюватися, як інтерфейс у лабораторній роботі №6, де у ListView виводилися усі контакти, які є на пристрої. Тобто буде створюватися адаптер, який буде містити у собі елементи (операції над матрицями), при на тисканні на які буде завантажуватися активіті для обчислення цієї операції. Також кожен елемент буде мати ImageView, який буде відображувати короткий текст, що інформує про відповідну операцію над матрицею.
Рисунок 2.1 – Елемент, який буде міститися у адаптері
Рисунок 2.2 – main_activity
Для усіх операцій будуть однакові активіті, тому повторювані елементи інтерфейсу можна винести в окремий XML і потім інтегрувати в потрібний. У кожного активіті для роботи з операцією над матрицями буде сама матриця у вигляді TableLayout, інтерфейс для вибору розмірності матриці та для введення елементу матриці.
Для введення розмірності матриці я вирішив використовувати елемент SeekBar (слайдер) (рис.2.3), оскільки це зручний елемент для поставленого завдання.
При зміні розмірності матриці, у таблиця, яка її відображує, буде змінюватися кількість рядків і стовпців відповідно до зміни слайдера.
Рисунок 2.3 – Приклад слайдеру
Рисунок 2.4 – Інтерфейс для введення розмірності і елементів матриці
Активіті з операціями буде мати ViewPager, який буде мати одну сторінку, якщо операція виконується з однією матрицею (визначник, обернення, ранг, слід) та дві сторінки, якщо операція буде виконуватися над двома матрицями (додавання, віднімання, добуток). Компонент ViewPager дозволяє прокручувати екран вліво-вправо.
CircleIndicator використовується для відображення поточної сторінки ViewPager.
Рисунок 2.5 – Активіті для операцій над матрицею
Результати будуть відображуватися в активіті, яке буде відображувати результуючу матрицю, а також її визначник, слід та ранг. В цей інтерфейс буде імплементуватися активіті з таблицею для відображення матриці.
Рисунок 2.6 – Активіті з результатами
2.3. Програмна структура коду
В MainActivity викликаємо метод адаптера для отримання усіх елементів з операціями над матрицями і виводимо їх у ListView. При натисканні на елемент ListView буде завантажуватися активіті для роботи з матрицею. Кожна операція буде мати свій ID, для подальшої зручної структуризації коду.
Рисунок 2.7 – Клас MainActivity
Адаптер буде отримувати списки з файлу string.xml, у якому будуть описані усі операції над матрицями, а саме: назва, опис, кількість матриць для виконання операції, а також текст, який буде відображуватися в ImageView у елементі ListView. Для створення тексту в іконках використовується бібліотека com.amulyakhare.textdrawable.TextDrawable.
ID для кожного елемента – це їхній порядковий номер в адаптері, тобто по порядку, як операції записані в string.xml. Вся ця інформація буде присвоюватися у відповідні поля об’єкту ItemOperation, з яких буде формуватися адаптер.
Рисунок 2.8 – Клас ItemOperation
Рисунок 2.9 – Метод для створення списку з інформацією про операції над матрицями
Рисунок 2.10 – Конструктор, який викликає метод з рис.2.9 і виконується з запуском MainActivity
Рисунок 2.11 – Метод, який створює графічний елемент item_operation і повертає його
Рисунок 2.12 – Інформація про операції над матрицями в string.xml
Рисунок 2.13 – Інформація про операції над матрицями в string.xml
Клас MatrixActivity буде відповідати за зміни у activity_matrix. Тобто буде додавати елементи в матрицю, змінювати розмірність матриці при зміні слайдеру (SeekBar) і завантажувати активіті з результатами.
Рисунок 2.14 – Ініціалізація сторінки ViewPager’у і виклик зміни розмірності при зміні слайдеру
Елемент буде додаватися в матрицю при натисканні кнопки Done на клавіатурі пристрою, це можна відстежити за допомогою EditorInfo.IME_ACTION_DONE. Якщо це буде останній елемент матриці, то відбудеться перехід на наступну сторінку ViewPager’у або завантаження активіті з результатами (рис.2.14). Те ж саме відбувається з кнопкою Далі (Вирішити).
Рисунок 2.15 – Написання коду для введення елементів матриці і переходу
В цьому ж класі ініціалізується ViewPager. В залежності від поля кількості матриць у об’єкта ItemOperation, описаного вище, створюється відповідна кількість сторінок у ViewPager, на кожній сторінці відображується activity_matrix. А також, якщо сторінок більше однією, то в інтерфейс додається circleIndicator.
Рисунок 2.16 – Ініціалізація ViewPager’у
Для обчислення матричних операція я використав клас Matrix бібліотеки Jama.util.Maths. Цей клас має методи для усіх операцій над матрицями.
Клас ResultActivity буде обчислювати потрібну операцію і виводити результати в result_activity (рис.2.6).
Рисунок 2.17 – Клас ItemMatrix, який зберігатиме в собі матрицю для результатів
Рисунок 2.18 – Методи для виконання операцій за допомогою бібліотеки Jama.util.Maths
Рисунок 2.19 – Виклик методів для операцій над матрицями
При ініціалізації результуючої сторінки буде перевірятися параметр isBasic, якому присвоюється true, якщо ID операції 0 – Обчислення визначника, рангу, сліду (рис.2.18). Це робиться для того, щоб виводити в результуючу матрицю поточну, оскільки зміни в початковій матриці не відбуваються. Для усіх інших операцій у результуючу матрицю буде виводитися обчислена матриця.
Рисунок 2.20 – Ініціалізація сторінки з результуючою матрицею
2.4. Тестовий приклад
Після перевірки коду на помилки, винятки і т. п. встановлюємо додаток на фізичний пристрій і тестуємо весь його функціонал.
Для тестування працездатності виконаємо задачу:
Використати розроблений додаток для обчислення визначника, рангу, сліду матриці, для обчислення додавання, віднімання і добутку матриць різних розмірностей.
Задача поставлена, можемо приступати до виконання, першим кроком буде встановлення і запуск додатку:
Рисунок 2.21 – Встановлення і запуск додатку
Йдемо по-порядку. Обираємо перший елемент списку – операція Характеристика матриці (Визначник, ранг, слід).
Додаємо елементи матриці і натискаємо, також можемо змінити її розмірність. Натискаємо Вирішити.
Рисунок 2.22 – Введення елементів матриці, зміна розмірності
Рисунок 2.23 – Результат
Повертаємося до головної сторінки за допомогою кнопки Назад на пристрої. Обираємо наступну операцію – обернену матрицю. Вводимо елементи матриці і обчислюємо.
Рисунок 2.24 – Обчислення оберненої матриці
Повертаємося до головної сторінки за допомогою кнопки Назад на пристрої. Обираємо наступну операцію – додавання матриць. Вводимо елементи першої матриці, вводимо елементи другої матриці і обчислюємо.
Рисунок 2.25 – Введення елементів матриць
Рисунок 2.26 – Результати додавання матриць
Повертаємося до головної сторінки. Обираємо наступну операцію – відніманні матриць. Вводимо елементи першої матриці, вводимо елементи другої матриці і обчислюємо.
Рисунок 2.27 – Введення елементів матриць
Рисунок 2.28 – Результати віднімання матриць
Повертаємося до головної сторінки. Обираємо наступну операцію – добуток матриць. Вводимо елементи першої матриці, вводимо елементи другої матриці і обчислюємо.
Рисунок 2.29 – Введення елементів матриць
Рисунок 2.30 – Результати добутку матриць
ВИСНОВКИ
Додаток, який розроблявся у рамках курсової роботи, був реалізований для обчислення операцій над матрицями. Додаток відповідає сучасним вимогам, таким як: простота, висока швидкодія, незалежність даних, безпеку даних тощо. Додаток розроблений на мові програмування Java і мові розмітки XML у інтегрованому середовищі розробки Android Studio. Дана IDE була обрана, оскільки середовище є безкоштовним, має безліч плагінів, які є також безкоштовними і допомагають покращити IDE для зручнішого користування. Також Android Studio має змогу одразу завантажувати проекти на GitHub, що є дуже зручною функцією.
В даній курсовій роботі був розроблений додаток «Matrix Calculator», який має наступні реалізовані функції:
Можливість обчислити визначник матриці;
Можливість визначити ранг матриці;
Можливість визначити слід матриці;
Можливість знайти обернену матрицю;
Можливість виконати додавання матриць;
Можливість виконати віднімання матриць;
Можливість виконати добуток матриць;
Отже, за допомогою Android Studio було розроблено мобільний додаток для обчислення операцій знаходження визначника, рангу, сліду матриці, оберненої матриці, а також обчислення добутку, додавання і віднімання матриць.
СПИСОК ВИКОРИСТАНОЇ ЛІТЕРАТУРИ
Android Studio [Електронний ресурс]. Режим доступу: https://developer.android.com/studio?gclid=Cj0KCQiA5vb-BRCRARIsAJBKc6IXG58FETi6VX0xWaZYt9Mtq_oxZhV-bARuKurpjyCBArgl_a2ozJUaAiXIEALw_wcB&gclsrc=aw.ds
Java Development Kit [Електронний ресурс]. Режим Доступу: https://www.java.com/ru/
Jama Math Library [Електронний ресурс]. Режим Доступу: https://github.com/fiji/Jama/blob/master/src/main/java/Jama/util/Maths.java
Jama Math Library [Електронний ресурс]. Режим Доступу: https://github.com/amulyakhare/TextDrawable
TextDrawable Library [Електронний ресурс]. Режим Доступу: https://startandroid.ru/ru/
Основні операції з рядками [Електронний ресурс]. Режим Доступу: https://metanit.com/java/tutorial/7.2.php
Android - елементи управління призначеним для користувача інтерфейсом [Електронний ресурс]. Режим Доступу: https://coderlessons.com/tutorials/mobilnaia-razrabotka/uchitsia-android/android-obzor
Хоткеи в IntelliJ IDEA [Електронний ресурс]. Режим Доступу: https://juja.com.ua/java/ide/intellij-idea-hotkeys/
D. Griffiths, D. Griggiths Head First. Программирование для Android
M. Burton Android App Development for Dummies
Mark L. Murphy Busy Coder’s Guide to Android Development