PRPA lb-4

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

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

semester-4/ПрПА/lb-4/doc.yaml

@@ -0,0 +1,39 @@
+title: "Структурні діаграми компонентів та розгортання."
+subject: ПП
+doctype: ЛБ
+worknumber: 4
+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-4/uml/component.pu

@@ -0,0 +1,45 @@
+@startuml
+skin rose
+skinparam backgroundColor #EEEBDC
+left to right direction
+
+package "Backend Server" as backend {
+  [App.rs] --> [Router.rs]
+  [App.rs] --> [Hooks.rs]
+  [Router.rs] --> [Controllers.rs]
+  [Router.rs] --> [DataViews.rs]
+  [Controllers.rs] --> [DataModels.rs]
+  [Controllers.rs] --> [Mailers.rs]
+  [Controllers.rs] -r-> [DataViews.rs]
+  [Controllers.rs] -l-> [APIProviders.rs]
+  [DataModels.rs] -l-> [DatabaseEntities.rs]
+}
+
+package "Database" as db {
+  [DatabaseEntities.rs] --> [DatabaseMigrations.rs]
+}
+
+package "Frontend Server" as frontend {
+  [main.tsx] -u-> [routes]
+  [routes] -u-> [components]
+  [components] -u-> [hooks]
+  [hooks] -u-> [store]
+  [hooks] -u-> [api]
+  [api] -r-> [types]
+  [store] -l-> [types]
+}
+
+
+package "Mobile App" {
+  [MainActivity.kt] -u-> [Fragments.kt]
+  [Fragments.kt] -u-> [ViewModels.kt]
+  [Fragments.kt] -r-> [Adapters.kt]
+  [ViewModels.kt] -u-> [APIClient.kt]
+  [APIClient.kt] -r-> [DataModels.kt]
+  [DataModels.kt] -l-> [ViewModels.kt]
+}
+
+[App.rs] -u- [APIClient.kt] : Rest
+[App.rs] -u- [api] : Rest
+
+@enduml

semester-4/ПрПА/lb-4/uml/distribution.pu

@@ -0,0 +1,81 @@
+@startuml
+skin rose
+skinparam backgroundColor #EEEBDC
+
+node backend [
+    <b>Backend Server Instance(s)</b>
+    ---
+    App.rs
+    ....
+    Router.rs
+    ....
+    Hooks.rs
+    ....
+    Controllers.rs
+    ....
+    DataViews.rs
+    ....
+    DataModels.rs
+    ....
+    Mailers.rs
+    ....
+    APIProviders.rs
+    ....
+    APIProviders.rs
+    ....
+    DatabaseEntities.rs
+    ....
+    DatabaseMigrations.rs
+]
+
+node db_server [
+    <b>Database Server Instance(s)</b>
+    ---
+    Actual PostgreSQL Database
+]
+
+node frontend_host [
+    <b>Frontend Hosting/CDN</b>
+    ---
+    main.tsx
+    ....
+    routes
+    ....
+    components
+    ....
+    hooks
+    ....
+    store
+    ....
+    api
+    ....
+    types
+]
+
+node workstation [
+    <b>User Workstation</b>
+]
+
+node mobile_devices [
+    <b>User Mobile Devices</b>
+    ---
+    MainActivity.kt
+    ....
+    Fragments.kt
+    ....
+    ViewModels.kt
+    ....
+    Adapters.kt
+    ....
+    APIClient.kt
+    ....
+    DataModels.kt
+]
+
+backend -- db_server : TCP/IP - ORM Connection
+
+frontend_host -u-> workstation : HTTPS - Serves Assets
+workstation --> backend : HTTPS - REST API Calls
+mobile_devices --> backend : HTTPS - REST API Calls
+
+@enduml

semester-4/ПрПА/lb-4/uml/state.pu

@@ -0,0 +1,96 @@
+@startuml
+skin rose
+skinparam backgroundColor #EEEBDC
+hide empty description
+
+[*] --> Registration
+
+state Registration {
+  Registration --> Email_Validation 
+  Registration --> Google_Authentication 
+
+  Email_Validation : register()
+  Email_Validation : send_confirmation_email()
+  Email_Validation : validate_email()
+
+  Google_Authentication : login_with_google()
+  Google_Authentication : validate_google_token()
+
+  Email_Validation --> User_Registered 
+  Google_Authentication --> User_Registered 
+}
+
+User_Registered --> Login
+
+state Login {
+  Login --> Credentials_Validation 
+  Login --> Google_Authentication_Login 
+
+  Credentials_Validation : validate_login()
+  Credentials_Validation : validate_password()
+
+  Google_Authentication_Login : login_via_google()
+
+  Credentials_Validation --> User_LoggedIn 
+  Google_Authentication_Login --> User_LoggedIn 
+}
+
+state User_LoggedIn {
+  state Main_Menu {
+    Main_Menu --> Task 
+    Main_Menu --> Task_Group 
+  }
+  
+  Main_Menu : view_tasks()
+  Main_Menu : view_task_groups()
+  Main_Menu : search_tasks(keyword)
+  Main_Menu : filter_tasks_by_access(access_type)
+
+  state Task {
+    Task --> Create_Task
+    Task --> View_Task
+    Task --> Edit_Task
+    Task --> Delete_Task
+  }
+
+  Task : create(title, description)
+  Task : edit(task_id, new_title, new_description)
+  Task : delete(task_id)
+  Task : view(task_id)
+  Task : set_access(task_id, access_type)
+  Task : add_attachment(task_id, file)
+  Task : download_attachment(task_id, file_id)
+  Task : get_attachment_list(task_id)
+  Task : view_history(task_id)
+  Task : remove_attachment(task_id, file_id)
+
+  Create_Task --> Set_Task_Access 
+  Edit_Task --> Set_Task_Access 
+
+  state Set_Task_Access {
+    Set_Task_Access --> Public_Access
+    Set_Task_Access --> Private_Access
+    Set_Task_Access --> Paid_Access
+  }
+
+  Public_Access : access = public
+  Private_Access : access = private
+  Paid_Access : access = paid
+
+  state Task_Group {
+    Task_Group --> Create_Group
+    Task_Group --> View_Group
+    Task_Group --> Edit_Group
+    Task_Group --> Delete_Group
+  }
+
+  Task_Group : create_group(name)
+  Task_Group : add_task_to_group(task_id)
+  Task_Group : remove_task_from_group(task_id)
+  Task_Group : delete_group(group_id)
+  Task_Group : rename_group(group_id, new_name)
+  Task_Group : view_group(group_id)
+}
+
+User_LoggedIn --> [*]
+@enduml

semester-4/ПрПА/lb-4/Лр_4_TaskHub_ПЗПІ_23_2.typ

@@ -0,0 +1,24 @@
+#import "@local/nure:0.1.0": *
+
+#show: pz-lb.with(..yaml("doc.yaml"))
+
+#v(-spacing)
+== Мета роботи
+Метою даної лабораторної роботи є вивчення моделювання структурних діаграм компонентів та розгортання
+за допомогою мови UML, та закріплення отриманих навички методом моделювання на прикладі обраної теми проекту.
+
+== Хід роботи
+
+Діаграма станів -- це одна з поведінкових діаграм у UML, яка описує можливі стани об'єкта та переходи між ними протягом його життєвого циклу. Вона візуалізує динамічну поведінку системи або її компонента, показуючи, як об'єкт реагує на події, змінюючи свій стан. Кожен стан представляє певний етап у житті об'єкта, а переходи між станами ініціюються подіями та можуть супроводжуватися діями.
+
+Діаграма компонентів -- це одна з поведінкових діаграм у UML, яка візуалізує архітектуру системи, показуючи її компоненти, їхні інтерфейси та залежності між ними. Компонент у цьому контексті є модульною, замінною частиною системи, яка інкапсулює певну функціональність і надає її через чітко визначені інтерфейси, а також може вимагати певні інтерфейси від інших компонентів. Діаграми компонентів допомагають зрозуміти, як різні частини програмного забезпечення організовані та взаємодіють між собою, що є важливим для розгортання, підтримки та подальшого розвитку системи. Вони дозволяють моделювати фізичну структуру системи, відображаючи її на рівні програмних модулів, бібліотек, виконуваних файлів або баз даних.
+
+Діаграма розгортання -- це ще один тип структурних діаграм у UML, яка показує фізичне розміщення артефактів (таких як виконувані файли, бібліотеки, документи тощо) на вузлах (фізичних апаратних пристроях або середовищах виконання). Вона візуалізує конфігурацію апаратних засобів і програмного забезпечення, що розгортається в системі. На цій діаграмі вузли представляють обчислювальні ресурси (наприклад, сервери, робочі станції, мережеві пристрої), а зв'язки між ними показують комунікаційні шляхи. Усередині вузлів розміщуються артефакти, що позначають конкретні програмні компоненти, які виконуватимуться на цих вузлах. Діаграми розгортання є незамінними для архітекторів систем та інженерів DevOps, оскільки вони допомагають планувати, документувати та візуалізувати інфраструктуру, необхідну для функціонування програмного забезпечення, а також розуміти, як різні частини системи розподілені в реальному фізичному середовищі.
+
+#figure(image("uml/state.svg", width: 90%), caption: [Діаграма станів])
+#figure(image("uml/component.svg", width: 75%), caption: [Діаграма компонентів])
+#figure(image("uml/distribution.svg", width: 63%), caption: [Діаграма розгортання])
+
+== Висновки
+За результатами цієї лабораторної роботи ми навчились моделювати структурні діаграм компонентів та розгортання
+за допомогою мови UML, та закріпили отримані навички методом моделювання на прикладі обраної теми проекту.