diff --git a/semester-4/ПрПА/lb-2/README.md b/semester-4/ПрПА/lb-2/README.md new file mode 100644 index 0000000..79ffc2c --- /dev/null +++ b/semester-4/ПрПА/lb-2/README.md @@ -0,0 +1,6 @@ +> [!NOTE] +> Викладач: Онищенко К. Г.; Афанасьєва І. В. +> Оцінка: In Progress + +> [!TIP] +> Виконано в команді diff --git a/semester-4/ПрПА/lb-2/doc.yaml b/semester-4/ПрПА/lb-2/doc.yaml new file mode 100644 index 0000000..b26bf96 --- /dev/null +++ b/semester-4/ПрПА/lb-2/doc.yaml @@ -0,0 +1,39 @@ +title: Прототипування із використанням case-засобі +subject: ПП +doctype: ЛБ +worknumber: 2 +mentors: + - name: Онищенко К. Г., + gender: m, + degree: ст. викладач кафедри ПІ, + - name: Афанасьєва І. В., + gender: f, + degree: доц. каф. ПІ, +edu_program: &EDU ПЗПІ +university: ХНУРЕ +authors: + - name: Ситник Є. С. + course: 2 + edu: *EDU + gender: m + group: 23-2 + - name: Малишкін. А. С. + course: 2 + edu: *EDU + gender: m + group: 23-2 + - name: Краснокутська Ю. Є. + course: 2 + edu: *EDU + gender: f + group: 23-2 + - name: Семьонов. О. О. + course: 2 + edu: *EDU + gender: m + group: 23-2 + - name: Петах С. І. + course: 2 + edu: *EDU + gender: m + group: 23-2 diff --git a/semester-4/ПрПА/lb-2/img/Frame 158.png b/semester-4/ПрПА/lb-2/img/Frame 158.png new file mode 100644 index 0000000..f168da1 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 158.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 159.png b/semester-4/ПрПА/lb-2/img/Frame 159.png new file mode 100644 index 0000000..e98c8d8 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 159.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 160.png b/semester-4/ПрПА/lb-2/img/Frame 160.png new file mode 100644 index 0000000..70e95c8 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 160.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 161.png b/semester-4/ПрПА/lb-2/img/Frame 161.png new file mode 100644 index 0000000..7a8ef73 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 161.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 162.png b/semester-4/ПрПА/lb-2/img/Frame 162.png new file mode 100644 index 0000000..39d5a54 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 162.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 163.png b/semester-4/ПрПА/lb-2/img/Frame 163.png new file mode 100644 index 0000000..1603a35 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 163.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 164.png b/semester-4/ПрПА/lb-2/img/Frame 164.png new file mode 100644 index 0000000..216a770 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 164.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 165.png b/semester-4/ПрПА/lb-2/img/Frame 165.png new file mode 100644 index 0000000..348f63d Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 165.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 166.png b/semester-4/ПрПА/lb-2/img/Frame 166.png new file mode 100644 index 0000000..1821d55 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 166.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 167.png b/semester-4/ПрПА/lb-2/img/Frame 167.png new file mode 100644 index 0000000..8c1cce9 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 167.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 168.png b/semester-4/ПрПА/lb-2/img/Frame 168.png new file mode 100644 index 0000000..54bd549 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 168.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 170.png b/semester-4/ПрПА/lb-2/img/Frame 170.png new file mode 100644 index 0000000..c81b6c2 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 170.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 171.png b/semester-4/ПрПА/lb-2/img/Frame 171.png new file mode 100644 index 0000000..57f6b4b Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 171.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 172.png b/semester-4/ПрПА/lb-2/img/Frame 172.png new file mode 100644 index 0000000..656ebe0 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 172.png differ diff --git a/semester-4/ПрПА/lb-2/img/Frame 37963.png b/semester-4/ПрПА/lb-2/img/Frame 37963.png new file mode 100644 index 0000000..10da415 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Frame 37963.png differ diff --git a/semester-4/ПрПА/lb-2/img/Group 8.png b/semester-4/ПрПА/lb-2/img/Group 8.png new file mode 100644 index 0000000..132dc35 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Group 8.png differ diff --git a/semester-4/ПрПА/lb-2/img/Login Page-1.png b/semester-4/ПрПА/lb-2/img/Login Page-1.png new file mode 100644 index 0000000..1ea61c3 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Login Page-1.png differ diff --git a/semester-4/ПрПА/lb-2/img/Login Page-2.png b/semester-4/ПрПА/lb-2/img/Login Page-2.png new file mode 100644 index 0000000..57608de Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Login Page-2.png differ diff --git a/semester-4/ПрПА/lb-2/img/Login Page-3.png b/semester-4/ПрПА/lb-2/img/Login Page-3.png new file mode 100644 index 0000000..0a2b697 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Login Page-3.png differ diff --git a/semester-4/ПрПА/lb-2/img/Login Page-4.png b/semester-4/ПрПА/lb-2/img/Login Page-4.png new file mode 100644 index 0000000..ed76ea8 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Login Page-4.png differ diff --git a/semester-4/ПрПА/lb-2/img/Login Page.png b/semester-4/ПрПА/lb-2/img/Login Page.png new file mode 100644 index 0000000..2788017 Binary files /dev/null and b/semester-4/ПрПА/lb-2/img/Login Page.png differ diff --git a/semester-4/ПрПА/lb-2/Лр_2_TaskHub_ПЗПІ_23_2.pdf b/semester-4/ПрПА/lb-2/Лр_2_TaskHub_ПЗПІ_23_2.pdf new file mode 100644 index 0000000..13b9bf0 Binary files /dev/null and b/semester-4/ПрПА/lb-2/Лр_2_TaskHub_ПЗПІ_23_2.pdf differ diff --git a/semester-4/ПрПА/lb-2/Лр_2_TaskHub_ПЗПІ_23_2.typ b/semester-4/ПрПА/lb-2/Лр_2_TaskHub_ПЗПІ_23_2.typ new file mode 100644 index 0000000..6af22bb --- /dev/null +++ b/semester-4/ПрПА/lb-2/Лр_2_TaskHub_ПЗПІ_23_2.typ @@ -0,0 +1,80 @@ +#import "@local/nure:0.1.0": * + +#show: pz-lb.with(..yaml("doc.yaml")) + +#v(-spacing) + +== Мета роботи +Оволодіти технікою опису інтерфейсу користувача. Навчитися використовувати програмне забезпечення для створення інтерактивного прототипу проекту. + +== Хід роботи +Переглянути прототип проєкту можна за наступним посиланням -- #link("https://www.figma.com/design/gc0RhNRFVDiosJtY8q6eNo/TaskHub?node-id=0-1&t=Ci5rIMELyhWgs83u-1"). Для його створення нами було використано засіб для прототипування Figma. + +=== Сторінка входу +Для користуванням сервісом користувач має увійти в свій обліковий запис, або створити новий, на відповідній сторінці. + +#figure(image("img/Login Page.png", width: 90%), caption: [Форма авторизації]) +#figure(image("img/Login Page-2.png", width: 90%), caption: [Форма реєстрації]) +#figure(image("img/Login Page-3.png", width: 90%), caption: [Форма відновлення пароля]) +#figure(image("img/Login Page-1.png", width: 90%), caption: [Форма зміни пароля]) +#figure(image("img/Login Page-4.png", width: 90%), caption: [Форма підтвердження пошти]) + +=== Домашня сторінка +Після авторизації користувач потрапляє на домашню сторінку, де він може переглянути останні оновлення доступних йому завдань та рекомендації, а також має швидкий доступ до своїх завдань. Для навігації на кожній сторінці присутня бічна панель. + +#figure(image("img/Frame 160.png", width: 100%), caption: [Домашня сторінка]) + +=== Сторінка "Explore" +На сторінку "Explore" користувач потрапляє використовуючи панель навігації або пошук. Тут він може легко шукати публічні завдання та групи завдань за ключовими словами. + +#figure(image("img/Frame 165.png", width: 100%), caption: [Сторінка "Explore"]) + +=== Сторінка "Tasks" +На сторінці "Tasks" користувач має доступ до всіх завдань, які він створив, на які підписався та до яких його додали. Завдання можливо фільтрувати за їх статусом, групами до яких вони належать та категоріями, а також шукати за ключовими словами. На цій же сторінці існує можливість створення нового завдання. + +#figure(image("img/Frame 161.png", width: 90%), caption: [Сторінка "Tasks" без застосованих фільтрів]) +#figure(image("img/Frame 162.png", width: 90%), caption: [Сторінка "Tasks" із фільтрацією за статусом]) +#figure( + image("img/Frame 163.png", width: 87%), + caption: [Сторінка "Tasks" із фільтрацією за статусом та прихованими фільтрами], +) +#figure( + image("img/Frame 164.png", width: 87%), + caption: [Сторінка "Tasks" із фільтрацією за статусом та прихованими фільтрами], +) + +=== Сторінка "Task groups" +На сторінці "Task groups" користувач може побачити всі групи завдань, які він створив, на які підписався та до яких його додали. Групи завдань можна фільтрувати так само як завдання. + +#figure(image("img/Frame 167.png", width: 80%), caption: [Сторінка "Tasks"]) +#figure(image("img/Frame 168.png", width: 80%), caption: [Сторінка "Tasks" із фільтрами]) + +=== Сторінка завдання +На сторінці завдання користувач може побачити всю інформацію про завдання, купити його (у випадку із платним завданням), вносити зміни, зберегти до своїх завдань, зробити копію, поставити оцінку та інше. + +#figure(image("img/Frame 170.png", width: 100%), caption: [Сторінка завдання]) +#figure(image("img/Frame 171.png", width: 100%), caption: [Сторінка завдання із платним доступом]) + +=== Сторінка групи завдань +Для сторінки групи завдань справедливо все те саме, що і для сторінки завдання. + +#figure(image("img/Frame 172.png", width: 100%), caption: [Сторінка групи завдань]) + +=== Сторінка користувача +Кожен користувач має особисту сторінку, на якій інші користувачі можуть дізнатись про нього інформацію, як от його завдання, кількість створених ним завдань та груп завдань, а також кількість доданих рішень. Кожен користувач може закріпити деякі завдання та групи завдань на своїй сторінці, щоб відвідувачі в першу чергу бачили їх. + +#figure(image("img/Frame 166.png", width: 100%), caption: [Сторінка користувача]) + +=== Панель адміністратора +Користувачі із правами адміністратора мають додаткову сторінку, на якій вони можуть керувати користувачами. +#figure(image("img/Frame 37963.png", width: 100%), caption: [Панель адміністратора]) + +=== Інше +На кожній сторінці користувач може за допомогою кнопок, що розташовані на горі, змінити мову та кольорову схему, а також заховати присутні бічні панелі. + +На панелі навігації користувач може побачити інформацію про його поточний план використання із залишками ресурсів, що доступні із цим планом. + +== Висновки +Під час даної лабораторної роботи ми оволоділи технікою опису інтерфейсу користувача, та навчилися використовувати програмне забезпечення для створення інтерактивного прототипу проекту. + +#show: appendices_style