PRPA lb-2 (figma)

semester-4/ПрПА/lb-2/README.md

@@ -0,0 +1,6 @@
+> [!NOTE]
+> Викладач: Онищенко К. Г.; Афанасьєва І. В.
+> Оцінка: In Progress
+
+> [!TIP]
+> Виконано в команді

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

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