Compare commits

...

2 commits

Author SHA1 Message Date
40b14747fc
docs: Update project documentation and titles
All checks were successful
CI / Get Changed Files (pull_request) Successful in 11s
CI / eslint (pull_request) Has been skipped
CI / Backend Tests (pull_request) Has been skipped
Label PRs based on size / Check PR size (pull_request) Successful in 11s
CI / oxlint (pull_request) Has been skipped
CI / Checkstyle Main (pull_request) Has been skipped
CI / prettier (pull_request) Has been skipped
CI / Docker frontend validation (pull_request) Has been skipped
CI / test-build (pull_request) Has been skipped
Pull Request Labeler / labeler (pull_request_target) Successful in 14s
CI / Docker backend validation (pull_request) Has been skipped
Claude PR Review / claude-code (pull_request) Successful in 26s
2025-06-05 10:02:46 +02:00
37f0ec4ae2
docs: update diagrams formatting in project documentation 2025-06-05 10:02:46 +02:00

View file

@ -80,9 +80,9 @@
\centering \centering
\vspace*{2cm} \vspace*{2cm}
{\Huge\bfseries Casino Gaming Platform\par} {\Huge\bfseries Trustworthy Casino\par}
\vspace{1.5cm} \vspace{1.5cm}
{\Large\itshape Projektdokumentation für die IHK-Abschlussprüfung\par} {\Large\itshape Projektdokumentation für das Mittelstufenprojekt\par}
\vspace{2cm} \vspace{2cm}
{\large\bfseries Fachinformatiker für Anwendungsentwicklung\par} {\large\bfseries Fachinformatiker für Anwendungsentwicklung\par}
@ -90,12 +90,10 @@
{\large {\large
\begin{tabular}{ll} \begin{tabular}{ll}
\textbf{Prüfling:} & [Name des Prüflings] \\
\textbf{Prüflingsnummer:} & [Prüflingsnummer] \\
\textbf{Ausbildungsbetrieb:} & Hitec GmbH \\ \textbf{Ausbildungsbetrieb:} & Hitec GmbH \\
\textbf{Projektbetreuer:} & [Betreuer] \\ \textbf{Projektbetreuer:} & Herr Heidemann / Frau Deeken \\
\textbf{Projektdauer:} & 70 Stunden \\ \textbf{Projektdauer:} & 10 Wochen \\
\textbf{Abgabedatum:} & \today \\ \textbf{Abgabedatum:} & 12.06.2025 \\
\end{tabular} \end{tabular}
\par} \par}
@ -112,17 +110,16 @@
\chapter{Beschreibung} \chapter{Beschreibung}
\section{Umfeld} \section{Umfeld}
Das Projekt wurde im Rahmen der Abschlussprüfung zum Fachinformatiker für Anwendungsentwicklung bei der Hitec GmbH entwickelt. Das Projekt wurde im Rahmen des Mittelstufenprojektes entwickelt.
\subsection{Produktportfolio der Hitec GmbH} \subsection{Produktportfolio der Hitec GmbH}
Die Hitec GmbH ist ein innovatives IT-Unternehmen, das sich auf die Entwicklung moderner Webanwendungen und digitaler Lösungen spezialisiert hat. Das Unternehmen deckt ein breites Spektrum an Technologien ab, von klassischen Enterprise-Anwendungen bis hin zu modernen Cloud-nativen Lösungen. Die Hitec GmbH ist ein innovatives IT-Unternehmen, das sich auf die Entwicklung moderner Webanwendungen und digitaler Lösungen spezialisiert hat. Das Unternehmen deckt ein breites Spektrum an Technologien ab.
\subsection{Weg zur Produktidee} \subsection{Weg zur Produktidee}
Die Casino Gaming Platform entstand als LF08 Projekt mit dem Ziel, eine vollständige Online-Casino-Plattform zu entwickeln. Die Produktidee basiert auf: Die Casino Gaming Platform entstand als LF08 Projekt mit dem Ziel, eine vollständige Online-Casino-Plattform zu entwickeln. Die Produktidee basiert auf:
\begin{itemize} \begin{itemize}
\item \textbf{Gamification-Trend:} Wachsende Nachfrage nach Online-Gaming-Plattformen \item \textbf{Gamification-Trend:} Wachsende Nachfrage nach Online-Gaming-Plattformen
\item \textbf{Technologie-Demonstration:} Showcase moderner Full-Stack-Entwicklung (Angular 20 + Spring Boot 3.5)
\item \textbf{Bildungsziel:} Praktische Anwendung von Enterprise-Patterns und modernen Web-Technologien \item \textbf{Bildungsziel:} Praktische Anwendung von Enterprise-Patterns und modernen Web-Technologien
\item \textbf{Marktforschung:} Integration aktueller Standards (OAuth2, Stripe, responsive Design) \item \textbf{Marktforschung:} Integration aktueller Standards (OAuth2, Stripe, responsive Design)
\end{itemize} \end{itemize}
@ -185,14 +182,14 @@ Detaillierte Beschreibung des Problems oder der Marktlücke, welche unser Produk
\chapter{Durchführung} \chapter{Durchführung}
\section{Vorgehensweise} \section{Vorgehensweise}
Für die Projektdurchführung wurde Scrum als Vorgehensmodell gewählt. Dadurch wird am Anfang des Projektes und eines Sprints festgelegt, was gemacht werden soll, und jeder ist auf dem gleichen Wissensstand. Des Weiteren gibt es tägliche Updates vom Fortschritt, Probleme können schnell erkannt und angesprochen werden. Dazu kann man auch neue Anforderungen flexibel mit einbringen. Für die Projektdurchführung wurde Scrum als Vorgehensmodell gewählt bzw. vorgeschrieben. Dadurch wird am Anfang des Projektes und eines Sprints festgelegt, was gemacht werden soll, und jeder ist auf dem gleichen Wissensstand. Des Weiteren gibt es tägliche Updates vom Fortschritt, Probleme können schnell erkannt und angesprochen werden. Dazu kann man auch neue Anforderungen flexibel mit einbringen.
\subsection{Verwendete Tools und Methoden} \subsection{Verwendete Tools und Methoden}
\begin{itemize} \begin{itemize}
\item \textbf{Scrum:} Agile Projektmanagement-Methodik \item \textbf{Scrum:} Agile Projektmanagement-Methodik
\item \textbf{Jira:} Ticketing und Sprint-Planning \item \textbf{Jira:} Ticketing und Sprint-Planning
\item \textbf{Git:} Versionskontrolle mit Feature-Branch-Workflow \item \textbf{Git:} Versionskontrolle mit Feature-Branch-Workflow
\item \textbf{CI/CD:} Automatisierte Build- und Deployment-Pipelines \item \textbf{CI/CD:} Automatisierte Build- und Deployment-Pipelines welche gleichzeitig auch die Qualitätssicherung übernimmt
\end{itemize} \end{itemize}
\section{Umsetzung} \section{Umsetzung}
@ -273,11 +270,11 @@ Angular Router → Lazy Loading → Feature Modules
Die Casino Gaming Platform basiert auf einer modernen, schichtbasierten Architektur mit klarer Trennung zwischen Frontend und Backend. Die Darstellung erfolgt mittels des C4-Architekturmodells (Context, Container, Component, Code), welches eine hierarchische Sichtweise auf die Softwarearchitektur ermöglicht. Die Casino Gaming Platform basiert auf einer modernen, schichtbasierten Architektur mit klarer Trennung zwischen Frontend und Backend. Die Darstellung erfolgt mittels des C4-Architekturmodells (Context, Container, Component, Code), welches eine hierarchische Sichtweise auf die Softwarearchitektur ermöglicht.
\clearpage \clearpage
\needspace{8\baselineskip} \begin{landscape}
\subsubsection{Ebene 1: Systemkontext-Diagramm} \subsubsection{Ebene 1: Systemkontext-Diagramm}
Das Systemkontext-Diagramm stellt die Casino Gaming Platform in ihrem geschäftlichen Umfeld dar und zeigt die Beziehungen zu externen Akteuren und Systemen. Es verdeutlicht, wer das System nutzt und mit welchen externen Systemen es interagiert. Das Systemkontext-Diagramm stellt die Casino Gaming Platform in ihrem geschäftlichen Umfeld dar und zeigt die Beziehungen zu externen Akteuren und Systemen. Es verdeutlicht, wer das System nutzt und mit welchen externen Systemen es interagiert.
\begin{landscape} \vspace{0.5cm}
\begin{tikzpicture}[ \begin{tikzpicture}[
person/.style={rectangle, draw=blue!80, fill=blue!15, minimum width=3cm, minimum height=1.8cm, align=center, rounded corners=3pt, thick}, person/.style={rectangle, draw=blue!80, fill=blue!15, minimum width=3cm, minimum height=1.8cm, align=center, rounded corners=3pt, thick},
system/.style={rectangle, draw=blue!80, fill=blue!60, minimum width=5cm, minimum height=2.5cm, align=center, text=white, rounded corners=5pt, thick}, system/.style={rectangle, draw=blue!80, fill=blue!60, minimum width=5cm, minimum height=2.5cm, align=center, text=white, rounded corners=5pt, thick},
@ -308,11 +305,11 @@ Das Systemkontext-Diagramm stellt die Casino Gaming Platform in ihrem geschäftl
\end{landscape} \end{landscape}
\clearpage \clearpage
\needspace{8\baselineskip} \begin{landscape}
\subsubsection{Ebene 2: Container-Diagramm} \subsubsection{Ebene 2: Container-Diagramm}
Das Container-Diagramm zeigt die High-Level-Architektur der Software und stellt die verschiedenen ausführbaren Einheiten (Container) sowie deren Kommunikation dar. Jeder Container repräsentiert eine separate deploybare/ausführbare Einheit wie eine Webanwendung, Datenbank oder Microservice. Das Container-Diagramm zeigt die High-Level-Architektur der Software und stellt die verschiedenen ausführbaren Einheiten (Container) sowie deren Kommunikation dar. Jeder Container repräsentiert eine separate deploybare/ausführbare Einheit wie eine Webanwendung, Datenbank oder Microservice.
\begin{landscape} \vspace{0.5cm}
\begin{tikzpicture}[ \begin{tikzpicture}[
webapp/.style={rectangle, draw=blue!80, fill=blue!25, minimum width=4cm, minimum height=2.5cm, align=center, rounded corners=4pt, thick}, webapp/.style={rectangle, draw=blue!80, fill=blue!25, minimum width=4cm, minimum height=2.5cm, align=center, rounded corners=4pt, thick},
api/.style={rectangle, draw=green!80, fill=green!25, minimum width=4cm, minimum height=2.5cm, align=center, rounded corners=4pt, thick}, api/.style={rectangle, draw=green!80, fill=green!25, minimum width=4cm, minimum height=2.5cm, align=center, rounded corners=4pt, thick},
@ -325,13 +322,13 @@ Das Container-Diagramm zeigt die High-Level-Architektur der Software und stellt
\node[webapp] (person) at (-10, 5) {\textbf{Casino-Spieler}\\Person\\Nutzt Webbrowser\\oder Mobile App}; \node[webapp] (person) at (-10, 5) {\textbf{Casino-Spieler}\\Person\\Nutzt Webbrowser\\oder Mobile App};
% Frontend-Container % Frontend-Container
\node[webapp] (frontend) at (-5, 1) {\textbf{Webanwendung}\\Angular 20, TypeScript\\Liefert statische Inhalte\\und Casino-Spiele-UI}; \node[webapp] (frontend) at (-10, 1) {\textbf{Webanwendung}\\Angular 20, TypeScript\\Liefert statische Inhalte\\und Casino-Spiele-UI};
% Backend-Container % Backend-Container
\node[api] (backend) at (2, 1) {\textbf{API-Anwendung}\\Spring Boot, Java\\Stellt Spiellogik,\\Benutzerverwaltung und\\Geschäftsregeln bereit}; \node[api] (backend) at (0, 1) {\textbf{API-Anwendung}\\Spring Boot, Java\\Stellt Spiellogik,\\Benutzerverwaltung und\\Geschäftsregeln bereit};
% Datenbank % Datenbank
\node[database] (database) at (2, -4) {\textbf{Datenbank}\\PostgreSQL\\Speichert Benutzerkonten,\\Spielhistorie und\\Transaktionen}; \node[database] (database) at (0, -4) {\textbf{Datenbank}\\PostgreSQL\\Speichert Benutzerkonten,\\Spielhistorie und\\Transaktionen};
% Externe Systeme % Externe Systeme
\node[external] (stripe) at (9, 4) {\textbf{Stripe API}\\Zahlungssystem}; \node[external] (stripe) at (9, 4) {\textbf{Stripe API}\\Zahlungssystem};
@ -339,22 +336,22 @@ Das Container-Diagramm zeigt die High-Level-Architektur der Software und stellt
\node[external] (oauth) at (9, -2) {\textbf{OAuth-Provider}\\Authentifizierungsdienste}; \node[external] (oauth) at (9, -2) {\textbf{OAuth-Provider}\\Authentifizierungsdienste};
% Beziehungen % Beziehungen
\draw (person) -- (frontend) node[midway, above] {HTTPS}; \draw (person) -- (frontend) node[midway, right] {HTTPS};
\draw (frontend) -- (backend) node[midway, above] {REST API\\JSON/HTTPS}; \draw (frontend) -- (backend) node[midway, above] {REST API\\JSON/HTTPS};
\draw (backend) -- (database) node[midway, right] {JDBC\\SQL}; \draw (backend) -- (database) node[midway, left] {JDBC\\SQL};
\draw (backend) -- (stripe) node[midway, above] {HTTPS\\Webhooks}; \draw (backend) -- (stripe) node[midway, above] {HTTPS\\Webhooks};
\draw (backend) -- (email) node[midway, right] {SMTP}; \draw (backend) -- (email) node[midway, above] {SMTP};
\draw (backend) -- (oauth) node[midway, below] {OAuth2\\HTTPS}; \draw (backend) -- (oauth) node[midway, below] {OAuth2\\HTTPS};
\end{tikzpicture} \end{tikzpicture}
\end{landscape} \end{landscape}
\clearpage \clearpage
\needspace{8\baselineskip} \begin{landscape}
\subsubsection{Ebene 3: Komponenten-Diagramm - Backend API} \subsubsection{Ebene 3: Komponenten-Diagramm - Backend API}
Das Komponenten-Diagramm zeigt die interne Struktur des Backend API-Containers und stellt die wichtigsten Softwarekomponenten sowie deren Abhängigkeiten dar. Es verdeutlicht die Architektur nach dem MVC-Pattern mit Controller-, Service- und Repository-Schichten. Das Komponenten-Diagramm zeigt die interne Struktur des Backend API-Containers und stellt die wichtigsten Softwarekomponenten sowie deren Abhängigkeiten dar. Es verdeutlicht die Architektur nach dem MVC-Pattern mit Controller-, Service- und Repository-Schichten.
\begin{landscape} \vspace{0.5cm}
\begin{tikzpicture}[ \begin{tikzpicture}[
component/.style={rectangle, draw=yellow!80, fill=yellow!15, minimum width=3.2cm, minimum height=1.8cm, align=center, rounded corners=3pt, thick}, component/.style={rectangle, draw=yellow!80, fill=yellow!15, minimum width=3.2cm, minimum height=1.8cm, align=center, rounded corners=3pt, thick},
controller/.style={rectangle, draw=blue!80, fill=blue!20, minimum width=3.2cm, minimum height=1.8cm, align=center, rounded corners=3pt, thick}, controller/.style={rectangle, draw=blue!80, fill=blue!20, minimum width=3.2cm, minimum height=1.8cm, align=center, rounded corners=3pt, thick},
@ -381,7 +378,7 @@ Das Komponenten-Diagramm zeigt die interne Struktur des Backend API-Containers u
\node[repository] (transaction-repo) at (4.5, 0) {\textbf{Transaktions-Repo}\\JPA/Hibernate}; \node[repository] (transaction-repo) at (4.5, 0) {\textbf{Transaktions-Repo}\\JPA/Hibernate};
% Sicherheitskomponenten % Sicherheitskomponenten
\node[component] (security) at (-11, 2.5) {\textbf{Security Config}\\JWT-Filter,\\CORS, OAuth2}; \node[component] (security) at (-13, 2.5) {\textbf{Security Config}\\JWT-Filter,\\CORS, OAuth2};
% Relationships % Relationships
\draw (auth-ctrl) -- (auth-svc); \draw (auth-ctrl) -- (auth-svc);
@ -400,29 +397,29 @@ Das Komponenten-Diagramm zeigt die interne Struktur des Backend API-Containers u
\end{landscape} \end{landscape}
\clearpage \clearpage
\needspace{8\baselineskip} \begin{landscape}
\subsubsection{Ebene 4: Code-Diagramm - Blackjack Service Implementierung} \subsubsection{Ebene 4: Code-Diagramm - Blackjack Service Implementierung}
Das Code-Diagramm zeigt exemplarisch die Implementierungsdetails des Blackjack Game Service auf Klassenebene. Es stellt die wichtigsten Klassen, Interfaces und deren Beziehungen dar, die für die Blackjack-Spiellogik verantwortlich sind. Das Code-Diagramm zeigt exemplarisch die Implementierungsdetails des Blackjack Game Service auf Klassenebene. Es stellt die wichtigsten Klassen, Interfaces und deren Beziehungen dar, die für die Blackjack-Spiellogik verantwortlich sind.
\begin{landscape} \vspace{0.5cm}
\begin{tikzpicture}[ \begin{tikzpicture}[
class/.style={rectangle, draw=cyan!80, fill=cyan!15, minimum width=3.5cm, minimum height=3cm, align=center, rounded corners=4pt, thick}, class/.style={rectangle, draw=cyan!80, fill=cyan!15, minimum width=3.5cm, minimum height=3cm, align=center, rounded corners=4pt, thick},
interface/.style={rectangle, draw=yellow!80, fill=yellow!15, minimum width=3cm, minimum height=2cm, align=center, rounded corners=4pt, thick}, interface/.style={rectangle, draw=yellow!80, fill=yellow!15, minimum width=3cm, minimum height=2cm, align=center, rounded corners=4pt, thick},
->, >=Stealth, node distance=4.5cm, thick ->, >=Stealth, node distance=4.5cm, thick
] ]
% Interface - kompaktere Anordnung % Interface - mit mehr Abstand
\node[interface] (game-interface) at (0, 4) {\textbf{<<Interface>>}\\GameService\\+spielStarten()\\+zugVerarbeiten()\\+ergebnisBerechnen()}; \node[interface] (game-interface) at (0, 6) {\textbf{<<Interface>>}\\GameService\\+spielStarten()\\+zugVerarbeiten()\\+ergebnisBerechnen()};
% Haupt-Service-Klasse % Haupt-Service-Klasse
\node[class] (blackjack-service) at (0, 1) {\textbf{BlackjackService}\\implementiert GameService\\- kartendeck: Deck\\- spielRepository: Repository\\+ neuesSpielStarten(einsatz)\\+ ziehen(spielId)\\+ halten(spielId)\\+ verdoppeln(spielId)}; \node[class] (blackjack-service) at (0, 1) {\textbf{BlackjackService}\\implementiert GameService\\- kartendeck: Deck\\- spielRepository: Repository\\+ neuesSpielStarten(einsatz)\\+ ziehen(spielId)\\+ halten(spielId)\\+ verdoppeln(spielId)};
% Unterstützende Klassen - kompakter angeordnet % Unterstützende Klassen - mit größerem Abstand
\node[class] (card-deck) at (-5, 1) {\textbf{Kartendeck}\\- karten: List<Karte>\\+ mischen()\\+ karteGeben()\\+ zurücksetzen()}; \node[class] (card-deck) at (-8, 1) {\textbf{Kartendeck}\\- karten: List<Karte>\\+ mischen()\\+ karteGeben()\\+ zurücksetzen()};
\node[class] (game-entity) at (5, 1) {\textbf{BlackjackSpielEntity}\\- id: Long\\- spielerKarten: List<Karte>\\- dealerKarten: List<Karte>\\- einsatzBetrag: BigDecimal\\- spielZustand: SpielZustand}; \node[class] (game-entity) at (8, 1) {\textbf{BlackjackSpielEntity}\\- id: Long\\- spielerKarten: List<Karte>\\- dealerKarten: List<Karte>\\- einsatzBetrag: BigDecimal\\- spielZustand: SpielZustand};
\node[class] (balance-service) at (0, -2) {\textbf{GuthabenService}\\+ guthabenAktualisieren()\\+ ausreichendGuthaben()\\+ transaktionErstellen()}; \node[class] (balance-service) at (0, -3.5) {\textbf{GuthabenService}\\+ guthabenAktualisieren()\\+ ausreichendGuthaben()\\+ transaktionErstellen()};
% Beziehungen % Beziehungen
\draw (blackjack-service) -- (game-interface) node[midway, right] {implementiert}; \draw (blackjack-service) -- (game-interface) node[midway, right] {implementiert};
@ -434,11 +431,11 @@ Das Code-Diagramm zeigt exemplarisch die Implementierungsdetails des Blackjack G
\end{landscape} \end{landscape}
\clearpage \clearpage
\needspace{8\baselineskip} \begin{landscape}
\subsubsection{Deployment-Diagramm} \subsubsection{Deployment-Diagramm}
Das Deployment-Diagramm zeigt die Verteilung der Software-Container auf die physische/virtuelle Infrastruktur und stellt die Laufzeitumgebung der Anwendung dar. Es verdeutlicht, wie die verschiedenen Komponenten in der Produktionsumgebung deployed werden. Das Deployment-Diagramm zeigt die Verteilung der Software-Container auf die physische/virtuelle Infrastruktur und stellt die Laufzeitumgebung der Anwendung dar. Es verdeutlicht, wie die verschiedenen Komponenten in der Produktionsumgebung deployed werden.
\begin{landscape} \vspace{0.5cm}
\begin{tikzpicture}[ \begin{tikzpicture}[
node/.style={rectangle, draw=gray!80, fill=gray!15, minimum width=5cm, minimum height=4cm, align=center, rounded corners=5pt, thick}, node/.style={rectangle, draw=gray!80, fill=gray!15, minimum width=5cm, minimum height=4cm, align=center, rounded corners=5pt, thick},
container/.style={rectangle, draw=blue!80, fill=blue!20, minimum width=3cm, minimum height=2cm, align=center, rounded corners=4pt, thick}, container/.style={rectangle, draw=blue!80, fill=blue!20, minimum width=3cm, minimum height=2cm, align=center, rounded corners=4pt, thick},
@ -448,15 +445,15 @@ Das Deployment-Diagramm zeigt die Verteilung der Software-Container auf die phys
% Infrastruktur-Knoten % Infrastruktur-Knoten
\node[node] (docker-host) at (0, 0) {\textbf{Docker-Host}\\Ubuntu Linux\\Docker Engine 24.x}; \node[node] (docker-host) at (0, 0) {\textbf{Docker-Host}\\Ubuntu Linux\\Docker Engine 24.x};
% Container innerhalb des Docker-Hosts - kompaktere Anordnung % Container innerhalb des Docker-Hosts - mit mehr Abstand
\node[container] (nginx) at (-4, 2.5) {\textbf{nginx}\\Webserver\\Port 80/443}; \node[container] (nginx) at (-7, 3.5) {\textbf{nginx}\\Webserver\\Port 80/443};
\node[container] (angular) at (-1.5, 2.5) {\textbf{Frontend}\\Angular-App\\Statische Dateien}; \node[container] (angular) at (-2, 3.5) {\textbf{Frontend}\\Angular-App\\Statische Dateien};
\node[container] (spring) at (1.5, 2.5) {\textbf{Backend}\\Spring Boot\\Port 8080}; \node[container] (spring) at (2, 3.5) {\textbf{Backend}\\Spring Boot\\Port 8080};
\node[container] (postgres) at (4, 2.5) {\textbf{Datenbank}\\PostgreSQL\\Port 5432}; \node[container] (postgres) at (7, 3.5) {\textbf{Datenbank}\\PostgreSQL\\Port 5432};
\node[container] (mailpit) at (0, -2.5) {\textbf{Mailpit}\\E-Mail-Service\\Port 1025/8025}; \node[container] (mailpit) at (2, -3.5) {\textbf{Mailpit}\\E-Mail-Service\\Port 1025/8025};
% Externe Dienste - näher platziert % Externe Dienste - mit mehr Abstand
\node[node] (cloud) at (7, 0) {\textbf{Cloud-Dienste}\\Stripe API\\OAuth-Provider}; \node[node] (cloud) at (9, 0) {\textbf{Cloud-Dienste}\\Stripe API\\OAuth-Provider};
% Beziehungen % Beziehungen
\draw (nginx) -- (angular); \draw (nginx) -- (angular);
@ -509,11 +506,11 @@ Das Backend folgt dem Domain-Driven Design (DDD) Ansatz:
} }
\clearpage \clearpage
\needspace{8\baselineskip} \begin{landscape}
\subsubsection{Ebene 3: Komponenten-Diagramm - Frontend-Anwendung} \subsubsection{Ebene 3: Komponenten-Diagramm - Frontend-Anwendung}
Das Komponenten-Diagramm zeigt die interne Struktur der Angular Frontend-Anwendung und stellt die modulare Architektur mit Feature-Modulen, Services und Guards dar. Es verdeutlicht die Anwendung des Angular-Framework-Patterns. Das Komponenten-Diagramm zeigt die interne Struktur der Angular Frontend-Anwendung und stellt die modulare Architektur mit Feature-Modulen, Services und Guards dar. Es verdeutlicht die Anwendung des Angular-Framework-Patterns.
\begin{landscape} \vspace{0.5cm}
\begin{tikzpicture}[ \begin{tikzpicture}[
module/.style={rectangle, draw=purple!80, fill=purple!20, minimum width=3.5cm, minimum height=2.2cm, align=center, rounded corners=4pt, thick}, module/.style={rectangle, draw=purple!80, fill=purple!20, minimum width=3.5cm, minimum height=2.2cm, align=center, rounded corners=4pt, thick},
component/.style={rectangle, draw=blue!80, fill=blue!20, minimum width=3cm, minimum height=1.6cm, align=center, rounded corners=3pt, thick}, component/.style={rectangle, draw=blue!80, fill=blue!20, minimum width=3cm, minimum height=1.6cm, align=center, rounded corners=3pt, thick},
@ -522,25 +519,25 @@ Das Komponenten-Diagramm zeigt die interne Struktur der Angular Frontend-Anwendu
->, >=Stealth, node distance=3.5cm, thick ->, >=Stealth, node distance=3.5cm, thick
] ]
% Kern-Module - kompaktere Anordnung % Kern-Module
\node[module] (app) at (0, 5) {\textbf{App-Modul}\\Haupt-Modul\\mit Routing}; \node[module] (app) at (4, 6) {\textbf{App}\\Haupt-Modul};
\node[module] (shared) at (-6, 3) {\textbf{Shared-Modul}\\Gemeinsame Komponenten\\Navbar, Footer}; \node[module] (shared) at (-6, 2) {\textbf{Shared}\\Gemeinsame Komponenten};
% Feature-Module - dichter angeordnet % Feature-Module
\node[module] (auth) at (-3, 3) {\textbf{Auth-Modul}\\Anmeldung, Registrierung\\OAuth2, Wiederherstellung}; \node[module] (auth) at (-1, 2) {\textbf{Auth}\\Anmeldung, OAuth2};
\node[module] (games) at (0, 3) {\textbf{Spiele-Modul}\\Blackjack, Slots\\Würfel, Coinflip}; \node[module] (games) at (3.75, 2) {\textbf{Spiele}\\Blackjack, Slots, Würfel};
\node[module] (deposit) at (3, 3) {\textbf{Einzahlungs-Modul}\\Zahlungsintegration\\Stripe}; \node[module] (deposit) at (8.25, 2) {\textbf{Einzahlung}\\Stripe};
\node[module] (home) at (6, 3) {\textbf{Home-Modul}\\Dashboard\\Benutzerprofil}; \node[module] (home) at (12.25, 2){\textbf{Home}\\Dashboard};
% Service-Schicht - kompakter % Services
\node[service] (auth-svc) at (-4.5, 0.5) {\textbf{Auth Service}\\JWT-Verwaltung\\Benutzerstatus}; \node[service] (auth-svc) at (-1, -1.5) {\textbf{Auth}\\JWT, Benutzerstatus};
\node[service] (user-svc) at (-1.5, 0.5) {\textbf{User Service}\\Profilverwaltung\\Guthaben-Updates}; \node[service] (user-svc) at (12.25, -1.5) {\textbf{User}\\Profil, Guthaben};
\node[service] (game-svc) at (1.5, 0.5) {\textbf{Spiele-Services}\\API-Kommunikation\\Spiellogik}; \node[service] (game-svc) at (3.75, -1.5) {\textbf{Spiele}\\API, Logik};
\node[service] (payment-svc) at (4.5, 0.5) {\textbf{Payment Service}\\Stripe-Integration\\Einzahlungen}; \node[service] (payment-svc) at (8.25, -1.5) {\textbf{Payment}\\Stripe};
% Guards und Interceptors - kompakter % Guards
\node[guard] (auth-guard) at (-1.5, -1.5) {\textbf{Auth Guard}\\Routen-Schutz}; \node[guard] (auth-guard) at (-1.5, -4.5) {\textbf{Auth}\\Routen-Schutz};
\node[guard] (http-interceptor) at (1.5, -1.5) {\textbf{HTTP Interceptor}\\JWT-Injection\\CORS-Headers}; \node[guard] (http-interceptor) at (2, -4.5) {\textbf{HTTP}\\JWT, CORS};
% Relationships % Relationships
\draw (app) -- (shared); \draw (app) -- (shared);