Add C4 in practise slides GH-63

Author: pintergreg

practicals/04_c4.md

@@ -0,0 +1,86 @@
+---
+title: software design with C4
+author: Gergő Pintér, PhD
+date: gergo.pinter@uni-corvinus.hu
+lang: en-US
+title-slide-attributes:
+    data-background-color: "#181d37"
+    data-background-image: ../assets/by-sa.svg
+    data-background-size: 125px
+    data-background-position: 1.25rem calc(100% - 1.25rem)
+slideNumber: "true"
+showSlideNumber: "print"
+revealjs-url: "../assets/reveal.js-5.2.1/"
+---
+
+# flashcard application requirements
+
+- Android and iOS (tablets should be supported)
+    - at least 5 years old devices should be supported
+- offline app, no subscription plans, one-time payment via the store
+- how the words are groupped
+    - by chapters of the textbook
+- the customer provides a wordlist (with meaning) for each chapter
+    - in Excel format (xlsx)
+- user will not be able to add new words
+- there is only one interface language
+    - the majority language of the country
+
+## requirements part 2
+
+- logo of the language association should appear on the main screen
+- GUI customization: light/dark theme, font size settings
+- a learning mode is required, which just goes through the words of a chapter
+- and a practicing mode, which selects words randomly from every group
+    - words with more left-swipe should appear more frequent
+    - if a word was swiped left, three right swipes needed to consider it learnt
+- users should be able to check the statistics
+    - progress bar (learnt words / total)
+    - which days they learned in the last month, how many cards they've learnt
+
+## simple, offline architecture
+
+![](../lectures/figures/simple_case.drawio.svg)
+
+# Level 1: System Context diagram
+
+:::::::::::: {.columns}
+::::::::: {.column width="70%"}
+
+- high level relation with other systems or users
+- similar to use case diagram
+- technologies, protocols and other low-level details are not important
+- understandable for non-technical people
+
+::: {.wide-quote .mt-2}
+> Shows the software system you are building and how it fits into the world in terms of the people who use it and the other software systems it interacts with.
+>
+>  Simon Brown - [The C4 Model for Software Architecture](https://www.infoq.com/articles/C4-architecture-model/)
+
+:::
+:::::::::
+::::::::: {.column width="30%"}
+![[open in Excalidraw](https://excalidraw.com/#json=kH-voL6DzLoegPm8Xbo1B,u7q5iblpWLBuf_jyvkn-Dg)](c4/system_context.excalidraw.svg)
+
+:::::::::
+::::::::::::
+
+# component diagram (C4) for statistics module
+
+:::::::::::: {.columns}
+::::::::: {.column width="60%"}
+![](../lectures/figures/user_statistics/c4_component.excalidraw.svg){width=400 preview-image="../lectures/figures/user_statistics/c4_component.excalidraw.svg" preview-fit="contain"}
+
+[open in Excalidraw](https://excalidraw.com/#json=R0T17732fAGdyAXSdkQO9,vF377cD9ucud_0AoSlF0ag)
+
+:::::::::
+::::::::: {.column width="40%"}
+![](../lectures/figures/user_stats.drawio.svg){width=300}
+
+:::::::::
+::::::::::::
+
+# customer wants to add telemetry {visibility="hidden"}
+
+![](../lectures/figures/telemetry_v2.drawio.svg)
+