Compare commits

..

14 Commits

Author SHA1 Message Date
e30c4086e2 Abstand bei Backup- & Restore Systeme hinzugefügt 2026-04-21 15:26:35 +02:00
9f827889f9 Unnötige Überschrift entfernen. 2026-04-21 15:26:35 +02:00
a7d0f34a14 Von Commit zu Paket: Kontrast in der Grafik erhöhen 2026-04-21 15:26:35 +02:00
e4dc1dc97c Merge remote-tracking branch 'origin/main' 2026-04-21 15:23:32 +02:00
522e60793a neuste version 2026-04-21 15:21:35 +02:00
4518e8142e Update 2026-04-21 11:09:22 +02:00
8bde5bc89b neue Version 2026-04-21 11:01:02 +02:00
d57913c339 neue Grafik 2026-04-21 10:42:30 +02:00
aa983da15d neue änderung 2026-04-21 09:26:09 +02:00
dfec681d34 BULK 2026-04-21 08:52:22 +02:00
1e5696cd50 Move all Modules to a single slide 2026-04-21 08:51:25 +02:00
bafe030e25 SOLID Grafik in der Softwarearchitektur Slide 2026-04-21 08:49:55 +02:00
62a6dd1fe3 Update: Infrastructure Slide 2026-04-21 08:46:15 +02:00
b975d4e270 neues desing 2026-04-21 00:45:42 +02:00
30 changed files with 320 additions and 74 deletions

View File

@@ -33,13 +33,14 @@
\usepackage{pgfplots}
\usepackage{pgfplotstable}
% \usepackage{fontawesome}
\usepackage{fontawesome5}
\usepackage{tikzpingus}
\usepackage{tikzducks}
\usepackage{pdfpc}
\usepackage{amsmath}
\usepgfplotslibrary{dateplot}
\usetikzlibrary{shapes,tikzmark}
\usetikzlibrary{shapes,tikzmark,positioning,shapes.geometric}
\tikzset{pipelinestep/.style={lw,rnd,shape=signal,signal from=west,signal pointer angle=130,minimum width=3cm,minimum height=2cm,draw=black,fill=lightgray!30}}
\def\info#1{\begingroup\color{gray}\scriptsize#1\endgroup}

View File

@@ -4,8 +4,10 @@
## {.plain}
\setbeamertemplate{sidebar left}{}
\begin{tikzpicture}[remember picture,overlay]
\node[anchor=center] at (current page.center) {
\movie[width=\paperwidth, height=\paperheight, poster, showcontrols=false, autostart]{}{\imagepath/video/introduction/sample-10s.mp4}
\node[anchor=center, inner sep=0pt, outer sep=0pt] at (current page.center) {
\movie[width=\paperwidth, height=\paperheight, poster, showcontrols=false, autostart]{}{\imagepath/video/introduction/introduction.mp4}
};
\end{tikzpicture}

View File

@@ -58,48 +58,214 @@
::::
:::
\vfill
## CI/CD
\begin{center}
\includegraphics[width=2.5em]{./Images/images/konstantin/logos/debian.pdf} \hspace{1em}
\includegraphics[width=2.5em]{./Images/images/konstantin/logos/docker.pdf} \hspace{1em}
\includegraphics[width=2.5em]{./Images/images/konstantin/logos/gitea.pdf} \hspace{1em}
\includegraphics[width=2.5em]{./Images/images/konstantin/logos/wireguard.pdf} \hspace{1em}
\includegraphics[width=2.5em]{./Images/images/konstantin/logos/github.pdf} \hspace{1em}
\includegraphics[width=2.5em]{./Images/images/konstantin/logos/nginx.pdf} \hspace{1em}
\includegraphics[width=2.5em]{./Images/images/konstantin/logos/postgres.pdf} \hspace{1em}
\includegraphics[width=2.5em]{./Images/images/konstantin/logos/oqtane.pdf}
\end{center}
CI:
\vfill
<!-- ![](./Images/konstantin/tech_stack_logos.png){ width=100% } -->
- Gitea Actions
- Debian Packages (.deb)
- Code-Reviewing:
- KI
- Git-Flow
---
## Softwarearchitektur
```mermaid
sequenceDiagram
participant browser as Client
participant nginx as NginX
participant oqtane as Oqtane
participant db as PostgreSQL
browser->>+nginx: HTTPS => 0.0.0.0:443
nginx->>nginx: SSL Terminierung
nginx->>+oqtane: HTTP => 127.0.0.1:5000
oqtane->>+db: SQL => 127.0.0.1:5432
db-->>-oqtane: SQL
oqtane-->>-nginx: HTTP
nginx-->>-browser: HTTPS
```
## Von Commit zu Paket
\begin{tikzpicture}[
node distance=1cm,
stepnode/.style={circle, minimum size=1.2cm, draw, line width=1.5pt, fill=white, inner sep=0pt},
labelnode/.style={align=center, font=\small\bfseries},
textnode/.style={align=center, font=\scriptsize, color=gray},
track/.style={line width=2pt, gray!20}
]
% Central Track
\draw[track] (-1,0) -- (12,0);
\node[stepnode, draw=gray!60!black] (n1) at (0,0) {\color{gray!60!black}\small\faCodeBranch};
\node[stepnode, draw=green!60!black, right=of n1] (n2) {\color{green!60!black}\small\faCheckCircle};
\node[stepnode, draw=blue!60!black, right=of n2] (n3) {\color{blue!60!black}\small\faCogs};
\node[stepnode, draw=green!60!black, right=of n3] (n4) {\color{green!60!black}\small\faBoxOpen};
\node[stepnode, draw=blue!60!black, right=of n4] (n5) {\color{blue!60!black}\small\faDatabase};
% Labels Above
\node[labelnode, below=0.2cm of n1, color=gray!60!black] {Commit};
\node[labelnode, below=0.2cm of n2, color=green!60!black] {Tag};
\node[labelnode, below=0.2cm of n3, color=blue!60!black] {CI/CD};
\node[labelnode, below=0.2cm of n4, color=green!60!black] {.deb Paket};
\node[labelnode, below=0.2cm of n5, color=blue!60!black] {Registry};
\end{tikzpicture}
\vspace{1em}
**Ablauf:**
1. laufende Entwicklung
2. Commit zu einem Release zusammenfassen (Tag)
3. CI/CD Pipeline beginnt zu laufen
4. .deb Paket wird gebaut
5. .deb Paket wird in der Registry abgelegt
## Softwarearchitektur (.NET / Oqtane)
**Design Patterns:**
\vspace{1em}
\begin{tikzpicture}[
node distance=0.15cm,
stepnode/.style={rectangle, draw, line width=1.5pt, minimum width=1.5cm, minimum height=1.5cm, fill=white, inner sep=0pt},
]
\node[stepnode, draw=gray!60!black] (n1) at (0,0) {\LARGE\color{gray!60!black}S};
\node[stepnode, draw=green!60!black, right=of n1] (n2) {\LARGE\color{green!60!black}O};
\node[stepnode, draw=blue!60!black, right=of n2] (n3) {\LARGE\color{blue!60!black}L};
\node[stepnode, draw=orange, right=of n3] (n4) {\LARGE\color{orange}I};
\node[stepnode, draw=orange!70!black, right=of n4] (n5) {\LARGE\color{orange!70!black}D};
\end{tikzpicture}
\vspace{1em}
- Open-Closed Principle
- Strategy Pattern
- Dependency Injection
## Technischer Vergleich
- Dependency Injection (IServiceProvider)
- Repository-Pattern (EntityFramework)
Bisherige Erfahrungen:
- Go
- Typescript
- GRPC (interprozess Kommunikation)
Untersuchungsgebiete:
- Typisierung
- Konsistenz
## Teamleitung
## Module
::: columns
:::: column
left
::::
**Admin Module:**
- Mass Mailer
- Token Lifetime
- Report System
**Allgemeine Module:**
- Event Registration
- Black Board
::::
:::: column
right
![](./Images/images/konstantin/ReportingSystem.png)
::::
:::
## Fazit
## Produktion $\neq$ Staging
\begin{tikzpicture}[
node distance=2.2cm,
stepnode/.style={circle, minimum size=1.2cm, draw, line width=1.5pt, fill=white, inner sep=0pt},
labelnode/.style={align=center, font=\small\bfseries},
textnode/.style={align=center, font=\scriptsize, color=gray},
track/.style={line width=2pt, gray!20}
]
% Central Track
\draw[track] (-1,0) -- (12,0);
% Steps
\node[stepnode, draw=green!60!black] (s1) at (0,0) {\color{green!60!black}\Large\faCheck};
\node[stepnode, draw=accent, right=of s1] (s2) {\color{accent}\Large\faCodeBranch};
\node[stepnode, draw=red, right=of s2] (s3) {\color{red}\Large\faExclamationTriangle};
\node[stepnode, draw=orange, right=of s3] (s4) {\color{orange}\Large\faLightbulb};
% Labels Above
\node[labelnode, above=0.2cm of s1, color=green!60!black] {Staging};
\node[labelnode, above=0.2cm of s2, color=accent] {Deploy};
\node[labelnode, above=0.2cm of s3, color=red] {Bruch};
\node[labelnode, above=0.2cm of s4, color=orange] {Erkenntnis};
\end{tikzpicture}
\vfill
::: columns
:::: column{.column width=33%}
"It works on my Machine"
::::
:::: column{.column width=66%}
**Deploymentprobleme bei Hetzner**
Problem: schlechte Dokumentation.
Lösung: Debugging mithilfe von Wireshark und lesen des Source Codes um das Framework zu verstehen und den Fehler zu finden.
::::
:::
## Teamleitung & PM
::: columns
:::: column
**Scrum Workflow:**
- 14-tägige Sprints
- Weeklies & Retrospektiven
- Definition of Done (DoD)
::::
:::: column
**Gitea Issues / Board:**
- Integrierter Workflow
- Single Source of Truth
::::
:::
![Gitea Board](./Images/images/konstantin/GiteaIssues-TaskBoard.png){ width=60% }
## Was bleibt
\vspace{0.5em}
\begin{tikzpicture}[x=\linewidth/10, y=1cm, every node/.style={font=\sffamily}]
% Rule: 90/90
\fill[black!5] (0, 2.8) rectangle (10, 3.4);
\fill[green!60!black] (0, 2.8) rectangle (9, 3.4);
\node[anchor=north west, inner sep=3pt] at (0, 2.8) {\scriptsize Erste \textbf{90\,\%} des Codes $\rightarrow$ \textbf{90\,\%} der Zeit};
\fill[black!5] (0, 1.2) rectangle (10, 1.8);
\fill[accent] (0, 1.2) rectangle (1, 1.8);
\node[anchor=north west, inner sep=3pt, text=accent] at (0, 1.2) {\scriptsize \textbf{Letzte 10\,\% des Codes $\rightarrow$ weitere 90\,\% der Zeit}};
\end{tikzpicture}
\vspace{0.5em}
::: columns
:::: { .column width=33% }
\begin{block}{Lean beats Perfect}
\scriptsize Weniger bauen, dafür fertig stellen.
\end{block}
::::
:::: { .column width=33% }
\begin{block}{Environment First}
\scriptsize Zielumgebung testen, nicht nur lokal.
\end{block}
::::
:::: { .column width=33% }
\begin{block}{Fragen ist Architektur}
\scriptsize Wer früh fragt, spart später Monate.
\end{block}
::::
:::

View File

@@ -3,8 +3,11 @@
## Individueller Teil: Florian Edlmayer
- **Datensicherheit** DSGVO-konform & verschlüsselt
\vspace{1em}
- **Backup-Systeme** Automatisch, täglich & zuverlässig
\vspace{1em}
- **Premium-Bereich** Exklusiv, motivierend & sicher
\vspace{1em}
---
@@ -37,15 +40,43 @@
- **Vertraulichkeit**: TLS/HTTPS & lokales Austria-Hosting.
- **Betroffenenrechte**: Auskunft & Löschung garantiert.
\begin{center}
\begin{tikzpicture}[
node distance=0cm,
stepnode/.style={rectangle, rounded corners=3pt, minimum width=2.7cm, minimum height=2.6cm, draw, line width=1pt, fill=white, inner sep=2pt},
iconnode/.style={circle, minimum size=0.8cm, fill=gray!5},
titlenode/.style={align=center, font=\scriptsize\bfseries},
]
% Boxes
\node[stepnode, draw=gray] (n1) at (0,0) {};
\node[stepnode, draw=green!60!black, right=of n1] (n2) {};
\node[stepnode, draw=blue!60!black, right=of n2] (n3) {};
\node[stepnode, draw=orange, right=of n3] (n4) {};
% Icons
\node[iconnode] at (n1.north) [yshift=-0.7cm] {\color{gray}\small\faCodeBranch};
\node[iconnode] at (n2.north) [yshift=-0.7cm] {\color{green!60!black}\small\faCheckCircle};
\node[iconnode] at (n3.north) [yshift=-0.7cm] {\color{blue!60!black}\small\faCogs};
\node[iconnode] at (n4.north) [yshift=-0.7cm] {\color{orange}\small\faBoxOpen};
% Titles and Subtext
\node[titlenode] at (n1.center) [yshift=-0.1cm] {Datenschutzerklärung};
\node[titlenode] at (n2.center) [yshift=-0.1cm] {Datenminimierung};
\node[titlenode] at (n3.center) [yshift=-0.1cm] {Vertraulichkeit};
\node[titlenode] at (n4.center) [yshift=-0.1cm] {Betroffenenrechte};
\end{tikzpicture}
\end{center}
---
## Backup- & Restore-Systeme (1)
- **Problem**: Datenverlust (Hardware, Software, Cyberangriffe).
- **Lösung**: Vollautomatisiertes Backup-Skript.
![alt text](image-4.png)
\vspace{2em}
![](image.png)
---
## Backup- & Restore-Systeme (2)
- **Speichermanagement (Retention)**:
@@ -64,7 +95,7 @@
- Abbau von Registrierungshürden.
- Keine sensiblen Passwörter im eigenen System.
![Ablauf der OAuth-Authentifizierung](Images/oauth-flow-new.png)
![](Images/oauth-flow-new.png){width=20em}
---
@@ -78,7 +109,7 @@
---
## Der Premium-Bereich (2)
![alt text](image-3.png)
![](./Images/images/florian/image-3.png)
**Datensparsame Mitgliedersuche & Kontaktfunktion:**
![Mitgliedersuche und Kontaktfunktion für Premium-Mitglieder](../Diplomarbeitsbuch/images/04-Florian/premium-mitglieder-suche.png)

View File

@@ -7,7 +7,8 @@
- Oqtane-Theme
- Hall-of-Fame-Modul
- Anmeldetool
- **Ziel**: Moderne, responsive Website für den HTL-Absolventenverein
- **Ziel**:
- Moderne, responsive Website für den SZU Absolventenverein
---
@@ -50,10 +51,10 @@
::: columns
:::: column
- EigenNavigation (bootstrap Komponenten haben nicht gepasst ).
- EigenNavigation (Bootstrap-Komponenten haben nicht gepasst).
- Systemseiten per LINQ ausblenden.
- Responsive CSSMediaQueries + reines CSSBurgerMenu.
- CookieConsent (erforderlich für dsgvo konformität und gesamtheit der website ).
- CookieConsent (erforderlich für DSGVO-Konformität und Gesamtheit der Website).
::::
:::: column
@@ -77,7 +78,7 @@
:::: column
\begin{tikzpicture}
\node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.55\columnwidth]{Images/HallOfFameBeispiel.png}};
\node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.55\columnwidth]{Images/HallOfFamePdfNeuBesser.png}};
\end{tikzpicture}
::::
@@ -117,44 +118,89 @@
---
## Anmeldetool
- **UI**: Ja/NeinButtons (grün/rot)
- **LiveFeedback**: Sofortige Statusänderung via Blazor
- **Mobile**: Sauberes Touch-Handling
- **Architektur**: UI & Backend-API getrennt
---
## Herausforderungen & Lösungen
- **Plattformwechsel** Windows → macOS
- Oqtane stark an Windows gebunden
-**Visual Studio Code** als plattformübergreifende Lösung
- **Keine funktionsfähige Website** (Sommer 2025)
- Kurz vor einem Event, kein funktionierendes CMS
- → Schnelle **Node.js/HTML-Übergangslösung** sicherte Event-Anmeldung
---
## Learnings
\vspace{1cm}
\begin{tikzpicture}[remember picture, overlay]
\node at (current page.center) {
\renewcommand{\arraystretch}{1.5}
\begin{tabular}{c c c}
\textbf{Technisch} & \textbf{Methodisch} & \textbf{Persönlich} \\
\hline
Git & Aufgabenverteilung & Eigeninitiative \\
CSS-Flexbox & Regelmäßige Meetings & Verantwortung \\
Blazor & & \\
\begin{tabular}{@{}c@{\hspace{4mm}}c@{}}
\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{UI}, width=6.5cm, height=2cm, valign=center]
\centering Ja/Nein-Buttons (grün/rot)
\end{tcolorbox}
&
\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Live-Feedback}, width=6.5cm, height=2cm, valign=center]
\centering Sofort via Blazor
\end{tcolorbox}
\\[3mm]
\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Mobile}, width=6.5cm, height=2cm, valign=center]
\centering Sauberes Touch-Handling
\end{tcolorbox}
&
\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Architektur}, width=6.5cm, height=2cm, valign=center]
\centering UI \& Backend-API getrennt
\end{tcolorbox}
\end{tabular}
};
\end{tikzpicture}
---
## Fazit & Ausblick
- **Ergebnis**:
- Theme final & mobil-optimiert
- Hall of Fame funktionsfähig
- Anmeldetool einsatzbereit
## Herausforderungen & Lösungen
\vspace{5mm}
\begin{tikzpicture}[remember picture, overlay,
problem/.style={rectangle, rounded corners=3pt, draw=red!60!black, fill=red!8, minimum width=5cm, minimum height=1.4cm, align=center, font=\small},
solution/.style={rectangle, rounded corners=3pt, draw=green!60!black, fill=green!8, minimum width=5cm, minimum height=1.4cm, align=center, font=\small},
header/.style={font=\small\bfseries\color{gray!70}}
]
% Spalten-Header
\node[header] at ([xshift=-2.5cm, yshift=2.2cm]current page.center) {Herausforderung};
\node[header] at ([xshift=2.5cm, yshift=2.2cm]current page.center) {Lösung};
% Reihe 1
\node[problem] at ([xshift=-2.5cm, yshift=0.9cm]current page.center) (p1) {$\triangle$\;\textbf{Plattformwechsel}\\[-1mm]{\scriptsize Windows $\rightarrow$ macOS}};
\node[solution] at ([xshift=2.5cm, yshift=0.9cm]current page.center) (s1) {\checkmark\;\textbf{Visual Studio Code}\\[-1mm]{\scriptsize Plattformübergreifend}};
% Reihe 2
\node[problem] at ([xshift=-2.5cm, yshift=-1.1cm]current page.center) (p2) {$\triangle$\;\textbf{Kein CMS verfügbar}\\[-1mm]{\scriptsize Sommer 2025, Event steht an}};
\node[solution] at ([xshift=2.5cm, yshift=-1.1cm]current page.center) (s2) {\checkmark\;\textbf{Node.js/HTML}\\[-1mm]{\scriptsize Übergangslösung}};
% Reihe 3
\node[problem] at ([xshift=-2.5cm, yshift=-3.1cm]current page.center) (p3) {$\triangle$\;\textbf{UI-Fehler am Handy}\\[-1mm]{\scriptsize Clipping-Probleme}};
\node[solution] at ([xshift=2.5cm, yshift=-3.1cm]current page.center) (s3) {\checkmark\;\textbf{Testen und Anpassen}\\[-1mm]{\scriptsize Debuggen und Verbessern der UI}};
\end{tikzpicture}
---
## Learnings
\vspace{1cm}
\begin{tikzpicture}[remember picture, overlay,
every node/.style={font=\small},
branch/.style={thick, accent},
cat/.style={rectangle, rounded corners=3pt, draw=accent, fill=accent!15, font=\small\bfseries, minimum height=7mm, align=center},
item/.style={font=\scriptsize, align=left}
]
\node[circle, draw=accent, fill=accent!20, font=\bfseries, minimum size=1.5cm] at (current page.center) (center) {Learnings};
% Technisch - links
\node[cat] at ([xshift=-3.5cm, yshift=0.8cm]current page.center) (tech) {Technisch};
\draw[branch] (center) -- (tech);
\node[item, anchor=east] at ([xshift=-1mm, yshift=5mm]tech.west) {Git};
\node[item, anchor=east] at ([xshift=-1mm]tech.west) {CSS-Flexbox};
\node[item, anchor=east] at ([xshift=-1mm, yshift=-5mm]tech.west) {Blazor};
% Methodisch - rechts oben
\node[cat] at ([xshift=3.5cm, yshift=0.8cm]current page.center) (meth) {Methodisch};
\draw[branch] (center) -- (meth);
\node[item, anchor=west] at ([xshift=1mm, yshift=3mm]meth.east) {Aufgaben-};
\node[item, anchor=west] at ([xshift=1mm, yshift=-3mm]meth.east) {verteilung};
\node[item, anchor=west] at ([xshift=1mm, yshift=-9mm]meth.east) {Meetings};
% Persönlich - unten
\node[cat] at ([yshift=-2cm]current page.center) (pers) {Persönlich};
\draw[branch] (center) -- (pers);
\node[item] at ([yshift=-7mm]pers.south) {Eigeninitiative \& Verantwortung};
\end{tikzpicture}

View File

Before

Width:  |  Height:  |  Size: 352 KiB

After

Width:  |  Height:  |  Size: 352 KiB

View File

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 53 KiB

View File

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 75 KiB

View File

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB

View File

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 227 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 459 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 86 KiB

View File

@@ -1,6 +1,6 @@
\cleardoublepage
# Adam Gaiswinklerr
# Adam Gaiswinkler
## Einleitung des individuellen Teils