Compare commits
4 Commits
gaisi-patc
...
1bd88dca6a
| Author | SHA1 | Date | |
|---|---|---|---|
| 1bd88dca6a | |||
| bafe030e25 | |||
| 62a6dd1fe3 | |||
| b975d4e270 |
@@ -58,40 +58,153 @@
|
|||||||
::::
|
::::
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
\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
|
||||||
|
<!-- { width=100% } -->
|
||||||
|
|
||||||
- Gitea Actions
|
---
|
||||||
- Debian Packages (.deb)
|
|
||||||
- Code-Reviewing:
|
|
||||||
- KI
|
|
||||||
- Git-Flow
|
|
||||||
|
|
||||||
## Softwarearchitektur
|
**Produktions-Infrastruktur:**
|
||||||
|
|
||||||
|
```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] (n1) at (0,0) {\color{gray}\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=orange, right=of n3] (n4) {\color{orange}\small\faBoxOpen};
|
||||||
|
\node[stepnode, draw=orange!70!black, right=of n4] (n5) {\color{orange!70!black}\small\faDatabase};
|
||||||
|
|
||||||
|
% Labels Above
|
||||||
|
\node[labelnode, below=0.2cm of n1, color=gray] {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=orange] {.deb Paket};
|
||||||
|
\node[labelnode, below=0.2cm of n5, color=orange!70!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:**
|
||||||
|
|
||||||
|
\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
|
- Open-Closed Principle
|
||||||
- Strategy Pattern
|
- Dependency Injection (IServiceProvider)
|
||||||
- Dependency Injection
|
- Repository-Pattern (EntityFramework)
|
||||||
|
|
||||||
## Technischer Vergleich
|
## Module
|
||||||
|
|
||||||
Bisherige Erfahrungen:
|
|
||||||
|
|
||||||
- Go
|
|
||||||
- Typescript
|
|
||||||
- GRPC (interprozess Kommunikation)
|
|
||||||
|
|
||||||
Untersuchungsgebiete:
|
|
||||||
|
|
||||||
- Typisierung
|
|
||||||
- Konsistenz
|
|
||||||
|
|
||||||
## Teamleitung
|
|
||||||
|
|
||||||
::: columns
|
::: columns
|
||||||
|
:::: column
|
||||||
|
**Admin Module:**
|
||||||
|
|
||||||
|
- Mass Mailer
|
||||||
|
- Token Lifetime
|
||||||
|
- Report System
|
||||||
|
|
||||||
|
**Allgemeine Module:**
|
||||||
|
|
||||||
|
- Event Registration
|
||||||
|
- Black Board
|
||||||
|
|
||||||
|
::::
|
||||||
|
:::: column
|
||||||
|

|
||||||
|
::::
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 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
|
||||||
|
"It works on my Machine"
|
||||||
|
::::
|
||||||
:::: column
|
:::: column
|
||||||
left
|
left
|
||||||
::::
|
::::
|
||||||
|
|||||||
@@ -117,44 +117,88 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
## Anmeldetool
|
## Anmeldetool
|
||||||
- **UI**: Ja/Nein‑Buttons (grün/rot)
|
|
||||||
- **Live‑Feedback**: 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}
|
\vspace{1cm}
|
||||||
\begin{tikzpicture}[remember picture, overlay]
|
\begin{tikzpicture}[remember picture, overlay]
|
||||||
\node at (current page.center) {
|
\node at (current page.center) {
|
||||||
\renewcommand{\arraystretch}{1.5}
|
\begin{tabular}{@{}c@{\hspace{4mm}}c@{}}
|
||||||
\begin{tabular}{c c c}
|
\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{UI}, width=6cm]
|
||||||
\textbf{Technisch} & \textbf{Methodisch} & \textbf{Persönlich} \\
|
\centering Ja/Nein-Buttons (grün/rot)
|
||||||
\hline
|
\end{tcolorbox}
|
||||||
Git & Aufgabenverteilung & Eigeninitiative \\
|
&
|
||||||
CSS-Flexbox & Regelmäßige Meetings & Verantwortung \\
|
\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Live-Feedback}, width=6cm]
|
||||||
Blazor & & \\
|
\centering Sofort via Blazor
|
||||||
|
\end{tcolorbox}
|
||||||
|
\\[3mm]
|
||||||
|
\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Mobile}, width=6cm]
|
||||||
|
\centering Sauberes Touch-Handling
|
||||||
|
\end{tcolorbox}
|
||||||
|
&
|
||||||
|
\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Architektur}, width=6cm]
|
||||||
|
\centering UI \& Backend-API getrennt
|
||||||
|
\end{tcolorbox}
|
||||||
\end{tabular}
|
\end{tabular}
|
||||||
};
|
};
|
||||||
\end{tikzpicture}
|
\end{tikzpicture}
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Fazit & Ausblick
|
## Herausforderungen & Lösungen
|
||||||
- **Ergebnis**:
|
|
||||||
- Theme final & mobil-optimiert
|
\vspace{5mm}
|
||||||
- Hall of Fame funktionsfähig
|
\begin{tikzpicture}[remember picture, overlay,
|
||||||
- Anmeldetool einsatzbereit
|
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}};
|
||||||
|
|
||||||
|
% Trennlinie
|
||||||
|
\draw[gray!30, dashed] ([xshift=-4.5cm]current page.center) -- ([xshift=4.5cm]current page.center);
|
||||||
|
|
||||||
|
% 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}};
|
||||||
|
\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}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
BIN
Defensio/Images/images/konstantin/logos/debian.pdf
Normal file
BIN
Defensio/Images/images/konstantin/logos/debian.pdf
Normal file
Binary file not shown.
BIN
Defensio/Images/images/konstantin/logos/docker.pdf
Normal file
BIN
Defensio/Images/images/konstantin/logos/docker.pdf
Normal file
Binary file not shown.
BIN
Defensio/Images/images/konstantin/logos/gitea.pdf
Normal file
BIN
Defensio/Images/images/konstantin/logos/gitea.pdf
Normal file
Binary file not shown.
BIN
Defensio/Images/images/konstantin/logos/github.pdf
Normal file
BIN
Defensio/Images/images/konstantin/logos/github.pdf
Normal file
Binary file not shown.
BIN
Defensio/Images/images/konstantin/logos/nginx.pdf
Normal file
BIN
Defensio/Images/images/konstantin/logos/nginx.pdf
Normal file
Binary file not shown.
BIN
Defensio/Images/images/konstantin/logos/oqtane.pdf
Normal file
BIN
Defensio/Images/images/konstantin/logos/oqtane.pdf
Normal file
Binary file not shown.
BIN
Defensio/Images/images/konstantin/logos/postgres.pdf
Normal file
BIN
Defensio/Images/images/konstantin/logos/postgres.pdf
Normal file
Binary file not shown.
BIN
Defensio/Images/images/konstantin/logos/wireguard.pdf
Normal file
BIN
Defensio/Images/images/konstantin/logos/wireguard.pdf
Normal file
Binary file not shown.
Reference in New Issue
Block a user